Advertisement
VeriTi

MAL Transparent layout

Mar 5th, 2012
7,656
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.99 KB | None | 0 0
  1. /* This is the MATH part of the layout. Don't touch it unless you know what you're doing */
  2. @import url(http://veriti.opendrive.com/files/OV81MjgxODZfN0NiSlU/mal_general.css);
  3. /* Remove the following line if you don't want to use my top bar redux */
  4. @import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css);
  5.  
  6. body{
  7. /* Set up a background image: */
  8.     background-image: url(http://s017.radikal.ru/i413/1203/29/1cf352c59834.jpg);
  9.  
  10. /* Set up a point of transformation. This is the point
  11.  * of image that should always be at the top and
  12.  * preserve it's location at these offsets.
  13.  * If you don't understand how it works, 50% 50% should
  14.  * be ok in most cases. Default: point to Okabe's face.
  15.  */
  16.     background-position: 60% 18%;
  17.  
  18. /* Set up fonts you want to use and preferred basic size.
  19.  * It will look for the first font at the list, then for
  20.  * the second, etc. The last parameter describes a generic
  21.  * font family, which will be used if none of the fonts are
  22.  * on the user PC. The size can be also set using keywords
  23.  * like xx-small, google for font-size if you want more info
  24.  */
  25.     font-family: 'Segoe UI', 'Century Gothic', sans-serif;
  26.     font-size: 11px;
  27. }
  28.  
  29. /* This configures the look of the part with sort links:
  30.  * the border and the background.
  31.  * Colors are in rgba format which means first three values
  32.  * define a color in Red-Green-Blue mode and the last one
  33.  * sets up an opacity of the color: rgba(R,G,B,a)
  34.  * Use color picker in Photoshop (or other image editor),
  35.  * Opera Dragonfly or Rainbow Firefox extension to get desired
  36.  * RGB values and then play with opacity until you get what you
  37.  * wanted.
  38.  */
  39. .table_header{
  40.     background-color: rgba(0,0,0,0.4);
  41.     border-color: rgba(255,255,255,0.25);
  42. }
  43.  
  44.  
  45. .table_header, .table_headerLink{
  46. /* Color of the sort links. I used short hex notation here but
  47.  * you may use whatever you want, rgb, rgba or full-hex. This
  48.  * won't be mentioned below, the way to change colors is the same
  49.  */
  50.     color: #FFF;
  51.  
  52. /* Remove the following line if you want links to be underlined */
  53.     text-decoration: none;
  54. }
  55.  
  56. .table_headerLink:hover{
  57. /* This configures a light white glow on hovered links
  58.  * Changing colors should be enough here so I'll leave it for you.
  59.  * It's the same rgba we've encountered.
  60. */
  61.     text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px;
  62. }
  63.  
  64. /* The look of the rest of the table
  65.  * Configures background, border and text color for non-links
  66.  * I made it a bit more opaque than sorting headers
  67.  */
  68. .td1, .td2{
  69.     background-color: rgba(0,0,0,0.6);
  70.     border-color: rgba(255,255,255,0.25);
  71.     color: #FFF;
  72. }
  73.  
  74. /* This is for the links in the rest of the table */
  75. .td1 a, .td2 a{
  76.     text-decoration: none; /* Removes underline for these */
  77.     color: #ffc700; /* Paints links orange */
  78. }
  79.  
  80. /* Glow effect on link hover. The same text-shadow property */
  81. .td1 a:hover, .td2 a:hover{
  82.     text-shadow:  #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px;
  83. }
  84.  
  85. /* Background color for hovered table row in 'the rest' section
  86.  * I made it more opaque and a bit gray
  87.  * You may remove the following 3 lines if you don't want this effect.
  88.  */
  89. tr:hover [class^='td']{
  90.     background-color: rgba(45,45,45,0.9) !important;
  91. }
  92.  
  93. /* This makes all text in tables bold except for Edit - More */
  94. #list_surround td[class^='td']:first-child, #list_surround td[class^='td']:nth-child(n+3), .animetitle{font-weight:bold}
  95.  
  96. /* CSS sprite for Currently Watching, Completed, Dropped, etc...
  97.  * Note there is only one image used for all headers. I've made an
  98.  * inverted version for bright layouts:
  99.  * http://s004.radikal.ru/i206/1203/ca/77c100a4bb4d.png
  100.  * or you can make one yourself. It's not that difficult.
  101. */
  102. .header_title{
  103.     background-image: url(http://i027.radikal.ru/1203/c6/d9bba44c784b.png);
  104. }
  105.  
  106. /* Block displaying category totals
  107.  * It's redesigned to be the part of the table layout
  108.  * and you've already encountered all the properties here
  109.  * so it won't be hard for you to customise this.
  110.  * Note that a different shadow colors used for glow effect
  111.  */
  112. .category_totals{
  113.     background-color: rgba(0,0,0,0.5);
  114.     border-color: rgba(255,255,255,0.25);
  115.     color: #fff;
  116.     font-weight: bold;
  117.     text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px;
  118. }
  119.  
  120. /* Text displaying global totals */
  121. #grand_totals{
  122.     color: #fff;
  123.     font-size: larger;
  124.     font-weight: bold;
  125.     text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px;
  126. /* The following line makes it ALL-CAPS */
  127.     text-transform: uppercase;
  128. }
  129.  
  130. /* Modifying copyright section. It's designed to look similar
  131.  * to the whole layout, ok?
  132.  */
  133. #copyright{
  134.     background-color: rgba(0,0,0,0.6);
  135.     border-color: rgba(255,255,255,0.25);
  136. }
  137.  
  138. /* Modifying the text color in copyright section */
  139. #copyright, #copyright a{
  140.     color: #FFF;
  141. }
  142.  
  143. /* Configures a CSS sprite for the bar at the bottom */
  144. .status_not_selected a, .status_selected a{
  145.     background-image: url('http://i060.radikal.ru/1203/28/2c26e350723d.png');
  146. }
  147.  
  148. /* upd 11th March 2012 */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement