View difference between Paste ID: QqMpHGGm and eFMnhuEZ
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
}