@cirthcss/cirth 0.12.0 → 0.13.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.
- package/README.md +21 -13
- package/dist/cirth.classless.css +305 -503
- package/dist/cirth.classless.min.css +1 -1
- package/dist/cirth.classless.scoped.css +305 -495
- package/dist/cirth.classless.scoped.min.css +1 -1
- package/dist/cirth.css +388 -511
- package/dist/cirth.min.css +1 -1
- package/dist/cirth.print.classless.css +127 -0
- package/dist/cirth.print.classless.min.css +1 -0
- package/dist/cirth.print.classless.scoped.css +119 -0
- package/dist/cirth.print.classless.scoped.min.css +1 -0
- package/dist/cirth.print.css +133 -0
- package/dist/cirth.print.min.css +1 -0
- package/dist/cirth.print.scoped.css +125 -0
- package/dist/cirth.print.scoped.min.css +1 -0
- package/dist/cirth.scoped.css +388 -503
- package/dist/cirth.scoped.min.css +1 -1
- package/dist/presets/plain.css +16 -0
- package/dist/presets/plain.min.css +1 -0
- package/dist/presets/playroom.css +38 -0
- package/dist/presets/playroom.min.css +1 -0
- package/package.json +7 -4
- package/dist/presets/cobalt.css +0 -95
- package/dist/presets/cobalt.min.css +0 -1
- package/dist/presets/coral.css +0 -103
- package/dist/presets/coral.min.css +0 -1
package/dist/cirth.scoped.css
CHANGED
|
@@ -294,7 +294,7 @@
|
|
|
294
294
|
}
|
|
295
295
|
|
|
296
296
|
.cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"] {
|
|
297
|
-
|
|
297
|
+
appearance: auto;
|
|
298
298
|
}
|
|
299
299
|
|
|
300
300
|
.cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
|
|
@@ -303,7 +303,7 @@
|
|
|
303
303
|
--cirth-color: var(--cirth-primary-inverse);
|
|
304
304
|
--cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
|
|
305
305
|
max-width: 100%;
|
|
306
|
-
min-block-size: calc(var(--cirth-size-
|
|
306
|
+
min-block-size: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
|
|
307
307
|
padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
|
|
308
308
|
border: var(--cirth-border-width) solid var(--cirth-border-color);
|
|
309
309
|
border-radius: var(--cirth-border-radius);
|
|
@@ -328,7 +328,7 @@
|
|
|
328
328
|
--cirth-color: var(--cirth-primary-inverse);
|
|
329
329
|
--cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
|
|
330
330
|
max-width: 100%;
|
|
331
|
-
min-block-size: calc(var(--cirth-size-
|
|
331
|
+
min-block-size: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
|
|
332
332
|
padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
|
|
333
333
|
border: var(--cirth-border-width) solid var(--cirth-border-color);
|
|
334
334
|
border-radius: var(--cirth-border-radius);
|
|
@@ -457,37 +457,92 @@
|
|
|
457
457
|
}
|
|
458
458
|
|
|
459
459
|
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline, .cirth [type="reset"].outline {
|
|
460
|
+
--cirth-background-color: var(--cirth-canvas);
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost, .cirth [type="reset"].ghost {
|
|
460
464
|
--cirth-background-color: transparent;
|
|
465
|
+
--cirth-box-shadow: none;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline, .cirth [type="reset"].outline {
|
|
461
469
|
--cirth-color: var(--cirth-primary);
|
|
462
470
|
--cirth-border-color: var(--cirth-primary);
|
|
463
471
|
}
|
|
464
472
|
|
|
465
473
|
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
466
|
-
--cirth-background-color:
|
|
474
|
+
--cirth-background-color: color-mix(in oklch,
|
|
475
|
+
var(--cirth-primary) 12%,
|
|
476
|
+
var(--cirth-canvas));
|
|
467
477
|
--cirth-color: var(--cirth-primary-hover);
|
|
468
478
|
--cirth-border-color: var(--cirth-primary-hover);
|
|
469
479
|
}
|
|
470
480
|
|
|
471
|
-
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, .cirth [type="reset"].outline {
|
|
481
|
+
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, .cirth [type="reset"].outline.secondary {
|
|
472
482
|
--cirth-color: var(--cirth-secondary);
|
|
473
483
|
--cirth-border-color: var(--cirth-secondary);
|
|
474
484
|
}
|
|
475
485
|
|
|
476
|
-
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
486
|
+
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"].outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
487
|
+
--cirth-background-color: color-mix(in oklch,
|
|
488
|
+
var(--cirth-secondary) 12%,
|
|
489
|
+
var(--cirth-canvas));
|
|
477
490
|
--cirth-color: var(--cirth-secondary-hover);
|
|
478
491
|
--cirth-border-color: var(--cirth-secondary-hover);
|
|
479
492
|
}
|
|
480
493
|
|
|
481
|
-
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
|
|
494
|
+
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast, .cirth [type="reset"].outline.contrast {
|
|
482
495
|
--cirth-color: var(--cirth-contrast);
|
|
483
496
|
--cirth-border-color: var(--cirth-contrast);
|
|
484
497
|
}
|
|
485
498
|
|
|
486
|
-
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
499
|
+
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"].outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
500
|
+
--cirth-background-color: color-mix(in oklch,
|
|
501
|
+
var(--cirth-contrast) 12%,
|
|
502
|
+
var(--cirth-canvas));
|
|
487
503
|
--cirth-color: var(--cirth-contrast-hover);
|
|
488
504
|
--cirth-border-color: var(--cirth-contrast-hover);
|
|
489
505
|
}
|
|
490
506
|
|
|
507
|
+
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost, .cirth [type="reset"].ghost {
|
|
508
|
+
--cirth-color: var(--cirth-primary);
|
|
509
|
+
--cirth-border-color: transparent;
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"].ghost:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
513
|
+
--cirth-background-color: color-mix(in oklch,
|
|
514
|
+
var(--cirth-primary) 12%,
|
|
515
|
+
transparent);
|
|
516
|
+
--cirth-color: var(--cirth-primary-hover);
|
|
517
|
+
--cirth-border-color: transparent;
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost.secondary, .cirth [type="reset"].ghost.secondary {
|
|
521
|
+
--cirth-color: var(--cirth-secondary);
|
|
522
|
+
--cirth-border-color: transparent;
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"].ghost.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
526
|
+
--cirth-background-color: color-mix(in oklch,
|
|
527
|
+
var(--cirth-secondary) 12%,
|
|
528
|
+
transparent);
|
|
529
|
+
--cirth-color: var(--cirth-secondary-hover);
|
|
530
|
+
--cirth-border-color: transparent;
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost.contrast, .cirth [type="reset"].ghost.contrast {
|
|
534
|
+
--cirth-color: var(--cirth-contrast);
|
|
535
|
+
--cirth-border-color: transparent;
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
.cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"].ghost.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
539
|
+
--cirth-background-color: color-mix(in oklch,
|
|
540
|
+
var(--cirth-contrast) 12%,
|
|
541
|
+
transparent);
|
|
542
|
+
--cirth-color: var(--cirth-contrast-hover);
|
|
543
|
+
--cirth-border-color: transparent;
|
|
544
|
+
}
|
|
545
|
+
|
|
491
546
|
.cirth :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], .cirth :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
|
|
492
547
|
opacity: var(--cirth-opacity-disabled);
|
|
493
548
|
pointer-events: none;
|
|
@@ -640,7 +695,7 @@
|
|
|
640
695
|
}
|
|
641
696
|
|
|
642
697
|
.cirth [type="search"] {
|
|
643
|
-
|
|
698
|
+
appearance: textfield;
|
|
644
699
|
outline-offset: -2px;
|
|
645
700
|
}
|
|
646
701
|
|
|
@@ -649,7 +704,7 @@
|
|
|
649
704
|
}
|
|
650
705
|
|
|
651
706
|
.cirth ::file-selector-button {
|
|
652
|
-
|
|
707
|
+
appearance: auto;
|
|
653
708
|
font: inherit;
|
|
654
709
|
}
|
|
655
710
|
|
|
@@ -663,11 +718,11 @@
|
|
|
663
718
|
}
|
|
664
719
|
|
|
665
720
|
.cirth input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
|
666
|
-
height: calc(var(--cirth-size-
|
|
721
|
+
height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
|
|
667
722
|
}
|
|
668
723
|
|
|
669
724
|
.cirth select, .cirth textarea {
|
|
670
|
-
min-block-size: calc(var(--cirth-size-
|
|
725
|
+
min-block-size: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
|
|
671
726
|
}
|
|
672
727
|
|
|
673
728
|
.cirth fieldset {
|
|
@@ -721,6 +776,12 @@
|
|
|
721
776
|
--cirth-border-color: var(--cirth-form-element-active-border-color);
|
|
722
777
|
}
|
|
723
778
|
|
|
779
|
+
.cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [readonly]):hover:not(:active, :focus, [disabled], [aria-invalid]), .cirth :where(select, textarea):not([readonly]):hover:not(:active, :focus, [disabled], [aria-invalid]) {
|
|
780
|
+
--cirth-border-color: color-mix(in oklch,
|
|
781
|
+
var(--cirth-form-element-border-color) 65%,
|
|
782
|
+
var(--cirth-color));
|
|
783
|
+
}
|
|
784
|
+
|
|
724
785
|
.cirth input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, .cirth :where(select, textarea):not([readonly]):focus {
|
|
725
786
|
--cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
|
|
726
787
|
var(--cirth-form-element-focus-color);
|
|
@@ -739,7 +800,7 @@
|
|
|
739
800
|
.cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
|
|
740
801
|
padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
|
|
741
802
|
background-position: center right var(--cirth-space-3);
|
|
742
|
-
background-size: var(--cirth-size-
|
|
803
|
+
background-size: var(--cirth-font-size-md) auto;
|
|
743
804
|
background-repeat: no-repeat;
|
|
744
805
|
}
|
|
745
806
|
|
|
@@ -798,7 +859,7 @@
|
|
|
798
859
|
padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
|
|
799
860
|
background-image: var(--cirth-icon-chevron);
|
|
800
861
|
background-position: center right var(--cirth-space-3);
|
|
801
|
-
background-size: var(--cirth-size-
|
|
862
|
+
background-size: var(--cirth-font-size-md) auto;
|
|
802
863
|
background-repeat: no-repeat;
|
|
803
864
|
}
|
|
804
865
|
|
|
@@ -821,11 +882,11 @@
|
|
|
821
882
|
}
|
|
822
883
|
|
|
823
884
|
.cirth textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
|
|
824
|
-
--cirth-icon-height: calc(var(--cirth-size-
|
|
885
|
+
--cirth-icon-height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) +
|
|
825
886
|
var(--cirth-form-element-spacing-vertical) * 2 +
|
|
826
887
|
var(--cirth-border-width) * 2);
|
|
827
888
|
background-position: top right var(--cirth-space-3);
|
|
828
|
-
background-size: var(--cirth-size-
|
|
889
|
+
background-size: var(--cirth-font-size-md) var(--cirth-icon-height);
|
|
829
890
|
}
|
|
830
891
|
|
|
831
892
|
.cirth :where(input, select, textarea, fieldset, .row) + small {
|
|
@@ -867,10 +928,6 @@
|
|
|
867
928
|
.cirth [type="checkbox"]:checked, .cirth [type="checkbox"]:checked:active, .cirth [type="checkbox"]:checked:focus, .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
|
|
868
929
|
--cirth-background-color: var(--cirth-primary-background);
|
|
869
930
|
--cirth-border-color: var(--cirth-primary-border);
|
|
870
|
-
background-image: var(--cirth-icon-checkbox);
|
|
871
|
-
background-position: center;
|
|
872
|
-
background-repeat: no-repeat;
|
|
873
|
-
background-size: .9em;
|
|
874
931
|
}
|
|
875
932
|
|
|
876
933
|
.cirth [type="checkbox"] ~ label, .cirth [type="radio"] ~ label {
|
|
@@ -883,13 +940,34 @@
|
|
|
883
940
|
margin-inline-end: 1em;
|
|
884
941
|
}
|
|
885
942
|
|
|
886
|
-
.cirth [type="checkbox"]:indeterminate {
|
|
943
|
+
.cirth [type="checkbox"]:not([role="switch"]):checked:before, .cirth [type="checkbox"]:not([role="switch"]):indeterminate:before {
|
|
944
|
+
background-color: var(--cirth-primary-inverse);
|
|
945
|
+
content: "";
|
|
946
|
+
width: 100%;
|
|
947
|
+
height: 100%;
|
|
948
|
+
display: block;
|
|
949
|
+
mask-position: center;
|
|
950
|
+
mask-size: .9em;
|
|
951
|
+
mask-repeat: no-repeat;
|
|
952
|
+
}
|
|
953
|
+
|
|
954
|
+
@media (forced-colors: active) {
|
|
955
|
+
.cirth [type="checkbox"]:not([role="switch"]):checked:before, .cirth [type="checkbox"]:not([role="switch"]):indeterminate:before {
|
|
956
|
+
background-color: canvastext;
|
|
957
|
+
}
|
|
958
|
+
}
|
|
959
|
+
|
|
960
|
+
.cirth [type="checkbox"]:not([role="switch"]):checked:before {
|
|
961
|
+
mask-image: var(--cirth-icon-checkbox);
|
|
962
|
+
}
|
|
963
|
+
|
|
964
|
+
.cirth [type="checkbox"]:not([role="switch"]):indeterminate {
|
|
887
965
|
--cirth-background-color: var(--cirth-primary-background);
|
|
888
966
|
--cirth-border-color: var(--cirth-primary-border);
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
967
|
+
}
|
|
968
|
+
|
|
969
|
+
.cirth [type="checkbox"]:not([role="switch"]):indeterminate:before {
|
|
970
|
+
mask-image: var(--cirth-icon-minus);
|
|
893
971
|
}
|
|
894
972
|
|
|
895
973
|
.cirth [type="radio"] {
|
|
@@ -898,7 +976,6 @@
|
|
|
898
976
|
|
|
899
977
|
.cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
|
|
900
978
|
--cirth-background-color: var(--cirth-primary-inverse);
|
|
901
|
-
background-image: none;
|
|
902
979
|
border-width: .42em;
|
|
903
980
|
}
|
|
904
981
|
|
|
@@ -936,7 +1013,6 @@
|
|
|
936
1013
|
.cirth [type="checkbox"][role="switch"]:checked {
|
|
937
1014
|
--cirth-background-color: var(--cirth-switch-checked-background-color);
|
|
938
1015
|
--cirth-border-color: var(--cirth-switch-checked-background-color);
|
|
939
|
-
background-image: none;
|
|
940
1016
|
}
|
|
941
1017
|
|
|
942
1018
|
.cirth [type="checkbox"][role="switch"]:checked:before {
|
|
@@ -983,7 +1059,7 @@
|
|
|
983
1059
|
|
|
984
1060
|
.cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
|
985
1061
|
--cirth-icon-position: var(--cirth-space-3);
|
|
986
|
-
--cirth-icon-width: var(--cirth-size-
|
|
1062
|
+
--cirth-icon-width: var(--cirth-font-size-md);
|
|
987
1063
|
min-width: 0;
|
|
988
1064
|
background-image: var(--cirth-icon-date);
|
|
989
1065
|
background-position: center right var(--cirth-icon-position);
|
|
@@ -1166,7 +1242,7 @@
|
|
|
1166
1242
|
}
|
|
1167
1243
|
|
|
1168
1244
|
.cirth details summary {
|
|
1169
|
-
line-height: var(--cirth-size-
|
|
1245
|
+
line-height: var(--cirth-font-size-md);
|
|
1170
1246
|
cursor: pointer;
|
|
1171
1247
|
transition: color var(--cirth-transition);
|
|
1172
1248
|
list-style-type: none;
|
|
@@ -1185,18 +1261,28 @@
|
|
|
1185
1261
|
}
|
|
1186
1262
|
|
|
1187
1263
|
.cirth details summary:after {
|
|
1188
|
-
width: var(--cirth-size-
|
|
1189
|
-
height: var(--cirth-size-
|
|
1264
|
+
width: var(--cirth-font-size-md);
|
|
1265
|
+
height: var(--cirth-font-size-md);
|
|
1190
1266
|
float: right;
|
|
1191
|
-
background-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
transition: transform var(--cirth-transition);
|
|
1196
|
-
background-repeat: no-repeat;
|
|
1267
|
+
background-color: var(--cirth-muted-color);
|
|
1268
|
+
mask-image: var(--cirth-icon-chevron);
|
|
1269
|
+
mask-position: 100%;
|
|
1270
|
+
mask-size: var(--cirth-font-size-md) auto;
|
|
1197
1271
|
margin-inline-start: calc(var(--cirth-spacing, var(--cirth-space-4)) * .5);
|
|
1198
1272
|
display: block;
|
|
1199
1273
|
transform: rotate(-90deg);
|
|
1274
|
+
mask-repeat: no-repeat;
|
|
1275
|
+
}
|
|
1276
|
+
|
|
1277
|
+
@media (forced-colors: active) {
|
|
1278
|
+
.cirth details summary:after {
|
|
1279
|
+
background-color: canvastext;
|
|
1280
|
+
}
|
|
1281
|
+
}
|
|
1282
|
+
|
|
1283
|
+
.cirth details summary:after {
|
|
1284
|
+
content: "";
|
|
1285
|
+
transition: transform var(--cirth-transition);
|
|
1200
1286
|
}
|
|
1201
1287
|
|
|
1202
1288
|
.cirth details summary:focus {
|
|
@@ -1219,7 +1305,7 @@
|
|
|
1219
1305
|
}
|
|
1220
1306
|
|
|
1221
1307
|
.cirth details summary[role="button"]:after {
|
|
1222
|
-
height: calc(var(--cirth-size-
|
|
1308
|
+
height: calc(var(--cirth-font-size-md) * var(--cirth-line-height, var(--cirth-line-height-normal)));
|
|
1223
1309
|
}
|
|
1224
1310
|
|
|
1225
1311
|
.cirth details[open] > summary {
|
|
@@ -1279,17 +1365,27 @@
|
|
|
1279
1365
|
}
|
|
1280
1366
|
|
|
1281
1367
|
.cirth details.dropdown > summary:after, .cirth details.dropdown > button:after, .cirth details.dropdown > a:after {
|
|
1282
|
-
width: var(--cirth-size-
|
|
1283
|
-
height: calc(var(--cirth-size-
|
|
1368
|
+
width: var(--cirth-font-size-md);
|
|
1369
|
+
height: calc(var(--cirth-font-size-md) * var(--cirth-line-height, var(--cirth-line-height-normal)));
|
|
1284
1370
|
float: right;
|
|
1285
1371
|
transform: rotate(0deg) translateX(calc(var(--cirth-form-element-spacing-horizontal) - var(--cirth-space-3)));
|
|
1286
|
-
background-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
background-repeat: no-repeat;
|
|
1372
|
+
background-color: var(--cirth-muted-color);
|
|
1373
|
+
mask-image: var(--cirth-icon-chevron);
|
|
1374
|
+
mask-position: 100%;
|
|
1375
|
+
mask-size: var(--cirth-font-size-md) auto;
|
|
1291
1376
|
margin-inline-start: var(--cirth-space-1);
|
|
1292
1377
|
display: block;
|
|
1378
|
+
mask-repeat: no-repeat;
|
|
1379
|
+
}
|
|
1380
|
+
|
|
1381
|
+
@media (forced-colors: active) {
|
|
1382
|
+
.cirth details.dropdown > summary:after, .cirth details.dropdown > button:after, .cirth details.dropdown > a:after {
|
|
1383
|
+
background-color: canvastext;
|
|
1384
|
+
}
|
|
1385
|
+
}
|
|
1386
|
+
|
|
1387
|
+
.cirth details.dropdown > summary:after, .cirth details.dropdown > button:after, .cirth details.dropdown > a:after {
|
|
1388
|
+
content: "";
|
|
1293
1389
|
}
|
|
1294
1390
|
|
|
1295
1391
|
.cirth nav details.dropdown {
|
|
@@ -1297,7 +1393,7 @@
|
|
|
1297
1393
|
}
|
|
1298
1394
|
|
|
1299
1395
|
.cirth details.dropdown > summary:not([role]) {
|
|
1300
|
-
height: calc(var(--cirth-size-
|
|
1396
|
+
height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
|
|
1301
1397
|
padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
|
|
1302
1398
|
border: var(--cirth-border-width) solid var(--cirth-form-element-border-color);
|
|
1303
1399
|
border-radius: var(--cirth-border-radius);
|
|
@@ -1345,7 +1441,7 @@
|
|
|
1345
1441
|
}
|
|
1346
1442
|
|
|
1347
1443
|
.cirth nav details.dropdown > summary:not([role]) {
|
|
1348
|
-
height: calc(var(--cirth-size-
|
|
1444
|
+
height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-nav-link-spacing-vertical) * 2);
|
|
1349
1445
|
padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
|
|
1350
1446
|
}
|
|
1351
1447
|
|
|
@@ -1498,7 +1594,7 @@
|
|
|
1498
1594
|
z-index: 2;
|
|
1499
1595
|
}
|
|
1500
1596
|
|
|
1501
|
-
|
|
1597
|
+
.cirth [role="search"] > :has( + small:last-child), .cirth .group > :has( + small:last-child) {
|
|
1502
1598
|
border-start-end-radius: var(--cirth-border-radius);
|
|
1503
1599
|
border-end-end-radius: var(--cirth-border-radius);
|
|
1504
1600
|
}
|
|
@@ -1511,78 +1607,27 @@
|
|
|
1511
1607
|
width: auto;
|
|
1512
1608
|
}
|
|
1513
1609
|
|
|
1514
|
-
|
|
1515
|
-
:
|
|
1516
|
-
|
|
1517
|
-
}
|
|
1518
|
-
|
|
1519
|
-
:is(.cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]), .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]), .cirth .group:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]), .cirth .group:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid])) {
|
|
1520
|
-
border-color: #0000;
|
|
1521
|
-
}
|
|
1522
|
-
|
|
1523
|
-
:is(.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), .cirth .group:has(input:not([type="submit"], [type="button"]):focus, select:focus)) {
|
|
1524
|
-
--cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
|
|
1525
|
-
}
|
|
1526
|
-
|
|
1527
|
-
.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
|
|
1528
|
-
--cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1529
|
-
var(--cirth-primary-border);
|
|
1530
|
-
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1531
|
-
var(--cirth-primary-hover-border);
|
|
1532
|
-
}
|
|
1533
|
-
|
|
1534
|
-
.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
|
|
1535
|
-
--cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1536
|
-
var(--cirth-primary-border);
|
|
1537
|
-
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1538
|
-
var(--cirth-primary-hover-border);
|
|
1539
|
-
}
|
|
1540
|
-
|
|
1541
|
-
.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
|
|
1542
|
-
--cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1543
|
-
var(--cirth-primary-border);
|
|
1544
|
-
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1545
|
-
var(--cirth-primary-hover-border);
|
|
1546
|
-
}
|
|
1547
|
-
|
|
1548
|
-
.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
|
|
1549
|
-
--cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1550
|
-
var(--cirth-primary-border);
|
|
1551
|
-
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1552
|
-
var(--cirth-primary-hover-border);
|
|
1553
|
-
}
|
|
1554
|
-
|
|
1555
|
-
.cirth .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
|
|
1556
|
-
--cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1557
|
-
var(--cirth-primary-border);
|
|
1558
|
-
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1559
|
-
var(--cirth-primary-hover-border);
|
|
1560
|
-
}
|
|
1610
|
+
.cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), .cirth .group:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
|
|
1611
|
+
--cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
|
|
1612
|
+
}
|
|
1561
1613
|
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1566
|
-
var(--cirth-primary-hover-border);
|
|
1567
|
-
}
|
|
1614
|
+
.cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]), .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]), .cirth .group:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]), .cirth .group:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]) {
|
|
1615
|
+
border-color: #0000;
|
|
1616
|
+
}
|
|
1568
1617
|
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1573
|
-
var(--cirth-primary-hover-border);
|
|
1574
|
-
}
|
|
1618
|
+
.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), .cirth .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
|
|
1619
|
+
--cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
|
|
1620
|
+
}
|
|
1575
1621
|
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1622
|
+
.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], .cirth .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, .cirth .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], .cirth .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], .cirth .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
|
|
1623
|
+
--cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1624
|
+
var(--cirth-primary-border);
|
|
1625
|
+
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1626
|
+
var(--cirth-primary-hover-border);
|
|
1627
|
+
}
|
|
1582
1628
|
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
}
|
|
1629
|
+
.cirth [role="search"] button:focus, .cirth [role="search"] [type="submit"]:focus, .cirth [role="search"] [type="reset"]:focus, .cirth [role="search"] [type="button"]:focus, .cirth [role="search"] [role="button"]:focus, .cirth .group button:focus, .cirth .group [type="submit"]:focus, .cirth .group [type="reset"]:focus, .cirth .group [type="button"]:focus, .cirth .group [role="button"]:focus {
|
|
1630
|
+
box-shadow: none;
|
|
1586
1631
|
}
|
|
1587
1632
|
|
|
1588
1633
|
.cirth [role="search"] > :not([hidden], input[type="hidden"]):nth-child(1 of :not([hidden], input[type="hidden"])) {
|
|
@@ -1590,12 +1635,7 @@
|
|
|
1590
1635
|
border-end-start-radius: var(--cirth-radius-pill);
|
|
1591
1636
|
}
|
|
1592
1637
|
|
|
1593
|
-
.cirth [role="search"] > :not([hidden], input[type="hidden"]):nth-last-child(1 of :not([hidden], input[type="hidden"])) {
|
|
1594
|
-
border-start-end-radius: var(--cirth-radius-pill);
|
|
1595
|
-
border-end-end-radius: var(--cirth-radius-pill);
|
|
1596
|
-
}
|
|
1597
|
-
|
|
1598
|
-
.cirth [role="search"] > :has( + small:last-child) {
|
|
1638
|
+
.cirth [role="search"] > :not([hidden], input[type="hidden"]):nth-last-child(1 of :not([hidden], input[type="hidden"])), .cirth [role="search"] > :has( + small:last-child) {
|
|
1599
1639
|
border-start-end-radius: var(--cirth-radius-pill);
|
|
1600
1640
|
border-end-end-radius: var(--cirth-radius-pill);
|
|
1601
1641
|
}
|
|
@@ -1609,13 +1649,10 @@
|
|
|
1609
1649
|
vertical-align: -.125em;
|
|
1610
1650
|
width: 1em;
|
|
1611
1651
|
height: 1em;
|
|
1612
|
-
-webkit-mask-image: var(--cirth-icon-loading);
|
|
1613
1652
|
mask-image: var(--cirth-icon-loading);
|
|
1614
1653
|
background-color: currentColor;
|
|
1615
1654
|
display: inline-block;
|
|
1616
|
-
-webkit-mask-size: 1em;
|
|
1617
1655
|
mask-size: 1em;
|
|
1618
|
-
-webkit-mask-repeat: no-repeat;
|
|
1619
1656
|
mask-repeat: no-repeat;
|
|
1620
1657
|
}
|
|
1621
1658
|
|
|
@@ -1656,7 +1693,7 @@
|
|
|
1656
1693
|
.cirth meter {
|
|
1657
1694
|
appearance: none;
|
|
1658
1695
|
width: 100%;
|
|
1659
|
-
height: var(--cirth-
|
|
1696
|
+
height: var(--cirth-space-2);
|
|
1660
1697
|
margin-bottom: calc(var(--cirth-spacing) * .5);
|
|
1661
1698
|
border: var(--cirth-border-width-1) solid var(--cirth-meter-border-color);
|
|
1662
1699
|
border-radius: var(--cirth-border-radius);
|
|
@@ -1760,7 +1797,7 @@
|
|
|
1760
1797
|
}
|
|
1761
1798
|
|
|
1762
1799
|
.cirth dialog > article > header .close, .cirth dialog > article > header :is(a, button)[rel="prev"] {
|
|
1763
|
-
margin: calc(calc((var(--cirth-size-
|
|
1800
|
+
margin: calc(calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * -1);
|
|
1764
1801
|
float: right;
|
|
1765
1802
|
margin-inline-start: var(--cirth-spacing);
|
|
1766
1803
|
padding: 0;
|
|
@@ -1779,23 +1816,37 @@
|
|
|
1779
1816
|
}
|
|
1780
1817
|
|
|
1781
1818
|
.cirth dialog > article .close, .cirth dialog > article :is(a, button)[rel="prev"] {
|
|
1782
|
-
width: calc(var(--cirth-size-
|
|
1783
|
-
height: calc(var(--cirth-size-
|
|
1784
|
-
margin-top: calc(var(--cirth-spacing) * -1 - calc((var(--cirth-size-
|
|
1785
|
-
margin-right: calc(calc((var(--cirth-size-
|
|
1786
|
-
margin-bottom: calc(var(--cirth-spacing) - calc((var(--cirth-size-
|
|
1787
|
-
background-image: var(--cirth-icon-close);
|
|
1788
|
-
background-position: center;
|
|
1789
|
-
background-size: auto var(--cirth-size-4);
|
|
1819
|
+
width: calc(var(--cirth-font-size-md) + calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * 2);
|
|
1820
|
+
height: calc(var(--cirth-font-size-md) + calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * 2);
|
|
1821
|
+
margin-top: calc(var(--cirth-spacing) * -1 - calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2));
|
|
1822
|
+
margin-right: calc(calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * -1);
|
|
1823
|
+
margin-bottom: calc(var(--cirth-spacing) - calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2));
|
|
1790
1824
|
opacity: .5;
|
|
1791
1825
|
transition: opacity var(--cirth-transition);
|
|
1792
1826
|
background-color: #0000;
|
|
1793
|
-
background-repeat: no-repeat;
|
|
1794
1827
|
border: none;
|
|
1795
1828
|
margin-inline-start: auto;
|
|
1796
1829
|
display: block;
|
|
1797
1830
|
}
|
|
1798
1831
|
|
|
1832
|
+
.cirth dialog > article .close:before, .cirth dialog > article :is(a, button)[rel="prev"]:before {
|
|
1833
|
+
background-color: var(--cirth-muted-color);
|
|
1834
|
+
content: "";
|
|
1835
|
+
width: 100%;
|
|
1836
|
+
height: 100%;
|
|
1837
|
+
mask-image: var(--cirth-icon-close);
|
|
1838
|
+
mask-position: center;
|
|
1839
|
+
mask-size: auto var(--cirth-font-size-md);
|
|
1840
|
+
display: block;
|
|
1841
|
+
mask-repeat: no-repeat;
|
|
1842
|
+
}
|
|
1843
|
+
|
|
1844
|
+
@media (forced-colors: active) {
|
|
1845
|
+
.cirth dialog > article .close:before, .cirth dialog > article :is(a, button)[rel="prev"]:before {
|
|
1846
|
+
background-color: canvastext;
|
|
1847
|
+
}
|
|
1848
|
+
}
|
|
1849
|
+
|
|
1799
1850
|
.cirth dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
1800
1851
|
opacity: 1;
|
|
1801
1852
|
}
|
|
@@ -1861,7 +1912,7 @@
|
|
|
1861
1912
|
|
|
1862
1913
|
.cirth nav li button, .cirth nav li [role="button"], .cirth nav li [type="button"], .cirth nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), .cirth nav li select {
|
|
1863
1914
|
height: auto;
|
|
1864
|
-
min-block-size: var(--cirth-
|
|
1915
|
+
min-block-size: var(--cirth-space-6);
|
|
1865
1916
|
margin-inline: inherit;
|
|
1866
1917
|
padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
|
|
1867
1918
|
margin-bottom: 0;
|
|
@@ -1949,7 +2000,7 @@
|
|
|
1949
2000
|
vertical-align: baseline;
|
|
1950
2001
|
appearance: none;
|
|
1951
2002
|
width: 100%;
|
|
1952
|
-
height: var(--cirth-
|
|
2003
|
+
height: var(--cirth-space-2);
|
|
1953
2004
|
margin-bottom: calc(var(--cirth-spacing) * .5);
|
|
1954
2005
|
border: var(--cirth-border-width-1) solid var(--cirth-progress-border-color);
|
|
1955
2006
|
border-radius: var(--cirth-border-radius);
|
|
@@ -2063,27 +2114,23 @@
|
|
|
2063
2114
|
}
|
|
2064
2115
|
|
|
2065
2116
|
.cirth {
|
|
2066
|
-
--cirth-color-black: #000;
|
|
2067
|
-
--cirth-color-white: #fff;
|
|
2068
|
-
--cirth-color-transparent: transparent;
|
|
2069
|
-
--cirth-color-current: currentColor;
|
|
2070
2117
|
--cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
2071
2118
|
--cirth-font-family-sans: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
|
|
2072
2119
|
"Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
|
|
2073
2120
|
--cirth-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
|
|
2074
2121
|
--cirth-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
|
|
2075
2122
|
monospace, var(--cirth-font-family-emoji);
|
|
2076
|
-
--cirth-font-family-display: var(--cirth-font-family-serif);
|
|
2077
2123
|
--cirth-font-size-xs: .75rem;
|
|
2078
2124
|
--cirth-font-size-sm: .875rem;
|
|
2079
2125
|
--cirth-font-size-md: 1rem;
|
|
2080
2126
|
--cirth-font-size-lg: 1.125rem;
|
|
2081
2127
|
--cirth-font-size-xl: 1.25rem;
|
|
2082
|
-
--cirth-font-size-2xl: 1.
|
|
2083
|
-
--cirth-font-size-3xl: 1.
|
|
2084
|
-
--cirth-font-size-4xl:
|
|
2085
|
-
--cirth-font-size-5xl:
|
|
2086
|
-
--cirth-font-size-6xl: 2.
|
|
2128
|
+
--cirth-font-size-2xl: 1.5rem;
|
|
2129
|
+
--cirth-font-size-3xl: 1.75rem;
|
|
2130
|
+
--cirth-font-size-4xl: 2rem;
|
|
2131
|
+
--cirth-font-size-5xl: 2.25rem;
|
|
2132
|
+
--cirth-font-size-6xl: 2.75rem;
|
|
2133
|
+
--cirth-font-size-7xl: 3.5rem;
|
|
2087
2134
|
--cirth-font-weight-light: 300;
|
|
2088
2135
|
--cirth-font-weight-regular: 400;
|
|
2089
2136
|
--cirth-font-weight-medium: 500;
|
|
@@ -2110,19 +2157,6 @@
|
|
|
2110
2157
|
--cirth-space-16: 4rem;
|
|
2111
2158
|
--cirth-space-20: 5rem;
|
|
2112
2159
|
--cirth-space-24: 6rem;
|
|
2113
|
-
--cirth-size-0: 0;
|
|
2114
|
-
--cirth-size-1: .25rem;
|
|
2115
|
-
--cirth-size-2: .5rem;
|
|
2116
|
-
--cirth-size-3: .75rem;
|
|
2117
|
-
--cirth-size-4: 1rem;
|
|
2118
|
-
--cirth-size-5: 1.25rem;
|
|
2119
|
-
--cirth-size-6: 1.5rem;
|
|
2120
|
-
--cirth-size-8: 2rem;
|
|
2121
|
-
--cirth-size-10: 2.5rem;
|
|
2122
|
-
--cirth-size-12: 3rem;
|
|
2123
|
-
--cirth-size-16: 4rem;
|
|
2124
|
-
--cirth-size-20: 5rem;
|
|
2125
|
-
--cirth-size-24: 6rem;
|
|
2126
2160
|
--cirth-radius-none: 0;
|
|
2127
2161
|
--cirth-radius-xs: .125rem;
|
|
2128
2162
|
--cirth-radius-sm: .25rem;
|
|
@@ -2135,9 +2169,6 @@
|
|
|
2135
2169
|
--cirth-border-width-1: .0625rem;
|
|
2136
2170
|
--cirth-border-width-2: .125rem;
|
|
2137
2171
|
--cirth-border-width-4: .25rem;
|
|
2138
|
-
--cirth-outline-width-1: .0625rem;
|
|
2139
|
-
--cirth-outline-width-2: .125rem;
|
|
2140
|
-
--cirth-outline-width-4: .25rem;
|
|
2141
2172
|
--cirth-duration-instant: 0s;
|
|
2142
2173
|
--cirth-duration-fast: .1s;
|
|
2143
2174
|
--cirth-duration-normal: .2s;
|
|
@@ -2148,7 +2179,6 @@
|
|
|
2148
2179
|
--cirth-ease-out: cubic-bezier(0, 0, .2, 1);
|
|
2149
2180
|
--cirth-ease-in-out: cubic-bezier(.4, 0, .2, 1);
|
|
2150
2181
|
--cirth-opacity-disabled: .5;
|
|
2151
|
-
--cirth-opacity-muted: .72;
|
|
2152
2182
|
--cirth-opacity-overlay: .75;
|
|
2153
2183
|
--cirth-z-index-dropdown: 1000;
|
|
2154
2184
|
--cirth-z-index-sticky: 1020;
|
|
@@ -2156,6 +2186,7 @@
|
|
|
2156
2186
|
--cirth-z-index-modal-backdrop: 1040;
|
|
2157
2187
|
--cirth-z-index-modal: 1050;
|
|
2158
2188
|
--cirth-font-family: var(--cirth-font-family-sans);
|
|
2189
|
+
--cirth-font-family-display: var(--cirth-font-family-serif);
|
|
2159
2190
|
--cirth-line-height: var(--cirth-line-height-normal);
|
|
2160
2191
|
--cirth-font-weight: var(--cirth-font-weight-regular);
|
|
2161
2192
|
--cirth-font-size: 100%;
|
|
@@ -2167,7 +2198,8 @@
|
|
|
2167
2198
|
--cirth-code-border-radius: min(var(--cirth-border-radius),
|
|
2168
2199
|
var(--cirth-radius-sm));
|
|
2169
2200
|
--cirth-border-width: var(--cirth-border-width-1);
|
|
2170
|
-
--cirth-outline-width: var(--cirth-
|
|
2201
|
+
--cirth-outline-width: var(--cirth-border-width-2);
|
|
2202
|
+
--cirth-background-color: var(--cirth-canvas);
|
|
2171
2203
|
--cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-out);
|
|
2172
2204
|
--cirth-spacing: var(--cirth-space-4);
|
|
2173
2205
|
--cirth-typography-spacing-vertical: var(--cirth-space-4);
|
|
@@ -2198,13 +2230,9 @@
|
|
|
2198
2230
|
--cirth-nav-link-spacing-vertical: var(--cirth-space-2);
|
|
2199
2231
|
--cirth-nav-link-spacing-horizontal: var(--cirth-space-2);
|
|
2200
2232
|
--cirth-nav-breadcrumb-divider: ">";
|
|
2201
|
-
--cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='
|
|
2202
|
-
--cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='
|
|
2203
|
-
--cirth-icon-
|
|
2204
|
-
--cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
|
2205
|
-
--cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2206
|
-
--cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
2207
|
-
--cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
|
2233
|
+
--cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2234
|
+
--cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
|
2235
|
+
--cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
|
2208
2236
|
--cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 146, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
|
|
2209
2237
|
}
|
|
2210
2238
|
|
|
@@ -2226,21 +2254,27 @@
|
|
|
2226
2254
|
}
|
|
2227
2255
|
|
|
2228
2256
|
.cirth h1 {
|
|
2229
|
-
--cirth-font-size: clamp(
|
|
2257
|
+
--cirth-font-size: clamp(var(--cirth-font-size-5xl),
|
|
2258
|
+
1.7rem + 2.2vw,
|
|
2259
|
+
var(--cirth-font-size-7xl));
|
|
2230
2260
|
--cirth-line-height: var(--cirth-line-height-tight);
|
|
2231
2261
|
--cirth-letter-spacing: var(--cirth-letter-spacing-tight);
|
|
2232
2262
|
--cirth-typography-spacing-top: var(--cirth-space-12);
|
|
2233
2263
|
}
|
|
2234
2264
|
|
|
2235
2265
|
.cirth h2 {
|
|
2236
|
-
--cirth-font-size: clamp(
|
|
2266
|
+
--cirth-font-size: clamp(var(--cirth-font-size-2xl),
|
|
2267
|
+
1.3rem + 1vw,
|
|
2268
|
+
var(--cirth-font-size-4xl));
|
|
2237
2269
|
--cirth-line-height: 1.15;
|
|
2238
2270
|
--cirth-letter-spacing: var(--cirth-letter-spacing-tight);
|
|
2239
2271
|
--cirth-typography-spacing-top: var(--cirth-space-12);
|
|
2240
2272
|
}
|
|
2241
2273
|
|
|
2242
2274
|
.cirth h3 {
|
|
2243
|
-
--cirth-font-size: clamp(
|
|
2275
|
+
--cirth-font-size: clamp(var(--cirth-font-size-xl),
|
|
2276
|
+
1.15rem + .5vw,
|
|
2277
|
+
var(--cirth-font-size-2xl));
|
|
2244
2278
|
--cirth-line-height: 1.2;
|
|
2245
2279
|
--cirth-letter-spacing: var(--cirth-letter-spacing-snug);
|
|
2246
2280
|
--cirth-typography-spacing-top: var(--cirth-space-10);
|
|
@@ -2288,7 +2322,7 @@
|
|
|
2288
2322
|
}
|
|
2289
2323
|
|
|
2290
2324
|
.cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where(select, textarea) {
|
|
2291
|
-
--cirth-outline-width: var(--cirth-
|
|
2325
|
+
--cirth-outline-width: var(--cirth-border-width-1);
|
|
2292
2326
|
--cirth-line-height: var(--cirth-line-height-relaxed);
|
|
2293
2327
|
}
|
|
2294
2328
|
|
|
@@ -2323,18 +2357,18 @@
|
|
|
2323
2357
|
}
|
|
2324
2358
|
|
|
2325
2359
|
.cirth details.dropdown summary:not([role="button"]) {
|
|
2326
|
-
--cirth-outline-width: var(--cirth-
|
|
2360
|
+
--cirth-outline-width: var(--cirth-border-width-1);
|
|
2327
2361
|
}
|
|
2328
2362
|
|
|
2329
2363
|
.cirth nav details.dropdown summary:focus-visible {
|
|
2330
|
-
--cirth-outline-width: var(--cirth-
|
|
2364
|
+
--cirth-outline-width: var(--cirth-border-width-2);
|
|
2331
2365
|
}
|
|
2332
2366
|
|
|
2333
2367
|
.cirth [role="search"] {
|
|
2334
2368
|
--cirth-border-radius: var(--cirth-radius-pill);
|
|
2335
2369
|
}
|
|
2336
2370
|
|
|
2337
|
-
|
|
2371
|
+
.cirth [role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus), .cirth .group:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus) {
|
|
2338
2372
|
--cirth-group-box-shadow-focus-with-button: 0
|
|
2339
2373
|
0
|
|
2340
2374
|
0
|
|
@@ -2342,7 +2376,7 @@
|
|
|
2342
2376
|
var(--cirth-secondary-focus);
|
|
2343
2377
|
}
|
|
2344
2378
|
|
|
2345
|
-
|
|
2379
|
+
.cirth [role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus), .cirth .group:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus) {
|
|
2346
2380
|
--cirth-group-box-shadow-focus-with-button: 0
|
|
2347
2381
|
0
|
|
2348
2382
|
0
|
|
@@ -2358,112 +2392,133 @@
|
|
|
2358
2392
|
filter: brightness(0) invert();
|
|
2359
2393
|
}
|
|
2360
2394
|
|
|
2395
|
+
.cirth {
|
|
2396
|
+
--cirth-canvas: light-dark(oklch(97.4% .004 69.35), oklch(20.15% .003 264));
|
|
2397
|
+
--cirth-color: light-dark(oklch(35.3% .021 264), oklch(83% .016 264));
|
|
2398
|
+
--cirth-text-selection-color: light-dark(oklch(65.7% .121 69.35 / .25), oklch(70% .129 69.35 / .1875));
|
|
2399
|
+
--cirth-muted-color: light-dark(oklch(52.7% .032 264), oklch(61.3% .032 264));
|
|
2400
|
+
--cirth-muted-border-color: light-dark(oklch(93.85% .003 264), oklch(26.7% .011 264));
|
|
2401
|
+
--cirth-error: light-dark(oklch(44% .151 29.73), oklch(74.3% .133 29.73));
|
|
2402
|
+
--cirth-success: light-dark(oklch(52.7% .1 160.59), oklch(65.7% .125 160.59));
|
|
2403
|
+
--cirth-warning: light-dark(oklch(48.3% .086 78), oklch(70% .124 78));
|
|
2404
|
+
--cirth-primary: light-dark(oklch(52.7% .097 69.35), oklch(70% .129 69.35));
|
|
2405
|
+
--cirth-secondary: light-dark(oklch(52.7% .032 264), oklch(70% .028 264));
|
|
2406
|
+
--cirth-secondary-underline: light-dark(oklch(52.7% .032 264 / .5), oklch(70% .028 264 / .5));
|
|
2407
|
+
--cirth-secondary-hover: light-dark(oklch(44% .028 264), oklch(78.7% .021 264));
|
|
2408
|
+
--cirth-secondary-hover-background: light-dark(oklch(44% .028 264), oklch(52.7% .032 264));
|
|
2409
|
+
--cirth-secondary-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(70% .028 264 / .7));
|
|
2410
|
+
--cirth-contrast: light-dark(oklch(22.3% .006 264), oklch(91.7% .006 264));
|
|
2411
|
+
--cirth-contrast-background: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
|
|
2412
|
+
--cirth-contrast-underline: light-dark(oklch(22.3% .006 264 / .5), oklch(91.7% .006 264 / .5));
|
|
2413
|
+
--cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
|
|
2414
|
+
--cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
|
|
2415
|
+
--cirth-contrast-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(87.3% .011 264 / .5));
|
|
2416
|
+
--cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
|
|
2417
|
+
--cirth-link-visited-color: light-dark(oklch(48.3% .03 264), oklch(65.7% .03 264));
|
|
2418
|
+
--cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .03 264 / .01698), .0335rem .067rem .402rem oklch(65.7% .03 264 / .024), .0625rem .125rem .75rem oklch(65.7% .03 264 / .03), .1125rem .225rem 1.35rem oklch(65.7% .03 264 / .036), .2085rem .417rem 2.502rem oklch(65.7% .03 264 / .04302), .5rem 1rem 6rem oklch(65.7% .03 264 / .06), 0 0 0 .0625rem oklch(65.7% .03 264 / .015),
|
|
2419
|
+
.0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015));
|
|
2420
|
+
--cirth-h1-color: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
|
|
2421
|
+
--cirth-h2-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
|
|
2422
|
+
--cirth-h3-color: light-dark(oklch(31% .016 264), oklch(83% .016 264));
|
|
2423
|
+
--cirth-h4-color: light-dark(oklch(35.3% .021 264), oklch(78.7% .021 264));
|
|
2424
|
+
--cirth-h5-color: light-dark(oklch(39.7% .025 264), oklch(74.3% .025 264));
|
|
2425
|
+
--cirth-h6-color: light-dark(oklch(44% .028 264), oklch(65.7% .03 264));
|
|
2426
|
+
--cirth-mark-color: light-dark(oklch(18% 0 264), oklch(100% 0 0));
|
|
2427
|
+
--cirth-code-background-color: light-dark(oklch(97% 0 288), oklch(23.4% .00725 264));
|
|
2428
|
+
--cirth-code-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
|
|
2429
|
+
--cirth-form-element-background-color: light-dark(oklch(99% 0 336), oklch(24.5% .0085 264));
|
|
2430
|
+
--cirth-form-element-selected-background-color: light-dark(oklch(91.7% .006 264), oklch(31% .016 264));
|
|
2431
|
+
--cirth-form-element-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
|
|
2432
|
+
--cirth-form-element-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
|
|
2433
|
+
--cirth-form-element-active-background-color: light-dark(oklch(100% 0 0), oklch(23.4% .00725 264));
|
|
2434
|
+
--cirth-switch-background-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
|
|
2435
|
+
--cirth-range-border-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
|
|
2436
|
+
--cirth-range-active-border-color: light-dark(oklch(83% .016 264), oklch(31% .016 264));
|
|
2437
|
+
--cirth-card-background-color: light-dark(oklch(100% 0 0), oklch(22.3% .006 264));
|
|
2438
|
+
--cirth-card-sectioning-background-color: light-dark(oklch(99% 0 336), oklch(23.4% .00725 264));
|
|
2439
|
+
--cirth-dropdown-background-color: light-dark(oklch(100% 0 0), oklch(22.3% .006 264));
|
|
2440
|
+
--cirth-dropdown-border-color: light-dark(oklch(96% 0 264), oklch(26.7% .011 264));
|
|
2441
|
+
--cirth-dropdown-hover-background-color: light-dark(oklch(96% 0 264), oklch(26.7% .011 264));
|
|
2442
|
+
--cirth-progress-background-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
|
|
2443
|
+
--cirth-progress-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
|
|
2444
|
+
}
|
|
2445
|
+
|
|
2361
2446
|
.cirth:where([data-theme="light"]), .cirth :where([data-theme="light"]), .cirth:where(:not([data-theme="dark"])) {
|
|
2362
|
-
--lightningcss-light: initial;
|
|
2363
|
-
--lightningcss-dark: ;
|
|
2364
2447
|
color-scheme: light;
|
|
2365
|
-
--cirth-
|
|
2366
|
-
--cirth-
|
|
2367
|
-
--cirth-
|
|
2368
|
-
--cirth-
|
|
2369
|
-
--cirth-
|
|
2370
|
-
--cirth-
|
|
2371
|
-
--cirth-
|
|
2448
|
+
--cirth-error-text: color-mix(in oklch, var(--cirth-error) 80.2%, black);
|
|
2449
|
+
--cirth-error-border: oklch(from var(--cirth-error) calc(l * 1.493) calc(c * 1.298) h);
|
|
2450
|
+
--cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.198) calc(c * 1.199) h);
|
|
2451
|
+
--cirth-error-surface: oklch(from var(--cirth-error) 93% .05 h);
|
|
2452
|
+
--cirth-success-text: color-mix(in oklch, var(--cirth-success) 67%, black);
|
|
2453
|
+
--cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.163) calc(c * 1.17) h);
|
|
2454
|
+
--cirth-success-active: var(--cirth-success);
|
|
2455
|
+
--cirth-success-surface: oklch(from var(--cirth-success) 93% .05 h);
|
|
2456
|
+
--cirth-warning-text: color-mix(in oklch, var(--cirth-warning) 73.1%, black);
|
|
2457
|
+
--cirth-warning-border: oklch(from var(--cirth-warning) calc(l * 1.269) calc(c * 1.267) h);
|
|
2458
|
+
--cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.091) calc(c * 1.081) h);
|
|
2459
|
+
--cirth-warning-surface: oklch(from var(--cirth-warning) 93% .05 h);
|
|
2460
|
+
--cirth-primary-background: var(--cirth-primary);
|
|
2372
2461
|
--cirth-primary-border: var(--cirth-primary-background);
|
|
2373
|
-
--cirth-primary-underline: oklch(
|
|
2374
|
-
--cirth-primary-hover: oklch(
|
|
2375
|
-
--cirth-primary-hover-background:
|
|
2462
|
+
--cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
|
|
2463
|
+
--cirth-primary-hover: color-mix(in oklch, var(--cirth-primary) 83.5%, black);
|
|
2464
|
+
--cirth-primary-hover-background: color-mix(in oklch,
|
|
2465
|
+
var(--cirth-primary) 91.7%,
|
|
2466
|
+
black);
|
|
2376
2467
|
--cirth-primary-hover-border: var(--cirth-primary-hover-background);
|
|
2377
2468
|
--cirth-primary-hover-underline: var(--cirth-primary-hover);
|
|
2378
|
-
--cirth-primary-focus: oklch(
|
|
2469
|
+
--cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
|
|
2379
2470
|
--cirth-primary-inverse: oklch(100% 0 0);
|
|
2380
|
-
--cirth-secondary: oklch(52.7% .032 264);
|
|
2381
2471
|
--cirth-secondary-background: oklch(48.3% .03 264);
|
|
2382
2472
|
--cirth-secondary-border: var(--cirth-secondary-background);
|
|
2383
|
-
--cirth-secondary-underline: oklch(52.7% .032 264 / .5);
|
|
2384
|
-
--cirth-secondary-hover: oklch(44% .028 264);
|
|
2385
|
-
--cirth-secondary-hover-background: oklch(44% .028 264);
|
|
2386
2473
|
--cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
|
|
2387
2474
|
--cirth-secondary-hover-underline: var(--cirth-secondary-hover);
|
|
2388
|
-
--cirth-secondary-focus: oklch(48.3% .03 264 / .7);
|
|
2389
2475
|
--cirth-secondary-inverse: oklch(100% 0 0);
|
|
2390
|
-
--cirth-contrast: oklch(22.3% .006 264);
|
|
2391
|
-
--cirth-contrast-background: oklch(22.3% .006 264);
|
|
2392
2476
|
--cirth-contrast-border: var(--cirth-contrast-background);
|
|
2393
|
-
--cirth-contrast-underline: oklch(22.3% .006 264 / .5);
|
|
2394
|
-
--cirth-contrast-hover: oklch(0% 0 0);
|
|
2395
|
-
--cirth-contrast-hover-background: oklch(0% 0 0);
|
|
2396
2477
|
--cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
|
|
2397
2478
|
--cirth-contrast-hover-underline: var(--cirth-secondary-hover);
|
|
2398
|
-
--cirth-
|
|
2399
|
-
--cirth-
|
|
2400
|
-
--cirth-
|
|
2401
|
-
--cirth-box-shadow: .0145rem .029rem .174rem oklch(65.7% .03 264 / .01698), .0335rem .067rem .402rem oklch(65.7% .03 264 / .024), .0625rem .125rem .75rem oklch(65.7% .03 264 / .03), .1125rem .225rem 1.35rem oklch(65.7% .03 264 / .036), .2085rem .417rem 2.502rem oklch(65.7% .03 264 / .04302), .5rem 1rem 6rem oklch(65.7% .03 264 / .06), 0 0 0 .0625rem oklch(65.7% .03 264 / .015);
|
|
2402
|
-
--cirth-h1-color: oklch(22.3% .006 264);
|
|
2403
|
-
--cirth-h2-color: oklch(26.7% .011 264);
|
|
2404
|
-
--cirth-h3-color: oklch(31% .016 264);
|
|
2405
|
-
--cirth-h4-color: oklch(35.3% .021 264);
|
|
2406
|
-
--cirth-h5-color: oklch(39.7% .025 264);
|
|
2407
|
-
--cirth-h6-color: oklch(44% .028 264);
|
|
2408
|
-
--cirth-mark-background-color: oklch(93% .05 78);
|
|
2409
|
-
--cirth-mark-color: oklch(18% 0 264);
|
|
2410
|
-
--cirth-ins-color: oklch(35.3% .067 160.59);
|
|
2411
|
-
--cirth-del-color: oklch(35.3% .122 29.73);
|
|
2479
|
+
--cirth-mark-background-color: var(--cirth-warning-surface);
|
|
2480
|
+
--cirth-ins-color: var(--cirth-success-text);
|
|
2481
|
+
--cirth-del-color: var(--cirth-error-text);
|
|
2412
2482
|
--cirth-blockquote-border-color: var(--cirth-muted-border-color);
|
|
2413
2483
|
--cirth-blockquote-footer-color: var(--cirth-muted-color);
|
|
2414
2484
|
--cirth-button-box-shadow: 0 0 0 #0000;
|
|
2415
2485
|
--cirth-button-hover-box-shadow: 0 0 0 #0000;
|
|
2416
2486
|
--cirth-table-border-color: var(--cirth-muted-border-color);
|
|
2417
2487
|
--cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
|
|
2418
|
-
--cirth-code-background-color: oklch(97% 0 288);
|
|
2419
|
-
--cirth-code-color: oklch(52.7% .032 264);
|
|
2420
2488
|
--cirth-code-kbd-background-color: var(--cirth-color);
|
|
2421
2489
|
--cirth-code-kbd-color: var(--cirth-background-color);
|
|
2422
|
-
--cirth-form-element-background-color: oklch(99% 0 336);
|
|
2423
|
-
--cirth-form-element-selected-background-color: oklch(91.7% .006 264);
|
|
2424
|
-
--cirth-form-element-border-color: oklch(61.3% .032 264);
|
|
2425
|
-
--cirth-form-element-color: oklch(26.7% .011 264);
|
|
2426
2490
|
--cirth-form-element-placeholder-color: var(--cirth-muted-color);
|
|
2427
|
-
--cirth-form-element-active-background-color: oklch(100% 0 0);
|
|
2428
2491
|
--cirth-form-element-active-border-color: var(--cirth-primary-border);
|
|
2429
2492
|
--cirth-form-element-focus-color: var(--cirth-primary-border);
|
|
2430
2493
|
--cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
|
|
2431
|
-
--cirth-form-element-invalid-border-color:
|
|
2432
|
-
--cirth-form-element-invalid-active-border-color:
|
|
2494
|
+
--cirth-form-element-invalid-border-color: var(--cirth-error-border);
|
|
2495
|
+
--cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
|
|
2433
2496
|
--cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
|
|
2434
|
-
--cirth-form-element-valid-border-color:
|
|
2435
|
-
--cirth-form-element-valid-active-border-color:
|
|
2497
|
+
--cirth-form-element-valid-border-color: var(--cirth-success-border);
|
|
2498
|
+
--cirth-form-element-valid-active-border-color: var(--cirth-success-active);
|
|
2436
2499
|
--cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
|
|
2437
|
-
--cirth-switch-
|
|
2500
|
+
--cirth-switch-thumb-box-shadow: 0 0 0 #0000;
|
|
2438
2501
|
--cirth-switch-checked-background-color: var(--cirth-primary-background);
|
|
2439
2502
|
--cirth-switch-color: var(--cirth-primary-inverse);
|
|
2440
|
-
--cirth-switch-thumb-box-shadow: 0 0 0 #0000;
|
|
2441
|
-
--cirth-range-border-color: oklch(91.7% .006 264);
|
|
2442
|
-
--cirth-range-active-border-color: oklch(83% .016 264);
|
|
2443
2503
|
--cirth-range-thumb-border-color: var(--cirth-background-color);
|
|
2444
2504
|
--cirth-range-thumb-color: var(--cirth-secondary-background);
|
|
2445
2505
|
--cirth-range-thumb-active-color: var(--cirth-primary-background);
|
|
2446
|
-
--cirth-accordion-border-color: var(--cirth-muted-border-color);
|
|
2447
2506
|
--cirth-accordion-active-summary-color: var(--cirth-primary-hover);
|
|
2448
2507
|
--cirth-accordion-close-summary-color: var(--cirth-color);
|
|
2449
2508
|
--cirth-accordion-open-summary-color: var(--cirth-muted-color);
|
|
2450
|
-
--cirth-card-background-color: oklch(100% 0 0);
|
|
2451
2509
|
--cirth-card-border-color: var(--cirth-muted-border-color);
|
|
2452
2510
|
--cirth-card-box-shadow: var(--cirth-box-shadow);
|
|
2453
|
-
--cirth-card-sectioning-background-color: oklch(99% 0 336);
|
|
2454
|
-
--cirth-dropdown-background-color: oklch(100% 0 0);
|
|
2455
|
-
--cirth-dropdown-border-color: oklch(96% 0 264);
|
|
2456
2511
|
--cirth-dropdown-box-shadow: var(--cirth-box-shadow);
|
|
2457
2512
|
--cirth-dropdown-color: var(--cirth-color);
|
|
2458
|
-
--cirth-dropdown-hover-background-color: oklch(96% 0 264);
|
|
2459
|
-
--cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
|
|
2460
2513
|
--cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
|
|
2461
|
-
--cirth-meter-optimum-color:
|
|
2462
|
-
--cirth-meter-suboptimum-color:
|
|
2463
|
-
--cirth-meter-even-less-good-color:
|
|
2464
|
-
--cirth-progress-background-color: oklch(91.7% .006 264);
|
|
2465
|
-
--cirth-progress-border-color: oklch(61.3% .032 264);
|
|
2514
|
+
--cirth-meter-optimum-color: var(--cirth-success);
|
|
2515
|
+
--cirth-meter-suboptimum-color: var(--cirth-warning);
|
|
2516
|
+
--cirth-meter-even-less-good-color: var(--cirth-error);
|
|
2466
2517
|
--cirth-progress-color: var(--cirth-primary-background);
|
|
2518
|
+
--cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2519
|
+
--cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
|
2520
|
+
--cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2521
|
+
--cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
2467
2522
|
--cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 124, 87)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2468
2523
|
--cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
|
2469
2524
|
}
|
|
@@ -2474,111 +2529,83 @@
|
|
|
2474
2529
|
|
|
2475
2530
|
@media only screen and (prefers-color-scheme: dark) {
|
|
2476
2531
|
.cirth:where(:not([data-theme])) {
|
|
2477
|
-
--lightningcss-light: ;
|
|
2478
|
-
--lightningcss-dark: initial;
|
|
2479
2532
|
color-scheme: dark;
|
|
2480
|
-
--cirth-
|
|
2481
|
-
--cirth-
|
|
2482
|
-
--cirth-
|
|
2483
|
-
--cirth-
|
|
2484
|
-
--cirth-
|
|
2485
|
-
--cirth-
|
|
2486
|
-
--cirth-
|
|
2533
|
+
--cirth-error-text: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
|
|
2534
|
+
--cirth-error-border: oklch(from var(--cirth-error) calc(l * .942) calc(c * 1.226) h);
|
|
2535
|
+
--cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
|
|
2536
|
+
--cirth-error-surface: oklch(from var(--cirth-error) 35.3% .063 h);
|
|
2537
|
+
--cirth-success-text: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
|
|
2538
|
+
--cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.065) calc(c * 1.064) h);
|
|
2539
|
+
--cirth-success-active: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
|
|
2540
|
+
--cirth-success-surface: oklch(from var(--cirth-success) 35.3% .063 h);
|
|
2541
|
+
--cirth-warning-text: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
|
|
2542
|
+
--cirth-warning-border: var(--cirth-warning);
|
|
2543
|
+
--cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
|
|
2544
|
+
--cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
|
|
2545
|
+
--cirth-primary-background: color-mix(in oklch,
|
|
2546
|
+
var(--cirth-primary) 75.2%,
|
|
2547
|
+
black);
|
|
2487
2548
|
--cirth-primary-border: var(--cirth-primary-background);
|
|
2488
|
-
--cirth-primary-underline: oklch(
|
|
2489
|
-
--cirth-primary-hover: oklch(
|
|
2490
|
-
--cirth-primary-hover-background:
|
|
2549
|
+
--cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
|
|
2550
|
+
--cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
|
|
2551
|
+
--cirth-primary-hover-background: color-mix(in oklch,
|
|
2552
|
+
var(--cirth-primary) 81.4%,
|
|
2553
|
+
black);
|
|
2491
2554
|
--cirth-primary-hover-border: var(--cirth-primary-hover-background);
|
|
2492
2555
|
--cirth-primary-hover-underline: var(--cirth-primary-hover);
|
|
2493
|
-
--cirth-primary-focus: oklch(
|
|
2556
|
+
--cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
|
|
2494
2557
|
--cirth-primary-inverse: oklch(100% 0 0);
|
|
2495
|
-
--cirth-secondary: oklch(70% .028 264);
|
|
2496
2558
|
--cirth-secondary-background: oklch(48.3% .03 264);
|
|
2497
2559
|
--cirth-secondary-border: var(--cirth-secondary-background);
|
|
2498
|
-
--cirth-secondary-underline: oklch(70% .028 264 / .5);
|
|
2499
|
-
--cirth-secondary-hover: oklch(78.7% .021 264);
|
|
2500
|
-
--cirth-secondary-hover-background: oklch(52.7% .032 264);
|
|
2501
2560
|
--cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
|
|
2502
2561
|
--cirth-secondary-hover-underline: var(--cirth-secondary-hover);
|
|
2503
|
-
--cirth-secondary-focus: oklch(70% .028 264 / .7);
|
|
2504
2562
|
--cirth-secondary-inverse: oklch(100% 0 0);
|
|
2505
|
-
--cirth-contrast: oklch(91.7% .006 264);
|
|
2506
|
-
--cirth-contrast-background: oklch(96% 0 264);
|
|
2507
2563
|
--cirth-contrast-border: var(--cirth-contrast-background);
|
|
2508
|
-
--cirth-contrast-underline: oklch(91.7% .006 264 / .5);
|
|
2509
|
-
--cirth-contrast-hover: oklch(100% 0 0);
|
|
2510
|
-
--cirth-contrast-hover-background: oklch(100% 0 0);
|
|
2511
2564
|
--cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
|
|
2512
2565
|
--cirth-contrast-hover-underline: var(--cirth-contrast-hover);
|
|
2513
|
-
--cirth-
|
|
2514
|
-
--cirth-
|
|
2515
|
-
--cirth-
|
|
2516
|
-
--cirth-box-shadow: .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015);
|
|
2517
|
-
--cirth-h1-color: oklch(96% 0 264);
|
|
2518
|
-
--cirth-h2-color: oklch(91.7% .006 264);
|
|
2519
|
-
--cirth-h3-color: oklch(83% .016 264);
|
|
2520
|
-
--cirth-h4-color: oklch(78.7% .021 264);
|
|
2521
|
-
--cirth-h5-color: oklch(74.3% .025 264);
|
|
2522
|
-
--cirth-h6-color: oklch(65.7% .03 264);
|
|
2523
|
-
--cirth-mark-background-color: oklch(35.3% .063 78);
|
|
2524
|
-
--cirth-mark-color: oklch(100% 0 0);
|
|
2525
|
-
--cirth-ins-color: oklch(78.7% .15 160.59);
|
|
2526
|
-
--cirth-del-color: oklch(78.7% .106 29.73);
|
|
2566
|
+
--cirth-mark-background-color: var(--cirth-warning-surface);
|
|
2567
|
+
--cirth-ins-color: var(--cirth-success-text);
|
|
2568
|
+
--cirth-del-color: var(--cirth-error-text);
|
|
2527
2569
|
--cirth-blockquote-border-color: var(--cirth-muted-border-color);
|
|
2528
2570
|
--cirth-blockquote-footer-color: var(--cirth-muted-color);
|
|
2529
2571
|
--cirth-button-box-shadow: 0 0 0 #0000;
|
|
2530
2572
|
--cirth-button-hover-box-shadow: 0 0 0 #0000;
|
|
2531
2573
|
--cirth-table-border-color: var(--cirth-muted-border-color);
|
|
2532
2574
|
--cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
|
|
2533
|
-
--cirth-code-background-color: oklch(23.4% .00725 264);
|
|
2534
|
-
--cirth-code-color: oklch(65.7% .03 264);
|
|
2535
2575
|
--cirth-code-kbd-background-color: var(--cirth-color);
|
|
2536
2576
|
--cirth-code-kbd-color: var(--cirth-background-color);
|
|
2537
|
-
--cirth-form-element-background-color: oklch(24.5% .0085 264);
|
|
2538
|
-
--cirth-form-element-selected-background-color: oklch(31% .016 264);
|
|
2539
|
-
--cirth-form-element-border-color: oklch(52.7% .032 264);
|
|
2540
|
-
--cirth-form-element-color: oklch(91.7% .006 264);
|
|
2541
2577
|
--cirth-form-element-placeholder-color: oklch(65.7% .03 264);
|
|
2542
|
-
--cirth-form-element-active-background-color: oklch(23.4% .00725 264);
|
|
2543
2578
|
--cirth-form-element-active-border-color: var(--cirth-primary-border);
|
|
2544
2579
|
--cirth-form-element-focus-color: var(--cirth-primary-border);
|
|
2545
2580
|
--cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
|
|
2546
|
-
--cirth-form-element-invalid-border-color:
|
|
2547
|
-
--cirth-form-element-invalid-active-border-color:
|
|
2581
|
+
--cirth-form-element-invalid-border-color: var(--cirth-error-border);
|
|
2582
|
+
--cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
|
|
2548
2583
|
--cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
|
|
2549
|
-
--cirth-form-element-valid-border-color:
|
|
2550
|
-
--cirth-form-element-valid-active-border-color:
|
|
2584
|
+
--cirth-form-element-valid-border-color: var(--cirth-success-border);
|
|
2585
|
+
--cirth-form-element-valid-active-border-color: var(--cirth-success-active);
|
|
2551
2586
|
--cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
|
|
2552
|
-
--cirth-switch-
|
|
2587
|
+
--cirth-switch-thumb-box-shadow: 0 0 0 #0000;
|
|
2553
2588
|
--cirth-switch-checked-background-color: var(--cirth-primary-background);
|
|
2554
2589
|
--cirth-switch-color: var(--cirth-primary-inverse);
|
|
2555
|
-
--cirth-switch-thumb-box-shadow: 0 0 0 #0000;
|
|
2556
|
-
--cirth-range-border-color: oklch(26.7% .011 264);
|
|
2557
|
-
--cirth-range-active-border-color: oklch(31% .016 264);
|
|
2558
2590
|
--cirth-range-thumb-border-color: var(--cirth-background-color);
|
|
2559
2591
|
--cirth-range-thumb-color: var(--cirth-secondary-background);
|
|
2560
2592
|
--cirth-range-thumb-active-color: var(--cirth-primary-background);
|
|
2561
|
-
--cirth-accordion-border-color: var(--cirth-muted-border-color);
|
|
2562
2593
|
--cirth-accordion-active-summary-color: var(--cirth-primary-hover);
|
|
2563
2594
|
--cirth-accordion-close-summary-color: var(--cirth-color);
|
|
2564
2595
|
--cirth-accordion-open-summary-color: var(--cirth-muted-color);
|
|
2565
|
-
--cirth-card-background-color: oklch(22.3% .006 264);
|
|
2566
2596
|
--cirth-card-border-color: var(--cirth-card-background-color);
|
|
2567
2597
|
--cirth-card-box-shadow: var(--cirth-box-shadow);
|
|
2568
|
-
--cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
|
|
2569
|
-
--cirth-dropdown-background-color: oklch(22.3% .006 264);
|
|
2570
|
-
--cirth-dropdown-border-color: oklch(26.7% .011 264);
|
|
2571
2598
|
--cirth-dropdown-box-shadow: var(--cirth-box-shadow);
|
|
2572
2599
|
--cirth-dropdown-color: var(--cirth-color);
|
|
2573
|
-
--cirth-dropdown-hover-background-color: oklch(26.7% .011 264);
|
|
2574
|
-
--cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
|
|
2575
2600
|
--cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
|
|
2576
|
-
--cirth-meter-optimum-color:
|
|
2577
|
-
--cirth-meter-suboptimum-color:
|
|
2578
|
-
--cirth-meter-even-less-good-color:
|
|
2579
|
-
--cirth-progress-background-color: oklch(26.7% .011 264);
|
|
2580
|
-
--cirth-progress-border-color: oklch(52.7% .032 264);
|
|
2601
|
+
--cirth-meter-optimum-color: var(--cirth-success);
|
|
2602
|
+
--cirth-meter-suboptimum-color: var(--cirth-warning);
|
|
2603
|
+
--cirth-meter-even-less-good-color: var(--cirth-error);
|
|
2581
2604
|
--cirth-progress-color: oklch(61.3% .113 69.35);
|
|
2605
|
+
--cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2606
|
+
--cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
|
2607
|
+
--cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2608
|
+
--cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
2582
2609
|
--cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2583
2610
|
--cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
|
2584
2611
|
}
|
|
@@ -2593,111 +2620,83 @@
|
|
|
2593
2620
|
}
|
|
2594
2621
|
|
|
2595
2622
|
.cirth:where([data-theme="dark"]), .cirth :where([data-theme="dark"]) {
|
|
2596
|
-
--lightningcss-light: ;
|
|
2597
|
-
--lightningcss-dark: initial;
|
|
2598
2623
|
color-scheme: dark;
|
|
2599
|
-
--cirth-
|
|
2600
|
-
--cirth-
|
|
2601
|
-
--cirth-
|
|
2602
|
-
--cirth-
|
|
2603
|
-
--cirth-
|
|
2604
|
-
--cirth-
|
|
2605
|
-
--cirth-
|
|
2624
|
+
--cirth-error-text: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
|
|
2625
|
+
--cirth-error-border: oklch(from var(--cirth-error) calc(l * .942) calc(c * 1.226) h);
|
|
2626
|
+
--cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
|
|
2627
|
+
--cirth-error-surface: oklch(from var(--cirth-error) 35.3% .063 h);
|
|
2628
|
+
--cirth-success-text: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
|
|
2629
|
+
--cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.065) calc(c * 1.064) h);
|
|
2630
|
+
--cirth-success-active: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
|
|
2631
|
+
--cirth-success-surface: oklch(from var(--cirth-success) 35.3% .063 h);
|
|
2632
|
+
--cirth-warning-text: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
|
|
2633
|
+
--cirth-warning-border: var(--cirth-warning);
|
|
2634
|
+
--cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
|
|
2635
|
+
--cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
|
|
2636
|
+
--cirth-primary-background: color-mix(in oklch,
|
|
2637
|
+
var(--cirth-primary) 75.2%,
|
|
2638
|
+
black);
|
|
2606
2639
|
--cirth-primary-border: var(--cirth-primary-background);
|
|
2607
|
-
--cirth-primary-underline: oklch(
|
|
2608
|
-
--cirth-primary-hover: oklch(
|
|
2609
|
-
--cirth-primary-hover-background:
|
|
2640
|
+
--cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
|
|
2641
|
+
--cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
|
|
2642
|
+
--cirth-primary-hover-background: color-mix(in oklch,
|
|
2643
|
+
var(--cirth-primary) 81.4%,
|
|
2644
|
+
black);
|
|
2610
2645
|
--cirth-primary-hover-border: var(--cirth-primary-hover-background);
|
|
2611
2646
|
--cirth-primary-hover-underline: var(--cirth-primary-hover);
|
|
2612
|
-
--cirth-primary-focus: oklch(
|
|
2647
|
+
--cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
|
|
2613
2648
|
--cirth-primary-inverse: oklch(100% 0 0);
|
|
2614
|
-
--cirth-secondary: oklch(70% .028 264);
|
|
2615
2649
|
--cirth-secondary-background: oklch(48.3% .03 264);
|
|
2616
2650
|
--cirth-secondary-border: var(--cirth-secondary-background);
|
|
2617
|
-
--cirth-secondary-underline: oklch(70% .028 264 / .5);
|
|
2618
|
-
--cirth-secondary-hover: oklch(78.7% .021 264);
|
|
2619
|
-
--cirth-secondary-hover-background: oklch(52.7% .032 264);
|
|
2620
2651
|
--cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
|
|
2621
2652
|
--cirth-secondary-hover-underline: var(--cirth-secondary-hover);
|
|
2622
|
-
--cirth-secondary-focus: oklch(70% .028 264 / .7);
|
|
2623
2653
|
--cirth-secondary-inverse: oklch(100% 0 0);
|
|
2624
|
-
--cirth-contrast: oklch(91.7% .006 264);
|
|
2625
|
-
--cirth-contrast-background: oklch(96% 0 264);
|
|
2626
2654
|
--cirth-contrast-border: var(--cirth-contrast-background);
|
|
2627
|
-
--cirth-contrast-underline: oklch(91.7% .006 264 / .5);
|
|
2628
|
-
--cirth-contrast-hover: oklch(100% 0 0);
|
|
2629
|
-
--cirth-contrast-hover-background: oklch(100% 0 0);
|
|
2630
2655
|
--cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
|
|
2631
2656
|
--cirth-contrast-hover-underline: var(--cirth-contrast-hover);
|
|
2632
|
-
--cirth-
|
|
2633
|
-
--cirth-
|
|
2634
|
-
--cirth-
|
|
2635
|
-
--cirth-box-shadow: .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015);
|
|
2636
|
-
--cirth-h1-color: oklch(96% 0 264);
|
|
2637
|
-
--cirth-h2-color: oklch(91.7% .006 264);
|
|
2638
|
-
--cirth-h3-color: oklch(83% .016 264);
|
|
2639
|
-
--cirth-h4-color: oklch(78.7% .021 264);
|
|
2640
|
-
--cirth-h5-color: oklch(74.3% .025 264);
|
|
2641
|
-
--cirth-h6-color: oklch(65.7% .03 264);
|
|
2642
|
-
--cirth-mark-background-color: oklch(35.3% .063 78);
|
|
2643
|
-
--cirth-mark-color: oklch(100% 0 0);
|
|
2644
|
-
--cirth-ins-color: oklch(78.7% .15 160.59);
|
|
2645
|
-
--cirth-del-color: oklch(78.7% .106 29.73);
|
|
2657
|
+
--cirth-mark-background-color: var(--cirth-warning-surface);
|
|
2658
|
+
--cirth-ins-color: var(--cirth-success-text);
|
|
2659
|
+
--cirth-del-color: var(--cirth-error-text);
|
|
2646
2660
|
--cirth-blockquote-border-color: var(--cirth-muted-border-color);
|
|
2647
2661
|
--cirth-blockquote-footer-color: var(--cirth-muted-color);
|
|
2648
2662
|
--cirth-button-box-shadow: 0 0 0 #0000;
|
|
2649
2663
|
--cirth-button-hover-box-shadow: 0 0 0 #0000;
|
|
2650
2664
|
--cirth-table-border-color: var(--cirth-muted-border-color);
|
|
2651
2665
|
--cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
|
|
2652
|
-
--cirth-code-background-color: oklch(23.4% .00725 264);
|
|
2653
|
-
--cirth-code-color: oklch(65.7% .03 264);
|
|
2654
2666
|
--cirth-code-kbd-background-color: var(--cirth-color);
|
|
2655
2667
|
--cirth-code-kbd-color: var(--cirth-background-color);
|
|
2656
|
-
--cirth-form-element-background-color: oklch(24.5% .0085 264);
|
|
2657
|
-
--cirth-form-element-selected-background-color: oklch(31% .016 264);
|
|
2658
|
-
--cirth-form-element-border-color: oklch(52.7% .032 264);
|
|
2659
|
-
--cirth-form-element-color: oklch(91.7% .006 264);
|
|
2660
2668
|
--cirth-form-element-placeholder-color: oklch(65.7% .03 264);
|
|
2661
|
-
--cirth-form-element-active-background-color: oklch(23.4% .00725 264);
|
|
2662
2669
|
--cirth-form-element-active-border-color: var(--cirth-primary-border);
|
|
2663
2670
|
--cirth-form-element-focus-color: var(--cirth-primary-border);
|
|
2664
2671
|
--cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
|
|
2665
|
-
--cirth-form-element-invalid-border-color:
|
|
2666
|
-
--cirth-form-element-invalid-active-border-color:
|
|
2672
|
+
--cirth-form-element-invalid-border-color: var(--cirth-error-border);
|
|
2673
|
+
--cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
|
|
2667
2674
|
--cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
|
|
2668
|
-
--cirth-form-element-valid-border-color:
|
|
2669
|
-
--cirth-form-element-valid-active-border-color:
|
|
2675
|
+
--cirth-form-element-valid-border-color: var(--cirth-success-border);
|
|
2676
|
+
--cirth-form-element-valid-active-border-color: var(--cirth-success-active);
|
|
2670
2677
|
--cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
|
|
2671
|
-
--cirth-switch-
|
|
2678
|
+
--cirth-switch-thumb-box-shadow: 0 0 0 #0000;
|
|
2672
2679
|
--cirth-switch-checked-background-color: var(--cirth-primary-background);
|
|
2673
2680
|
--cirth-switch-color: var(--cirth-primary-inverse);
|
|
2674
|
-
--cirth-switch-thumb-box-shadow: 0 0 0 #0000;
|
|
2675
|
-
--cirth-range-border-color: oklch(26.7% .011 264);
|
|
2676
|
-
--cirth-range-active-border-color: oklch(31% .016 264);
|
|
2677
2681
|
--cirth-range-thumb-border-color: var(--cirth-background-color);
|
|
2678
2682
|
--cirth-range-thumb-color: var(--cirth-secondary-background);
|
|
2679
2683
|
--cirth-range-thumb-active-color: var(--cirth-primary-background);
|
|
2680
|
-
--cirth-accordion-border-color: var(--cirth-muted-border-color);
|
|
2681
2684
|
--cirth-accordion-active-summary-color: var(--cirth-primary-hover);
|
|
2682
2685
|
--cirth-accordion-close-summary-color: var(--cirth-color);
|
|
2683
2686
|
--cirth-accordion-open-summary-color: var(--cirth-muted-color);
|
|
2684
|
-
--cirth-card-background-color: oklch(22.3% .006 264);
|
|
2685
2687
|
--cirth-card-border-color: var(--cirth-card-background-color);
|
|
2686
2688
|
--cirth-card-box-shadow: var(--cirth-box-shadow);
|
|
2687
|
-
--cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
|
|
2688
|
-
--cirth-dropdown-background-color: oklch(22.3% .006 264);
|
|
2689
|
-
--cirth-dropdown-border-color: oklch(26.7% .011 264);
|
|
2690
2689
|
--cirth-dropdown-box-shadow: var(--cirth-box-shadow);
|
|
2691
2690
|
--cirth-dropdown-color: var(--cirth-color);
|
|
2692
|
-
--cirth-dropdown-hover-background-color: oklch(26.7% .011 264);
|
|
2693
|
-
--cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
|
|
2694
2691
|
--cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
|
|
2695
|
-
--cirth-meter-optimum-color:
|
|
2696
|
-
--cirth-meter-suboptimum-color:
|
|
2697
|
-
--cirth-meter-even-less-good-color:
|
|
2698
|
-
--cirth-progress-background-color: oklch(26.7% .011 264);
|
|
2699
|
-
--cirth-progress-border-color: oklch(52.7% .032 264);
|
|
2692
|
+
--cirth-meter-optimum-color: var(--cirth-success);
|
|
2693
|
+
--cirth-meter-suboptimum-color: var(--cirth-warning);
|
|
2694
|
+
--cirth-meter-even-less-good-color: var(--cirth-error);
|
|
2700
2695
|
--cirth-progress-color: oklch(61.3% .113 69.35);
|
|
2696
|
+
--cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2697
|
+
--cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
|
2698
|
+
--cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2699
|
+
--cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
2701
2700
|
--cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2702
2701
|
--cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
|
2703
2702
|
}
|
|
@@ -2728,6 +2727,10 @@
|
|
|
2728
2727
|
--cirth-code-color: oklch(35.3% .021 264);
|
|
2729
2728
|
--cirth-link-visited-color: oklch(35.3% .021 264);
|
|
2730
2729
|
--cirth-muted-border-color: oklch(57% .032 264);
|
|
2730
|
+
--cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2731
|
+
--cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
|
2732
|
+
--cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2733
|
+
--cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
2731
2734
|
--cirth-form-element-border-color: oklch(39.7% .025 264);
|
|
2732
2735
|
--cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
|
|
2733
2736
|
--cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
|
|
@@ -2758,6 +2761,10 @@
|
|
|
2758
2761
|
--cirth-h5-color: var(--cirth-color);
|
|
2759
2762
|
--cirth-h6-color: var(--cirth-color);
|
|
2760
2763
|
--cirth-muted-color: oklch(78.7% .021 264);
|
|
2764
|
+
--cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2765
|
+
--cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
|
2766
|
+
--cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2767
|
+
--cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
2761
2768
|
--cirth-secondary: oklch(78.7% .021 264);
|
|
2762
2769
|
--cirth-code-color: oklch(83% .016 264);
|
|
2763
2770
|
--cirth-link-visited-color: oklch(78.7% .021 264);
|
|
@@ -2768,6 +2775,8 @@
|
|
|
2768
2775
|
--cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
|
|
2769
2776
|
--cirth-primary: oklch(78.7% .146 69.35);
|
|
2770
2777
|
--cirth-primary-hover: oklch(87.3% .082 69.35);
|
|
2778
|
+
--cirth-primary-background: oklch(44% .081 69.35);
|
|
2779
|
+
--cirth-primary-hover-background: oklch(39.7% .073 69.35);
|
|
2771
2780
|
--cirth-primary-underline: var(--cirth-primary);
|
|
2772
2781
|
--cirth-secondary-underline: var(--cirth-secondary);
|
|
2773
2782
|
--cirth-contrast-underline: var(--cirth-contrast);
|
|
@@ -2793,6 +2802,10 @@
|
|
|
2793
2802
|
--cirth-h5-color: var(--cirth-color);
|
|
2794
2803
|
--cirth-h6-color: var(--cirth-color);
|
|
2795
2804
|
--cirth-muted-color: oklch(78.7% .021 264);
|
|
2805
|
+
--cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2806
|
+
--cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
|
2807
|
+
--cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2808
|
+
--cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
2796
2809
|
--cirth-secondary: oklch(78.7% .021 264);
|
|
2797
2810
|
--cirth-code-color: oklch(83% .016 264);
|
|
2798
2811
|
--cirth-link-visited-color: oklch(78.7% .021 264);
|
|
@@ -2803,6 +2816,8 @@
|
|
|
2803
2816
|
--cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
|
|
2804
2817
|
--cirth-primary: oklch(78.7% .146 69.35);
|
|
2805
2818
|
--cirth-primary-hover: oklch(87.3% .082 69.35);
|
|
2819
|
+
--cirth-primary-background: oklch(44% .081 69.35);
|
|
2820
|
+
--cirth-primary-hover-background: oklch(39.7% .073 69.35);
|
|
2806
2821
|
--cirth-primary-underline: var(--cirth-primary);
|
|
2807
2822
|
--cirth-secondary-underline: var(--cirth-secondary);
|
|
2808
2823
|
--cirth-contrast-underline: var(--cirth-contrast);
|
|
@@ -2817,133 +2832,3 @@
|
|
|
2817
2832
|
--cirth-dropdown-border-color: var(--cirth-muted-border-color);
|
|
2818
2833
|
}
|
|
2819
2834
|
}
|
|
2820
|
-
|
|
2821
|
-
@media print {
|
|
2822
|
-
.cirth {
|
|
2823
|
-
--cirth-print-color: oklch(0% 0 0);
|
|
2824
|
-
--cirth-print-muted-color: oklch(48.3% .03 264);
|
|
2825
|
-
--cirth-print-border-color: oklch(61.3% .032 264);
|
|
2826
|
-
color: var(--cirth-print-color);
|
|
2827
|
-
--lightningcss-light: initial;
|
|
2828
|
-
--lightningcss-dark: ;
|
|
2829
|
-
--lightningcss-light: initial;
|
|
2830
|
-
--lightningcss-dark: ;
|
|
2831
|
-
color-scheme: light;
|
|
2832
|
-
--cirth-color: var(--cirth-print-color);
|
|
2833
|
-
--cirth-h1-color: var(--cirth-print-color);
|
|
2834
|
-
--cirth-h2-color: var(--cirth-print-color);
|
|
2835
|
-
--cirth-h3-color: var(--cirth-print-color);
|
|
2836
|
-
--cirth-h4-color: var(--cirth-print-color);
|
|
2837
|
-
--cirth-h5-color: var(--cirth-print-color);
|
|
2838
|
-
--cirth-h6-color: var(--cirth-print-color);
|
|
2839
|
-
--cirth-code-color: var(--cirth-print-color);
|
|
2840
|
-
--cirth-code-kbd-color: var(--cirth-print-color);
|
|
2841
|
-
--cirth-form-element-color: var(--cirth-print-color);
|
|
2842
|
-
--cirth-muted-color: var(--cirth-print-muted-color);
|
|
2843
|
-
--cirth-form-element-placeholder-color: var(--cirth-print-muted-color);
|
|
2844
|
-
--cirth-primary: var(--cirth-print-color);
|
|
2845
|
-
--cirth-primary-hover: var(--cirth-print-color);
|
|
2846
|
-
--cirth-primary-underline: var(--cirth-print-color);
|
|
2847
|
-
--cirth-secondary: var(--cirth-print-color);
|
|
2848
|
-
--cirth-secondary-underline: var(--cirth-print-color);
|
|
2849
|
-
--cirth-contrast: var(--cirth-print-color);
|
|
2850
|
-
--cirth-contrast-underline: var(--cirth-print-color);
|
|
2851
|
-
--cirth-link-visited-color: var(--cirth-print-color);
|
|
2852
|
-
--cirth-muted-border-color: var(--cirth-print-border-color);
|
|
2853
|
-
--cirth-form-element-border-color: var(--cirth-print-border-color);
|
|
2854
|
-
--cirth-box-shadow: none;
|
|
2855
|
-
--cirth-card-box-shadow: none;
|
|
2856
|
-
--cirth-card-background-color: transparent;
|
|
2857
|
-
--cirth-card-sectioning-background-color: transparent;
|
|
2858
|
-
--cirth-code-background-color: transparent;
|
|
2859
|
-
--cirth-code-kbd-background-color: transparent;
|
|
2860
|
-
--cirth-form-element-background-color: transparent;
|
|
2861
|
-
--cirth-form-element-active-background-color: transparent;
|
|
2862
|
-
--cirth-table-row-stripped-background-color: transparent;
|
|
2863
|
-
--cirth-modal-overlay-background-color: transparent;
|
|
2864
|
-
--cirth-dropdown-background-color: transparent;
|
|
2865
|
-
--cirth-dropdown-box-shadow: none;
|
|
2866
|
-
--cirth-ins-color: oklch(35.3% .067 160.59);
|
|
2867
|
-
--cirth-del-color: oklch(35.3% .122 29.73);
|
|
2868
|
-
--cirth-meter-optimum-color: oklch(52.7% .1 160.59);
|
|
2869
|
-
--cirth-meter-suboptimum-color: oklch(48.3% .086 78);
|
|
2870
|
-
--cirth-meter-even-less-good-color: oklch(44% .151 29.73);
|
|
2871
|
-
background: none;
|
|
2872
|
-
}
|
|
2873
|
-
|
|
2874
|
-
.cirth kbd {
|
|
2875
|
-
border: var(--cirth-border-width) solid var(--cirth-print-border-color);
|
|
2876
|
-
}
|
|
2877
|
-
|
|
2878
|
-
.cirth :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
|
|
2879
|
-
border-color: var(--cirth-print-border-color);
|
|
2880
|
-
box-shadow: none;
|
|
2881
|
-
color: var(--cirth-print-color);
|
|
2882
|
-
background: none;
|
|
2883
|
-
}
|
|
2884
|
-
|
|
2885
|
-
.cirth [type="file"]::file-selector-button {
|
|
2886
|
-
border-color: var(--cirth-print-border-color);
|
|
2887
|
-
box-shadow: none;
|
|
2888
|
-
color: var(--cirth-print-color);
|
|
2889
|
-
background: none;
|
|
2890
|
-
}
|
|
2891
|
-
|
|
2892
|
-
.cirth :is(mark, meter, progress, [type="checkbox"], [type="radio"]) {
|
|
2893
|
-
-webkit-print-color-adjust: exact;
|
|
2894
|
-
print-color-adjust: exact;
|
|
2895
|
-
}
|
|
2896
|
-
|
|
2897
|
-
.cirth a[href^="http"]:not([role="button"], nav a):after {
|
|
2898
|
-
content: " (" attr(href) ")";
|
|
2899
|
-
color: var(--cirth-print-muted-color);
|
|
2900
|
-
font-size: var(--cirth-font-size-sm);
|
|
2901
|
-
word-break: break-all;
|
|
2902
|
-
}
|
|
2903
|
-
|
|
2904
|
-
.cirth thead {
|
|
2905
|
-
display: table-header-group;
|
|
2906
|
-
}
|
|
2907
|
-
|
|
2908
|
-
.cirth tfoot {
|
|
2909
|
-
display: table-footer-group;
|
|
2910
|
-
}
|
|
2911
|
-
|
|
2912
|
-
.cirth tr {
|
|
2913
|
-
break-inside: avoid;
|
|
2914
|
-
}
|
|
2915
|
-
|
|
2916
|
-
.cirth pre {
|
|
2917
|
-
white-space: pre-wrap;
|
|
2918
|
-
overflow: visible;
|
|
2919
|
-
}
|
|
2920
|
-
|
|
2921
|
-
.cirth .overflow-auto {
|
|
2922
|
-
overflow: visible;
|
|
2923
|
-
}
|
|
2924
|
-
|
|
2925
|
-
.cirth dialog {
|
|
2926
|
-
backdrop-filter: none;
|
|
2927
|
-
min-width: 0;
|
|
2928
|
-
min-height: 0;
|
|
2929
|
-
position: static;
|
|
2930
|
-
}
|
|
2931
|
-
|
|
2932
|
-
.cirth dialog > article {
|
|
2933
|
-
max-height: none;
|
|
2934
|
-
overflow: visible;
|
|
2935
|
-
}
|
|
2936
|
-
|
|
2937
|
-
.cirth :is(h1, h2, h3, h4, h5, h6) {
|
|
2938
|
-
break-after: avoid;
|
|
2939
|
-
}
|
|
2940
|
-
|
|
2941
|
-
.cirth :is(figure, img) {
|
|
2942
|
-
break-inside: avoid;
|
|
2943
|
-
}
|
|
2944
|
-
|
|
2945
|
-
.cirth :is(blockquote, li, p) {
|
|
2946
|
-
orphans: 3;
|
|
2947
|
-
widows: 3;
|
|
2948
|
-
}
|
|
2949
|
-
}
|