API tools faq
paste
Jorup16

Buttons - Arcade

Jorup16
Sep 5th, 2013
21
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.03 KB | None | 0 0
raw download clone embed print report
  1. /* 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. /* Poster profile icons
  85. ----------------------------------------*/
  86. ul.profile-icons {
  87.     padding-top: 10px;
  88.     list-style: none;
  89. }
  90.  
  91. /* Rollover state */
  92. ul.profile-icons li {
  93.     float: left;
  94.     margin: 0 6px 3px 0;
  95.     background-position: 0 100%;
  96. }
  97.  
  98. /* Rolloff state */
  99. ul.profile-icons li a {
  100.     display: block;
  101.     width: 100%;
  102.     height: 100%;
  103.     background-position: 0 0;
  104. }
  105.  
  106. /* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
  107. ul.profile-icons li span { display:none; }
  108. ul.profile-icons li a:hover { background: none; }
  109.  
  110. /* Positioning of moderator icons */
  111. .postbody ul.profile-icons {
  112.     float: right;
  113.     width: auto;
  114.     padding: 0;
  115. }
  116.  
  117. .postbody ul.profile-icons li {
  118.     margin: 0 3px;
  119. }
  120.  
  121. /* Profile & navigation icons */
  122. .email-icon, .email-icon a      { background: none top left no-repeat; }
  123. .aim-icon, .aim-icon a          { background: none top left no-repeat; }
  124. .yahoo-icon, .yahoo-icon a      { background: none top left no-repeat; }
  125. .web-icon, .web-icon a          { background: none top left no-repeat; }
  126. .msnm-icon, .msnm-icon a            { background: none top left no-repeat; }
  127. .icq-icon, .icq-icon a          { background: none top left no-repeat; }
  128. .jabber-icon, .jabber-icon a        { background: none top left no-repeat; }
  129. .pm-icon, .pm-icon a                { background: none top left no-repeat; }
  130. .quote-icon, .quote-icon a      { background: none top left no-repeat; }
  131.  
  132. /* Moderator icons */
  133. .report-icon, .report-icon a        { background: none top left no-repeat; }
  134. .warn-icon, .warn-icon a            { background: none top left no-repeat; }
  135. .edit-icon, .edit-icon a            { background: none top left no-repeat; }
  136. .delete-icon, .delete-icon a        { background: none top left no-repeat; }
  137. .info-icon, .info-icon a            { background: none top left no-repeat; }
  138.  
  139. /* Set profile icon dimensions */
  140. ul.profile-icons li.email-icon      { width: {IMG_ICON_CONTACT_EMAIL_WIDTH}px; height: {IMG_ICON_CONTACT_EMAIL_HEIGHT}px; }
  141. ul.profile-icons li.aim-icon    { width: {IMG_ICON_CONTACT_AIM_WIDTH}px; height: {IMG_ICON_CONTACT_AIM_HEIGHT}px; }
  142. ul.profile-icons li.yahoo-icon  { width: {IMG_ICON_CONTACT_YAHOO_WIDTH}px; height: {IMG_ICON_CONTACT_YAHOO_HEIGHT}px; }
  143. ul.profile-icons li.web-icon    { width: {IMG_ICON_CONTACT_WWW_WIDTH}px; height: {IMG_ICON_CONTACT_WWW_HEIGHT}px; }
  144. ul.profile-icons li.msnm-icon   { width: {IMG_ICON_CONTACT_MSNM_WIDTH}px; height: {IMG_ICON_CONTACT_MSNM_HEIGHT}px; }
  145. ul.profile-icons li.icq-icon    { width: {IMG_ICON_CONTACT_ICQ_WIDTH}px; height: {IMG_ICON_CONTACT_ICQ_HEIGHT}px; }
  146. ul.profile-icons li.jabber-icon { width: {IMG_ICON_CONTACT_JABBER_WIDTH}px; height: {IMG_ICON_CONTACT_JABBER_HEIGHT}px; }
  147. ul.profile-icons li.pm-icon     { width: {IMG_ICON_CONTACT_PM_WIDTH}px; height: {IMG_ICON_CONTACT_PM_HEIGHT}px; }
  148. ul.profile-icons li.quote-icon  { width: {IMG_ICON_POST_QUOTE_WIDTH}px; height: {IMG_ICON_POST_QUOTE_HEIGHT}px; }
  149. ul.profile-icons li.report-icon { width: {IMG_ICON_POST_REPORT_WIDTH}px; height: {IMG_ICON_POST_REPORT_HEIGHT}px; }
  150. ul.profile-icons li.edit-icon   { width: {IMG_ICON_POST_EDIT_WIDTH}px; height: {IMG_ICON_POST_EDIT_HEIGHT}px; }
  151. ul.profile-icons li.delete-icon { width: {IMG_ICON_POST_DELETE_WIDTH}px; height: {IMG_ICON_POST_DELETE_HEIGHT}px; }
  152. ul.profile-icons li.info-icon   { width: {IMG_ICON_POST_INFO_WIDTH}px; height: {IMG_ICON_POST_INFO_HEIGHT}px; }
  153. ul.profile-icons li.warn-icon   { width: {IMG_ICON_USER_WARN_WIDTH}px; height: {IMG_ICON_USER_WARN_HEIGHT}px; }
  154.  
  155. /* Fix profile icon default margins */
  156. ul.profile-icons li.edit-icon   { margin: 0 0 0 3px; }
  157. ul.profile-icons li.quote-icon  { margin: 0 0 0 10px; }
  158. ul.profile-icons li.info-icon, ul.profile-icons li.report-icon  { margin: 0 3px 0 0; }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!