FossilRepo

fossilrepo / assets / admin / css / responsive.80b7f3c4f68f.css
Blame History Raw 905 lines
1
/* Tablets */
2
3
input[type="submit"], button {
4
-webkit-appearance: none;
5
appearance: none;
6
}
7
8
@media (max-width: 1024px) {
9
/* Basic */
10
11
html {
12
-webkit-text-size-adjust: 100%;
13
}
14
15
td, th {
16
padding: 10px;
17
font-size: 0.875rem;
18
}
19
20
.small {
21
font-size: 0.75rem;
22
}
23
24
/* Layout */
25
26
#container {
27
min-width: 0;
28
}
29
30
#content {
31
padding: 15px 20px 20px;
32
}
33
34
div.breadcrumbs {
35
padding: 10px 30px;
36
}
37
38
/* Header */
39
40
#header {
41
flex-direction: column;
42
padding: 15px 30px;
43
justify-content: flex-start;
44
}
45
46
#site-name {
47
margin: 0 0 8px;
48
line-height: 1.2;
49
}
50
51
#user-tools {
52
margin: 0;
53
font-weight: 400;
54
line-height: 1.85;
55
text-align: left;
56
}
57
58
#user-tools a {
59
display: inline-block;
60
line-height: 1.4;
61
}
62
63
/* Dashboard */
64
65
.dashboard #content {
66
width: auto;
67
}
68
69
#content-related {
70
margin-right: -290px;
71
}
72
73
.colSM #content-related {
74
margin-left: -290px;
75
}
76
77
.colMS {
78
margin-right: 290px;
79
}
80
81
.colSM {
82
margin-left: 290px;
83
}
84
85
.dashboard .module table td a {
86
padding-right: 0;
87
}
88
89
td .changelink, td .addlink {
90
font-size: 0.8125rem;
91
}
92
93
/* Changelist */
94
95
#toolbar {
96
border: none;
97
padding: 15px;
98
}
99
100
#changelist-search > div {
101
display: flex;
102
flex-wrap: nowrap;
103
max-width: 480px;
104
}
105
106
#changelist-search label {
107
line-height: 1.375rem;
108
}
109
110
#toolbar form #searchbar {
111
flex: 1 0 auto;
112
width: 0;
113
height: 1.375rem;
114
margin: 0 10px 0 6px;
115
}
116
117
#toolbar form input[type=submit] {
118
flex: 0 1 auto;
119
}
120
121
#changelist-search .quiet {
122
width: 0;
123
flex: 1 0 auto;
124
margin: 5px 0 0 25px;
125
}
126
127
#changelist .actions {
128
display: flex;
129
flex-wrap: wrap;
130
padding: 15px 0;
131
}
132
133
#changelist .actions label {
134
display: flex;
135
}
136
137
#changelist .actions select {
138
background: var(--body-bg);
139
}
140
141
#changelist .actions .button {
142
min-width: 48px;
143
margin: 0 10px;
144
}
145
146
#changelist .actions span.all,
147
#changelist .actions span.clear,
148
#changelist .actions span.question,
149
#changelist .actions span.action-counter {
150
font-size: 0.6875rem;
151
margin: 0 10px 0 0;
152
}
153
154
#changelist-filter {
155
flex-basis: 200px;
156
}
157
158
.change-list .filtered .results,
159
.change-list .filtered .paginator,
160
.filtered #toolbar,
161
.filtered .actions,
162
163
#changelist .paginator {
164
border-top-color: var(--hairline-color); /* XXX Is this used at all? */
165
}
166
167
#changelist .results + .paginator {
168
border-top: none;
169
}
170
171
/* Forms */
172
173
label {
174
font-size: 1rem;
175
}
176
177
/*
178
Minifiers remove the default (text) "type" attribute from "input" HTML
179
tags. Add input:not([type]) to make the CSS stylesheet work the same.
180
*/
181
.form-row input:not([type]),
182
.form-row input[type=text],
183
.form-row input[type=password],
184
.form-row input[type=email],
185
.form-row input[type=url],
186
.form-row input[type=tel],
187
.form-row input[type=number],
188
.form-row textarea,
189
.form-row select,
190
.form-row .vTextField {
191
box-sizing: border-box;
192
margin: 0;
193
padding: 6px 8px;
194
min-height: 2.25rem;
195
font-size: 1rem;
196
}
197
198
.form-row select {
199
height: 2.25rem;
200
}
201
202
.form-row select[multiple] {
203
height: auto;
204
min-height: 0;
205
}
206
207
fieldset .fieldBox + .fieldBox {
208
margin-top: 10px;
209
padding-top: 10px;
210
border-top: 1px solid var(--hairline-color);
211
}
212
213
textarea {
214
max-width: 100%;
215
max-height: 120px;
216
}
217
218
.aligned label {
219
padding-top: 6px;
220
}
221
222
.aligned .related-lookup,
223
.aligned .datetimeshortcuts,
224
.aligned .related-lookup + strong {
225
align-self: center;
226
margin-left: 15px;
227
}
228
229
form .aligned div.radiolist {
230
margin-left: 2px;
231
}
232
233
.submit-row {
234
padding: 8px;
235
}
236
237
.submit-row a.deletelink {
238
padding: 10px 7px;
239
}
240
241
.button, input[type=submit], input[type=button], .submit-row input, a.button {
242
padding: 7px;
243
}
244
245
/* Selector */
246
247
.selector {
248
display: flex;
249
width: 100%;
250
}
251
252
.selector .selector-filter {
253
display: flex;
254
align-items: center;
255
}
256
257
.selector .selector-filter input {
258
width: 100%;
259
min-height: 0;
260
flex: 1 1;
261
}
262
263
.selector-available, .selector-chosen {
264
width: auto;
265
flex: 1 1;
266
display: flex;
267
flex-direction: column;
268
}
269
270
.selector select {
271
width: 100%;
272
flex: 1 0 auto;
273
margin-bottom: 5px;
274
}
275
276
.selector-chooseall, .selector-clearall {
277
align-self: center;
278
}
279
280
.stacked {
281
flex-direction: column;
282
max-width: 480px;
283
}
284
285
.stacked > * {
286
flex: 0 1 auto;
287
}
288
289
.stacked select {
290
margin-bottom: 0;
291
}
292
293
.stacked .selector-available, .stacked .selector-chosen {
294
width: auto;
295
}
296
297
.stacked ul.selector-chooser {
298
padding: 0 2px;
299
transform: none;
300
}
301
302
.stacked .selector-chooser li {
303
padding: 3px;
304
}
305
306
.help-tooltip, .selector .help-icon {
307
display: none;
308
}
309
310
.datetime input {
311
width: 50%;
312
max-width: 120px;
313
}
314
315
.datetime span {
316
font-size: 0.8125rem;
317
}
318
319
.datetime .timezonewarning {
320
display: block;
321
font-size: 0.6875rem;
322
color: var(--body-quiet-color);
323
}
324
325
.datetimeshortcuts {
326
color: var(--border-color); /* XXX Redundant, .datetime span also sets #ccc */
327
}
328
329
.form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
330
width: 75%;
331
}
332
333
.inline-group {
334
overflow: auto;
335
}
336
337
/* Messages */
338
339
ul.messagelist li {
340
padding-left: 55px;
341
background-position: 30px 12px;
342
}
343
344
ul.messagelist li.error {
345
background-position: 30px 12px;
346
}
347
348
ul.messagelist li.warning {
349
background-position: 30px 14px;
350
}
351
352
/* Login */
353
354
.login #header {
355
padding: 15px 20px;
356
}
357
358
.login #site-name {
359
margin: 0;
360
}
361
362
/* GIS */
363
364
div.olMap {
365
max-width: calc(100vw - 30px);
366
max-height: 300px;
367
}
368
369
.olMap + .clear_features {
370
display: block;
371
margin-top: 10px;
372
}
373
374
/* Docs */
375
376
.module table.xfull {
377
width: 100%;
378
}
379
380
pre.literal-block {
381
overflow: auto;
382
}
383
}
384
385
/* Mobile */
386
387
@media (max-width: 767px) {
388
/* Layout */
389
390
#header, #content {
391
padding: 15px;
392
}
393
394
div.breadcrumbs {
395
padding: 10px 15px;
396
}
397
398
/* Dashboard */
399
400
.colMS, .colSM {
401
margin: 0;
402
}
403
404
#content-related, .colSM #content-related {
405
width: 100%;
406
margin: 0;
407
}
408
409
#content-related .module {
410
margin-bottom: 0;
411
}
412
413
#content-related .module h2 {
414
padding: 10px 15px;
415
font-size: 1rem;
416
}
417
418
/* Changelist */
419
420
#changelist {
421
align-items: stretch;
422
flex-direction: column;
423
}
424
425
#toolbar {
426
padding: 10px;
427
}
428
429
#changelist-filter {
430
margin-left: 0;
431
}
432
433
#changelist .actions label {
434
flex: 1 1;
435
}
436
437
#changelist .actions select {
438
flex: 1 0;
439
width: 100%;
440
}
441
442
#changelist .actions span {
443
flex: 1 0 100%;
444
}
445
446
#changelist-filter {
447
position: static;
448
width: auto;
449
margin-top: 30px;
450
}
451
452
.object-tools {
453
float: none;
454
margin: 0 0 15px;
455
padding: 0;
456
overflow: hidden;
457
}
458
459
.object-tools li {
460
height: auto;
461
margin-left: 0;
462
}
463
464
.object-tools li + li {
465
margin-left: 15px;
466
}
467
468
/* Forms */
469
470
.form-row {
471
padding: 15px 0;
472
}
473
474
.aligned .form-row,
475
.aligned .form-row > div {
476
max-width: 100vw;
477
}
478
479
.aligned .form-row > div {
480
width: calc(100vw - 30px);
481
}
482
483
.flex-container {
484
flex-flow: column;
485
}
486
487
.flex-container.checkbox-row {
488
flex-flow: row;
489
}
490
491
textarea {
492
max-width: none;
493
}
494
495
.vURLField {
496
width: auto;
497
}
498
499
fieldset .fieldBox + .fieldBox {
500
margin-top: 15px;
501
padding-top: 15px;
502
}
503
504
.aligned label {
505
width: 100%;
506
min-width: auto;
507
padding: 0 0 10px;
508
}
509
510
.aligned label:after {
511
max-height: 0;
512
}
513
514
.aligned .form-row input,
515
.aligned .form-row select,
516
.aligned .form-row textarea {
517
flex: 1 1 auto;
518
max-width: 100%;
519
}
520
521
.aligned .checkbox-row input {
522
flex: 0 1 auto;
523
margin: 0;
524
}
525
526
.aligned .vCheckboxLabel {
527
flex: 1 0;
528
padding: 1px 0 0 5px;
529
}
530
531
.aligned label + p,
532
.aligned label + div.help,
533
.aligned label + div.readonly {
534
padding: 0;
535
margin-left: 0;
536
}
537
538
.aligned p.file-upload {
539
font-size: 0.8125rem;
540
}
541
542
span.clearable-file-input {
543
margin-left: 15px;
544
}
545
546
span.clearable-file-input label {
547
font-size: 0.8125rem;
548
padding-bottom: 0;
549
}
550
551
.aligned .timezonewarning {
552
flex: 1 0 100%;
553
margin-top: 5px;
554
}
555
556
form .aligned .form-row div.help {
557
width: 100%;
558
margin: 5px 0 0;
559
padding: 0;
560
}
561
562
form .aligned ul,
563
form .aligned ul.errorlist {
564
margin-left: 0;
565
padding-left: 0;
566
}
567
568
form .aligned div.radiolist {
569
margin-top: 5px;
570
margin-right: 15px;
571
margin-bottom: -3px;
572
}
573
574
form .aligned div.radiolist:not(.inline) div + div {
575
margin-top: 5px;
576
}
577
578
/* Related widget */
579
580
.related-widget-wrapper {
581
width: 100%;
582
display: flex;
583
align-items: flex-start;
584
}
585
586
.related-widget-wrapper .selector {
587
order: 1;
588
flex: 1 0 auto;
589
}
590
591
.related-widget-wrapper > a {
592
order: 2;
593
}
594
595
.related-widget-wrapper .radiolist ~ a {
596
align-self: flex-end;
597
}
598
599
.related-widget-wrapper > select ~ a {
600
align-self: center;
601
}
602
603
/* Selector */
604
605
.selector {
606
flex-direction: column;
607
gap: 10px 0;
608
}
609
610
.selector-available, .selector-chosen {
611
flex: 1 1 auto;
612
}
613
614
.selector select {
615
max-height: 96px;
616
}
617
618
.selector ul.selector-chooser {
619
display: flex;
620
width: 60px;
621
height: 30px;
622
padding: 0 2px;
623
transform: none;
624
}
625
626
.selector ul.selector-chooser li {
627
float: left;
628
}
629
630
.selector-remove {
631
background-position: 0 0;
632
}
633
634
:enabled.selector-remove:focus, :enabled.selector-remove:hover {
635
background-position: 0 -24px;
636
}
637
638
.selector-add {
639
background-position: 0 -48px;
640
}
641
642
:enabled.selector-add:focus, :enabled.selector-add:hover {
643
background-position: 0 -72px;
644
}
645
646
/* Inlines */
647
648
.inline-group[data-inline-type="stacked"] .inline-related {
649
border: 1px solid var(--hairline-color);
650
border-radius: 4px;
651
margin-top: 15px;
652
overflow: auto;
653
}
654
655
.inline-group[data-inline-type="stacked"] .inline-related > * {
656
box-sizing: border-box;
657
}
658
659
.inline-group[data-inline-type="stacked"] .inline-related .module {
660
padding: 0 10px;
661
}
662
663
.inline-group[data-inline-type="stacked"] .inline-related .module .form-row {
664
border-top: 1px solid var(--hairline-color);
665
border-bottom: none;
666
}
667
668
.inline-group[data-inline-type="stacked"] .inline-related .module .form-row:first-child {
669
border-top: none;
670
}
671
672
.inline-group[data-inline-type="stacked"] .inline-related h3 {
673
padding: 10px;
674
border-top-width: 0;
675
border-bottom-width: 2px;
676
display: flex;
677
flex-wrap: wrap;
678
align-items: center;
679
}
680
681
.inline-group[data-inline-type="stacked"] .inline-related h3 .inline_label {
682
margin-right: auto;
683
}
684
685
.inline-group[data-inline-type="stacked"] .inline-related h3 span.delete {
686
float: none;
687
flex: 1 1 100%;
688
margin-top: 5px;
689
}
690
691
.inline-group[data-inline-type="stacked"] .aligned .form-row > div:not([class]) {
692
width: 100%;
693
}
694
695
.inline-group[data-inline-type="stacked"] .aligned label {
696
width: 100%;
697
}
698
699
.inline-group[data-inline-type="stacked"] div.add-row {
700
margin-top: 15px;
701
border: 1px solid var(--hairline-color);
702
border-radius: 4px;
703
}
704
705
.inline-group div.add-row,
706
.inline-group .tabular tr.add-row td {
707
padding: 0;
708
}
709
710
.inline-group div.add-row a,
711
.inline-group .tabular tr.add-row td a {
712
display: block;
713
padding: 8px 10px 8px 26px;
714
background-position: 8px 9px;
715
}
716
717
/* Submit row */
718
719
.submit-row {
720
padding: 10px;
721
margin: 0 0 15px;
722
flex-direction: column;
723
gap: 8px;
724
}
725
726
.submit-row input, .submit-row input.default, .submit-row a {
727
text-align: center;
728
}
729
730
.submit-row a.closelink {
731
padding: 10px 0;
732
text-align: center;
733
}
734
735
.submit-row a.deletelink {
736
margin: 0;
737
}
738
739
/* Messages */
740
741
ul.messagelist li {
742
padding-left: 40px;
743
background-position: 15px 12px;
744
}
745
746
ul.messagelist li.error {
747
background-position: 15px 12px;
748
}
749
750
ul.messagelist li.warning {
751
background-position: 15px 14px;
752
}
753
754
/* Paginator */
755
756
.paginator .this-page, .paginator a:link, .paginator a:visited {
757
padding: 4px 10px;
758
}
759
760
/* Login */
761
762
body.login {
763
padding: 0 15px;
764
}
765
766
.login #container {
767
width: auto;
768
max-width: 480px;
769
margin: 50px auto;
770
}
771
772
.login #header,
773
.login #content {
774
padding: 15px;
775
}
776
777
.login #content-main {
778
float: none;
779
}
780
781
.login .form-row {
782
padding: 0;
783
}
784
785
.login .form-row + .form-row {
786
margin-top: 15px;
787
}
788
789
.login .form-row label {
790
margin: 0 0 5px;
791
line-height: 1.2;
792
}
793
794
.login .submit-row {
795
padding: 15px 0 0;
796
}
797
798
.login br {
799
display: none;
800
}
801
802
.login .submit-row input {
803
margin: 0;
804
text-transform: uppercase;
805
}
806
807
.errornote {
808
margin: 0 0 20px;
809
padding: 8px 12px;
810
font-size: 0.8125rem;
811
}
812
813
/* Calendar and clock */
814
815
.calendarbox, .clockbox {
816
position: fixed !important;
817
top: 50% !important;
818
left: 50% !important;
819
transform: translate(-50%, -50%);
820
margin: 0;
821
border: none;
822
overflow: visible;
823
}
824
825
.calendarbox:before, .clockbox:before {
826
content: '';
827
position: fixed;
828
top: 50%;
829
left: 50%;
830
width: 100vw;
831
height: 100vh;
832
background: rgba(0, 0, 0, 0.75);
833
transform: translate(-50%, -50%);
834
}
835
836
.calendarbox > *, .clockbox > * {
837
position: relative;
838
z-index: 1;
839
}
840
841
.calendarbox > div:first-child {
842
z-index: 2;
843
}
844
845
.calendarbox .calendar, .clockbox h2 {
846
border-radius: 4px 4px 0 0;
847
overflow: hidden;
848
}
849
850
.calendarbox .calendar-cancel, .clockbox .calendar-cancel {
851
border-radius: 0 0 4px 4px;
852
overflow: hidden;
853
}
854
855
.calendar-shortcuts {
856
padding: 10px 0;
857
font-size: 0.75rem;
858
line-height: 0.75rem;
859
}
860
861
.calendar-shortcuts a {
862
margin: 0 4px;
863
}
864
865
.timelist a {
866
background: var(--body-bg);
867
padding: 4px;
868
}
869
870
.calendar-cancel {
871
padding: 8px 10px;
872
}
873
874
.clockbox h2 {
875
padding: 8px 15px;
876
}
877
878
.calendar caption {
879
padding: 10px;
880
}
881
882
.calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
883
z-index: 1;
884
top: 10px;
885
}
886
887
/* History */
888
889
table#change-history tbody th, table#change-history tbody td {
890
font-size: 0.8125rem;
891
word-break: break-word;
892
}
893
894
table#change-history tbody th {
895
width: auto;
896
}
897
898
/* Docs */
899
900
table.model tbody th, table.model tbody td {
901
font-size: 0.8125rem;
902
word-break: break-word;
903
}
904
}
905

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button