diff options
Diffstat (limited to 'phpBB/styles/prosilver/theme/buttons.css')
| -rw-r--r-- | phpBB/styles/prosilver/theme/buttons.css | 337 |
1 files changed, 209 insertions, 128 deletions
diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css index a9ded9cf98..a816c7f7f2 100644 --- a/phpBB/styles/prosilver/theme/buttons.css +++ b/phpBB/styles/prosilver/theme/buttons.css @@ -1,169 +1,250 @@ /* Button Styles ---------------------------------------- */ -/* Rollover buttons - Based on: http://wellstyled.com/css-nopreload-rollovers.html -----------------------------------------*/ -.buttons { - float: left; - width: auto; - height: auto; +.button { + cursor: pointer; + display: inline-block; + height: 18px; + font-size: 1.2em; + white-space: nowrap; + border: 1px solid transparent; + border-radius: 4px; + background: transparent none 0 0 repeat-x; + padding: 2px 8px; + font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica; + position: relative; + text-decoration: none !important; + outline-style: none !important; + vertical-align: bottom; } -/* Rollover state */ -.buttons div { - float: left; - margin: 0 5px 0 0; - background-position: 0 100%; +.dropdown-select { + padding-right: 24px; } -/* Rolloff state */ -.buttons div a { - display: block; - width: 100%; - height: 100%; - background-position: 0 0; - position: relative; - overflow: hidden; +.icon-button:before { + background: transparent 0 0 no-repeat; + content: ''; + display: inline-block; + float: right; + height: 12px; + margin: 3px 0 0 2px; + width: 12px; } -/* 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%; } +.dropdown-select.icon-button:before { + margin-right: 4px; +} -/* 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; } - -/* Sub-header (navigation bar) ---------------------------------------------- */ -a.print, a.sendemail, a.fontsize { - display: block; - overflow: hidden; - height: 18px; - text-indent: -5000px; - text-align: left; - background-repeat: no-repeat; +.dropdown-select:after { + background-position: -103px 10px; + border-left: 1px solid; + content: ''; + position: absolute; + top: 0; + right: 0; + height: 22px; + width: 16px; } -a.print { - background-image: none; - width: 22px; +.dropdown-visible .dropdown-select:after, .nojs .dropdown-container:hover .dropdown-select:after { + background-position: -103px -10px; } -a.sendemail { - background-image: none; - width: 22px; +.buttons, .buttons .button { + float: left; } -a.fontsize { - background-image: none; - background-position: 0 -1px; - width: 29px; +.buttons .button, .dropdown-select { + margin-right: 5px; +} + +#jumpbox .dropdown-select { + margin: 0; +} + +/* Big button images */ +.reply-icon:before, .pmreply-icon:before { background-position: -20px 0; } +.reply-icon:hover:before, .pmreply-icon:hover:before { background-position: -20px -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; } + +.locked-icon:before { background-position: -60px 0; } +.locked-icon:hover:before { background-position: -60px -20px; } + +.forwardpm-icon:before { background-position: -40px 0; } +.forwardpm-icon:hover:before { background-position: -40px -20px; } + +.modtools-icon { + font-size: 0; } -a.fontsize:hover { - background-position: 0 -20px; - text-decoration: none; +.tools-icon:before, .modtools-icon:before, .search-icon:before, .search-adv-icon:before { + background-position: -80px 0; + height: 16px; + margin-top: 2px; + width: 16px; } +.dropdown-visible .tools-icon:before, +.nojs .dropdown-container:hover .tools-icon:before { background-position: -80px -20px; } + +.search-icon:before { background-position: -245px 0; } +.search-icon:hover:before { background-position: -245px -20px; } + +.search-adv-icon:before { background-position: -265px 0; } +.search-adv-icon:hover:before { background-position: -265px -20px; } + +.modtools-icon:before { background-position: -225px 0; } +.dropdown-visible .modtools-icon:before, +.nojs .dropdown-container:hover .modtools-icon:before { background-position: -225px -20px; } + /* 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; } -/* Poster profile icons +.small-icon > a { + display: inline-block; + padding: 0 0 0 18px; +} + +ul.linklist.bulletin > li.small-icon:before { + display: none; +} + +.dropdown .small-icon > a { + display: block; +} + +/* Poster contact icons ----------------------------------------*/ -ul.profile-icons { - padding-top: 10px; +.contact-icons.dropdown-contents { + min-width: 0; + padding: 0; + font-size: 0; +} + +.contact-icon { + background-repeat: no-repeat; + display: block; + height: 16px; + width: 16px; +} +.contact-icons a { + border-bottom: 1px dotted; + border-right: 1px dotted; + display: block; + float: left; + padding: 8px; +} + +.contact-icons .last-cell { + border-right: none; +} + +.contact-icons div:last-child a { + border-bottom: none; +} + +.contact-icons div { + clear: left; +} + +/* Profile icons */ +.pm-icon { background-position: 0 0; } +.email-icon { background-position: -21px 0; } +.jabber-icon { background-position: -80px 0; } +.phpbb_icq-icon { background-position: -61px 0 ; } +.phpbb_wlm-icon { background-position: -182px 0; } +.phpbb_aol-icon { background-position: -244px 0; } +.phpbb_website-icon { background-position: -40px 0; } +.phpbb_youtube-icon { background-position: -98px 0; } +.phpbb_facebook-icon { background-position: -119px 0; } +.phpbb_googleplus-icon { background-position: -140px 0; } +.phpbb_skype-icon { background-position: -161px 0; } +.phpbb_twitter-icon { background-position: -203px 0; } +.phpbb_yahoo-icon { background-position: -224px 0; } + +/* Post control buttons +--------------------------------------------- */ +.post-buttons { + float: right; list-style: none; + margin-top: 2px; } -/* Rollover state */ -ul.profile-icons li { +.has-profile .post-buttons { + float: none; + position: absolute; + margin: 0; + right: 0; + top: 5px; +} + +.post-buttons > li { float: left; - margin: 0 6px 3px 0; - background-position: 0 100%; + margin-right: 3px; } -/* Rolloff state */ -ul.profile-icons li a { +.post-buttons .icon-button { + padding: 0 5px; +} + +.hastouch .post-buttons .icon-button { + padding: 2px 8px; +} + +.post-buttons .icon-button span { display: block; - width: 100%; - height: 100%; - background-position: 0 0; + height: 0; + overflow: hidden; + position: absolute; + width: 1px; } -/* 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; } +.post-buttons .icon-button:before { + margin-left: 0; +} -/* Positioning of moderator icons */ -.postbody ul.profile-icons { - float: right; - width: auto; - padding: 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; } -.postbody ul.profile-icons li { - margin: 0 3px; -} - -/* 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; } -.yahoo-icon, .yahoo-icon a { background: none top left no-repeat; } -.web-icon, .web-icon a { background: none top left no-repeat; } -.msnm-icon, .msnm-icon a { background: none top left no-repeat; } -.icq-icon, .icq-icon a { background: none top left no-repeat; } -.jabber-icon, .jabber-icon a { background: none top left no-repeat; } -.pm-icon, .pm-icon a { background: none top left no-repeat; } -.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: {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; } - -/* 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-buttons .dropdown a { + display: block; + font-size: 1.2em; + text-align: right; +} +.hasjs .postbody .post-buttons { + max-width: 40%; +} + +/* Browser-specific tweaks */ +button::-moz-focus-inner { + padding: 0; + border: 0 +} |