phpBB/styles/prosilver/theme/buttons.css

   1 /* proSilver Button Styles
   2 ---------------------------------------- */
   3
   4 /* Rollover buttons
   5    Based on: http://wellstyled.com/css-nopreload-rollovers.html
   6 ----------------------------------------*/
   7 .buttons {
   8         float: left;
   9         width: auto;
  10         height: auto;
  11 }
  12
  13 /* Rollover state */
  14 .buttons div {
  15         float: left;
  16         margin: 0 5px 0 0;
  17         background-position: 0 100%;
  18 }
  19
  20 /* Rolloff state */
  21 .buttons div a {
  22         display: block;
  23         width: 100%;
  24         height: 100%;
  25         background-position: 0 0;
  26         position: relative;
  27         overflow: hidden;
  28 }
  29
  30 /* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
  31 /*.buttons div span             { display: none; }*/
  32 /*.buttons div a:hover  { background-image: none; }*/
  33 .buttons div span                       { position: absolute; width: 100%; height: 100%; cursor: pointer;}
  34 .buttons div a:hover span       { background-position: 0 100%; }
  35
  36 /* Big button images */
  37 .reply-icon span        { background: transparent none 0 0 no-repeat; }
  38 .post-icon span         { background: transparent none 0 0 no-repeat; }
  39 .locked-icon span       { background: transparent none 0 0 no-repeat; }
  40 .pmreply-icon span      { background: none 0 0 no-repeat; }
  41 .newpm-icon span        { background: none 0 0 no-repeat; }
  42 .forwardpm-icon span    { background: none 0 0 no-repeat; }
  43
  44 /* Set big button dimensions */
  45 .buttons div.reply-icon         { width: {IMG_BUTTON_TOPIC_REPLY_WIDTH}px; height: {IMG_BUTTON_TOPIC_REPLY_HEIGHT}px; }
  46 .buttons div.post-icon          { width: {IMG_BUTTON_TOPIC_NEW_WIDTH}px; height: {IMG_BUTTON_TOPIC_NEW_HEIGHT}px; }
  47 .buttons div.locked-icon        { width: {IMG_BUTTON_TOPIC_LOCKED_WIDTH}px; height: {IMG_BUTTON_TOPIC_LOCKED_HEIGHT}px; }
  48 .buttons div.pmreply-icon       { width: {IMG_BUTTON_PM_REPLY_WIDTH}px; height: {IMG_BUTTON_PM_REPLY_HEIGHT}px; }
  49 .buttons div.newpm-icon         { width: {IMG_BUTTON_PM_NEW_WIDTH}px; height: {IMG_BUTTON_PM_NEW_HEIGHT}px; }
  50 .buttons div.forwardpm-icon     { width: {IMG_BUTTON_PM_FORWARD_WIDTH}px; height: {IMG_BUTTON_PM_FORWARD_HEIGHT}px; }
  51
  52 /* Sub-header (navigation bar)
  53 --------------------------------------------- */
  54 a.print, a.sendemail, a.fontsize {
  55         display: block;
  56         overflow: hidden;
  57         height: 18px;
  58         text-indent: -5000px;
  59         text-align: left;
  60         background-repeat: no-repeat;
  61 }
  62
  63 a.print {
  64         background-image: none;
  65         width: 22px;
  66 }
  67
  68 a.sendemail {
  69         background-image: none;
  70         width: 22px;
  71 }
  72
  73 a.fontsize {
  74         background-image: none;
  75         background-position: 0 -1px;
  76         width: 29px;
  77 }
  78
  79 a.fontsize:hover {
  80         background-position: 0 -20px;
  81         text-decoration: none;
  82 }
  83
  84 /* Icon images
  85 ---------------------------------------- */
  86 .sitehome, .icon-faq, .icon-members, .icon-home, .icon-ucp, .icon-register, .icon-logout,
  87 .icon-bookmark, .icon-bump, .icon-subscribe, .icon-unsubscribe, .icon-pages, .icon-search {
  88         background-position: 0 50%;
  89         background-repeat: no-repeat;
  90         background-image: none;
  91         padding: 1px 0 0 17px;
  92 }
  93
  94 /* Poster profile icons
  95 ----------------------------------------*/
  96 ul.profile-icons {
  97         padding-top: 10px;
  98         list-style: none;
  99 }
 100
 101 /* Rollover state */
 102 ul.profile-icons li {
 103         float: left;
 104         margin: 0 6px 3px 0;
 105         background-position: 0 100%;
 106 }
 107
 108 /* Rolloff state */
 109 ul.profile-icons li a {
 110         display: block;
 111         width: 100%;
 112         height: 100%;
 113         background-position: 0 0;
 114 }
 115
 116 /* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
 117 ul.profile-icons li span { display:none; }
 118 ul.profile-icons li a:hover { background: none; }
 119
 120 /* Positioning of moderator icons */
 121 .postbody ul.profile-icons {
 122         float: right;
 123         width: auto;
 124         padding: 0;
 125 }
 126
 127 .postbody ul.profile-icons li {
 128         margin: 0 3px;
 129 }
 130
 131 /* Profile & navigation icons */
 132 .email-icon, .email-icon a              { background: none top left no-repeat; }
 133 .aim-icon, .aim-icon a                  { background: none top left no-repeat; }
 134 .yahoo-icon, .yahoo-icon a              { background: none top left no-repeat; }
 135 .web-icon, .web-icon a                  { background: none top left no-repeat; }
 136 .msnm-icon, .msnm-icon a                        { background: none top left no-repeat; }
 137 .icq-icon, .icq-icon a                  { background: none top left no-repeat; }
 138 .jabber-icon, .jabber-icon a            { background: none top left no-repeat; }
 139 .pm-icon, .pm-icon a                            { background: none top left no-repeat; }
 140 .quote-icon, .quote-icon a              { background: none top left no-repeat; }
 141
 142 /* Moderator icons */
 143 .report-icon, .report-icon a            { background: none top left no-repeat; }
 144 .warn-icon, .warn-icon a                        { background: none top left no-repeat; }
 145 .edit-icon, .edit-icon a                        { background: none top left no-repeat; }
 146 .delete-icon, .delete-icon a            { background: none top left no-repeat; }
 147 .info-icon, .info-icon a                        { background: none top left no-repeat; }
 148
 149 /* Set profile icon dimensions */
 150 ul.profile-icons li.email-icon          { width: {IMG_ICON_CONTACT_EMAIL_WIDTH}px; height: {IMG_ICON_CONTACT_EMAIL_HEIGHT}px; }
 151 ul.profile-icons li.aim-icon    { width: {IMG_ICON_CONTACT_AIM_WIDTH}px; height: {IMG_ICON_CONTACT_AIM_HEIGHT}px; }
 152 ul.profile-icons li.yahoo-icon  { width: {IMG_ICON_CONTACT_YAHOO_WIDTH}px; height: {IMG_ICON_CONTACT_YAHOO_HEIGHT}px; }
 153 ul.profile-icons li.web-icon    { width: {IMG_ICON_CONTACT_WWW_WIDTH}px; height: {IMG_ICON_CONTACT_WWW_HEIGHT}px; }
 154 ul.profile-icons li.msnm-icon   { width: {IMG_ICON_CONTACT_MSNM_WIDTH}px; height: {IMG_ICON_CONTACT_MSNM_HEIGHT}px; }
 155 ul.profile-icons li.icq-icon    { width: {IMG_ICON_CONTACT_ICQ_WIDTH}px; height: {IMG_ICON_CONTACT_ICQ_HEIGHT}px; }
 156 ul.profile-icons li.jabber-icon { width: {IMG_ICON_CONTACT_JABBER_WIDTH}px; height: {IMG_ICON_CONTACT_JABBER_HEIGHT}px; }
 157 ul.profile-icons li.pm-icon             { width: {IMG_ICON_CONTACT_PM_WIDTH}px; height: {IMG_ICON_CONTACT_PM_HEIGHT}px; }
 158 ul.profile-icons li.quote-icon  { width: {IMG_ICON_POST_QUOTE_WIDTH}px; height: {IMG_ICON_POST_QUOTE_HEIGHT}px; }
 159 ul.profile-icons li.report-icon { width: {IMG_ICON_POST_REPORT_WIDTH}px; height: {IMG_ICON_POST_REPORT_HEIGHT}px; }
 160 ul.profile-icons li.edit-icon   { width: {IMG_ICON_POST_EDIT_WIDTH}px; height: {IMG_ICON_POST_EDIT_HEIGHT}px; }
 161 ul.profile-icons li.delete-icon { width: {IMG_ICON_POST_DELETE_WIDTH}px; height: {IMG_ICON_POST_DELETE_HEIGHT}px; }
 162 ul.profile-icons li.info-icon   { width: {IMG_ICON_POST_INFO_WIDTH}px; height: {IMG_ICON_POST_INFO_HEIGHT}px; }
 163 ul.profile-icons li.warn-icon   { width: {IMG_ICON_USER_WARN_WIDTH}px; height: {IMG_ICON_USER_WARN_HEIGHT}px; }
 164
 165 /* Fix profile icon default margins */
 166 ul.profile-icons li.edit-icon   { margin: 0 0 0 3px; }
 167 ul.profile-icons li.quote-icon  { margin: 0 0 0 10px; }
 168 ul.profile-icons li.info-icon, ul.profile-icons li.report-icon  { margin: 0 3px 0 0; }
 169