SHOW:
|
|
- or go back to the newest paste.
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 |
97 | + | * Note there is only one image used for all headers. |
98 | - | * inverted version for bright layouts: |
98 | + | |
99 | - | * http://s004.radikal.ru/i206/1203/ca/77c100a4bb4d.png |
99 | + | |
100 | - | * or you can make one yourself. It's not that difficult. |
100 | + | background-image: url(http://i067.radikal.ru/1204/8e/56bc0025bcf1.png); |
101 | } | |
102 | ||
103 | - | background-image: url(http://i027.radikal.ru/1203/c6/d9bba44c784b.png); |
103 | + | |
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 | } |