|
1
|
/* CHANGELISTS */ |
|
2
|
|
|
3
|
#changelist { |
|
4
|
display: flex; |
|
5
|
align-items: flex-start; |
|
6
|
justify-content: space-between; |
|
7
|
} |
|
8
|
|
|
9
|
#changelist .changelist-form-container { |
|
10
|
flex: 1 1 auto; |
|
11
|
min-width: 0; |
|
12
|
} |
|
13
|
|
|
14
|
#changelist table { |
|
15
|
width: 100%; |
|
16
|
} |
|
17
|
|
|
18
|
.change-list .hiddenfields { display:none; } |
|
19
|
|
|
20
|
.change-list .filtered table { |
|
21
|
border-right: none; |
|
22
|
} |
|
23
|
|
|
24
|
.change-list .filtered { |
|
25
|
min-height: 400px; |
|
26
|
} |
|
27
|
|
|
28
|
.change-list .filtered .results, .change-list .filtered .paginator, |
|
29
|
.filtered #toolbar, .filtered div.xfull { |
|
30
|
width: auto; |
|
31
|
} |
|
32
|
|
|
33
|
.change-list .filtered table tbody th { |
|
34
|
padding-right: 1em; |
|
35
|
} |
|
36
|
|
|
37
|
#changelist-form .results { |
|
38
|
overflow-x: auto; |
|
39
|
width: 100%; |
|
40
|
} |
|
41
|
|
|
42
|
#changelist .toplinks { |
|
43
|
border-bottom: 1px solid var(--hairline-color); |
|
44
|
} |
|
45
|
|
|
46
|
#changelist .paginator { |
|
47
|
color: var(--body-quiet-color); |
|
48
|
border-bottom: 1px solid var(--hairline-color); |
|
49
|
background: var(--body-bg); |
|
50
|
overflow: hidden; |
|
51
|
} |
|
52
|
|
|
53
|
/* CHANGELIST TABLES */ |
|
54
|
|
|
55
|
#changelist table thead th { |
|
56
|
padding: 0; |
|
57
|
white-space: nowrap; |
|
58
|
vertical-align: middle; |
|
59
|
} |
|
60
|
|
|
61
|
#changelist table thead th.action-checkbox-column { |
|
62
|
width: 1.5em; |
|
63
|
text-align: center; |
|
64
|
} |
|
65
|
|
|
66
|
#changelist table tbody td.action-checkbox { |
|
67
|
text-align: center; |
|
68
|
} |
|
69
|
|
|
70
|
#changelist table tfoot { |
|
71
|
color: var(--body-quiet-color); |
|
72
|
} |
|
73
|
|
|
74
|
/* TOOLBAR */ |
|
75
|
|
|
76
|
#toolbar { |
|
77
|
padding: 8px 10px; |
|
78
|
margin-bottom: 15px; |
|
79
|
border-top: 1px solid var(--hairline-color); |
|
80
|
border-bottom: 1px solid var(--hairline-color); |
|
81
|
background: var(--darkened-bg); |
|
82
|
color: var(--body-quiet-color); |
|
83
|
} |
|
84
|
|
|
85
|
#toolbar form input { |
|
86
|
border-radius: 4px; |
|
87
|
font-size: 0.875rem; |
|
88
|
padding: 5px; |
|
89
|
color: var(--body-fg); |
|
90
|
} |
|
91
|
|
|
92
|
#toolbar #searchbar { |
|
93
|
height: 1.1875rem; |
|
94
|
border: 1px solid var(--border-color); |
|
95
|
padding: 2px 5px; |
|
96
|
margin: 0; |
|
97
|
vertical-align: top; |
|
98
|
font-size: 0.8125rem; |
|
99
|
max-width: 100%; |
|
100
|
} |
|
101
|
|
|
102
|
#toolbar #searchbar:focus { |
|
103
|
border-color: var(--body-quiet-color); |
|
104
|
} |
|
105
|
|
|
106
|
#toolbar form input[type="submit"] { |
|
107
|
border: 1px solid var(--border-color); |
|
108
|
font-size: 0.8125rem; |
|
109
|
padding: 4px 8px; |
|
110
|
margin: 0; |
|
111
|
vertical-align: middle; |
|
112
|
background: var(--body-bg); |
|
113
|
box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset; |
|
114
|
cursor: pointer; |
|
115
|
color: var(--body-fg); |
|
116
|
} |
|
117
|
|
|
118
|
#toolbar form input[type="submit"]:focus, |
|
119
|
#toolbar form input[type="submit"]:hover { |
|
120
|
border-color: var(--body-quiet-color); |
|
121
|
} |
|
122
|
|
|
123
|
#changelist-search img { |
|
124
|
vertical-align: middle; |
|
125
|
margin-right: 4px; |
|
126
|
} |
|
127
|
|
|
128
|
#changelist-search .help { |
|
129
|
word-break: break-word; |
|
130
|
} |
|
131
|
|
|
132
|
/* FILTER COLUMN */ |
|
133
|
|
|
134
|
#changelist-filter { |
|
135
|
flex: 0 0 240px; |
|
136
|
order: 1; |
|
137
|
background: var(--darkened-bg); |
|
138
|
border-left: none; |
|
139
|
margin: 0 0 0 30px; |
|
140
|
} |
|
141
|
|
|
142
|
@media (forced-colors: active) { |
|
143
|
#changelist-filter { |
|
144
|
border: 1px solid; |
|
145
|
} |
|
146
|
} |
|
147
|
|
|
148
|
#changelist-filter h2 { |
|
149
|
font-size: 0.875rem; |
|
150
|
text-transform: uppercase; |
|
151
|
letter-spacing: 0.5px; |
|
152
|
padding: 5px 15px; |
|
153
|
margin-bottom: 12px; |
|
154
|
border-bottom: none; |
|
155
|
} |
|
156
|
|
|
157
|
#changelist-filter h3, |
|
158
|
#changelist-filter details summary { |
|
159
|
font-weight: 400; |
|
160
|
padding: 0 15px; |
|
161
|
margin-bottom: 10px; |
|
162
|
} |
|
163
|
|
|
164
|
#changelist-filter details summary > * { |
|
165
|
display: inline; |
|
166
|
} |
|
167
|
|
|
168
|
#changelist-filter details > summary { |
|
169
|
list-style-type: none; |
|
170
|
} |
|
171
|
|
|
172
|
#changelist-filter details > summary::-webkit-details-marker { |
|
173
|
display: none; |
|
174
|
} |
|
175
|
|
|
176
|
#changelist-filter details > summary::before { |
|
177
|
content: '→'; |
|
178
|
font-weight: bold; |
|
179
|
color: var(--link-hover-color); |
|
180
|
} |
|
181
|
|
|
182
|
#changelist-filter details[open] > summary::before { |
|
183
|
content: '↓'; |
|
184
|
} |
|
185
|
|
|
186
|
#changelist-filter ul { |
|
187
|
margin: 5px 0; |
|
188
|
padding: 0 15px 15px; |
|
189
|
border-bottom: 1px solid var(--hairline-color); |
|
190
|
} |
|
191
|
|
|
192
|
#changelist-filter ul:last-child { |
|
193
|
border-bottom: none; |
|
194
|
} |
|
195
|
|
|
196
|
#changelist-filter li { |
|
197
|
list-style-type: none; |
|
198
|
margin-left: 0; |
|
199
|
padding-left: 0; |
|
200
|
} |
|
201
|
|
|
202
|
#changelist-filter a { |
|
203
|
display: block; |
|
204
|
color: var(--body-quiet-color); |
|
205
|
word-break: break-word; |
|
206
|
} |
|
207
|
|
|
208
|
#changelist-filter li.selected { |
|
209
|
border-left: 5px solid var(--hairline-color); |
|
210
|
padding-left: 10px; |
|
211
|
margin-left: -15px; |
|
212
|
} |
|
213
|
|
|
214
|
#changelist-filter li.selected a { |
|
215
|
color: var(--link-selected-fg); |
|
216
|
} |
|
217
|
|
|
218
|
#changelist-filter a:focus, #changelist-filter a:hover, |
|
219
|
#changelist-filter li.selected a:focus, |
|
220
|
#changelist-filter li.selected a:hover { |
|
221
|
color: var(--link-hover-color); |
|
222
|
} |
|
223
|
|
|
224
|
#changelist-filter #changelist-filter-extra-actions { |
|
225
|
font-size: 0.8125rem; |
|
226
|
margin-bottom: 10px; |
|
227
|
border-bottom: 1px solid var(--hairline-color); |
|
228
|
} |
|
229
|
|
|
230
|
/* DATE DRILLDOWN */ |
|
231
|
|
|
232
|
.change-list .toplinks { |
|
233
|
display: flex; |
|
234
|
padding-bottom: 5px; |
|
235
|
flex-wrap: wrap; |
|
236
|
gap: 3px 17px; |
|
237
|
font-weight: bold; |
|
238
|
} |
|
239
|
|
|
240
|
.change-list .toplinks a { |
|
241
|
font-size: 0.8125rem; |
|
242
|
} |
|
243
|
|
|
244
|
.change-list .toplinks .date-back { |
|
245
|
color: var(--body-quiet-color); |
|
246
|
} |
|
247
|
|
|
248
|
.change-list .toplinks .date-back:focus, |
|
249
|
.change-list .toplinks .date-back:hover { |
|
250
|
color: var(--link-hover-color); |
|
251
|
} |
|
252
|
|
|
253
|
/* ACTIONS */ |
|
254
|
|
|
255
|
.filtered .actions { |
|
256
|
border-right: none; |
|
257
|
} |
|
258
|
|
|
259
|
#changelist table input { |
|
260
|
margin: 0; |
|
261
|
vertical-align: baseline; |
|
262
|
} |
|
263
|
|
|
264
|
/* Once the :has() pseudo-class is supported by all browsers, the tr.selected |
|
265
|
selector and the JS adding the class can be removed. */ |
|
266
|
#changelist tbody tr.selected { |
|
267
|
background-color: var(--selected-row); |
|
268
|
} |
|
269
|
|
|
270
|
#changelist tbody tr:has(.action-select:checked) { |
|
271
|
background-color: var(--selected-row); |
|
272
|
} |
|
273
|
|
|
274
|
@media (forced-colors: active) { |
|
275
|
#changelist tbody tr.selected { |
|
276
|
background-color: SelectedItem; |
|
277
|
} |
|
278
|
#changelist tbody tr:has(.action-select:checked) { |
|
279
|
background-color: SelectedItem; |
|
280
|
} |
|
281
|
} |
|
282
|
|
|
283
|
#changelist .actions { |
|
284
|
padding: 10px; |
|
285
|
background: var(--body-bg); |
|
286
|
border-top: none; |
|
287
|
border-bottom: none; |
|
288
|
line-height: 1.5rem; |
|
289
|
color: var(--body-quiet-color); |
|
290
|
width: 100%; |
|
291
|
} |
|
292
|
|
|
293
|
#changelist .actions span.all, |
|
294
|
#changelist .actions span.action-counter, |
|
295
|
#changelist .actions span.clear, |
|
296
|
#changelist .actions span.question { |
|
297
|
font-size: 0.8125rem; |
|
298
|
margin: 0 0.5em; |
|
299
|
} |
|
300
|
|
|
301
|
#changelist .actions:last-child { |
|
302
|
border-bottom: none; |
|
303
|
} |
|
304
|
|
|
305
|
#changelist .actions select { |
|
306
|
vertical-align: top; |
|
307
|
height: 1.5rem; |
|
308
|
color: var(--body-fg); |
|
309
|
border: 1px solid var(--border-color); |
|
310
|
border-radius: 4px; |
|
311
|
font-size: 0.875rem; |
|
312
|
padding: 0 0 0 4px; |
|
313
|
margin: 0; |
|
314
|
margin-left: 10px; |
|
315
|
} |
|
316
|
|
|
317
|
#changelist .actions select:focus { |
|
318
|
border-color: var(--body-quiet-color); |
|
319
|
} |
|
320
|
|
|
321
|
#changelist .actions label { |
|
322
|
display: inline-block; |
|
323
|
vertical-align: middle; |
|
324
|
font-size: 0.8125rem; |
|
325
|
} |
|
326
|
|
|
327
|
#changelist .actions .button { |
|
328
|
font-size: 0.8125rem; |
|
329
|
border: 1px solid var(--border-color); |
|
330
|
border-radius: 4px; |
|
331
|
background: var(--body-bg); |
|
332
|
box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset; |
|
333
|
cursor: pointer; |
|
334
|
height: 1.5rem; |
|
335
|
line-height: 1; |
|
336
|
padding: 4px 8px; |
|
337
|
margin: 0; |
|
338
|
color: var(--body-fg); |
|
339
|
} |
|
340
|
|
|
341
|
#changelist .actions .button:focus, #changelist .actions .button:hover { |
|
342
|
border-color: var(--body-quiet-color); |
|
343
|
} |
|
344
|
|