SHOW:
|
|
- or go back to the newest paste.
1 | /*============== | |
2 | VARIABLE OPTIONS | |
3 | ==============*/ | |
4 | ||
5 | /* COLOURS */ | |
6 | :root { | |
7 | /* List Text Colour */ | |
8 | --text: #C41E6A ; | |
9 | } | |
10 | ||
11 | /* OTHER OPTIONS */ | |
12 | ||
13 | /* | |
14 | --tag-width controls the width of the tags and title sections. | |
15 | Change this to accomodate a greater of lesser amount of list columns. | |
16 | Smaller width = more space for other columns | |
17 | ||
18 | --row-height controls the amount of text lines the rows can fit. | |
19 | Raise this number as needed when you lower the tag-width. | |
20 | If your tags are overlapping on the 5th line, set it to 5. | |
21 | ||
22 | --title-offset controls the title width as compared to the tags. | |
23 | Increase this number if the edit/more buttons are getting wrapped to the next line. | |
24 | ||
25 | --tag-offset controls how far from the left-side of the list the tags appear. | |
26 | This generally shouldn't need changing, but if the tags appear misaligned | |
27 | with the title, change this number. | |
28 | ||
29 | These options can be changed separately for the anime and manga lists. | |
30 | */ | |
31 | ||
32 | /* Animelist settings */ | |
33 | .anime { | |
34 | --tag-width: 600px ; | |
35 | --row-height: 3 ; | |
36 | --title-offset: 110px ; | |
37 | --tag-offset: 124px ; | |
38 | } | |
39 | ||
40 | /* Mangalist settings */ | |
41 | .manga { | |
42 | --tag-width: 550px ; | |
43 | --row-height: 4 ; | |
44 | --title-offset: 110px ; | |
45 | --tag-offset: 124px ; | |
46 | } | |
47 | ||
48 | /*========================= | |
49 | CHANGE TEXT COLOURS & SIZES | |
50 | =========================*/ | |
51 | ||
52 | /* GENERIC */ | |
53 | ||
54 | body, | |
55 | #status-menu .status-button, | |
56 | .list-table .list-table-header .header-title .link, | |
57 | .list-table .list-table-header .header-title .link.sort, | |
58 | .list-table .list-table-data .data .link { | |
59 | color: var(--text); | |
60 | } | |
61 | ||
62 | .list-table .list-table-data .tags a { | |
63 | color: var(--text) !important; | |
64 | } | |
65 | ||
66 | /* CATEGORY HEADERS */ | |
67 | ||
68 | #status-menu .status-button { | |
69 | /* Fallback colour */ | |
70 | color: COLOUR; | |
71 | } #status-menu .status-button:nth-child(1) { | |
72 | /* All items */ | |
73 | color: COLOUR; | |
74 | } #status-menu .status-button:nth-child(2) { | |
75 | /* Current */ | |
76 | color: COLOUR; | |
77 | } #status-menu .status-button:nth-child(3) { | |
78 | /* Completed */ | |
79 | color: COLOUR; | |
80 | } #status-menu .status-button:nth-child(4) { | |
81 | /* On hold */ | |
82 | color: COLOUR; | |
83 | } #status-menu .status-button:nth-child(5) { | |
84 | /* Dropped */ | |
85 | color: COLOUR; | |
86 | } #status-menu .status-button:nth-child(6) { | |
87 | /* Planned */ | |
88 | color: COLOUR; | |
89 | } | |
90 | ||
91 | /* CATEGORY TITLE */ | |
92 | ||
93 | .list-unit .list-status-title .text { | |
94 | color: COLOUR; | |
95 | } | |
96 | ||
97 | /* STAT/FILTER BUTTONS */ | |
98 | ||
99 | #show-stats-button { | |
100 | color: COLOUR; | |
101 | } | |
102 | ||
103 | #advanced-options-button { | |
104 | color: COLOUR; | |
105 | } | |
106 | ||
107 | /* STATUS COLUMN */ | |
108 | ||
109 | .list-table .list-table-data .data.status.reading, | |
110 | .list-table .list-table-data .data.status.watching { | |
111 | /* Current */ | |
112 | background-color: COLOUR; | |
113 | } | |
114 | ||
115 | .list-table .list-table-data .data.status.completed { | |
116 | /* Completed */ | |
117 | background-color: COLOUR; | |
118 | } | |
119 | ||
120 | .list-table .list-table-data .data.status.onhold { | |
121 | /* On Hold */ | |
122 | background-color: COLOUR; | |
123 | } | |
124 | ||
125 | .list-table .list-table-data .data.status.dropped { | |
126 | /* Dropped */ | |
127 | background-color: #FF0000; | |
128 | } | |
129 | ||
130 | .list-table .list-table-data .data.status.plantoread, | |
131 | .list-table .list-table-data .data.status.plantowatch { | |
132 | /* Planned */ | |
133 | background-color: COLOUR; | |
134 | } | |
135 | ||
136 | /* NUMBER COLUMN */ | |
137 | ||
138 | .header-title.number, | |
139 | .data.number { | |
140 | color: COLOUR; | |
141 | } | |
142 | ||
143 | /* IMAGE COLUMN */ | |
144 | ||
145 | .list-table .list-table-header .header-title.image .link { | |
146 | color: COLOUR; | |
147 | } | |
148 | ||
149 | /* TITLE COLUMN */ | |
150 | ||
151 | .list-table .list-table-data .data.title .link { | |
152 | color: COLOUR; | |
153 | font-size:1.3em; | |
154 | } | |
155 | ||
156 | /* SCORE COLUMN */ | |
157 | ||
158 | .list-table .list-table-header .header-title.score .link, | |
159 | .list-table .list-table-data .data.score .link { | |
160 | color: black; | |
161 | } | |
162 | ||
163 | /* TYPE COLUMN */ | |
164 | ||
165 | .list-table .list-table-header .header-title.type .link, | |
166 | .data.type { | |
167 | color: COLOUR; | |
168 | } | |
169 | ||
170 | /* PROGRESS COLUMN */ | |
171 | ||
172 | .list-table .list-table-header .header-title.progress .link, | |
173 | .list-table .list-table-data .data.progress, | |
174 | .list-table .list-table-data .data.progress .link { | |
175 | color: COLOUR; | |
176 | } | |
177 | ||
178 | /* TAGS COLUMN */ | |
179 | ||
180 | .list-table .list-table-data .tags div { | |
181 | font-size: 1.1em; | |
182 | } | |
183 | ||
184 | .list-table .list-table-data .tags span, | |
185 | .list-table .list-table-data .tags a { | |
186 | color: COLOUR !important; | |
187 | } | |
188 | /* SCORE COLUMN */ | |
189 | ||
190 | /* Header */ | |
191 | .list-table .list-table-header .header-title.score .link { | |
192 | font-size: 1.1em; | |
193 | } | |
194 | ||
195 | /* Cell */ | |
196 | .list-table .list-table-data .data.score .link { | |
197 | font-size: 1.3em; | |
198 | } | |
199 | ||
200 | /*=============== | |
201 | MOVE TAG LOCATION | |
202 | ===============*/ | |
203 | ||
204 | /* Force list row height to prevent overflow issues */ | |
205 | .list-table-data { | |
206 | height: calc(25px + 16px * var(--row-height)); | |
207 | /* tag padding PLUS ( tag line height TIMES lines ) */ | |
208 | } | |
209 | ||
210 | /* Force tag line height for consistency with calc function */ | |
211 | .data.tags { line-height: 16px; } | |
212 | ||
213 | /* Align title to Top */ | |
214 | .list-table .list-table-data .data.title { vertical-align: top; } | |
215 | ||
216 | /* Set max title width */ | |
217 | .data.title { | |
218 | width: var(--tag-width); | |
219 | min-width: var(--tag-width); | |
220 | } | |
221 | ||
222 | .data.title .link { | |
223 | /* Prevent multi-line titles */ | |
224 | display: block; | |
225 | overflow: hidden; | |
226 | white-space: nowrap; | |
227 | text-overflow: ellipsis; | |
228 | float: left; | |
229 | /* Force width to prevent edit/more from wrapping to next line */ | |
230 | max-width: calc(var(--tag-width) - var(--title-offset)); | |
231 | } | |
232 | ||
233 | /* Remove tag column header */ | |
234 | .list-table .list-table-header .header-title.tags { | |
235 | width: 0; | |
236 | padding: 0; | |
237 | font-size: 0; | |
238 | } | |
239 | ||
240 | /* Reposition tags */ | |
241 | .list-table .list-table-data .data.tags { | |
242 | position: absolute; | |
243 | left: var(--tag-offset); | |
244 | max-width: var(--tag-width); | |
245 | padding: 22px 8px 3px; | |
246 | border: none; | |
247 | text-align: left; | |
248 | /* disable mouse interaction */ | |
249 | pointer-events: none; | |
250 | } | |
251 | ||
252 | /* Change tag block to inline so that the edit button can wrap next to it */ | |
253 | .list-table .list-table-data .data.tags div { display: inline; } | |
254 | ||
255 | /* Recolour tag text */ | |
256 | .list-table .list-table-data .tags a { color: black !important; } | |
257 | ||
258 | /* Restyle edit button */ | |
259 | .list-table .list-table-data .tags .edit { | |
260 | display: inline-block; | |
261 | width: auto; | |
262 | pointer-events: auto; | |
263 | text-transform: uppercase; | |
264 | } | |
265 | ||
266 | /*====================== | |
267 | TRANSPARENT LIST EFFECTS | |
268 | ======================*/ | |
269 | ||
270 | /*FOR LIGHT LAYOUTS*/ | |
271 | body{ | |
272 | background-size: cover !important; | |
273 | background-attachment: fixed !important; | |
274 | } | |
275 | ||
276 | .list-table > tbody:nth-of-type(2n+1), | |
277 | .list-table, .list-container, | |
278 | .list-table .list-table-header .header-title{ | |
279 | background-color: transparent !important; | |
280 | border: 0 transparent solid !important; | |
281 | } | |
282 | .list-table .list-table-data .data{ | |
283 | border: 0 transparent solid !important; | |
284 | } | |
285 | ||
286 | .status-menu-container{ | |
287 | background-color: rgba(255,255,255,.8) !important; | |
288 | } | |
289 | ||
290 | .cover-block { | |
291 | padding-left: 17px; | |
292 | padding-right: 17px; | |
293 | } | |
294 | ||
295 | .list-block, .cover-block{ | |
296 | background-color: rgba(255,255,255,.8) !important; | |
297 | } | |
298 | /* remove table header lines */ | |
299 | .list-table .list-table-header .header-title { background-image: none; } | |
300 | ||
301 | body.ownlist { | |
302 | /* | |
303 | each of these properties has a comma-separated list of values relating to the first and second backgrounds. | |
304 | the first background shows on top, the second below. | |
305 | */ | |
306 | background-image: | |
307 | url(https://i.imgur.com/OuAENUn.jpg), /* first background */ | |
308 | url(https://i.imgur.com/LEspWvO.jpeg); /* second background */ | |
309 | background-size: | |
310 | contain, /* first background */ | |
311 | 250px auto /* second background */ | |
312 | !important; | |
313 | background-repeat: | |
314 | no-repeat, /* first background */ | |
315 | repeat; /* second background */ | |
316 | background-position: | |
317 | center, /* first background */ | |
318 | center; /* second background */ | |
319 | } |