@punkfairie/98.css 2.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/.devenv/tasks.db-shm +0 -0
  2. package/dist/98.css +1 -1
  3. package/dist/98.css.map +1 -1
  4. package/package.json +1 -1
  5. package/style.css +945 -943
package/style.css CHANGED
@@ -4,7 +4,8 @@
4
4
  * https://github.com/jdan/98.css/blob/main/LICENSE
5
5
  */
6
6
 
7
- :root {
7
+ @layer window {
8
+ :root {
8
9
  /* Color */
9
10
  --active-border: rgb(192 192 192);
10
11
  --active-title: rgb(10 36 106);
@@ -107,946 +108,947 @@
107
108
  inset 1px 1px var(--button-hilight),
108
109
  inset -2px 0 var(--button-shadow),
109
110
  inset 2px 2px var(--button-light);
110
- }
111
-
112
- @font-face {
113
- font-family: "Pixelated MS Sans Serif";
114
- src: url("fonts/converted/ms_sans_serif.woff") format("woff");
115
- src: url("fonts/converted/ms_sans_serif.woff2") format("woff2");
116
- font-weight: normal;
117
- font-style: normal;
118
- }
119
-
120
- @font-face {
121
- font-family: "Pixelated MS Sans Serif";
122
- src: url("fonts/converted/ms_sans_serif_bold.woff") format("woff");
123
- src: url("fonts/converted/ms_sans_serif_bold.woff2") format("woff2");
124
- font-weight: bold;
125
- font-style: normal;
126
- }
127
-
128
- body {
129
- font-family: Arial, sans-serif;
130
- font-size: 12px;
131
- color: var(--window-text);
132
- }
133
-
134
- button,
135
- .button,
136
- label,
137
- input,
138
- legend,
139
- textarea,
140
- select,
141
- option,
142
- table,
143
- ul.tree-view,
144
- .window,
145
- .title-bar,
146
- li[role=tab] {
147
- font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
148
- -webkit-font-smoothing: none;
149
- font-size: 11px;
150
- }
151
-
152
- h1 {
153
- font-size: 5rem;
154
- }
155
-
156
- h2 {
157
- font-size: 2.5rem;
158
- }
159
-
160
- h3 {
161
- font-size: 2rem;
162
- }
163
-
164
- h4 {
165
- font-size: 1.5rem;
166
- }
167
-
168
- u {
169
- text-decoration: none;
170
- /*noinspection CssNonIntegerLengthInPixels*/
171
- border-bottom: 0.5px solid var(--window-text);
172
- }
173
-
174
- button,
175
- .button,
176
- input[type="submit"],
177
- input[type="reset"] {
178
- box-sizing: border-box;
179
- border: none;
180
- color: transparent;
181
- text-shadow: 0 0 var(--window-text);
182
- background: var(--button-face);
183
- box-shadow: var(--border-raised-outer), var(--border-raised-inner);
184
- border-radius: 0;
185
-
186
- min-width: 75px;
187
- min-height: 23px;
188
- padding: 0 12px;
189
- }
190
-
191
- button.default,
192
- .button.default,
193
- input[type="submit"].default,
194
- input[type="reset"].default {
195
- box-shadow: inset 0 0 0 1px var(--button-text), var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);
196
- }
197
-
198
- .vertical-bar {
199
- width: 4px;
200
- height: 20px;
201
- background: #c0c0c0;
202
- box-shadow: var(--border-raised-outer), var(--border-raised-inner);
203
- }
204
-
205
- button:not(:disabled):active,
206
- .button:not(:disabled):active,
207
- input[type="submit"]:not(:disabled):active,
208
- input[type="reset"]:not(:disabled):active {
209
- box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
210
- text-shadow: 1px 1px var(--window-text);
211
- }
212
-
213
- button.default:not(:disabled):active,
214
- .button.default:not(:disabled):active,
215
- input[type="submit"].default:not(:disabled):active,
216
- input[type="reset"].default:not(:disabled):active {
217
- box-shadow: var(--default-button-border-sunken-outer), var(--default-button-border-sunken-inner);
218
- }
219
-
220
- /* @formatter:off */
221
- @media (not(hover)) {
222
- button:not(:disabled):hover,
223
- .button:not(:disabled):hover,
224
- input[type="submit"]:not(:disabled):hover,
225
- input[type="reset"]:not(:disabled):hover {
226
- /*noinspection CssUnknownProperty*/
227
- box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
228
- }
229
- }
230
- /* @formatter:on */
231
-
232
- button:focus,
233
- .button:focus,
234
- input[type="submit"]:focus,
235
- input[type="reset"]:focus {
236
- outline: 1px dotted var(--window-frame);
237
- outline-offset: -4px;
238
- }
239
-
240
- button::-moz-focus-inner,
241
- .button::-moz-focus-inner,
242
- input[type="submit"]::-moz-focus-inner,
243
- input[type="reset"]::-moz-focus-inner {
244
- border: 0;
245
- }
246
-
247
- :disabled,
248
- :disabled + label,
249
- input[readonly],
250
- input[readonly] + label {
251
- color: var(--button-shadow);
252
- }
253
-
254
- button:disabled,
255
- .button:disabled,
256
- input[type="submit"]:disabled,
257
- input[type="reset"]:disabled,
258
- :disabled + label {
259
- text-shadow: 1px 1px 0 var(--button-hilight);
260
- }
261
-
262
- .window {
263
- box-shadow: var(--border-window-outer), var(--border-window-inner);
264
- background: var(--button-face);
265
- padding: 3px;
266
- }
267
-
268
- .title-bar {
269
- background: linear-gradient(
270
- 90deg,
271
- var(--active-title),
272
- var(--gradient-active-title)
273
- );
274
- padding: 3px 2px 3px 3px;
275
- display: flex;
276
- justify-content: space-between;
277
- align-items: center;
278
- }
279
-
280
- .title-bar.inactive {
281
- background: linear-gradient(
282
- 90deg,
283
- var(--inactive-title),
284
- var(--gradient-inactive-title)
285
- );
286
- }
287
-
288
- .title-bar-text {
289
- font-weight: bold;
290
- color: white;
291
- letter-spacing: 0;
292
- margin-right: 24px;
293
- }
294
-
295
- .title-bar-controls {
296
- display: flex;
297
- }
298
-
299
- .title-bar-controls button {
300
- padding: 0;
301
- display: block;
302
- min-width: 16px;
303
- min-height: 14px;
304
- }
305
-
306
- .title-bar-controls button:active {
307
- padding: 0;
308
- }
309
-
310
- .title-bar-controls button:focus {
311
- outline: none;
312
- }
313
-
314
- .title-bar-controls button[aria-label="Minimize"],
315
- .title-bar-controls button.minimize {
316
- background-image: svg-load("./icon/minimize.svg");
317
- background-repeat: no-repeat;
318
- background-position: bottom 3px left 4px;
319
- }
320
-
321
- .title-bar-controls button[aria-label="Maximize"],
322
- .title-bar-controls button.maximize {
323
- background-image: svg-load("./icon/maximize.svg");
324
- background-repeat: no-repeat;
325
- background-position: top 2px left 3px;
326
- }
327
-
328
- .title-bar-controls button[aria-label="Maximize"]:disabled,
329
- .title-bar-controls button.maximize:disabled {
330
- background-image: svg-load("./icon/maximize-disabled.svg");
331
- background-repeat: no-repeat;
332
- background-position: top 2px left 3px;
333
- }
334
-
335
- .title-bar-controls button[aria-label="Restore"],
336
- .title-bar-controls button.restore {
337
- background-image: svg-load("./icon/restore.svg");
338
- background-repeat: no-repeat;
339
- background-position: top 2px left 3px;
340
- }
341
-
342
- .title-bar-controls button[aria-label="Help"],
343
- .title-bar-controls button.help {
344
- background-image: svg-load("./icon/help.svg");
345
- background-repeat: no-repeat;
346
- background-position: top 2px left 5px;
347
- }
348
-
349
- .title-bar-controls button[aria-label="Close"],
350
- .title-bar-controls button.close {
351
- margin-left: 2px;
352
- background-image: svg-load("./icon/close.svg");
353
- background-repeat: no-repeat;
354
- background-position: top 3px left 4px;
355
- }
356
-
357
- .status-bar {
358
- margin: 0 1px;
359
- display: flex;
360
- gap: 1px;
361
- }
362
-
363
- .status-bar-field {
364
- box-shadow: var(--border-status-field);
365
- flex-grow: 1;
366
- padding: 2px 3px;
367
- margin: 0;
368
- }
369
-
370
- .window-body {
371
- margin: var(--element-spacing);
372
- }
373
-
374
- fieldset {
375
- /*noinspection CssInvalidFunction*/
376
- border-image: svg-load("./icon/groupbox-border.svg");
377
- padding: calc(2 * var(--border-width) + var(--element-spacing));
378
- padding-block-start: var(--element-spacing);
379
- margin: 0;
380
- }
381
-
382
- legend {
383
- background: var(--button-face);
384
- }
385
-
386
- .field-row {
387
- display: flex;
388
- align-items: center;
389
- }
390
-
391
- [class^="field-row"] + [class^="field-row"] {
392
- margin-top: var(--grouped-element-spacing);
393
- }
394
-
395
- .field-row > * + * {
396
- margin-left: var(--grouped-element-spacing);
397
- }
398
-
399
- .field-row-stacked {
400
- display: flex;
401
- flex-direction: column;
402
- }
403
-
404
- .field-row-stacked * + * {
405
- margin-top: var(--grouped-element-spacing);
406
- }
407
-
408
- label {
409
- display: inline-flex;
410
- align-items: center;
411
- user-select: none;
412
- }
413
-
414
- input[type="radio"],
415
- input[type="checkbox"] {
416
- appearance: none;
417
- -webkit-appearance: none;
418
- -moz-appearance: none;
419
- margin: 0;
420
- background: 0;
421
- position: fixed;
422
- opacity: 0;
423
- border: none;
424
- }
425
-
426
- input[type="radio"] + label,
427
- input[type="checkbox"] + label {
428
- line-height: 13px;
429
- }
430
-
431
- input[type="radio"] + label {
432
- position: relative;
433
- margin-left: var(--radio-total-width);
434
- }
435
-
436
- input[type="radio"] + label::before {
437
- content: "";
438
- position: absolute;
439
- top: 0;
440
- left: calc(-1 * (var(--radio-total-width-precalc)));
441
- display: inline-block;
442
- width: var(--radio-width);
443
- height: var(--radio-width);
444
- margin-right: var(--radio-label-spacing);
445
- background: svg-load("./icon/radio-border.svg");
446
- }
447
-
448
- input[type="radio"]:active + label::before {
449
- background: svg-load("./icon/radio-border-disabled.svg");
450
- }
451
-
452
- input[type="radio"]:checked + label::after {
453
- content: "";
454
- display: block;
455
- width: var(--radio-dot-width);
456
- height: var(--radio-dot-width);
457
- top: var(--radio-dot-top);
458
- left: var(--radio-dot-left);
459
- position: absolute;
460
- background: svg-load("./icon/radio-dot.svg");
461
- }
462
-
463
- input[type="radio"]:focus + label,
464
- input[type="checkbox"]:focus + label {
465
- outline: 1px dotted var(--window-frame);
466
- }
467
-
468
- input[type="radio"][disabled] + label::before {
469
- background: svg-load("./icon/radio-border-disabled.svg");
470
- }
471
-
472
- input[type="radio"][disabled]:checked + label::after {
473
- background: svg-load("./icon/radio-dot-disabled.svg");
474
- }
475
-
476
- input[type="checkbox"] + label {
477
- position: relative;
478
- margin-left: var(--checkbox-total-width);
479
- }
480
-
481
- input[type="checkbox"] + label::before {
482
- content: "";
483
- position: absolute;
484
- left: calc(-1 * (var(--checkbox-total-width-precalc)));
485
- display: inline-block;
486
- width: var(--checkbox-width);
487
- height: var(--checkbox-width);
488
- background: var(--window);
489
- box-shadow: var(--border-field);
490
- margin-right: var(--radio-label-spacing);
491
- }
492
-
493
- input[type="checkbox"]:active + label::before {
494
- background: var(--button-face);
495
- }
496
-
497
- input[type="checkbox"]:checked + label::after {
498
- content: "";
499
- display: block;
500
- width: var(--checkmark-width);
501
- height: var(--checkmark-width);
502
- position: absolute;
503
- left: calc(
504
- -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
505
- );
506
- background: svg-load("./icon/checkmark.svg");
507
- }
508
-
509
- input[type="checkbox"][disabled] + label::before {
510
- background: var(--button-face);
511
- }
512
-
513
- input[type="checkbox"][disabled]:checked + label::after {
514
- background: svg-load("./icon/checkmark-disabled.svg");
515
- }
516
-
517
- input[type="text"],
518
- input[type="password"],
519
- input[type="email"],
520
- input[type="url"],
521
- input[type="tel"],
522
- input[type="number"],
523
- input[type="search"],
524
- select,
525
- textarea {
526
- padding: 3px 4px;
527
- border: none;
528
- box-shadow: var(--border-field);
529
- background-color: var(--window);
530
- box-sizing: border-box;
531
- -webkit-appearance: none;
532
- -moz-appearance: none;
533
- appearance: none;
534
- border-radius: 0;
535
- }
536
-
537
- input[type="text"],
538
- input[type="password"],
539
- input[type="email"],
540
- input[type="url"],
541
- input[type="tel"],
542
- input[type="search"],
543
- select {
544
- height: 21px;
545
- }
546
-
547
- input[type="number"] {
548
- /* need this 1 pixel to fit the spinner controls in box */
549
- height: 22px;
550
- }
551
-
552
- /* clears the ‘X’ from Internet Explorer */
553
- input[type=search]::-ms-clear {
554
- display: none;
555
- width: 0;
556
- height: 0;
557
- }
558
-
559
- input[type=search]::-ms-reveal {
560
- display: none;
561
- width: 0;
562
- height: 0;
563
- }
564
-
565
- /* clears the ‘X’ from Chrome */
566
- input[type="search"]::-webkit-search-decoration,
567
- input[type="search"]::-webkit-search-cancel-button,
568
- input[type="search"]::-webkit-search-results-button,
569
- input[type="search"]::-webkit-search-results-decoration {
570
- display: none;
571
- }
572
-
573
- input[type="text"],
574
- input[type="password"],
575
- input[type="email"],
576
- input[type="url"],
577
- input[type="tel"],
578
- input[type="number"],
579
- input[type="search"] {
580
- /* For some reason descenders are getting cut off without this */
581
- line-height: 2;
582
- }
583
-
584
- input[type="email"]:disabled,
585
- input[type="url"]:disabled,
586
- input[type="tel"]:disabled,
587
- input[type="password"]:disabled,
588
- input[type="text"]:disabled,
589
- input[type="number"]:disabled,
590
- input[type="search"]:disabled,
591
- input[type="email"]:read-only,
592
- input[type="url"]:read-only,
593
- input[type="tel"]:read-only,
594
- input[type="password"]:read-only,
595
- input[type="text"]:read-only,
596
- input[type="number"]:read-only,
597
- input[type="search"]:read-only,
598
- textarea:disabled {
599
- background-color: var(--button-face);
600
- }
601
-
602
- select {
603
- appearance: none;
604
- -webkit-appearance: none;
605
- -moz-appearance: none;
606
- position: relative;
607
- padding-right: 32px;
608
- background-image: svg-load("./icon/button-down.svg");
609
- background-position: top 2px right 2px;
610
- background-repeat: no-repeat;
611
- border-radius: 0;
612
- }
613
-
614
- select:focus,
615
- input[type="text"]:focus,
616
- input[type="password"]:focus,
617
- input[type="email"]:focus,
618
- input[type="url"]:focus,
619
- input[type="tel"]:focus,
620
- input[type="number"]:focus,
621
- input[type="search"]:focus,
622
- textarea:focus {
623
- outline: none;
624
- }
625
-
626
- input[type="range"] {
627
- -webkit-appearance: none;
628
- width: 100%;
629
- background: transparent;
630
- }
631
-
632
- input[type="range"]:focus {
633
- outline: none;
634
- }
635
-
636
- input[type="range"]::-webkit-slider-thumb {
637
- -webkit-appearance: none;
638
- height: 21px;
639
- width: 11px;
640
- background: svg-load("./icon/indicator-horizontal.svg");
641
- transform: translateY(-8px);
642
- box-shadow: none;
643
- border: none;
644
- }
645
-
646
- input[type="range"].has-box-indicator::-webkit-slider-thumb {
647
- background: svg-load("./icon/indicator-rectangle-horizontal.svg");
648
- transform: translateY(-10px);
649
- }
650
-
651
- input[type="range"]::-moz-range-thumb {
652
- height: 21px;
653
- width: 11px;
654
- border: 0;
655
- border-radius: 0;
656
- background: svg-load("./icon/indicator-horizontal.svg");
657
- transform: translateY(2px);
658
- }
659
-
660
- input[type="range"].has-box-indicator::-moz-range-thumb {
661
- background: url("../images/./icon/indicator-rectangle-horizontal.svg");
662
- transform: translateY(0px);
663
- }
664
-
665
- input[type="range"]::-webkit-slider-runnable-track,
666
- input[type="range"]::-moz-range-track {
667
- width: 100%;
668
- height: 2px;
669
- box-sizing: border-box;
670
- background: var(--button-dk-shadow);
671
- border-right: 1px solid var(--button-light);
672
- border-bottom: 1px solid var(--button-light);
673
- box-shadow: 1px 0 0 var(--button-hilight),
674
- 1px 1px 0 var(--button-hilight),
675
- 0 1px 0 var(--button-hilight),
676
- -1px 0 0 var(--button-shadow),
677
- -1px -1px 0 var(--button-shadow),
678
- 0 -1px 0 var(--button-shadow),
679
- -1px 1px 0 var(--button-hilight),
680
- 1px -1px var(--button-hilight);
681
- }
682
-
683
- .is-vertical {
684
- display: inline-block;
685
- width: 4px;
686
- height: 150px;
687
- transform: translateY(50%);
688
- }
689
-
690
- .is-vertical > input[type="range"] {
691
- width: 150px;
692
- height: 4px;
693
- margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0 var(--range-spacing);
694
- transform-origin: left;
695
- transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing)));
696
- }
697
-
698
- .is-vertical > input[type="range"]::-webkit-slider-runnable-track,
699
- .is-vertical > input[type="range"]::-webkit-slider-runnable-track {
700
- border-left: 1px solid var(--button-light);
701
- border-right: 0;
702
- border-bottom: 1px solid var(--button-light);
703
- box-shadow: -1px 0 0 var(--button-hilight),
704
- -1px 1px 0 var(--button-hilight),
705
- 0 1px 0 var(--button-hilight),
706
- 1px 0 0 var(--button-shadow),
707
- 1px -1px 0 var(--button-shadow),
708
- 0 -1px 0 var(--button-shadow),
709
- 1px 1px 0 var(--button-hilight),
710
- -1px -1px var(--button-hilight);
711
- }
712
-
713
- .is-vertical > input[type="range"]::-webkit-slider-thumb {
714
- transform: translateY(-8px) scaleX(-1);
715
- }
716
-
717
- .is-vertical > input[type="range"].has-box-indicator::-webkit-slider-thumb {
718
- transform: translateY(-10px) scaleX(-1);
719
- }
720
-
721
- .is-vertical > input[type="range"]::-moz-range-thumb {
722
- transform: translateY(2px) scaleX(-1);
723
- }
724
-
725
- .is-vertical > input[type="range"].has-box-indicator::-moz-range-thumb {
726
- transform: translateY(0px) scaleX(-1);
727
- }
728
-
729
- select:focus {
730
- color: var(--hilight-text);
731
- background-color: var(--hilight);
732
- }
733
-
734
- select:focus option {
735
- color: var(--menu-text);
736
- background-color: var(--window);
737
- }
738
-
739
- select:active {
740
- background-image: url("../images/./icon/button-down-active.svg");
741
- }
742
-
743
- a {
744
- color: var(--hot-tracking-color);
745
- }
746
-
747
- a:focus {
748
- outline: 1px dotted var(--window-frame);
749
- }
750
-
751
- ul.tree-view {
752
- display: block;
753
- background: var(--window);
754
- box-shadow: var(--border-field);
755
- padding: 6px;
756
- margin: 0;
757
- }
758
-
759
- ul.tree-view li {
760
- list-style-type: none;
761
- }
762
-
763
- ul.tree-view a {
764
- text-decoration: none;
765
- color: var(--window-text);
766
- }
767
-
768
- ul.tree-view a:focus {
769
- background-color: var(--hilight);
770
- color: var(--hilight-text);
771
- }
772
-
773
- ul.tree-view ul,
774
- ul.tree-view li {
775
- margin-top: 3px;
776
- }
777
-
778
- ul.tree-view ul {
779
- margin-left: 16px;
780
- padding-left: 16px;
781
- /* Goes down too far */
782
- border-left: 1px dotted var(--button-shadow);
783
- }
784
-
785
- ul.tree-view ul > li {
786
- position: relative;
787
- }
788
-
789
- ul.tree-view ul > li::before {
790
- content: "";
791
- display: block;
792
- position: absolute;
793
- left: -16px;
794
- top: 6px;
795
- width: 12px;
796
- border-bottom: 1px dotted var(--button-shadow);
797
- }
798
-
799
- /* Cover the bottom of the left dotted border */
800
- ul.tree-view ul > li:last-child::after {
801
- content: "";
802
- display: block;
803
- position: absolute;
804
- left: -20px;
805
- top: 7px;
806
- bottom: 0;
807
- width: 8px;
808
- background: var(--window);
809
- }
810
-
811
- ul.tree-view details {
812
- margin-top: 0;
813
- }
814
-
815
- ul.tree-view details[open] summary {
816
- margin-bottom: 0;
817
- }
818
-
819
- ul.tree-view ul details > summary:before {
820
- margin-left: -22px;
821
- position: relative;
822
- z-index: 1;
823
- }
824
-
825
- ul.tree-view details > summary:before {
826
- text-align: center;
827
- display: block;
828
- float: left;
829
- content: "+";
830
- border: 1px solid var(--button-shadow);
831
- width: 8px;
832
- height: 9px;
833
- line-height: 8px;
834
- margin-right: 5px;
835
- padding-left: 1px;
836
- background-color: var(--window);
837
- }
838
-
839
- ul.tree-view details[open] > summary:before {
840
- content: "-";
841
- }
842
-
843
- ul.tree-view details > summary::marker,
844
- ul.tree-view details > summary::-webkit-details-marker {
845
- content: "";
846
- }
847
-
848
- pre {
849
- display: block;
850
- background: var(--window);
851
- box-shadow: var(--border-field);
852
- padding: 12px 8px;
853
- margin: 0;
854
- }
855
-
856
- code,
857
- code * {
858
- font-family: monospace;
859
- }
860
-
861
- summary:focus {
862
- outline: 1px dotted var(--window-frame);
863
- }
864
-
865
- ::-webkit-scrollbar {
866
- width: 16px;
867
- }
868
-
869
- ::-webkit-scrollbar:horizontal {
870
- height: 17px;
871
- }
872
-
873
- ::-webkit-scrollbar-corner {
874
- background: var(--button-face);
875
- }
876
-
877
- ::-webkit-scrollbar-track {
878
- background-image: svg-load("./icon/scrollbar-background.svg");
879
- }
880
-
881
- ::-webkit-scrollbar-thumb {
882
- background-color: var(--button-face);
883
- box-shadow: var(--border-raised-outer), var(--border-raised-inner);
884
- }
885
-
886
- ::-webkit-scrollbar-button:horizontal:start:decrement,
887
- ::-webkit-scrollbar-button:horizontal:end:increment,
888
- ::-webkit-scrollbar-button:vertical:start:decrement,
889
- ::-webkit-scrollbar-button:vertical:end:increment {
890
- display: block;
891
- }
892
-
893
- ::-webkit-scrollbar-button:vertical:start {
894
- height: 17px;
895
- background-image: svg-load("./icon/button-up.svg");
896
- }
897
-
898
- ::-webkit-scrollbar-button:vertical:end {
899
- height: 17px;
900
- background-image: svg-load("./icon/button-down.svg");
901
- }
902
-
903
- ::-webkit-scrollbar-button:horizontal:start {
904
- width: 16px;
905
- background-image: svg-load("./icon/button-left.svg");
906
- }
907
-
908
- ::-webkit-scrollbar-button:horizontal:end {
909
- width: 16px;
910
- background-image: svg-load("./icon/button-right.svg");
911
- }
912
-
913
- .window[role=tabpanel] {
914
- position: relative;
915
- z-index: 2;
916
- }
917
-
918
- menu[role=tablist] {
919
- position: relative;
920
- margin: 0 0 -2px 0;
921
- text-indent: 0;
922
- list-style-type: none;
923
- display: flex;
924
- padding-left: 3px;
925
- }
926
-
927
- menu[role=tablist] > li {
928
- border-top-left-radius: 3px;
929
- border-top-right-radius: 3px;
930
- box-shadow: var(--border-tab);
931
- z-index: 1;
932
- }
933
-
934
- menu[role=tablist] > li[aria-selected=true] {
935
- padding-bottom: 2px;
936
- margin-top: -2px;
937
- background-color: var(--button-face);
938
- position: relative;
939
- z-index: 8;
940
- margin-left: -3px;
941
- }
942
-
943
- menu[role=tablist] > li > a {
944
- display: block;
945
- color: var(--window-text);
946
- margin: 6px;
947
- text-decoration: none;
948
- }
949
-
950
- menu[role=tablist] > li[aria-selected=true] > a:focus {
951
- outline: none;
952
- }
953
-
954
- menu[role=tablist] > li > a:focus {
955
- outline: 1px dotted var(--window-frame);
956
- }
957
-
958
- menu[role=tablist].multirows > li {
959
- flex-grow: 1;
960
- text-align: center;
961
- }
962
-
963
- .sunken-panel {
964
- box-sizing: border-box;
965
- border: 2px groove transparent;
966
- border-image: svg-load("./icon/sunken-panel-border.svg") 2;
967
- overflow: auto;
968
- background-color: var(--window);
969
- }
970
-
971
- table {
972
- border-collapse: collapse;
973
- position: relative;
974
- text-align: left;
975
- white-space: nowrap;
976
- background-color: var(--window);
977
- }
978
-
979
- table > thead > tr > * {
980
- position: sticky;
981
- top: 0;
982
- height: 17px;
983
- box-shadow: var(--border-raised-outer), var(--border-raised-inner);
984
- background: var(--button-face);
985
- box-sizing: border-box;
986
- font-weight: normal;
987
- padding: 0 var(--grouped-element-spacing);
988
- }
989
-
990
- table.interactive > tbody > tr {
991
- cursor: pointer;
992
- }
993
-
994
- table > tbody > tr.highlighted {
995
- color: var(--hilight-text);
996
- background-color: var(--hilight);
997
- }
998
-
999
- table > tbody > tr > * {
1000
- padding: 0 var(--grouped-element-spacing);
1001
- height: 14px;
1002
- }
1003
-
1004
- .progress-indicator {
1005
- height: 32px;
1006
- position: relative;
1007
- box-shadow: var(--border-sunken-inner);
1008
- padding: 4px 4px;
1009
- border: none;
1010
- box-sizing: border-box;
1011
- -webkit-appearance: none;
1012
- -moz-appearance: none;
1013
- appearance: none;
1014
- border-radius: 0;
1015
- }
1016
-
1017
-
1018
- .progress-indicator > .progress-indicator-bar {
1019
- height: 100%;
1020
- display: block;
1021
- background-color: var(--hilight);
1022
- }
1023
-
1024
- .progress-indicator.segmented > .progress-indicator-bar {
1025
- width: 100%;
1026
- background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */
1027
- background-image: linear-gradient(
1028
- 90deg,
1029
- var(--hilight) 0 16px,
1030
- transparent 0 2px
1031
- );
1032
- background-repeat: repeat;
1033
- background-size: 18px 100%;
1034
- }
1035
-
1036
- .field-border {
1037
- background: var(--button-hilight);
1038
- box-shadow: var(--border-field);
1039
- padding: 2px;
1040
- }
1041
-
1042
- .field-border-disabled {
1043
- background: var(--button-face);
1044
- box-shadow: var(--border-field);
1045
- padding: 2px;
1046
- }
1047
-
1048
- .status-field-border {
1049
- background: var(--button-face);
1050
- box-shadow: var(--border-status-field);
1051
- padding: 1px;
111
+ }
112
+
113
+ @font-face {
114
+ font-family: "Pixelated MS Sans Serif";
115
+ src: url("fonts/converted/ms_sans_serif.woff") format("woff");
116
+ src: url("fonts/converted/ms_sans_serif.woff2") format("woff2");
117
+ font-weight: normal;
118
+ font-style: normal;
119
+ }
120
+
121
+ @font-face {
122
+ font-family: "Pixelated MS Sans Serif";
123
+ src: url("fonts/converted/ms_sans_serif_bold.woff") format("woff");
124
+ src: url("fonts/converted/ms_sans_serif_bold.woff2") format("woff2");
125
+ font-weight: bold;
126
+ font-style: normal;
127
+ }
128
+
129
+ body {
130
+ font-family: Arial, sans-serif;
131
+ font-size: 12px;
132
+ color: var(--window-text);
133
+ }
134
+
135
+ button,
136
+ .button,
137
+ label,
138
+ input,
139
+ legend,
140
+ textarea,
141
+ select,
142
+ option,
143
+ table,
144
+ ul.tree-view,
145
+ .window,
146
+ .title-bar,
147
+ li[role=tab] {
148
+ font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
149
+ -webkit-font-smoothing: none;
150
+ font-size: 11px;
151
+ }
152
+
153
+ h1 {
154
+ font-size: 5rem;
155
+ }
156
+
157
+ h2 {
158
+ font-size: 2.5rem;
159
+ }
160
+
161
+ h3 {
162
+ font-size: 2rem;
163
+ }
164
+
165
+ h4 {
166
+ font-size: 1.5rem;
167
+ }
168
+
169
+ u {
170
+ text-decoration: none;
171
+ /*noinspection CssNonIntegerLengthInPixels*/
172
+ border-bottom: 0.5px solid var(--window-text);
173
+ }
174
+
175
+ button,
176
+ .button,
177
+ input[type="submit"],
178
+ input[type="reset"] {
179
+ box-sizing: border-box;
180
+ border: none;
181
+ color: transparent;
182
+ text-shadow: 0 0 var(--window-text);
183
+ background: var(--button-face);
184
+ box-shadow: var(--border-raised-outer), var(--border-raised-inner);
185
+ border-radius: 0;
186
+
187
+ min-width: 75px;
188
+ min-height: 23px;
189
+ padding: 0 12px;
190
+ }
191
+
192
+ button.default,
193
+ .button.default,
194
+ input[type="submit"].default,
195
+ input[type="reset"].default {
196
+ box-shadow: inset 0 0 0 1px var(--button-text), var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);
197
+ }
198
+
199
+ .vertical-bar {
200
+ width: 4px;
201
+ height: 20px;
202
+ background: #c0c0c0;
203
+ box-shadow: var(--border-raised-outer), var(--border-raised-inner);
204
+ }
205
+
206
+ button:not(:disabled):active,
207
+ .button:not(:disabled):active,
208
+ input[type="submit"]:not(:disabled):active,
209
+ input[type="reset"]:not(:disabled):active {
210
+ box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
211
+ text-shadow: 1px 1px var(--window-text);
212
+ }
213
+
214
+ button.default:not(:disabled):active,
215
+ .button.default:not(:disabled):active,
216
+ input[type="submit"].default:not(:disabled):active,
217
+ input[type="reset"].default:not(:disabled):active {
218
+ box-shadow: var(--default-button-border-sunken-outer), var(--default-button-border-sunken-inner);
219
+ }
220
+
221
+ /* @formatter:off */
222
+ @media (not(hover)) {
223
+ button:not(:disabled):hover,
224
+ .button:not(:disabled):hover,
225
+ input[type="submit"]:not(:disabled):hover,
226
+ input[type="reset"]:not(:disabled):hover {
227
+ /*noinspection CssUnknownProperty*/
228
+ box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
229
+ }
230
+ }
231
+ /* @formatter:on */
232
+
233
+ button:focus,
234
+ .button:focus,
235
+ input[type="submit"]:focus,
236
+ input[type="reset"]:focus {
237
+ outline: 1px dotted var(--window-frame);
238
+ outline-offset: -4px;
239
+ }
240
+
241
+ button::-moz-focus-inner,
242
+ .button::-moz-focus-inner,
243
+ input[type="submit"]::-moz-focus-inner,
244
+ input[type="reset"]::-moz-focus-inner {
245
+ border: 0;
246
+ }
247
+
248
+ :disabled,
249
+ :disabled + label,
250
+ input[readonly],
251
+ input[readonly] + label {
252
+ color: var(--button-shadow);
253
+ }
254
+
255
+ button:disabled,
256
+ .button:disabled,
257
+ input[type="submit"]:disabled,
258
+ input[type="reset"]:disabled,
259
+ :disabled + label {
260
+ text-shadow: 1px 1px 0 var(--button-hilight);
261
+ }
262
+
263
+ .window {
264
+ box-shadow: var(--border-window-outer), var(--border-window-inner);
265
+ background: var(--button-face);
266
+ padding: 3px;
267
+ }
268
+
269
+ .title-bar {
270
+ background: linear-gradient(
271
+ 90deg,
272
+ var(--active-title),
273
+ var(--gradient-active-title)
274
+ );
275
+ padding: 3px 2px 3px 3px;
276
+ display: flex;
277
+ justify-content: space-between;
278
+ align-items: center;
279
+ }
280
+
281
+ .title-bar.inactive {
282
+ background: linear-gradient(
283
+ 90deg,
284
+ var(--inactive-title),
285
+ var(--gradient-inactive-title)
286
+ );
287
+ }
288
+
289
+ .title-bar-text {
290
+ font-weight: bold;
291
+ color: white;
292
+ letter-spacing: 0;
293
+ margin-right: 24px;
294
+ }
295
+
296
+ .title-bar-controls {
297
+ display: flex;
298
+ }
299
+
300
+ .title-bar-controls button {
301
+ padding: 0;
302
+ display: block;
303
+ min-width: 16px;
304
+ min-height: 14px;
305
+ }
306
+
307
+ .title-bar-controls button:active {
308
+ padding: 0;
309
+ }
310
+
311
+ .title-bar-controls button:focus {
312
+ outline: none;
313
+ }
314
+
315
+ .title-bar-controls button[aria-label="Minimize"],
316
+ .title-bar-controls button.minimize {
317
+ background-image: svg-load("./icon/minimize.svg");
318
+ background-repeat: no-repeat;
319
+ background-position: bottom 3px left 4px;
320
+ }
321
+
322
+ .title-bar-controls button[aria-label="Maximize"],
323
+ .title-bar-controls button.maximize {
324
+ background-image: svg-load("./icon/maximize.svg");
325
+ background-repeat: no-repeat;
326
+ background-position: top 2px left 3px;
327
+ }
328
+
329
+ .title-bar-controls button[aria-label="Maximize"]:disabled,
330
+ .title-bar-controls button.maximize:disabled {
331
+ background-image: svg-load("./icon/maximize-disabled.svg");
332
+ background-repeat: no-repeat;
333
+ background-position: top 2px left 3px;
334
+ }
335
+
336
+ .title-bar-controls button[aria-label="Restore"],
337
+ .title-bar-controls button.restore {
338
+ background-image: svg-load("./icon/restore.svg");
339
+ background-repeat: no-repeat;
340
+ background-position: top 2px left 3px;
341
+ }
342
+
343
+ .title-bar-controls button[aria-label="Help"],
344
+ .title-bar-controls button.help {
345
+ background-image: svg-load("./icon/help.svg");
346
+ background-repeat: no-repeat;
347
+ background-position: top 2px left 5px;
348
+ }
349
+
350
+ .title-bar-controls button[aria-label="Close"],
351
+ .title-bar-controls button.close {
352
+ margin-left: 2px;
353
+ background-image: svg-load("./icon/close.svg");
354
+ background-repeat: no-repeat;
355
+ background-position: top 3px left 4px;
356
+ }
357
+
358
+ .status-bar {
359
+ margin: 0 1px;
360
+ display: flex;
361
+ gap: 1px;
362
+ }
363
+
364
+ .status-bar-field {
365
+ box-shadow: var(--border-status-field);
366
+ flex-grow: 1;
367
+ padding: 2px 3px;
368
+ margin: 0;
369
+ }
370
+
371
+ .window-body {
372
+ margin: var(--element-spacing);
373
+ }
374
+
375
+ fieldset {
376
+ /*noinspection CssInvalidFunction*/
377
+ border-image: svg-load("./icon/groupbox-border.svg");
378
+ padding: calc(2 * var(--border-width) + var(--element-spacing));
379
+ padding-block-start: var(--element-spacing);
380
+ margin: 0;
381
+ }
382
+
383
+ legend {
384
+ background: var(--button-face);
385
+ }
386
+
387
+ .field-row {
388
+ display: flex;
389
+ align-items: center;
390
+ }
391
+
392
+ [class^="field-row"] + [class^="field-row"] {
393
+ margin-top: var(--grouped-element-spacing);
394
+ }
395
+
396
+ .field-row > * + * {
397
+ margin-left: var(--grouped-element-spacing);
398
+ }
399
+
400
+ .field-row-stacked {
401
+ display: flex;
402
+ flex-direction: column;
403
+ }
404
+
405
+ .field-row-stacked * + * {
406
+ margin-top: var(--grouped-element-spacing);
407
+ }
408
+
409
+ label {
410
+ display: inline-flex;
411
+ align-items: center;
412
+ user-select: none;
413
+ }
414
+
415
+ input[type="radio"],
416
+ input[type="checkbox"] {
417
+ appearance: none;
418
+ -webkit-appearance: none;
419
+ -moz-appearance: none;
420
+ margin: 0;
421
+ background: 0;
422
+ position: fixed;
423
+ opacity: 0;
424
+ border: none;
425
+ }
426
+
427
+ input[type="radio"] + label,
428
+ input[type="checkbox"] + label {
429
+ line-height: 13px;
430
+ }
431
+
432
+ input[type="radio"] + label {
433
+ position: relative;
434
+ margin-left: var(--radio-total-width);
435
+ }
436
+
437
+ input[type="radio"] + label::before {
438
+ content: "";
439
+ position: absolute;
440
+ top: 0;
441
+ left: calc(-1 * (var(--radio-total-width-precalc)));
442
+ display: inline-block;
443
+ width: var(--radio-width);
444
+ height: var(--radio-width);
445
+ margin-right: var(--radio-label-spacing);
446
+ background: svg-load("./icon/radio-border.svg");
447
+ }
448
+
449
+ input[type="radio"]:active + label::before {
450
+ background: svg-load("./icon/radio-border-disabled.svg");
451
+ }
452
+
453
+ input[type="radio"]:checked + label::after {
454
+ content: "";
455
+ display: block;
456
+ width: var(--radio-dot-width);
457
+ height: var(--radio-dot-width);
458
+ top: var(--radio-dot-top);
459
+ left: var(--radio-dot-left);
460
+ position: absolute;
461
+ background: svg-load("./icon/radio-dot.svg");
462
+ }
463
+
464
+ input[type="radio"]:focus + label,
465
+ input[type="checkbox"]:focus + label {
466
+ outline: 1px dotted var(--window-frame);
467
+ }
468
+
469
+ input[type="radio"][disabled] + label::before {
470
+ background: svg-load("./icon/radio-border-disabled.svg");
471
+ }
472
+
473
+ input[type="radio"][disabled]:checked + label::after {
474
+ background: svg-load("./icon/radio-dot-disabled.svg");
475
+ }
476
+
477
+ input[type="checkbox"] + label {
478
+ position: relative;
479
+ margin-left: var(--checkbox-total-width);
480
+ }
481
+
482
+ input[type="checkbox"] + label::before {
483
+ content: "";
484
+ position: absolute;
485
+ left: calc(-1 * (var(--checkbox-total-width-precalc)));
486
+ display: inline-block;
487
+ width: var(--checkbox-width);
488
+ height: var(--checkbox-width);
489
+ background: var(--window);
490
+ box-shadow: var(--border-field);
491
+ margin-right: var(--radio-label-spacing);
492
+ }
493
+
494
+ input[type="checkbox"]:active + label::before {
495
+ background: var(--button-face);
496
+ }
497
+
498
+ input[type="checkbox"]:checked + label::after {
499
+ content: "";
500
+ display: block;
501
+ width: var(--checkmark-width);
502
+ height: var(--checkmark-width);
503
+ position: absolute;
504
+ left: calc(
505
+ -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
506
+ );
507
+ background: svg-load("./icon/checkmark.svg");
508
+ }
509
+
510
+ input[type="checkbox"][disabled] + label::before {
511
+ background: var(--button-face);
512
+ }
513
+
514
+ input[type="checkbox"][disabled]:checked + label::after {
515
+ background: svg-load("./icon/checkmark-disabled.svg");
516
+ }
517
+
518
+ input[type="text"],
519
+ input[type="password"],
520
+ input[type="email"],
521
+ input[type="url"],
522
+ input[type="tel"],
523
+ input[type="number"],
524
+ input[type="search"],
525
+ select,
526
+ textarea {
527
+ padding: 3px 4px;
528
+ border: none;
529
+ box-shadow: var(--border-field);
530
+ background-color: var(--window);
531
+ box-sizing: border-box;
532
+ -webkit-appearance: none;
533
+ -moz-appearance: none;
534
+ appearance: none;
535
+ border-radius: 0;
536
+ }
537
+
538
+ input[type="text"],
539
+ input[type="password"],
540
+ input[type="email"],
541
+ input[type="url"],
542
+ input[type="tel"],
543
+ input[type="search"],
544
+ select {
545
+ height: 21px;
546
+ }
547
+
548
+ input[type="number"] {
549
+ /* need this 1 pixel to fit the spinner controls in box */
550
+ height: 22px;
551
+ }
552
+
553
+ /* clears the ‘X’ from Internet Explorer */
554
+ input[type=search]::-ms-clear {
555
+ display: none;
556
+ width: 0;
557
+ height: 0;
558
+ }
559
+
560
+ input[type=search]::-ms-reveal {
561
+ display: none;
562
+ width: 0;
563
+ height: 0;
564
+ }
565
+
566
+ /* clears the ‘X’ from Chrome */
567
+ input[type="search"]::-webkit-search-decoration,
568
+ input[type="search"]::-webkit-search-cancel-button,
569
+ input[type="search"]::-webkit-search-results-button,
570
+ input[type="search"]::-webkit-search-results-decoration {
571
+ display: none;
572
+ }
573
+
574
+ input[type="text"],
575
+ input[type="password"],
576
+ input[type="email"],
577
+ input[type="url"],
578
+ input[type="tel"],
579
+ input[type="number"],
580
+ input[type="search"] {
581
+ /* For some reason descenders are getting cut off without this */
582
+ line-height: 2;
583
+ }
584
+
585
+ input[type="email"]:disabled,
586
+ input[type="url"]:disabled,
587
+ input[type="tel"]:disabled,
588
+ input[type="password"]:disabled,
589
+ input[type="text"]:disabled,
590
+ input[type="number"]:disabled,
591
+ input[type="search"]:disabled,
592
+ input[type="email"]:read-only,
593
+ input[type="url"]:read-only,
594
+ input[type="tel"]:read-only,
595
+ input[type="password"]:read-only,
596
+ input[type="text"]:read-only,
597
+ input[type="number"]:read-only,
598
+ input[type="search"]:read-only,
599
+ textarea:disabled {
600
+ background-color: var(--button-face);
601
+ }
602
+
603
+ select {
604
+ appearance: none;
605
+ -webkit-appearance: none;
606
+ -moz-appearance: none;
607
+ position: relative;
608
+ padding-right: 32px;
609
+ background-image: svg-load("./icon/button-down.svg");
610
+ background-position: top 2px right 2px;
611
+ background-repeat: no-repeat;
612
+ border-radius: 0;
613
+ }
614
+
615
+ select:focus,
616
+ input[type="text"]:focus,
617
+ input[type="password"]:focus,
618
+ input[type="email"]:focus,
619
+ input[type="url"]:focus,
620
+ input[type="tel"]:focus,
621
+ input[type="number"]:focus,
622
+ input[type="search"]:focus,
623
+ textarea:focus {
624
+ outline: none;
625
+ }
626
+
627
+ input[type="range"] {
628
+ -webkit-appearance: none;
629
+ width: 100%;
630
+ background: transparent;
631
+ }
632
+
633
+ input[type="range"]:focus {
634
+ outline: none;
635
+ }
636
+
637
+ input[type="range"]::-webkit-slider-thumb {
638
+ -webkit-appearance: none;
639
+ height: 21px;
640
+ width: 11px;
641
+ background: svg-load("./icon/indicator-horizontal.svg");
642
+ transform: translateY(-8px);
643
+ box-shadow: none;
644
+ border: none;
645
+ }
646
+
647
+ input[type="range"].has-box-indicator::-webkit-slider-thumb {
648
+ background: svg-load("./icon/indicator-rectangle-horizontal.svg");
649
+ transform: translateY(-10px);
650
+ }
651
+
652
+ input[type="range"]::-moz-range-thumb {
653
+ height: 21px;
654
+ width: 11px;
655
+ border: 0;
656
+ border-radius: 0;
657
+ background: svg-load("./icon/indicator-horizontal.svg");
658
+ transform: translateY(2px);
659
+ }
660
+
661
+ input[type="range"].has-box-indicator::-moz-range-thumb {
662
+ background: url("../images/./icon/indicator-rectangle-horizontal.svg");
663
+ transform: translateY(0px);
664
+ }
665
+
666
+ input[type="range"]::-webkit-slider-runnable-track,
667
+ input[type="range"]::-moz-range-track {
668
+ width: 100%;
669
+ height: 2px;
670
+ box-sizing: border-box;
671
+ background: var(--button-dk-shadow);
672
+ border-right: 1px solid var(--button-light);
673
+ border-bottom: 1px solid var(--button-light);
674
+ box-shadow: 1px 0 0 var(--button-hilight),
675
+ 1px 1px 0 var(--button-hilight),
676
+ 0 1px 0 var(--button-hilight),
677
+ -1px 0 0 var(--button-shadow),
678
+ -1px -1px 0 var(--button-shadow),
679
+ 0 -1px 0 var(--button-shadow),
680
+ -1px 1px 0 var(--button-hilight),
681
+ 1px -1px var(--button-hilight);
682
+ }
683
+
684
+ .is-vertical {
685
+ display: inline-block;
686
+ width: 4px;
687
+ height: 150px;
688
+ transform: translateY(50%);
689
+ }
690
+
691
+ .is-vertical > input[type="range"] {
692
+ width: 150px;
693
+ height: 4px;
694
+ margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0 var(--range-spacing);
695
+ transform-origin: left;
696
+ transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing)));
697
+ }
698
+
699
+ .is-vertical > input[type="range"]::-webkit-slider-runnable-track,
700
+ .is-vertical > input[type="range"]::-webkit-slider-runnable-track {
701
+ border-left: 1px solid var(--button-light);
702
+ border-right: 0;
703
+ border-bottom: 1px solid var(--button-light);
704
+ box-shadow: -1px 0 0 var(--button-hilight),
705
+ -1px 1px 0 var(--button-hilight),
706
+ 0 1px 0 var(--button-hilight),
707
+ 1px 0 0 var(--button-shadow),
708
+ 1px -1px 0 var(--button-shadow),
709
+ 0 -1px 0 var(--button-shadow),
710
+ 1px 1px 0 var(--button-hilight),
711
+ -1px -1px var(--button-hilight);
712
+ }
713
+
714
+ .is-vertical > input[type="range"]::-webkit-slider-thumb {
715
+ transform: translateY(-8px) scaleX(-1);
716
+ }
717
+
718
+ .is-vertical > input[type="range"].has-box-indicator::-webkit-slider-thumb {
719
+ transform: translateY(-10px) scaleX(-1);
720
+ }
721
+
722
+ .is-vertical > input[type="range"]::-moz-range-thumb {
723
+ transform: translateY(2px) scaleX(-1);
724
+ }
725
+
726
+ .is-vertical > input[type="range"].has-box-indicator::-moz-range-thumb {
727
+ transform: translateY(0px) scaleX(-1);
728
+ }
729
+
730
+ select:focus {
731
+ color: var(--hilight-text);
732
+ background-color: var(--hilight);
733
+ }
734
+
735
+ select:focus option {
736
+ color: var(--menu-text);
737
+ background-color: var(--window);
738
+ }
739
+
740
+ select:active {
741
+ background-image: url("../images/./icon/button-down-active.svg");
742
+ }
743
+
744
+ a {
745
+ color: var(--hot-tracking-color);
746
+ }
747
+
748
+ a:focus {
749
+ outline: 1px dotted var(--window-frame);
750
+ }
751
+
752
+ ul.tree-view {
753
+ display: block;
754
+ background: var(--window);
755
+ box-shadow: var(--border-field);
756
+ padding: 6px;
757
+ margin: 0;
758
+ }
759
+
760
+ ul.tree-view li {
761
+ list-style-type: none;
762
+ }
763
+
764
+ ul.tree-view a {
765
+ text-decoration: none;
766
+ color: var(--window-text);
767
+ }
768
+
769
+ ul.tree-view a:focus {
770
+ background-color: var(--hilight);
771
+ color: var(--hilight-text);
772
+ }
773
+
774
+ ul.tree-view ul,
775
+ ul.tree-view li {
776
+ margin-top: 3px;
777
+ }
778
+
779
+ ul.tree-view ul {
780
+ margin-left: 16px;
781
+ padding-left: 16px;
782
+ /* Goes down too far */
783
+ border-left: 1px dotted var(--button-shadow);
784
+ }
785
+
786
+ ul.tree-view ul > li {
787
+ position: relative;
788
+ }
789
+
790
+ ul.tree-view ul > li::before {
791
+ content: "";
792
+ display: block;
793
+ position: absolute;
794
+ left: -16px;
795
+ top: 6px;
796
+ width: 12px;
797
+ border-bottom: 1px dotted var(--button-shadow);
798
+ }
799
+
800
+ /* Cover the bottom of the left dotted border */
801
+ ul.tree-view ul > li:last-child::after {
802
+ content: "";
803
+ display: block;
804
+ position: absolute;
805
+ left: -20px;
806
+ top: 7px;
807
+ bottom: 0;
808
+ width: 8px;
809
+ background: var(--window);
810
+ }
811
+
812
+ ul.tree-view details {
813
+ margin-top: 0;
814
+ }
815
+
816
+ ul.tree-view details[open] summary {
817
+ margin-bottom: 0;
818
+ }
819
+
820
+ ul.tree-view ul details > summary:before {
821
+ margin-left: -22px;
822
+ position: relative;
823
+ z-index: 1;
824
+ }
825
+
826
+ ul.tree-view details > summary:before {
827
+ text-align: center;
828
+ display: block;
829
+ float: left;
830
+ content: "+";
831
+ border: 1px solid var(--button-shadow);
832
+ width: 8px;
833
+ height: 9px;
834
+ line-height: 8px;
835
+ margin-right: 5px;
836
+ padding-left: 1px;
837
+ background-color: var(--window);
838
+ }
839
+
840
+ ul.tree-view details[open] > summary:before {
841
+ content: "-";
842
+ }
843
+
844
+ ul.tree-view details > summary::marker,
845
+ ul.tree-view details > summary::-webkit-details-marker {
846
+ content: "";
847
+ }
848
+
849
+ pre {
850
+ display: block;
851
+ background: var(--window);
852
+ box-shadow: var(--border-field);
853
+ padding: 12px 8px;
854
+ margin: 0;
855
+ }
856
+
857
+ code,
858
+ code * {
859
+ font-family: monospace;
860
+ }
861
+
862
+ summary:focus {
863
+ outline: 1px dotted var(--window-frame);
864
+ }
865
+
866
+ ::-webkit-scrollbar {
867
+ width: 16px;
868
+ }
869
+
870
+ ::-webkit-scrollbar:horizontal {
871
+ height: 17px;
872
+ }
873
+
874
+ ::-webkit-scrollbar-corner {
875
+ background: var(--button-face);
876
+ }
877
+
878
+ ::-webkit-scrollbar-track {
879
+ background-image: svg-load("./icon/scrollbar-background.svg");
880
+ }
881
+
882
+ ::-webkit-scrollbar-thumb {
883
+ background-color: var(--button-face);
884
+ box-shadow: var(--border-raised-outer), var(--border-raised-inner);
885
+ }
886
+
887
+ ::-webkit-scrollbar-button:horizontal:start:decrement,
888
+ ::-webkit-scrollbar-button:horizontal:end:increment,
889
+ ::-webkit-scrollbar-button:vertical:start:decrement,
890
+ ::-webkit-scrollbar-button:vertical:end:increment {
891
+ display: block;
892
+ }
893
+
894
+ ::-webkit-scrollbar-button:vertical:start {
895
+ height: 17px;
896
+ background-image: svg-load("./icon/button-up.svg");
897
+ }
898
+
899
+ ::-webkit-scrollbar-button:vertical:end {
900
+ height: 17px;
901
+ background-image: svg-load("./icon/button-down.svg");
902
+ }
903
+
904
+ ::-webkit-scrollbar-button:horizontal:start {
905
+ width: 16px;
906
+ background-image: svg-load("./icon/button-left.svg");
907
+ }
908
+
909
+ ::-webkit-scrollbar-button:horizontal:end {
910
+ width: 16px;
911
+ background-image: svg-load("./icon/button-right.svg");
912
+ }
913
+
914
+ .window[role=tabpanel] {
915
+ position: relative;
916
+ z-index: 2;
917
+ }
918
+
919
+ menu[role=tablist] {
920
+ position: relative;
921
+ margin: 0 0 -2px 0;
922
+ text-indent: 0;
923
+ list-style-type: none;
924
+ display: flex;
925
+ padding-left: 3px;
926
+ }
927
+
928
+ menu[role=tablist] > li {
929
+ border-top-left-radius: 3px;
930
+ border-top-right-radius: 3px;
931
+ box-shadow: var(--border-tab);
932
+ z-index: 1;
933
+ }
934
+
935
+ menu[role=tablist] > li[aria-selected=true] {
936
+ padding-bottom: 2px;
937
+ margin-top: -2px;
938
+ background-color: var(--button-face);
939
+ position: relative;
940
+ z-index: 8;
941
+ margin-left: -3px;
942
+ }
943
+
944
+ menu[role=tablist] > li > a {
945
+ display: block;
946
+ color: var(--window-text);
947
+ margin: 6px;
948
+ text-decoration: none;
949
+ }
950
+
951
+ menu[role=tablist] > li[aria-selected=true] > a:focus {
952
+ outline: none;
953
+ }
954
+
955
+ menu[role=tablist] > li > a:focus {
956
+ outline: 1px dotted var(--window-frame);
957
+ }
958
+
959
+ menu[role=tablist].multirows > li {
960
+ flex-grow: 1;
961
+ text-align: center;
962
+ }
963
+
964
+ .sunken-panel {
965
+ box-sizing: border-box;
966
+ border: 2px groove transparent;
967
+ border-image: svg-load("./icon/sunken-panel-border.svg") 2;
968
+ overflow: auto;
969
+ background-color: var(--window);
970
+ }
971
+
972
+ table {
973
+ border-collapse: collapse;
974
+ position: relative;
975
+ text-align: left;
976
+ white-space: nowrap;
977
+ background-color: var(--window);
978
+ }
979
+
980
+ table > thead > tr > * {
981
+ position: sticky;
982
+ top: 0;
983
+ height: 17px;
984
+ box-shadow: var(--border-raised-outer), var(--border-raised-inner);
985
+ background: var(--button-face);
986
+ box-sizing: border-box;
987
+ font-weight: normal;
988
+ padding: 0 var(--grouped-element-spacing);
989
+ }
990
+
991
+ table.interactive > tbody > tr {
992
+ cursor: pointer;
993
+ }
994
+
995
+ table > tbody > tr.highlighted {
996
+ color: var(--hilight-text);
997
+ background-color: var(--hilight);
998
+ }
999
+
1000
+ table > tbody > tr > * {
1001
+ padding: 0 var(--grouped-element-spacing);
1002
+ height: 14px;
1003
+ }
1004
+
1005
+ .progress-indicator {
1006
+ height: 32px;
1007
+ position: relative;
1008
+ box-shadow: var(--border-sunken-inner);
1009
+ padding: 4px 4px;
1010
+ border: none;
1011
+ box-sizing: border-box;
1012
+ -webkit-appearance: none;
1013
+ -moz-appearance: none;
1014
+ appearance: none;
1015
+ border-radius: 0;
1016
+ }
1017
+
1018
+
1019
+ .progress-indicator > .progress-indicator-bar {
1020
+ height: 100%;
1021
+ display: block;
1022
+ background-color: var(--hilight);
1023
+ }
1024
+
1025
+ .progress-indicator.segmented > .progress-indicator-bar {
1026
+ width: 100%;
1027
+ background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */
1028
+ background-image: linear-gradient(
1029
+ 90deg,
1030
+ var(--hilight) 0 16px,
1031
+ transparent 0 2px
1032
+ );
1033
+ background-repeat: repeat;
1034
+ background-size: 18px 100%;
1035
+ }
1036
+
1037
+ .field-border {
1038
+ background: var(--window);
1039
+ box-shadow: var(--border-field);
1040
+ padding: 2px;
1041
+ }
1042
+
1043
+ .field-border-disabled {
1044
+ background: var(--button-face);
1045
+ box-shadow: var(--border-field);
1046
+ padding: 2px;
1047
+ }
1048
+
1049
+ .status-field-border {
1050
+ background: var(--button-face);
1051
+ box-shadow: var(--border-status-field);
1052
+ padding: 1px;
1053
+ }
1052
1054
  }