|
1
|
/* |
|
2
|
DJANGO Admin styles |
|
3
|
*/ |
|
4
|
|
|
5
|
/* VARIABLE DEFINITIONS */ |
|
6
|
html[data-theme="light"], |
|
7
|
:root { |
|
8
|
--primary: #79aec8; |
|
9
|
--secondary: #417690; |
|
10
|
--accent: #f5dd5d; |
|
11
|
--primary-fg: #fff; |
|
12
|
|
|
13
|
--body-fg: #333; |
|
14
|
--body-bg: #fff; |
|
15
|
--body-quiet-color: #666; |
|
16
|
--body-medium-color: #444; |
|
17
|
--body-loud-color: #000; |
|
18
|
|
|
19
|
--header-color: #ffc; |
|
20
|
--header-branding-color: var(--accent); |
|
21
|
--header-bg: var(--secondary); |
|
22
|
--header-link-color: var(--primary-fg); |
|
23
|
|
|
24
|
--breadcrumbs-fg: #c4dce8; |
|
25
|
--breadcrumbs-link-fg: var(--body-bg); |
|
26
|
--breadcrumbs-bg: #264b5d; |
|
27
|
|
|
28
|
--link-fg: #417893; |
|
29
|
--link-hover-color: #036; |
|
30
|
--link-selected-fg: var(--secondary); |
|
31
|
|
|
32
|
--hairline-color: #e8e8e8; |
|
33
|
--border-color: #ccc; |
|
34
|
|
|
35
|
--error-fg: #ba2121; |
|
36
|
|
|
37
|
--message-success-bg: #dfd; |
|
38
|
--message-warning-bg: #ffc; |
|
39
|
--message-error-bg: #ffefef; |
|
40
|
|
|
41
|
--darkened-bg: #f8f8f8; /* A bit darker than --body-bg */ |
|
42
|
--selected-bg: #e4e4e4; /* E.g. selected table cells */ |
|
43
|
--selected-row: #ffc; |
|
44
|
|
|
45
|
--button-fg: #fff; |
|
46
|
--button-bg: var(--secondary); |
|
47
|
--button-hover-bg: #205067; |
|
48
|
--default-button-bg: #205067; |
|
49
|
--default-button-hover-bg: var(--secondary); |
|
50
|
--close-button-bg: #747474; |
|
51
|
--close-button-hover-bg: #333; |
|
52
|
--delete-button-bg: #ba2121; |
|
53
|
--delete-button-hover-bg: #a41515; |
|
54
|
|
|
55
|
--object-tools-fg: var(--button-fg); |
|
56
|
--object-tools-bg: var(--close-button-bg); |
|
57
|
--object-tools-hover-bg: var(--close-button-hover-bg); |
|
58
|
|
|
59
|
--font-family-primary: |
|
60
|
"Segoe UI", |
|
61
|
system-ui, |
|
62
|
Roboto, |
|
63
|
"Helvetica Neue", |
|
64
|
Arial, |
|
65
|
sans-serif, |
|
66
|
"Apple Color Emoji", |
|
67
|
"Segoe UI Emoji", |
|
68
|
"Segoe UI Symbol", |
|
69
|
"Noto Color Emoji"; |
|
70
|
--font-family-monospace: |
|
71
|
ui-monospace, |
|
72
|
Menlo, |
|
73
|
Monaco, |
|
74
|
"Cascadia Mono", |
|
75
|
"Segoe UI Mono", |
|
76
|
"Roboto Mono", |
|
77
|
"Oxygen Mono", |
|
78
|
"Ubuntu Monospace", |
|
79
|
"Source Code Pro", |
|
80
|
"Fira Mono", |
|
81
|
"Droid Sans Mono", |
|
82
|
"Courier New", |
|
83
|
monospace, |
|
84
|
"Apple Color Emoji", |
|
85
|
"Segoe UI Emoji", |
|
86
|
"Segoe UI Symbol", |
|
87
|
"Noto Color Emoji"; |
|
88
|
|
|
89
|
color-scheme: light; |
|
90
|
} |
|
91
|
|
|
92
|
html, body { |
|
93
|
height: 100%; |
|
94
|
} |
|
95
|
|
|
96
|
body { |
|
97
|
margin: 0; |
|
98
|
padding: 0; |
|
99
|
font-size: 0.875rem; |
|
100
|
font-family: var(--font-family-primary); |
|
101
|
color: var(--body-fg); |
|
102
|
background: var(--body-bg); |
|
103
|
} |
|
104
|
|
|
105
|
/* LINKS */ |
|
106
|
|
|
107
|
a:link, a:visited { |
|
108
|
color: var(--link-fg); |
|
109
|
text-decoration: none; |
|
110
|
transition: color 0.15s, background 0.15s; |
|
111
|
} |
|
112
|
|
|
113
|
a:focus, a:hover { |
|
114
|
color: var(--link-hover-color); |
|
115
|
} |
|
116
|
|
|
117
|
a:focus { |
|
118
|
text-decoration: underline; |
|
119
|
} |
|
120
|
|
|
121
|
a img { |
|
122
|
border: none; |
|
123
|
} |
|
124
|
|
|
125
|
a.section:link, a.section:visited { |
|
126
|
color: var(--header-link-color); |
|
127
|
text-decoration: none; |
|
128
|
} |
|
129
|
|
|
130
|
a.section:focus, a.section:hover { |
|
131
|
text-decoration: underline; |
|
132
|
} |
|
133
|
|
|
134
|
/* GLOBAL DEFAULTS */ |
|
135
|
|
|
136
|
p, ol, ul, dl { |
|
137
|
margin: .2em 0 .8em 0; |
|
138
|
} |
|
139
|
|
|
140
|
p { |
|
141
|
padding: 0; |
|
142
|
line-height: 140%; |
|
143
|
} |
|
144
|
|
|
145
|
h1,h2,h3,h4,h5 { |
|
146
|
font-weight: bold; |
|
147
|
} |
|
148
|
|
|
149
|
h1 { |
|
150
|
margin: 0 0 20px; |
|
151
|
font-weight: 300; |
|
152
|
font-size: 1.25rem; |
|
153
|
} |
|
154
|
|
|
155
|
h2 { |
|
156
|
font-size: 1rem; |
|
157
|
margin: 1em 0 .5em 0; |
|
158
|
} |
|
159
|
|
|
160
|
h2.subhead { |
|
161
|
font-weight: normal; |
|
162
|
margin-top: 0; |
|
163
|
} |
|
164
|
|
|
165
|
h3 { |
|
166
|
font-size: 0.875rem; |
|
167
|
margin: .8em 0 .3em 0; |
|
168
|
color: var(--body-medium-color); |
|
169
|
font-weight: bold; |
|
170
|
} |
|
171
|
|
|
172
|
h4 { |
|
173
|
font-size: 0.75rem; |
|
174
|
margin: 1em 0 .8em 0; |
|
175
|
padding-bottom: 3px; |
|
176
|
color: var(--body-medium-color); |
|
177
|
} |
|
178
|
|
|
179
|
h5 { |
|
180
|
font-size: 0.625rem; |
|
181
|
margin: 1.5em 0 .5em 0; |
|
182
|
color: var(--body-quiet-color); |
|
183
|
text-transform: uppercase; |
|
184
|
letter-spacing: 1px; |
|
185
|
} |
|
186
|
|
|
187
|
ul > li { |
|
188
|
list-style-type: square; |
|
189
|
padding: 1px 0; |
|
190
|
} |
|
191
|
|
|
192
|
li ul { |
|
193
|
margin-bottom: 0; |
|
194
|
} |
|
195
|
|
|
196
|
li, dt, dd { |
|
197
|
font-size: 0.8125rem; |
|
198
|
line-height: 1.25rem; |
|
199
|
} |
|
200
|
|
|
201
|
dt { |
|
202
|
font-weight: bold; |
|
203
|
margin-top: 4px; |
|
204
|
} |
|
205
|
|
|
206
|
dd { |
|
207
|
margin-left: 0; |
|
208
|
} |
|
209
|
|
|
210
|
form { |
|
211
|
margin: 0; |
|
212
|
padding: 0; |
|
213
|
} |
|
214
|
|
|
215
|
fieldset { |
|
216
|
margin: 0; |
|
217
|
min-width: 0; |
|
218
|
padding: 0; |
|
219
|
border: none; |
|
220
|
border-top: 1px solid var(--hairline-color); |
|
221
|
} |
|
222
|
|
|
223
|
details summary { |
|
224
|
cursor: pointer; |
|
225
|
} |
|
226
|
|
|
227
|
blockquote { |
|
228
|
font-size: 0.6875rem; |
|
229
|
color: #777; |
|
230
|
margin-left: 2px; |
|
231
|
padding-left: 10px; |
|
232
|
border-left: 5px solid #ddd; |
|
233
|
} |
|
234
|
|
|
235
|
code, pre { |
|
236
|
font-family: var(--font-family-monospace); |
|
237
|
color: var(--body-quiet-color); |
|
238
|
font-size: 0.75rem; |
|
239
|
overflow-x: auto; |
|
240
|
} |
|
241
|
|
|
242
|
pre.literal-block { |
|
243
|
margin: 10px; |
|
244
|
background: var(--darkened-bg); |
|
245
|
padding: 6px 8px; |
|
246
|
} |
|
247
|
|
|
248
|
code strong { |
|
249
|
color: #930; |
|
250
|
} |
|
251
|
|
|
252
|
hr { |
|
253
|
clear: both; |
|
254
|
color: var(--hairline-color); |
|
255
|
background-color: var(--hairline-color); |
|
256
|
height: 1px; |
|
257
|
border: none; |
|
258
|
margin: 0; |
|
259
|
padding: 0; |
|
260
|
line-height: 1px; |
|
261
|
} |
|
262
|
|
|
263
|
/* TEXT STYLES & MODIFIERS */ |
|
264
|
|
|
265
|
.small { |
|
266
|
font-size: 0.6875rem; |
|
267
|
} |
|
268
|
|
|
269
|
.mini { |
|
270
|
font-size: 0.625rem; |
|
271
|
} |
|
272
|
|
|
273
|
.help, p.help, form p.help, div.help, form div.help, div.help li { |
|
274
|
font-size: 0.6875rem; |
|
275
|
color: var(--body-quiet-color); |
|
276
|
} |
|
277
|
|
|
278
|
div.help ul { |
|
279
|
margin-bottom: 0; |
|
280
|
} |
|
281
|
|
|
282
|
.help-tooltip { |
|
283
|
cursor: help; |
|
284
|
} |
|
285
|
|
|
286
|
p img, h1 img, h2 img, h3 img, h4 img, td img { |
|
287
|
vertical-align: middle; |
|
288
|
} |
|
289
|
|
|
290
|
.quiet, a.quiet:link, a.quiet:visited { |
|
291
|
color: var(--body-quiet-color); |
|
292
|
font-weight: normal; |
|
293
|
} |
|
294
|
|
|
295
|
.clear { |
|
296
|
clear: both; |
|
297
|
} |
|
298
|
|
|
299
|
.nowrap { |
|
300
|
white-space: nowrap; |
|
301
|
} |
|
302
|
|
|
303
|
.hidden { |
|
304
|
display: none !important; |
|
305
|
} |
|
306
|
|
|
307
|
/* TABLES */ |
|
308
|
|
|
309
|
table { |
|
310
|
border-collapse: collapse; |
|
311
|
border-color: var(--border-color); |
|
312
|
} |
|
313
|
|
|
314
|
td, th { |
|
315
|
font-size: 0.8125rem; |
|
316
|
line-height: 1rem; |
|
317
|
border-bottom: 1px solid var(--hairline-color); |
|
318
|
vertical-align: top; |
|
319
|
padding: 8px; |
|
320
|
} |
|
321
|
|
|
322
|
th { |
|
323
|
font-weight: 500; |
|
324
|
text-align: left; |
|
325
|
} |
|
326
|
|
|
327
|
thead th, |
|
328
|
tfoot td { |
|
329
|
color: var(--body-quiet-color); |
|
330
|
padding: 5px 10px; |
|
331
|
font-size: 0.6875rem; |
|
332
|
background: var(--body-bg); |
|
333
|
border: none; |
|
334
|
border-top: 1px solid var(--hairline-color); |
|
335
|
border-bottom: 1px solid var(--hairline-color); |
|
336
|
} |
|
337
|
|
|
338
|
tfoot td { |
|
339
|
border-bottom: none; |
|
340
|
border-top: 1px solid var(--hairline-color); |
|
341
|
} |
|
342
|
|
|
343
|
thead th.required { |
|
344
|
font-weight: bold; |
|
345
|
} |
|
346
|
|
|
347
|
tr.alt { |
|
348
|
background: var(--darkened-bg); |
|
349
|
} |
|
350
|
|
|
351
|
tr:nth-child(odd), .row-form-errors { |
|
352
|
background: var(--body-bg); |
|
353
|
} |
|
354
|
|
|
355
|
tr:nth-child(even), |
|
356
|
tr:nth-child(even) .errorlist, |
|
357
|
tr:nth-child(odd) + .row-form-errors, |
|
358
|
tr:nth-child(odd) + .row-form-errors .errorlist { |
|
359
|
background: var(--darkened-bg); |
|
360
|
} |
|
361
|
|
|
362
|
/* SORTABLE TABLES */ |
|
363
|
|
|
364
|
thead th { |
|
365
|
padding: 5px 10px; |
|
366
|
line-height: normal; |
|
367
|
text-transform: uppercase; |
|
368
|
background: var(--darkened-bg); |
|
369
|
} |
|
370
|
|
|
371
|
thead th a:link, thead th a:visited { |
|
372
|
color: var(--body-quiet-color); |
|
373
|
} |
|
374
|
|
|
375
|
thead th.sorted { |
|
376
|
background: var(--selected-bg); |
|
377
|
} |
|
378
|
|
|
379
|
thead th.sorted .text { |
|
380
|
padding-right: 42px; |
|
381
|
} |
|
382
|
|
|
383
|
table thead th .text span { |
|
384
|
padding: 8px 10px; |
|
385
|
display: block; |
|
386
|
} |
|
387
|
|
|
388
|
table thead th .text a { |
|
389
|
display: block; |
|
390
|
cursor: pointer; |
|
391
|
padding: 8px 10px; |
|
392
|
} |
|
393
|
|
|
394
|
table thead th .text a:focus, table thead th .text a:hover { |
|
395
|
background: var(--selected-bg); |
|
396
|
} |
|
397
|
|
|
398
|
thead th.sorted a.sortremove { |
|
399
|
visibility: hidden; |
|
400
|
} |
|
401
|
|
|
402
|
table thead th.sorted:hover a.sortremove { |
|
403
|
visibility: visible; |
|
404
|
} |
|
405
|
|
|
406
|
table thead th.sorted .sortoptions { |
|
407
|
display: block; |
|
408
|
padding: 9px 5px 0 5px; |
|
409
|
float: right; |
|
410
|
text-align: right; |
|
411
|
} |
|
412
|
|
|
413
|
table thead th.sorted .sortpriority { |
|
414
|
font-size: .8em; |
|
415
|
min-width: 12px; |
|
416
|
text-align: center; |
|
417
|
vertical-align: 3px; |
|
418
|
margin-left: 2px; |
|
419
|
margin-right: 2px; |
|
420
|
} |
|
421
|
|
|
422
|
table thead th.sorted .sortoptions a { |
|
423
|
position: relative; |
|
424
|
width: 14px; |
|
425
|
height: 14px; |
|
426
|
display: inline-block; |
|
427
|
background: url("../img/sorting-icons.3a097b59f104.svg") 0 0 no-repeat; |
|
428
|
background-size: 14px auto; |
|
429
|
} |
|
430
|
|
|
431
|
table thead th.sorted .sortoptions a.sortremove { |
|
432
|
background-position: 0 0; |
|
433
|
} |
|
434
|
|
|
435
|
table thead th.sorted .sortoptions a.sortremove:after { |
|
436
|
content: '\\'; |
|
437
|
position: absolute; |
|
438
|
top: -6px; |
|
439
|
left: 3px; |
|
440
|
font-weight: 200; |
|
441
|
font-size: 1.125rem; |
|
442
|
color: var(--body-quiet-color); |
|
443
|
} |
|
444
|
|
|
445
|
table thead th.sorted .sortoptions a.sortremove:focus:after, |
|
446
|
table thead th.sorted .sortoptions a.sortremove:hover:after { |
|
447
|
color: var(--link-fg); |
|
448
|
} |
|
449
|
|
|
450
|
table thead th.sorted .sortoptions a.sortremove:focus, |
|
451
|
table thead th.sorted .sortoptions a.sortremove:hover { |
|
452
|
background-position: 0 -14px; |
|
453
|
} |
|
454
|
|
|
455
|
table thead th.sorted .sortoptions a.ascending { |
|
456
|
background-position: 0 -28px; |
|
457
|
} |
|
458
|
|
|
459
|
table thead th.sorted .sortoptions a.ascending:focus, |
|
460
|
table thead th.sorted .sortoptions a.ascending:hover { |
|
461
|
background-position: 0 -42px; |
|
462
|
} |
|
463
|
|
|
464
|
table thead th.sorted .sortoptions a.descending { |
|
465
|
top: 1px; |
|
466
|
background-position: 0 -56px; |
|
467
|
} |
|
468
|
|
|
469
|
table thead th.sorted .sortoptions a.descending:focus, |
|
470
|
table thead th.sorted .sortoptions a.descending:hover { |
|
471
|
background-position: 0 -70px; |
|
472
|
} |
|
473
|
|
|
474
|
/* FORM DEFAULTS */ |
|
475
|
|
|
476
|
input, textarea, select, .form-row p, form .button { |
|
477
|
margin: 2px 0; |
|
478
|
padding: 2px 3px; |
|
479
|
vertical-align: middle; |
|
480
|
font-family: var(--font-family-primary); |
|
481
|
font-weight: normal; |
|
482
|
font-size: 0.8125rem; |
|
483
|
} |
|
484
|
.form-row div.help { |
|
485
|
padding: 2px 3px; |
|
486
|
} |
|
487
|
|
|
488
|
textarea { |
|
489
|
vertical-align: top; |
|
490
|
} |
|
491
|
|
|
492
|
/* |
|
493
|
Minifiers remove the default (text) "type" attribute from "input" HTML tags. |
|
494
|
Add input:not([type]) to make the CSS stylesheet work the same. |
|
495
|
*/ |
|
496
|
input:not([type]), input[type=text], input[type=password], input[type=email], |
|
497
|
input[type=url], input[type=number], input[type=tel], textarea, select, |
|
498
|
.vTextField { |
|
499
|
border: 1px solid var(--border-color); |
|
500
|
border-radius: 4px; |
|
501
|
padding: 5px 6px; |
|
502
|
margin-top: 0; |
|
503
|
color: var(--body-fg); |
|
504
|
background-color: var(--body-bg); |
|
505
|
} |
|
506
|
|
|
507
|
/* |
|
508
|
Minifiers remove the default (text) "type" attribute from "input" HTML tags. |
|
509
|
Add input:not([type]) to make the CSS stylesheet work the same. |
|
510
|
*/ |
|
511
|
input:not([type]):focus, input[type=text]:focus, input[type=password]:focus, |
|
512
|
input[type=email]:focus, input[type=url]:focus, input[type=number]:focus, |
|
513
|
input[type=tel]:focus, textarea:focus, select:focus, .vTextField:focus { |
|
514
|
border-color: var(--body-quiet-color); |
|
515
|
} |
|
516
|
|
|
517
|
select { |
|
518
|
height: 1.875rem; |
|
519
|
} |
|
520
|
|
|
521
|
select[multiple] { |
|
522
|
/* Allow HTML size attribute to override the height in the rule above. */ |
|
523
|
height: auto; |
|
524
|
min-height: 150px; |
|
525
|
} |
|
526
|
|
|
527
|
/* FORM BUTTONS */ |
|
528
|
|
|
529
|
.button, input[type=submit], input[type=button], .submit-row input, a.button { |
|
530
|
background: var(--button-bg); |
|
531
|
padding: 10px 15px; |
|
532
|
border: none; |
|
533
|
border-radius: 4px; |
|
534
|
color: var(--button-fg); |
|
535
|
cursor: pointer; |
|
536
|
transition: background 0.15s; |
|
537
|
} |
|
538
|
|
|
539
|
a.button { |
|
540
|
padding: 4px 5px; |
|
541
|
} |
|
542
|
|
|
543
|
.button:active, input[type=submit]:active, input[type=button]:active, |
|
544
|
.button:focus, input[type=submit]:focus, input[type=button]:focus, |
|
545
|
.button:hover, input[type=submit]:hover, input[type=button]:hover { |
|
546
|
background: var(--button-hover-bg); |
|
547
|
} |
|
548
|
|
|
549
|
.button[disabled], input[type=submit][disabled], input[type=button][disabled] { |
|
550
|
opacity: 0.4; |
|
551
|
} |
|
552
|
|
|
553
|
.button.default, input[type=submit].default, .submit-row input.default { |
|
554
|
border: none; |
|
555
|
font-weight: 400; |
|
556
|
background: var(--default-button-bg); |
|
557
|
} |
|
558
|
|
|
559
|
.button.default:active, input[type=submit].default:active, |
|
560
|
.button.default:focus, input[type=submit].default:focus, |
|
561
|
.button.default:hover, input[type=submit].default:hover { |
|
562
|
background: var(--default-button-hover-bg); |
|
563
|
} |
|
564
|
|
|
565
|
.button[disabled].default, |
|
566
|
input[type=submit][disabled].default, |
|
567
|
input[type=button][disabled].default { |
|
568
|
opacity: 0.4; |
|
569
|
} |
|
570
|
|
|
571
|
|
|
572
|
/* MODULES */ |
|
573
|
|
|
574
|
.module { |
|
575
|
border: none; |
|
576
|
margin-bottom: 30px; |
|
577
|
background: var(--body-bg); |
|
578
|
} |
|
579
|
|
|
580
|
.module p, .module ul, .module h3, .module h4, .module dl, .module pre { |
|
581
|
padding-left: 10px; |
|
582
|
padding-right: 10px; |
|
583
|
} |
|
584
|
|
|
585
|
.module blockquote { |
|
586
|
margin-left: 12px; |
|
587
|
} |
|
588
|
|
|
589
|
.module ul, .module ol { |
|
590
|
margin-left: 1.5em; |
|
591
|
} |
|
592
|
|
|
593
|
.module h3 { |
|
594
|
margin-top: .6em; |
|
595
|
} |
|
596
|
|
|
597
|
.module h2, .module caption, .inline-group h2 { |
|
598
|
margin: 0; |
|
599
|
padding: 8px; |
|
600
|
font-weight: 400; |
|
601
|
font-size: 0.8125rem; |
|
602
|
text-align: left; |
|
603
|
background: var(--header-bg); |
|
604
|
color: var(--header-link-color); |
|
605
|
} |
|
606
|
|
|
607
|
.module caption, |
|
608
|
.inline-group h2 { |
|
609
|
font-size: 0.75rem; |
|
610
|
letter-spacing: 0.5px; |
|
611
|
text-transform: uppercase; |
|
612
|
} |
|
613
|
|
|
614
|
.module table { |
|
615
|
border-collapse: collapse; |
|
616
|
} |
|
617
|
|
|
618
|
/* MESSAGES & ERRORS */ |
|
619
|
|
|
620
|
ul.messagelist { |
|
621
|
padding: 0; |
|
622
|
margin: 0; |
|
623
|
} |
|
624
|
|
|
625
|
ul.messagelist li { |
|
626
|
display: block; |
|
627
|
font-weight: 400; |
|
628
|
font-size: 0.8125rem; |
|
629
|
padding: 10px 10px 10px 65px; |
|
630
|
margin: 0 0 10px 0; |
|
631
|
background: var(--message-success-bg) url("../img/icon-yes.d2f9f035226a.svg") 40px 12px no-repeat; |
|
632
|
background-size: 16px auto; |
|
633
|
color: var(--body-fg); |
|
634
|
word-break: break-word; |
|
635
|
} |
|
636
|
|
|
637
|
ul.messagelist li.warning { |
|
638
|
background: var(--message-warning-bg) url("../img/icon-alert.034cc7d8a67f.svg") 40px 14px no-repeat; |
|
639
|
background-size: 14px auto; |
|
640
|
} |
|
641
|
|
|
642
|
ul.messagelist li.error { |
|
643
|
background: var(--message-error-bg) url("../img/icon-no.439e821418cd.svg") 40px 12px no-repeat; |
|
644
|
background-size: 16px auto; |
|
645
|
} |
|
646
|
|
|
647
|
.errornote { |
|
648
|
font-size: 0.875rem; |
|
649
|
font-weight: 700; |
|
650
|
display: block; |
|
651
|
padding: 10px 12px; |
|
652
|
margin: 0 0 10px 0; |
|
653
|
color: var(--error-fg); |
|
654
|
border: 1px solid var(--error-fg); |
|
655
|
border-radius: 4px; |
|
656
|
background-color: var(--body-bg); |
|
657
|
background-position: 5px 12px; |
|
658
|
overflow-wrap: break-word; |
|
659
|
} |
|
660
|
|
|
661
|
ul.errorlist { |
|
662
|
margin: 0 0 4px; |
|
663
|
padding: 0; |
|
664
|
color: var(--error-fg); |
|
665
|
background: var(--body-bg); |
|
666
|
} |
|
667
|
|
|
668
|
ul.errorlist li { |
|
669
|
font-size: 0.8125rem; |
|
670
|
display: block; |
|
671
|
margin-bottom: 4px; |
|
672
|
overflow-wrap: break-word; |
|
673
|
} |
|
674
|
|
|
675
|
ul.errorlist li:first-child { |
|
676
|
margin-top: 0; |
|
677
|
} |
|
678
|
|
|
679
|
ul.errorlist li a { |
|
680
|
color: inherit; |
|
681
|
text-decoration: underline; |
|
682
|
} |
|
683
|
|
|
684
|
td ul.errorlist { |
|
685
|
margin: 0; |
|
686
|
padding: 0; |
|
687
|
} |
|
688
|
|
|
689
|
td ul.errorlist li { |
|
690
|
margin: 0; |
|
691
|
} |
|
692
|
|
|
693
|
.form-row.errors { |
|
694
|
margin: 0; |
|
695
|
border: none; |
|
696
|
border-bottom: 1px solid var(--hairline-color); |
|
697
|
background: none; |
|
698
|
} |
|
699
|
|
|
700
|
.form-row.errors ul.errorlist li { |
|
701
|
padding-left: 0; |
|
702
|
} |
|
703
|
|
|
704
|
.errors input, .errors select, .errors textarea, |
|
705
|
td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea { |
|
706
|
border: 1px solid var(--error-fg); |
|
707
|
} |
|
708
|
|
|
709
|
.description { |
|
710
|
font-size: 0.75rem; |
|
711
|
padding: 5px 0 0 12px; |
|
712
|
} |
|
713
|
|
|
714
|
/* BREADCRUMBS */ |
|
715
|
|
|
716
|
div.breadcrumbs { |
|
717
|
background: var(--breadcrumbs-bg); |
|
718
|
padding: 10px 40px; |
|
719
|
border: none; |
|
720
|
color: var(--breadcrumbs-fg); |
|
721
|
text-align: left; |
|
722
|
} |
|
723
|
|
|
724
|
div.breadcrumbs a { |
|
725
|
color: var(--breadcrumbs-link-fg); |
|
726
|
} |
|
727
|
|
|
728
|
div.breadcrumbs a:focus, div.breadcrumbs a:hover { |
|
729
|
color: var(--breadcrumbs-fg); |
|
730
|
} |
|
731
|
|
|
732
|
/* ACTION ICONS */ |
|
733
|
|
|
734
|
.viewlink, .inlineviewlink { |
|
735
|
padding-left: 16px; |
|
736
|
background: url("../img/icon-viewlink.41eb31f7826e.svg") 0 1px no-repeat; |
|
737
|
} |
|
738
|
|
|
739
|
.hidelink { |
|
740
|
padding-left: 16px; |
|
741
|
background: url("../img/icon-hidelink.8d245a995e18.svg") 0 1px no-repeat; |
|
742
|
} |
|
743
|
|
|
744
|
.addlink { |
|
745
|
padding-left: 16px; |
|
746
|
background: url("../img/icon-addlink.073aeb1feda7.svg") 0 1px no-repeat; |
|
747
|
} |
|
748
|
|
|
749
|
.changelink, .inlinechangelink { |
|
750
|
padding-left: 16px; |
|
751
|
background: url("../img/icon-changelink.7eddb320e61f.svg") 0 1px no-repeat; |
|
752
|
} |
|
753
|
|
|
754
|
.deletelink { |
|
755
|
padding-left: 16px; |
|
756
|
background: url("../img/icon-deletelink.564ef9dc3854.svg") 0 1px no-repeat; |
|
757
|
} |
|
758
|
|
|
759
|
a.deletelink:link, a.deletelink:visited { |
|
760
|
color: #CC3434; /* XXX Probably unused? */ |
|
761
|
} |
|
762
|
|
|
763
|
a.deletelink:focus, a.deletelink:hover { |
|
764
|
color: #993333; /* XXX Probably unused? */ |
|
765
|
text-decoration: none; |
|
766
|
} |
|
767
|
|
|
768
|
/* OBJECT TOOLS */ |
|
769
|
|
|
770
|
.object-tools { |
|
771
|
font-size: 0.625rem; |
|
772
|
font-weight: bold; |
|
773
|
padding-left: 0; |
|
774
|
float: right; |
|
775
|
position: relative; |
|
776
|
margin-top: -48px; |
|
777
|
} |
|
778
|
|
|
779
|
.object-tools li { |
|
780
|
display: block; |
|
781
|
float: left; |
|
782
|
margin-left: 5px; |
|
783
|
height: 1rem; |
|
784
|
} |
|
785
|
|
|
786
|
.object-tools a { |
|
787
|
border-radius: 15px; |
|
788
|
} |
|
789
|
|
|
790
|
.object-tools a:link, .object-tools a:visited { |
|
791
|
display: block; |
|
792
|
float: left; |
|
793
|
padding: 3px 12px; |
|
794
|
background: var(--object-tools-bg); |
|
795
|
color: var(--object-tools-fg); |
|
796
|
font-weight: 400; |
|
797
|
font-size: 0.6875rem; |
|
798
|
text-transform: uppercase; |
|
799
|
letter-spacing: 0.5px; |
|
800
|
} |
|
801
|
|
|
802
|
.object-tools a:focus, .object-tools a:hover { |
|
803
|
background-color: var(--object-tools-hover-bg); |
|
804
|
} |
|
805
|
|
|
806
|
.object-tools a:focus{ |
|
807
|
text-decoration: none; |
|
808
|
} |
|
809
|
|
|
810
|
.object-tools a.viewsitelink, .object-tools a.addlink { |
|
811
|
background-repeat: no-repeat; |
|
812
|
background-position: right 7px center; |
|
813
|
padding-right: 26px; |
|
814
|
} |
|
815
|
|
|
816
|
.object-tools a.viewsitelink { |
|
817
|
background-image: url("../img/tooltag-arrowright.bbfb788a849e.svg"); |
|
818
|
} |
|
819
|
|
|
820
|
.object-tools a.addlink { |
|
821
|
background-image: url("../img/tooltag-add.e59d620a9742.svg"); |
|
822
|
} |
|
823
|
|
|
824
|
/* OBJECT HISTORY */ |
|
825
|
|
|
826
|
#change-history table { |
|
827
|
width: 100%; |
|
828
|
} |
|
829
|
|
|
830
|
#change-history table tbody th { |
|
831
|
width: 16em; |
|
832
|
} |
|
833
|
|
|
834
|
#change-history .paginator { |
|
835
|
color: var(--body-quiet-color); |
|
836
|
border-bottom: 1px solid var(--hairline-color); |
|
837
|
background: var(--body-bg); |
|
838
|
overflow: hidden; |
|
839
|
} |
|
840
|
|
|
841
|
/* PAGE STRUCTURE */ |
|
842
|
|
|
843
|
#container { |
|
844
|
position: relative; |
|
845
|
width: 100%; |
|
846
|
min-width: 980px; |
|
847
|
padding: 0; |
|
848
|
display: flex; |
|
849
|
flex-direction: column; |
|
850
|
height: 100%; |
|
851
|
} |
|
852
|
|
|
853
|
#container > .main { |
|
854
|
display: flex; |
|
855
|
flex: 1 0 auto; |
|
856
|
} |
|
857
|
|
|
858
|
.main > .content { |
|
859
|
flex: 1 0; |
|
860
|
max-width: 100%; |
|
861
|
} |
|
862
|
|
|
863
|
.skip-to-content-link { |
|
864
|
position: absolute; |
|
865
|
top: -999px; |
|
866
|
margin: 5px; |
|
867
|
padding: 5px; |
|
868
|
background: var(--body-bg); |
|
869
|
z-index: 1; |
|
870
|
} |
|
871
|
|
|
872
|
.skip-to-content-link:focus { |
|
873
|
left: 0px; |
|
874
|
top: 0px; |
|
875
|
} |
|
876
|
|
|
877
|
#content { |
|
878
|
padding: 20px 40px; |
|
879
|
} |
|
880
|
|
|
881
|
.dashboard #content { |
|
882
|
width: 600px; |
|
883
|
} |
|
884
|
|
|
885
|
#content-main { |
|
886
|
float: left; |
|
887
|
width: 100%; |
|
888
|
} |
|
889
|
|
|
890
|
#content-related { |
|
891
|
float: right; |
|
892
|
width: 260px; |
|
893
|
position: relative; |
|
894
|
margin-right: -300px; |
|
895
|
} |
|
896
|
|
|
897
|
@media (forced-colors: active) { |
|
898
|
#content-related { |
|
899
|
border: 1px solid; |
|
900
|
} |
|
901
|
} |
|
902
|
|
|
903
|
/* COLUMN TYPES */ |
|
904
|
|
|
905
|
.colMS { |
|
906
|
margin-right: 300px; |
|
907
|
} |
|
908
|
|
|
909
|
.colSM { |
|
910
|
margin-left: 300px; |
|
911
|
} |
|
912
|
|
|
913
|
.colSM #content-related { |
|
914
|
float: left; |
|
915
|
margin-right: 0; |
|
916
|
margin-left: -300px; |
|
917
|
} |
|
918
|
|
|
919
|
.colSM #content-main { |
|
920
|
float: right; |
|
921
|
} |
|
922
|
|
|
923
|
.popup .colM { |
|
924
|
width: auto; |
|
925
|
} |
|
926
|
|
|
927
|
/* HEADER */ |
|
928
|
|
|
929
|
#header { |
|
930
|
width: auto; |
|
931
|
height: auto; |
|
932
|
display: flex; |
|
933
|
justify-content: space-between; |
|
934
|
align-items: center; |
|
935
|
padding: 10px 40px; |
|
936
|
background: var(--header-bg); |
|
937
|
color: var(--header-color); |
|
938
|
} |
|
939
|
|
|
940
|
#header a:link, #header a:visited, #logout-form button { |
|
941
|
color: var(--header-link-color); |
|
942
|
} |
|
943
|
|
|
944
|
#header a:focus , #header a:hover { |
|
945
|
text-decoration: underline; |
|
946
|
} |
|
947
|
|
|
948
|
@media (forced-colors: active) { |
|
949
|
#header { |
|
950
|
border-bottom: 1px solid; |
|
951
|
} |
|
952
|
} |
|
953
|
|
|
954
|
#branding { |
|
955
|
display: flex; |
|
956
|
} |
|
957
|
|
|
958
|
#site-name { |
|
959
|
padding: 0; |
|
960
|
margin: 0; |
|
961
|
margin-inline-end: 20px; |
|
962
|
font-weight: 300; |
|
963
|
font-size: 1.5rem; |
|
964
|
color: var(--header-branding-color); |
|
965
|
} |
|
966
|
|
|
967
|
#site-name a:link, #site-name a:visited { |
|
968
|
color: var(--accent); |
|
969
|
} |
|
970
|
|
|
971
|
#branding h2 { |
|
972
|
padding: 0 10px; |
|
973
|
font-size: 0.875rem; |
|
974
|
margin: -8px 0 8px 0; |
|
975
|
font-weight: normal; |
|
976
|
color: var(--header-color); |
|
977
|
} |
|
978
|
|
|
979
|
#branding a:hover { |
|
980
|
text-decoration: none; |
|
981
|
} |
|
982
|
|
|
983
|
#logout-form { |
|
984
|
display: inline; |
|
985
|
} |
|
986
|
|
|
987
|
#logout-form button { |
|
988
|
background: none; |
|
989
|
border: 0; |
|
990
|
cursor: pointer; |
|
991
|
font-family: var(--font-family-primary); |
|
992
|
} |
|
993
|
|
|
994
|
#user-tools { |
|
995
|
float: right; |
|
996
|
margin: 0 0 0 20px; |
|
997
|
text-align: right; |
|
998
|
} |
|
999
|
|
|
1000
|
#user-tools, #logout-form button{ |
|
1001
|
padding: 0; |
|
1002
|
font-weight: 300; |
|
1003
|
font-size: 0.6875rem; |
|
1004
|
letter-spacing: 0.5px; |
|
1005
|
text-transform: uppercase; |
|
1006
|
} |
|
1007
|
|
|
1008
|
#user-tools a, #logout-form button { |
|
1009
|
border-bottom: 1px solid rgba(255, 255, 255, 0.25); |
|
1010
|
} |
|
1011
|
|
|
1012
|
#user-tools a:focus, #user-tools a:hover, |
|
1013
|
#logout-form button:active, #logout-form button:hover { |
|
1014
|
text-decoration: none; |
|
1015
|
border-bottom: 0; |
|
1016
|
} |
|
1017
|
|
|
1018
|
#logout-form button:active, #logout-form button:hover { |
|
1019
|
margin-bottom: 1px; |
|
1020
|
} |
|
1021
|
|
|
1022
|
/* SIDEBAR */ |
|
1023
|
|
|
1024
|
#content-related { |
|
1025
|
background: var(--darkened-bg); |
|
1026
|
} |
|
1027
|
|
|
1028
|
#content-related .module { |
|
1029
|
background: none; |
|
1030
|
} |
|
1031
|
|
|
1032
|
#content-related h3 { |
|
1033
|
color: var(--body-quiet-color); |
|
1034
|
padding: 0 16px; |
|
1035
|
margin: 0 0 16px; |
|
1036
|
} |
|
1037
|
|
|
1038
|
#content-related h4 { |
|
1039
|
font-size: 0.8125rem; |
|
1040
|
} |
|
1041
|
|
|
1042
|
#content-related p { |
|
1043
|
padding-left: 16px; |
|
1044
|
padding-right: 16px; |
|
1045
|
} |
|
1046
|
|
|
1047
|
#content-related .actionlist { |
|
1048
|
padding: 0; |
|
1049
|
margin: 16px; |
|
1050
|
} |
|
1051
|
|
|
1052
|
#content-related .actionlist li { |
|
1053
|
line-height: 1.2; |
|
1054
|
margin-bottom: 10px; |
|
1055
|
padding-left: 18px; |
|
1056
|
} |
|
1057
|
|
|
1058
|
#content-related .module h2 { |
|
1059
|
background: none; |
|
1060
|
padding: 16px; |
|
1061
|
margin-bottom: 16px; |
|
1062
|
border-bottom: 1px solid var(--hairline-color); |
|
1063
|
font-size: 1.125rem; |
|
1064
|
color: var(--body-fg); |
|
1065
|
} |
|
1066
|
|
|
1067
|
.delete-confirmation form input[type="submit"] { |
|
1068
|
background: var(--delete-button-bg); |
|
1069
|
border-radius: 4px; |
|
1070
|
padding: 10px 15px; |
|
1071
|
color: var(--button-fg); |
|
1072
|
} |
|
1073
|
|
|
1074
|
.delete-confirmation form input[type="submit"]:active, |
|
1075
|
.delete-confirmation form input[type="submit"]:focus, |
|
1076
|
.delete-confirmation form input[type="submit"]:hover { |
|
1077
|
background: var(--delete-button-hover-bg); |
|
1078
|
} |
|
1079
|
|
|
1080
|
.delete-confirmation form .cancel-link { |
|
1081
|
display: inline-block; |
|
1082
|
vertical-align: middle; |
|
1083
|
height: 0.9375rem; |
|
1084
|
line-height: 0.9375rem; |
|
1085
|
border-radius: 4px; |
|
1086
|
padding: 10px 15px; |
|
1087
|
color: var(--button-fg); |
|
1088
|
background: var(--close-button-bg); |
|
1089
|
margin: 0 0 0 10px; |
|
1090
|
} |
|
1091
|
|
|
1092
|
.delete-confirmation form .cancel-link:active, |
|
1093
|
.delete-confirmation form .cancel-link:focus, |
|
1094
|
.delete-confirmation form .cancel-link:hover { |
|
1095
|
background: var(--close-button-hover-bg); |
|
1096
|
} |
|
1097
|
|
|
1098
|
/* POPUP */ |
|
1099
|
.popup #content { |
|
1100
|
padding: 20px; |
|
1101
|
} |
|
1102
|
|
|
1103
|
.popup #container { |
|
1104
|
min-width: 0; |
|
1105
|
} |
|
1106
|
|
|
1107
|
.popup #header { |
|
1108
|
padding: 10px 20px; |
|
1109
|
} |
|
1110
|
|
|
1111
|
/* PAGINATOR */ |
|
1112
|
|
|
1113
|
.paginator { |
|
1114
|
display: flex; |
|
1115
|
align-items: center; |
|
1116
|
gap: 4px; |
|
1117
|
font-size: 0.8125rem; |
|
1118
|
padding-top: 10px; |
|
1119
|
padding-bottom: 10px; |
|
1120
|
line-height: 22px; |
|
1121
|
margin: 0; |
|
1122
|
border-top: 1px solid var(--hairline-color); |
|
1123
|
width: 100%; |
|
1124
|
box-sizing: border-box; |
|
1125
|
} |
|
1126
|
|
|
1127
|
.paginator a:link, .paginator a:visited { |
|
1128
|
padding: 2px 6px; |
|
1129
|
background: var(--button-bg); |
|
1130
|
text-decoration: none; |
|
1131
|
color: var(--button-fg); |
|
1132
|
} |
|
1133
|
|
|
1134
|
.paginator a.showall { |
|
1135
|
border: none; |
|
1136
|
background: none; |
|
1137
|
color: var(--link-fg); |
|
1138
|
} |
|
1139
|
|
|
1140
|
.paginator a.showall:focus, .paginator a.showall:hover { |
|
1141
|
background: none; |
|
1142
|
color: var(--link-hover-color); |
|
1143
|
} |
|
1144
|
|
|
1145
|
.paginator .end { |
|
1146
|
margin-right: 6px; |
|
1147
|
} |
|
1148
|
|
|
1149
|
.paginator .this-page { |
|
1150
|
padding: 2px 6px; |
|
1151
|
font-weight: bold; |
|
1152
|
font-size: 0.8125rem; |
|
1153
|
vertical-align: top; |
|
1154
|
} |
|
1155
|
|
|
1156
|
.paginator a:focus, .paginator a:hover { |
|
1157
|
color: white; |
|
1158
|
background: var(--link-hover-color); |
|
1159
|
} |
|
1160
|
|
|
1161
|
.paginator input { |
|
1162
|
margin-left: auto; |
|
1163
|
} |
|
1164
|
|
|
1165
|
.base-svgs { |
|
1166
|
display: none; |
|
1167
|
} |
|
1168
|
|
|
1169
|
.visually-hidden { |
|
1170
|
position: absolute; |
|
1171
|
width: 1px; |
|
1172
|
height: 1px; |
|
1173
|
padding: 0; |
|
1174
|
overflow: hidden; |
|
1175
|
clip: rect(0,0,0,0); |
|
1176
|
white-space: nowrap; |
|
1177
|
border: 0; |
|
1178
|
color: var(--body-fg); |
|
1179
|
background-color: var(--body-bg); |
|
1180
|
} |
|
1181
|
|