VeriTi

MAL Transparent layout 4 manga list

Apr 6th, 2012
1,121
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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.
  98.  */
  99. .header_title{
  100.     background-image: url(http://i067.radikal.ru/1204/8e/56bc0025bcf1.png);
  101. }
  102.  
  103. /* Block displaying category totals
  104.  * It's redesigned to be the part of the table layout
  105.  * and you've already encountered all the properties here
  106.  * so it won't be hard for you to customise this.
  107.  * Note that a different shadow colors used for glow effect
  108.  */
  109. .category_totals{
  110.     background-color: rgba(0,0,0,0.5);
  111.     border-color: rgba(255,255,255,0.25);
  112.     color: #fff;
  113.     font-weight: bold;
  114.     text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px;
  115. }
  116.  
  117. /* Text displaying global totals */
  118. #grand_totals{
  119.     color: #fff;
  120.     font-size: larger;
  121.     font-weight: bold;
  122.     text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px;
  123. /* The following line makes it ALL-CAPS */
  124.     text-transform: uppercase;
  125. }
  126.  
  127. /* Modifying copyright section. It's designed to look similar
  128.  * to the whole layout, ok?
  129.  */
  130. #copyright{
  131.     background-color: rgba(0,0,0,0.6);
  132.     border-color: rgba(255,255,255,0.25);
  133. }
  134.  
  135. /* Modifying the text color in copyright section */
  136. #copyright, #copyright a{
  137.     color: #FFF;
  138. }
  139.  
  140. /* Configures a CSS sprite for the bar at the bottom */
  141. .status_not_selected a, .status_selected a{
  142.     background-image: url('http://s61.radikal.ru/i171/1204/bd/2ef4d049a65a.png');
  143. }
Advertisement
Add Comment
Please, Sign In to add comment