diff options
Diffstat (limited to 'phpBB/styles/prosilver/theme/buttons.css')
| -rw-r--r-- | phpBB/styles/prosilver/theme/buttons.css | 300 |
1 files changed, 111 insertions, 189 deletions
diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css index 9ca04516cc..7d9aae86d7 100644 --- a/phpBB/styles/prosilver/theme/buttons.css +++ b/phpBB/styles/prosilver/theme/buttons.css @@ -4,102 +4,84 @@ /* Rollover buttons Based on: http://wellstyled.com/css-nopreload-rollovers.html ----------------------------------------*/ -.buttons { - float: left; - width: auto; - height: auto; -} - -/* Rollover state */ -.buttons div, .dropdown-select { - float: left; - margin: 0 5px 0 0; -} - -/* Rolloff state */ -.buttons div a, .dropdown-select { +.button { + cursor: pointer; display: inline-block; - line-height: 17.5px; height: 18px; font-size: 13px; white-space: nowrap; border: 1px solid transparent; border-radius: 4px; background: transparent none 0 0 repeat-x; - padding: 2px 22px 2px 8px; + padding: 2px 8px; font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica; - font-weight: 600; position: relative; text-decoration: none !important; outline-style: none !important; vertical-align: bottom; - *padding-right: 8px; } -.buttons div span { display: none; } +.icon-button.dropdown-select { + padding-right: 28px; +} -.buttons div a:after, .dropdown-select:after { +.icon-button:before { + background: transparent 0 0 no-repeat; content: ''; - display: block; - position: absolute; - top: 50%; - right: 6px; - width: 12px; + display: inline-block; + float: right; height: 12px; - margin-top: -6px; - background: transparent 0 0 no-repeat; -} - -.buttons div a:hover:after { - background-position: 0 -20px; -} - -.dropdown-select { - cursor: pointer; - font-family: inherit; - font-size: 1em; - font-weight: normal; + margin: 3px 0 0 2px; + width: 12px; } .dropdown-select:after { background-position: -103px 10px; border-left: 1px solid; - margin-top: 0; + content: ''; + position: absolute; top: 0; right: 0; - height: 21px; - width: 15px; + height: 22px; + width: 16px; } .dropdown-visible .dropdown-select:after, .nojs .dropdown-container:hover .dropdown-select:after { background-position: -103px -10px; } -.dropdown-select-icon:before { - content: ''; - display: block; +.buttons, .buttons .button { float: left; - margin-right: 4px; - margin-top: 2px; +} + +.buttons .button, .dropdown-select { + margin-right: 5px; } /* Big button images */ -.buttons div.reply-icon a:after, .buttons div.pmreply-icon a:after { background-position: -20px 0; } -.buttons div.reply-icon a:hover:after, .buttons div.pmreply-icon a:hover:after { background-position: -20px -20px; } +.reply-icon:before, .pmreply-icon:before { background-position: -20px 0; } +.reply-icon:hover:before, .pmreply-icon:hover:before { background-position: -20px -20px; } -.buttons div.post-icon a:after, .buttons div.newpm-icon a:after { background-position: 0 0; } -.buttons div.post-icon a:hover:after, .buttons div.newpm-icon a:hover:after { background-position: 0 -20px; } +.post-icon:before, .newpm-icon:before, .reply-all:before { background-position: 0 0; } +.post-icon:hover:before, +.newpm-icon:hover:before, +.reply-all:hover:before { background-position: 0 -20px; } -.buttons div.locked-icon a:after { background-position: -60px 0; } -.buttons div.locked-icon a:hover:after { background-position: -60px -20px; } +.locked-icon:before { background-position: -60px 0; } +.locked-icon:hover:before { background-position: -60px -20px; } -.buttons div.forwardpm-icon a:after { background-position: -40px 0; } -.buttons div.forwardpm-icon a:hover:after { background-position: -40px -20px; } +.forwardpm-icon:before { background-position: -40px 0; } +.forwardpm-icon:hover:before { background-position: -40px -20px; } -.dropdown-select.tools-icon:before { background-position: -80px 0; height: 16px; width: 16px; } +.tools-icon:before { + background-position: -80px 0; + height: 16px; + margin-top: 2px; + width: 16px; +} -.dropdown-visible .dropdown-select.tools-icon:before, -.nojs .dropdown-container:hover .dropdown-select.tools-icon:before { background-position: -80px -20px; } +.dropdown-visible .tools-icon:before, +.nojs .dropdown-container:hover .tools-icon:before { background-position: -80px -20px; } /* Icon images ---------------------------------------- */ @@ -118,102 +100,8 @@ ul.linklist.bulletin li.small-icon:before { display: none; } -/* Poster profile icons +/* Poster contact icons ----------------------------------------*/ -ul.profile-icons { - padding-top: 10px; - list-style: none; -} - -/* Rollover state */ -ul.profile-icons li { - float: left; - margin: 0 6px 3px 0; - background-position: 0 100%; -} - -/* Rolloff state */ -ul.profile-icons li a { - display: block; - width: 100%; - height: 100%; - background-position: 0 0; -} - -/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */ -ul.profile-icons li span { display:none; } -ul.profile-icons li a:hover { background: none; } - -/* Positioning of moderator icons */ -.postbody ul.profile-icons { - float: right; - width: auto; - padding: 0; -} - -.postbody ul.profile-icons li { - margin: 0 3px; -} - -/* Responsive icons in postbody */ -.postbody ul.profile-icons.responsive .responsive-menu { - position: relative; -} - -ul.profile-icons.responsive a.responsive-menu-link { - display: inline-block; - position: relative; - margin: 0 5px; - width: 20px; - height: 20px; - text-decoration: none; - background: none top left no-repeat; -} - -ul.profile-icons.responsive a.responsive-menu-link:hover { - background-position: 0 -20px; -} - -ul.profile-icons.responsive a.responsive-menu-link:before { - content: ''; - position: absolute; - left: 0; - top: 7px; - height: .125em; - width: 14px; - border-bottom: 0.125em solid transparent; - border-top: 0.375em double transparent; -} - -.postbody ul.profile-icons.responsive .popup-pointer { - left: auto; - right: 7px; - top: 20px; -} - -.postbody ul.profile-icons .dropdown li, .postbody ul.profile-icons .dropdown li a { - display: block; - background: transparent none; - width: auto; - height: auto; - margin: 0; - padding: 0; - float: none; - list-style-type: none; -} - -.postbody ul.profile-icons .dropdown li span { - display: block; - text-align: right; - font-size: 1.2em; - line-height: 1.8em; - white-space: nowrap; -} - -.hasjs .postbody ul.profile-icons { - max-width: 40%; -} - .contact-icons.dropdown-contents { min-width: 0; padding: 0; @@ -245,8 +133,7 @@ ul.profile-icons.responsive a.responsive-menu-link:before { clear: left; } - -/* Profile & navigation icons */ +/* Profile icons */ .pm-icon { background-position: 0 0; } .email-icon { background-position: -21px 0; } .jabber-icon { background-position: -80px 0; } @@ -261,39 +148,74 @@ ul.profile-icons.responsive a.responsive-menu-link:before { .phpbb_twitter-icon { background-position: -203px 0; } .phpbb_yahoo-icon { background-position: -224px 0; } -.quote-icon, .quote-icon a { background: none top left no-repeat; } - -/* Moderator icons */ -.report-icon, .report-icon a { background: none top left no-repeat; } -.warn-icon, .warn-icon a { background: none top left no-repeat; } -.edit-icon, .edit-icon a { background: none top left no-repeat; } -.delete-icon, .delete-icon a { background: none top left no-repeat; } -.info-icon, .info-icon a { background: none top left no-repeat; } - -/* Set profile icon dimensions */ -ul.profile-icons li.email-icon { width: 20px; height: 20px; } -ul.profile-icons li.phpbb_aol-icon { width: 20px; height: 20px; } -ul.profile-icons li.aim-icon { width: 20px; height: 20px; } -ul.profile-icons li.yahoo-icon { width: 20px; height: 20px; } -ul.profile-icons li.phpbb_yahoo-icon { width: 20px; height: 20px; } -ul.profile-icons li.web-icon { width: 20px; height: 20px; } -ul.profile-icons li.phpbb_website-icon { width: 20px; height: 20px; } -ul.profile-icons li.msnm-icon { width: 20px; height: 20px; } -ul.profile-icons li.phpbb_wlm-icon { width: 20px; height: 20px; } -ul.profile-icons li.icq-icon { width: 20px; height: 20px; } -ul.profile-icons li.phpbb_icq-icon { width: 20px; height: 20px; } -ul.profile-icons li.jabber-icon { width: 20px; height: 20px; } -ul.profile-icons li.pm-icon { width: 28px; height: 20px; } -ul.profile-icons li.quote-icon { width: 54px; height: 20px; } -ul.profile-icons li.report-icon { width: 20px; height: 20px; } -ul.profile-icons li.edit-icon { width: 42px; height: 20px; } -ul.profile-icons li.delete-icon { width: 20px; height: 20px; } -ul.profile-icons li.info-icon { width: 20px; height: 20px; } -ul.profile-icons li.warn-icon { width: 20px; height: 20px; } -ul.profile-icons a.responsive-menu-link { width: 20px; height: 20px; } - -/* Fix profile icon default margins */ -ul.profile-icons li.edit-icon { margin: 0 0 0 3px; } -ul.profile-icons li.quote-icon { margin: 0 0 0 10px; } -ul.profile-icons li.info-icon, ul.profile-icons li.report-icon { margin: 0 3px 0 0; } +/* Post control buttons +--------------------------------------------- */ +.post-buttons { + float: right; + list-style: none; + margin-top: 2px; +} + +.notouch.section-viewtopic .post-buttons { + opacity: 0; + transition: opacity .5s; +} + +.notouch.section-viewtopic .post:hover .post-buttons { + opacity: 1; +} + +.post-buttons li { + float: left; + margin-right: 3px; +} + +.post-buttons .icon-button { + padding: 0 5px; +} + +.hastouch .post-buttons .icon-button { + padding: 2px 8px; +} +.post-buttons .icon-button span { + display: block; + height: 0; + overflow: hidden; + position: absolute; + width: 1px; +} + +.post-buttons .icon-button:before { + margin-left: 0; +} + +.quote-icon:before { background-position: -122px 0; } +.quote-icon:hover:before { background-position: -122px -21px; } +.edit-icon:before { background-position: -137px 0; } +.edit-icon:hover:before { background-position: -137px -21px; } +.warn-icon:before { background-position: -208px 0; } +.warn-icon:hover:before { background-position: -208px -21px; } +.delete-icon:before { background-position: -152px 0; } +.delete-icon:hover:before { background-position: -152px -21px; } +.report-icon:before { background-position: -165px 0; } +.report-icon:hover:before { background-position: -165px -21px; } +.info-icon:before { background-position: -175px 0; } +.info-icon:hover:before { background-position: -175px -21px; } +.button.responsive-menu-link:before { background-position: -191px 0; } +.button.responsive-menu-link:hover:before { background-position: -191px -21px; } + +/* Responsive buttons in post body */ +.post-buttons .dropdown { + top: 18px; +} + +.post-buttons .dropdown a { + display: block; + font-size: 1.2em; + text-align: right; +} + +.hasjs .postbody .post-buttons { + max-width: 40%; +} |