diff options
Diffstat (limited to 'phpBB/styles/prosilver/theme/buttons.css')
| -rw-r--r-- | phpBB/styles/prosilver/theme/buttons.css | 218 |
1 files changed, 163 insertions, 55 deletions
diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css index a9ded9cf98..89fdcd85a8 100644 --- a/phpBB/styles/prosilver/theme/buttons.css +++ b/phpBB/styles/prosilver/theme/buttons.css @@ -11,47 +11,99 @@ } /* Rollover state */ -.buttons div { +.buttons div, .dropdown-select { float: left; margin: 0 5px 0 0; - background-position: 0 100%; } /* Rolloff state */ -.buttons div a { - display: block; - width: 100%; - height: 100%; - background-position: 0 0; +.buttons div a, .dropdown-select { + 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; + font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica; + font-weight: 600; position: relative; - overflow: hidden; + text-decoration: none !important; + outline-style: none !important; + vertical-align: bottom; + *padding-right: 8px; } -/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */ -/*.buttons div span { display: none; }*/ -/*.buttons div a:hover { background-image: none; }*/ -.buttons div span { position: absolute; width: 100%; height: 100%; cursor: pointer;} -.buttons div a:hover span { background-position: 0 100%; } +.buttons div span { display: none; } + +.buttons div a:after, .dropdown-select:after { + content: ''; + display: block; + position: absolute; + top: 50%; + right: 6px; + width: 12px; + 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; +} + +.dropdown-select:after { + background-position: -103px 10px; + border-left: 1px solid; + margin-top: 0; + top: 0; + right: 0; + height: 21px; + width: 15px; +} + +.dropdown-visible .dropdown-select:after, .nojs .dropdown-container:hover .dropdown-select:after { + background-position: -103px -10px; +} + +.dropdown-select-icon:before { + content: ''; + display: block; + float: left; + margin-right: 4px; + margin-top: 2px; +} /* Big button images */ -.reply-icon span { background: transparent none 0 0 no-repeat; } -.post-icon span { background: transparent none 0 0 no-repeat; } -.locked-icon span { background: transparent none 0 0 no-repeat; } -.pmreply-icon span { background: none 0 0 no-repeat; } -.newpm-icon span { background: none 0 0 no-repeat; } -.forwardpm-icon span { background: none 0 0 no-repeat; } - -/* Set big button dimensions */ -.buttons div.reply-icon { width: {IMG_BUTTON_TOPIC_REPLY_WIDTH}px; height: {IMG_BUTTON_TOPIC_REPLY_HEIGHT}px; } -.buttons div.post-icon { width: {IMG_BUTTON_TOPIC_NEW_WIDTH}px; height: {IMG_BUTTON_TOPIC_NEW_HEIGHT}px; } -.buttons div.locked-icon { width: {IMG_BUTTON_TOPIC_LOCKED_WIDTH}px; height: {IMG_BUTTON_TOPIC_LOCKED_HEIGHT}px; } -.buttons div.pmreply-icon { width: {IMG_BUTTON_PM_REPLY_WIDTH}px; height: {IMG_BUTTON_PM_REPLY_HEIGHT}px; } -.buttons div.newpm-icon { width: {IMG_BUTTON_PM_NEW_WIDTH}px; height: {IMG_BUTTON_PM_NEW_HEIGHT}px; } -.buttons div.forwardpm-icon { width: {IMG_BUTTON_PM_FORWARD_WIDTH}px; height: {IMG_BUTTON_PM_FORWARD_HEIGHT}px; } +.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; } + +.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; } + +.buttons div.locked-icon a:after { background-position: -60px 0; } +.buttons div.locked-icon a:hover:after { 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; } + +.dropdown-select.tools-icon:before { background-position: -80px 0; height: 16px; width: 16px; } + +.dropdown-visible .dropdown-select.tools-icon:before, +.nojs .dropdown-container:hover .dropdown-select.tools-icon:before { background-position: -80px -20px; } /* Sub-header (navigation bar) --------------------------------------------- */ -a.print, a.sendemail, a.fontsize { +a.print, a.sendemail { display: block; overflow: hidden; height: 18px; @@ -70,27 +122,23 @@ a.sendemail { width: 22px; } -a.fontsize { - background-image: none; - background-position: 0 -1px; - width: 29px; -} - -a.fontsize:hover { - background-position: 0 -20px; - text-decoration: none; -} - /* Icon images ---------------------------------------- */ -.sitehome, .icon-faq, .icon-members, .icon-home, .icon-ucp, .icon-register, .icon-logout, -.icon-bookmark, .icon-bump, .icon-subscribe, .icon-unsubscribe, .icon-pages, .icon-search { +.small-icon { background-position: 0 50%; background-repeat: no-repeat; background-image: none; padding: 1px 0 0 17px; } +ul.linklist li.small-icon { + padding-left: 0; +} + +ul.linklist.bulletin li.small-icon:before { + display: none; +} + /* Poster profile icons ----------------------------------------*/ ul.profile-icons { @@ -128,6 +176,65 @@ ul.profile-icons li a:hover { background: none; } 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%; +} + /* Profile & navigation icons */ .email-icon, .email-icon a { background: none top left no-repeat; } .aim-icon, .aim-icon a { background: none top left no-repeat; } @@ -147,20 +254,21 @@ ul.profile-icons li a:hover { background: none; } .info-icon, .info-icon a { background: none top left no-repeat; } /* Set profile icon dimensions */ -ul.profile-icons li.email-icon { width: {IMG_ICON_CONTACT_EMAIL_WIDTH}px; height: {IMG_ICON_CONTACT_EMAIL_HEIGHT}px; } -ul.profile-icons li.aim-icon { width: {IMG_ICON_CONTACT_AIM_WIDTH}px; height: {IMG_ICON_CONTACT_AIM_HEIGHT}px; } -ul.profile-icons li.yahoo-icon { width: {IMG_ICON_CONTACT_YAHOO_WIDTH}px; height: {IMG_ICON_CONTACT_YAHOO_HEIGHT}px; } -ul.profile-icons li.web-icon { width: {IMG_ICON_CONTACT_WWW_WIDTH}px; height: {IMG_ICON_CONTACT_WWW_HEIGHT}px; } -ul.profile-icons li.msnm-icon { width: {IMG_ICON_CONTACT_MSNM_WIDTH}px; height: {IMG_ICON_CONTACT_MSNM_HEIGHT}px; } -ul.profile-icons li.icq-icon { width: {IMG_ICON_CONTACT_ICQ_WIDTH}px; height: {IMG_ICON_CONTACT_ICQ_HEIGHT}px; } -ul.profile-icons li.jabber-icon { width: {IMG_ICON_CONTACT_JABBER_WIDTH}px; height: {IMG_ICON_CONTACT_JABBER_HEIGHT}px; } -ul.profile-icons li.pm-icon { width: {IMG_ICON_CONTACT_PM_WIDTH}px; height: {IMG_ICON_CONTACT_PM_HEIGHT}px; } -ul.profile-icons li.quote-icon { width: {IMG_ICON_POST_QUOTE_WIDTH}px; height: {IMG_ICON_POST_QUOTE_HEIGHT}px; } -ul.profile-icons li.report-icon { width: {IMG_ICON_POST_REPORT_WIDTH}px; height: {IMG_ICON_POST_REPORT_HEIGHT}px; } -ul.profile-icons li.edit-icon { width: {IMG_ICON_POST_EDIT_WIDTH}px; height: {IMG_ICON_POST_EDIT_HEIGHT}px; } -ul.profile-icons li.delete-icon { width: {IMG_ICON_POST_DELETE_WIDTH}px; height: {IMG_ICON_POST_DELETE_HEIGHT}px; } -ul.profile-icons li.info-icon { width: {IMG_ICON_POST_INFO_WIDTH}px; height: {IMG_ICON_POST_INFO_HEIGHT}px; } -ul.profile-icons li.warn-icon { width: {IMG_ICON_USER_WARN_WIDTH}px; height: {IMG_ICON_USER_WARN_HEIGHT}px; } +ul.profile-icons li.email-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.web-icon { width: 20px; height: 20px; } +ul.profile-icons li.msnm-icon { width: 20px; height: 20px; } +ul.profile-icons li.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; } |