@cirthcss/cirth 0.11.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 +316 -499
- package/dist/cirth.classless.min.css +1 -1
- package/dist/cirth.classless.scoped.css +315 -490
- package/dist/cirth.classless.scoped.min.css +1 -1
- package/dist/cirth.css +399 -507
- 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 +398 -498
- 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,6 +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-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
|
|
306
307
|
padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
|
|
307
308
|
border: var(--cirth-border-width) solid var(--cirth-border-color);
|
|
308
309
|
border-radius: var(--cirth-border-radius);
|
|
@@ -327,6 +328,7 @@
|
|
|
327
328
|
--cirth-color: var(--cirth-primary-inverse);
|
|
328
329
|
--cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
|
|
329
330
|
max-width: 100%;
|
|
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);
|
|
330
332
|
padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
|
|
331
333
|
border: var(--cirth-border-width) solid var(--cirth-border-color);
|
|
332
334
|
border-radius: var(--cirth-border-radius);
|
|
@@ -455,37 +457,92 @@
|
|
|
455
457
|
}
|
|
456
458
|
|
|
457
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 {
|
|
458
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 {
|
|
459
469
|
--cirth-color: var(--cirth-primary);
|
|
460
470
|
--cirth-border-color: var(--cirth-primary);
|
|
461
471
|
}
|
|
462
472
|
|
|
463
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) {
|
|
464
|
-
--cirth-background-color:
|
|
474
|
+
--cirth-background-color: color-mix(in oklch,
|
|
475
|
+
var(--cirth-primary) 12%,
|
|
476
|
+
var(--cirth-canvas));
|
|
465
477
|
--cirth-color: var(--cirth-primary-hover);
|
|
466
478
|
--cirth-border-color: var(--cirth-primary-hover);
|
|
467
479
|
}
|
|
468
480
|
|
|
469
|
-
.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 {
|
|
470
482
|
--cirth-color: var(--cirth-secondary);
|
|
471
483
|
--cirth-border-color: var(--cirth-secondary);
|
|
472
484
|
}
|
|
473
485
|
|
|
474
|
-
.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));
|
|
475
490
|
--cirth-color: var(--cirth-secondary-hover);
|
|
476
491
|
--cirth-border-color: var(--cirth-secondary-hover);
|
|
477
492
|
}
|
|
478
493
|
|
|
479
|
-
.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 {
|
|
480
495
|
--cirth-color: var(--cirth-contrast);
|
|
481
496
|
--cirth-border-color: var(--cirth-contrast);
|
|
482
497
|
}
|
|
483
498
|
|
|
484
|
-
.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));
|
|
485
503
|
--cirth-color: var(--cirth-contrast-hover);
|
|
486
504
|
--cirth-border-color: var(--cirth-contrast-hover);
|
|
487
505
|
}
|
|
488
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
|
+
|
|
489
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"]) {
|
|
490
547
|
opacity: var(--cirth-opacity-disabled);
|
|
491
548
|
pointer-events: none;
|
|
@@ -638,7 +695,7 @@
|
|
|
638
695
|
}
|
|
639
696
|
|
|
640
697
|
.cirth [type="search"] {
|
|
641
|
-
|
|
698
|
+
appearance: textfield;
|
|
642
699
|
outline-offset: -2px;
|
|
643
700
|
}
|
|
644
701
|
|
|
@@ -647,7 +704,7 @@
|
|
|
647
704
|
}
|
|
648
705
|
|
|
649
706
|
.cirth ::file-selector-button {
|
|
650
|
-
|
|
707
|
+
appearance: auto;
|
|
651
708
|
font: inherit;
|
|
652
709
|
}
|
|
653
710
|
|
|
@@ -661,7 +718,11 @@
|
|
|
661
718
|
}
|
|
662
719
|
|
|
663
720
|
.cirth input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
|
664
|
-
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);
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
.cirth select, .cirth textarea {
|
|
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);
|
|
665
726
|
}
|
|
666
727
|
|
|
667
728
|
.cirth fieldset {
|
|
@@ -715,6 +776,12 @@
|
|
|
715
776
|
--cirth-border-color: var(--cirth-form-element-active-border-color);
|
|
716
777
|
}
|
|
717
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
|
+
|
|
718
785
|
.cirth input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, .cirth :where(select, textarea):not([readonly]):focus {
|
|
719
786
|
--cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
|
|
720
787
|
var(--cirth-form-element-focus-color);
|
|
@@ -733,7 +800,7 @@
|
|
|
733
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)) {
|
|
734
801
|
padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
|
|
735
802
|
background-position: center right var(--cirth-space-3);
|
|
736
|
-
background-size: var(--cirth-size-
|
|
803
|
+
background-size: var(--cirth-font-size-md) auto;
|
|
737
804
|
background-repeat: no-repeat;
|
|
738
805
|
}
|
|
739
806
|
|
|
@@ -792,7 +859,7 @@
|
|
|
792
859
|
padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
|
|
793
860
|
background-image: var(--cirth-icon-chevron);
|
|
794
861
|
background-position: center right var(--cirth-space-3);
|
|
795
|
-
background-size: var(--cirth-size-
|
|
862
|
+
background-size: var(--cirth-font-size-md) auto;
|
|
796
863
|
background-repeat: no-repeat;
|
|
797
864
|
}
|
|
798
865
|
|
|
@@ -810,12 +877,16 @@
|
|
|
810
877
|
display: block;
|
|
811
878
|
}
|
|
812
879
|
|
|
880
|
+
.cirth textarea:not([rows]) {
|
|
881
|
+
min-block-size: calc(4lh + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
|
|
882
|
+
}
|
|
883
|
+
|
|
813
884
|
.cirth textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
|
|
814
|
-
--cirth-icon-height: calc(var(--cirth-size-
|
|
885
|
+
--cirth-icon-height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) +
|
|
815
886
|
var(--cirth-form-element-spacing-vertical) * 2 +
|
|
816
887
|
var(--cirth-border-width) * 2);
|
|
817
888
|
background-position: top right var(--cirth-space-3);
|
|
818
|
-
background-size: var(--cirth-size-
|
|
889
|
+
background-size: var(--cirth-font-size-md) var(--cirth-icon-height);
|
|
819
890
|
}
|
|
820
891
|
|
|
821
892
|
.cirth :where(input, select, textarea, fieldset, .row) + small {
|
|
@@ -857,10 +928,6 @@
|
|
|
857
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 {
|
|
858
929
|
--cirth-background-color: var(--cirth-primary-background);
|
|
859
930
|
--cirth-border-color: var(--cirth-primary-border);
|
|
860
|
-
background-image: var(--cirth-icon-checkbox);
|
|
861
|
-
background-position: center;
|
|
862
|
-
background-repeat: no-repeat;
|
|
863
|
-
background-size: .9em;
|
|
864
931
|
}
|
|
865
932
|
|
|
866
933
|
.cirth [type="checkbox"] ~ label, .cirth [type="radio"] ~ label {
|
|
@@ -873,13 +940,34 @@
|
|
|
873
940
|
margin-inline-end: 1em;
|
|
874
941
|
}
|
|
875
942
|
|
|
876
|
-
.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 {
|
|
877
965
|
--cirth-background-color: var(--cirth-primary-background);
|
|
878
966
|
--cirth-border-color: var(--cirth-primary-border);
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
967
|
+
}
|
|
968
|
+
|
|
969
|
+
.cirth [type="checkbox"]:not([role="switch"]):indeterminate:before {
|
|
970
|
+
mask-image: var(--cirth-icon-minus);
|
|
883
971
|
}
|
|
884
972
|
|
|
885
973
|
.cirth [type="radio"] {
|
|
@@ -888,7 +976,6 @@
|
|
|
888
976
|
|
|
889
977
|
.cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
|
|
890
978
|
--cirth-background-color: var(--cirth-primary-inverse);
|
|
891
|
-
background-image: none;
|
|
892
979
|
border-width: .42em;
|
|
893
980
|
}
|
|
894
981
|
|
|
@@ -926,7 +1013,6 @@
|
|
|
926
1013
|
.cirth [type="checkbox"][role="switch"]:checked {
|
|
927
1014
|
--cirth-background-color: var(--cirth-switch-checked-background-color);
|
|
928
1015
|
--cirth-border-color: var(--cirth-switch-checked-background-color);
|
|
929
|
-
background-image: none;
|
|
930
1016
|
}
|
|
931
1017
|
|
|
932
1018
|
.cirth [type="checkbox"][role="switch"]:checked:before {
|
|
@@ -973,7 +1059,7 @@
|
|
|
973
1059
|
|
|
974
1060
|
.cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
|
975
1061
|
--cirth-icon-position: var(--cirth-space-3);
|
|
976
|
-
--cirth-icon-width: var(--cirth-size-
|
|
1062
|
+
--cirth-icon-width: var(--cirth-font-size-md);
|
|
977
1063
|
min-width: 0;
|
|
978
1064
|
background-image: var(--cirth-icon-date);
|
|
979
1065
|
background-position: center right var(--cirth-icon-position);
|
|
@@ -1047,6 +1133,7 @@
|
|
|
1047
1133
|
}
|
|
1048
1134
|
|
|
1049
1135
|
.cirth [type="file"]::file-selector-button {
|
|
1136
|
+
min-block-size: 0;
|
|
1050
1137
|
padding: calc(var(--cirth-form-element-spacing-vertical) * .5) var(--cirth-form-element-spacing-horizontal);
|
|
1051
1138
|
margin-inline-end: calc(var(--cirth-spacing) / 2);
|
|
1052
1139
|
}
|
|
@@ -1155,7 +1242,7 @@
|
|
|
1155
1242
|
}
|
|
1156
1243
|
|
|
1157
1244
|
.cirth details summary {
|
|
1158
|
-
line-height: var(--cirth-size-
|
|
1245
|
+
line-height: var(--cirth-font-size-md);
|
|
1159
1246
|
cursor: pointer;
|
|
1160
1247
|
transition: color var(--cirth-transition);
|
|
1161
1248
|
list-style-type: none;
|
|
@@ -1174,18 +1261,28 @@
|
|
|
1174
1261
|
}
|
|
1175
1262
|
|
|
1176
1263
|
.cirth details summary:after {
|
|
1177
|
-
width: var(--cirth-size-
|
|
1178
|
-
height: var(--cirth-size-
|
|
1264
|
+
width: var(--cirth-font-size-md);
|
|
1265
|
+
height: var(--cirth-font-size-md);
|
|
1179
1266
|
float: right;
|
|
1180
|
-
background-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
transition: transform var(--cirth-transition);
|
|
1185
|
-
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;
|
|
1186
1271
|
margin-inline-start: calc(var(--cirth-spacing, var(--cirth-space-4)) * .5);
|
|
1187
1272
|
display: block;
|
|
1188
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);
|
|
1189
1286
|
}
|
|
1190
1287
|
|
|
1191
1288
|
.cirth details summary:focus {
|
|
@@ -1208,7 +1305,7 @@
|
|
|
1208
1305
|
}
|
|
1209
1306
|
|
|
1210
1307
|
.cirth details summary[role="button"]:after {
|
|
1211
|
-
height: calc(var(--cirth-size-
|
|
1308
|
+
height: calc(var(--cirth-font-size-md) * var(--cirth-line-height, var(--cirth-line-height-normal)));
|
|
1212
1309
|
}
|
|
1213
1310
|
|
|
1214
1311
|
.cirth details[open] > summary {
|
|
@@ -1268,17 +1365,27 @@
|
|
|
1268
1365
|
}
|
|
1269
1366
|
|
|
1270
1367
|
.cirth details.dropdown > summary:after, .cirth details.dropdown > button:after, .cirth details.dropdown > a:after {
|
|
1271
|
-
width: var(--cirth-size-
|
|
1272
|
-
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)));
|
|
1273
1370
|
float: right;
|
|
1274
1371
|
transform: rotate(0deg) translateX(calc(var(--cirth-form-element-spacing-horizontal) - var(--cirth-space-3)));
|
|
1275
|
-
background-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
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;
|
|
1280
1376
|
margin-inline-start: var(--cirth-space-1);
|
|
1281
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: "";
|
|
1282
1389
|
}
|
|
1283
1390
|
|
|
1284
1391
|
.cirth nav details.dropdown {
|
|
@@ -1286,7 +1393,7 @@
|
|
|
1286
1393
|
}
|
|
1287
1394
|
|
|
1288
1395
|
.cirth details.dropdown > summary:not([role]) {
|
|
1289
|
-
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);
|
|
1290
1397
|
padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
|
|
1291
1398
|
border: var(--cirth-border-width) solid var(--cirth-form-element-border-color);
|
|
1292
1399
|
border-radius: var(--cirth-border-radius);
|
|
@@ -1334,7 +1441,7 @@
|
|
|
1334
1441
|
}
|
|
1335
1442
|
|
|
1336
1443
|
.cirth nav details.dropdown > summary:not([role]) {
|
|
1337
|
-
height: calc(var(--cirth-size-
|
|
1444
|
+
height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-nav-link-spacing-vertical) * 2);
|
|
1338
1445
|
padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
|
|
1339
1446
|
}
|
|
1340
1447
|
|
|
@@ -1487,7 +1594,7 @@
|
|
|
1487
1594
|
z-index: 2;
|
|
1488
1595
|
}
|
|
1489
1596
|
|
|
1490
|
-
|
|
1597
|
+
.cirth [role="search"] > :has( + small:last-child), .cirth .group > :has( + small:last-child) {
|
|
1491
1598
|
border-start-end-radius: var(--cirth-border-radius);
|
|
1492
1599
|
border-end-end-radius: var(--cirth-border-radius);
|
|
1493
1600
|
}
|
|
@@ -1500,78 +1607,27 @@
|
|
|
1500
1607
|
width: auto;
|
|
1501
1608
|
}
|
|
1502
1609
|
|
|
1503
|
-
|
|
1504
|
-
:
|
|
1505
|
-
|
|
1506
|
-
}
|
|
1507
|
-
|
|
1508
|
-
: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])) {
|
|
1509
|
-
border-color: #0000;
|
|
1510
|
-
}
|
|
1511
|
-
|
|
1512
|
-
: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)) {
|
|
1513
|
-
--cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
|
|
1514
|
-
}
|
|
1515
|
-
|
|
1516
|
-
.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
|
|
1517
|
-
--cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1518
|
-
var(--cirth-primary-border);
|
|
1519
|
-
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1520
|
-
var(--cirth-primary-hover-border);
|
|
1521
|
-
}
|
|
1522
|
-
|
|
1523
|
-
.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
|
|
1524
|
-
--cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1525
|
-
var(--cirth-primary-border);
|
|
1526
|
-
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1527
|
-
var(--cirth-primary-hover-border);
|
|
1528
|
-
}
|
|
1529
|
-
|
|
1530
|
-
.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
|
|
1531
|
-
--cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1532
|
-
var(--cirth-primary-border);
|
|
1533
|
-
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1534
|
-
var(--cirth-primary-hover-border);
|
|
1535
|
-
}
|
|
1536
|
-
|
|
1537
|
-
.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
|
|
1538
|
-
--cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1539
|
-
var(--cirth-primary-border);
|
|
1540
|
-
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1541
|
-
var(--cirth-primary-hover-border);
|
|
1542
|
-
}
|
|
1543
|
-
|
|
1544
|
-
.cirth .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
|
|
1545
|
-
--cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1546
|
-
var(--cirth-primary-border);
|
|
1547
|
-
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1548
|
-
var(--cirth-primary-hover-border);
|
|
1549
|
-
}
|
|
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
|
+
}
|
|
1550
1613
|
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1555
|
-
var(--cirth-primary-hover-border);
|
|
1556
|
-
}
|
|
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
|
+
}
|
|
1557
1617
|
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
--cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
|
|
1562
|
-
var(--cirth-primary-hover-border);
|
|
1563
|
-
}
|
|
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
|
+
}
|
|
1564
1621
|
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
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
|
+
}
|
|
1571
1628
|
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
}
|
|
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;
|
|
1575
1631
|
}
|
|
1576
1632
|
|
|
1577
1633
|
.cirth [role="search"] > :not([hidden], input[type="hidden"]):nth-child(1 of :not([hidden], input[type="hidden"])) {
|
|
@@ -1579,12 +1635,7 @@
|
|
|
1579
1635
|
border-end-start-radius: var(--cirth-radius-pill);
|
|
1580
1636
|
}
|
|
1581
1637
|
|
|
1582
|
-
.cirth [role="search"] > :not([hidden], input[type="hidden"]):nth-last-child(1 of :not([hidden], input[type="hidden"])) {
|
|
1583
|
-
border-start-end-radius: var(--cirth-radius-pill);
|
|
1584
|
-
border-end-end-radius: var(--cirth-radius-pill);
|
|
1585
|
-
}
|
|
1586
|
-
|
|
1587
|
-
.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) {
|
|
1588
1639
|
border-start-end-radius: var(--cirth-radius-pill);
|
|
1589
1640
|
border-end-end-radius: var(--cirth-radius-pill);
|
|
1590
1641
|
}
|
|
@@ -1598,13 +1649,10 @@
|
|
|
1598
1649
|
vertical-align: -.125em;
|
|
1599
1650
|
width: 1em;
|
|
1600
1651
|
height: 1em;
|
|
1601
|
-
-webkit-mask-image: var(--cirth-icon-loading);
|
|
1602
1652
|
mask-image: var(--cirth-icon-loading);
|
|
1603
1653
|
background-color: currentColor;
|
|
1604
1654
|
display: inline-block;
|
|
1605
|
-
-webkit-mask-size: 1em;
|
|
1606
1655
|
mask-size: 1em;
|
|
1607
|
-
-webkit-mask-repeat: no-repeat;
|
|
1608
1656
|
mask-repeat: no-repeat;
|
|
1609
1657
|
}
|
|
1610
1658
|
|
|
@@ -1645,7 +1693,7 @@
|
|
|
1645
1693
|
.cirth meter {
|
|
1646
1694
|
appearance: none;
|
|
1647
1695
|
width: 100%;
|
|
1648
|
-
height: var(--cirth-
|
|
1696
|
+
height: var(--cirth-space-2);
|
|
1649
1697
|
margin-bottom: calc(var(--cirth-spacing) * .5);
|
|
1650
1698
|
border: var(--cirth-border-width-1) solid var(--cirth-meter-border-color);
|
|
1651
1699
|
border-radius: var(--cirth-border-radius);
|
|
@@ -1749,7 +1797,7 @@
|
|
|
1749
1797
|
}
|
|
1750
1798
|
|
|
1751
1799
|
.cirth dialog > article > header .close, .cirth dialog > article > header :is(a, button)[rel="prev"] {
|
|
1752
|
-
margin:
|
|
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);
|
|
1753
1801
|
float: right;
|
|
1754
1802
|
margin-inline-start: var(--cirth-spacing);
|
|
1755
1803
|
padding: 0;
|
|
@@ -1768,22 +1816,37 @@
|
|
|
1768
1816
|
}
|
|
1769
1817
|
|
|
1770
1818
|
.cirth dialog > article .close, .cirth dialog > article :is(a, button)[rel="prev"] {
|
|
1771
|
-
width: var(--cirth-size-
|
|
1772
|
-
height: var(--cirth-size-
|
|
1773
|
-
margin-top: calc(var(--cirth-spacing) * -1);
|
|
1774
|
-
margin-
|
|
1775
|
-
|
|
1776
|
-
background-position: center;
|
|
1777
|
-
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));
|
|
1778
1824
|
opacity: .5;
|
|
1779
1825
|
transition: opacity var(--cirth-transition);
|
|
1780
1826
|
background-color: #0000;
|
|
1781
|
-
background-repeat: no-repeat;
|
|
1782
1827
|
border: none;
|
|
1783
1828
|
margin-inline-start: auto;
|
|
1784
1829
|
display: block;
|
|
1785
1830
|
}
|
|
1786
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
|
+
|
|
1787
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) {
|
|
1788
1851
|
opacity: 1;
|
|
1789
1852
|
}
|
|
@@ -1849,6 +1912,7 @@
|
|
|
1849
1912
|
|
|
1850
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 {
|
|
1851
1914
|
height: auto;
|
|
1915
|
+
min-block-size: var(--cirth-space-6);
|
|
1852
1916
|
margin-inline: inherit;
|
|
1853
1917
|
padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
|
|
1854
1918
|
margin-bottom: 0;
|
|
@@ -1918,6 +1982,8 @@
|
|
|
1918
1982
|
box-shadow: var(--cirth-popover-box-shadow);
|
|
1919
1983
|
color: var(--cirth-popover-color);
|
|
1920
1984
|
transition: opacity var(--cirth-transition), display var(--cirth-transition) allow-discrete, overlay var(--cirth-transition) allow-discrete;
|
|
1985
|
+
margin: auto;
|
|
1986
|
+
inset: 0;
|
|
1921
1987
|
}
|
|
1922
1988
|
|
|
1923
1989
|
@starting-style {
|
|
@@ -1934,7 +2000,7 @@
|
|
|
1934
2000
|
vertical-align: baseline;
|
|
1935
2001
|
appearance: none;
|
|
1936
2002
|
width: 100%;
|
|
1937
|
-
height: var(--cirth-
|
|
2003
|
+
height: var(--cirth-space-2);
|
|
1938
2004
|
margin-bottom: calc(var(--cirth-spacing) * .5);
|
|
1939
2005
|
border: var(--cirth-border-width-1) solid var(--cirth-progress-border-color);
|
|
1940
2006
|
border-radius: var(--cirth-border-radius);
|
|
@@ -2048,27 +2114,23 @@
|
|
|
2048
2114
|
}
|
|
2049
2115
|
|
|
2050
2116
|
.cirth {
|
|
2051
|
-
--cirth-color-black: #000;
|
|
2052
|
-
--cirth-color-white: #fff;
|
|
2053
|
-
--cirth-color-transparent: transparent;
|
|
2054
|
-
--cirth-color-current: currentColor;
|
|
2055
2117
|
--cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
2056
2118
|
--cirth-font-family-sans: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
|
|
2057
2119
|
"Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
|
|
2058
2120
|
--cirth-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
|
|
2059
2121
|
--cirth-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
|
|
2060
2122
|
monospace, var(--cirth-font-family-emoji);
|
|
2061
|
-
--cirth-font-family-display: var(--cirth-font-family-serif);
|
|
2062
2123
|
--cirth-font-size-xs: .75rem;
|
|
2063
2124
|
--cirth-font-size-sm: .875rem;
|
|
2064
2125
|
--cirth-font-size-md: 1rem;
|
|
2065
2126
|
--cirth-font-size-lg: 1.125rem;
|
|
2066
2127
|
--cirth-font-size-xl: 1.25rem;
|
|
2067
|
-
--cirth-font-size-2xl: 1.
|
|
2068
|
-
--cirth-font-size-3xl: 1.
|
|
2069
|
-
--cirth-font-size-4xl:
|
|
2070
|
-
--cirth-font-size-5xl:
|
|
2071
|
-
--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;
|
|
2072
2134
|
--cirth-font-weight-light: 300;
|
|
2073
2135
|
--cirth-font-weight-regular: 400;
|
|
2074
2136
|
--cirth-font-weight-medium: 500;
|
|
@@ -2095,19 +2157,6 @@
|
|
|
2095
2157
|
--cirth-space-16: 4rem;
|
|
2096
2158
|
--cirth-space-20: 5rem;
|
|
2097
2159
|
--cirth-space-24: 6rem;
|
|
2098
|
-
--cirth-size-0: 0;
|
|
2099
|
-
--cirth-size-1: .25rem;
|
|
2100
|
-
--cirth-size-2: .5rem;
|
|
2101
|
-
--cirth-size-3: .75rem;
|
|
2102
|
-
--cirth-size-4: 1rem;
|
|
2103
|
-
--cirth-size-5: 1.25rem;
|
|
2104
|
-
--cirth-size-6: 1.5rem;
|
|
2105
|
-
--cirth-size-8: 2rem;
|
|
2106
|
-
--cirth-size-10: 2.5rem;
|
|
2107
|
-
--cirth-size-12: 3rem;
|
|
2108
|
-
--cirth-size-16: 4rem;
|
|
2109
|
-
--cirth-size-20: 5rem;
|
|
2110
|
-
--cirth-size-24: 6rem;
|
|
2111
2160
|
--cirth-radius-none: 0;
|
|
2112
2161
|
--cirth-radius-xs: .125rem;
|
|
2113
2162
|
--cirth-radius-sm: .25rem;
|
|
@@ -2120,9 +2169,6 @@
|
|
|
2120
2169
|
--cirth-border-width-1: .0625rem;
|
|
2121
2170
|
--cirth-border-width-2: .125rem;
|
|
2122
2171
|
--cirth-border-width-4: .25rem;
|
|
2123
|
-
--cirth-outline-width-1: .0625rem;
|
|
2124
|
-
--cirth-outline-width-2: .125rem;
|
|
2125
|
-
--cirth-outline-width-4: .25rem;
|
|
2126
2172
|
--cirth-duration-instant: 0s;
|
|
2127
2173
|
--cirth-duration-fast: .1s;
|
|
2128
2174
|
--cirth-duration-normal: .2s;
|
|
@@ -2133,7 +2179,6 @@
|
|
|
2133
2179
|
--cirth-ease-out: cubic-bezier(0, 0, .2, 1);
|
|
2134
2180
|
--cirth-ease-in-out: cubic-bezier(.4, 0, .2, 1);
|
|
2135
2181
|
--cirth-opacity-disabled: .5;
|
|
2136
|
-
--cirth-opacity-muted: .72;
|
|
2137
2182
|
--cirth-opacity-overlay: .75;
|
|
2138
2183
|
--cirth-z-index-dropdown: 1000;
|
|
2139
2184
|
--cirth-z-index-sticky: 1020;
|
|
@@ -2141,6 +2186,7 @@
|
|
|
2141
2186
|
--cirth-z-index-modal-backdrop: 1040;
|
|
2142
2187
|
--cirth-z-index-modal: 1050;
|
|
2143
2188
|
--cirth-font-family: var(--cirth-font-family-sans);
|
|
2189
|
+
--cirth-font-family-display: var(--cirth-font-family-serif);
|
|
2144
2190
|
--cirth-line-height: var(--cirth-line-height-normal);
|
|
2145
2191
|
--cirth-font-weight: var(--cirth-font-weight-regular);
|
|
2146
2192
|
--cirth-font-size: 100%;
|
|
@@ -2152,7 +2198,8 @@
|
|
|
2152
2198
|
--cirth-code-border-radius: min(var(--cirth-border-radius),
|
|
2153
2199
|
var(--cirth-radius-sm));
|
|
2154
2200
|
--cirth-border-width: var(--cirth-border-width-1);
|
|
2155
|
-
--cirth-outline-width: var(--cirth-
|
|
2201
|
+
--cirth-outline-width: var(--cirth-border-width-2);
|
|
2202
|
+
--cirth-background-color: var(--cirth-canvas);
|
|
2156
2203
|
--cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-out);
|
|
2157
2204
|
--cirth-spacing: var(--cirth-space-4);
|
|
2158
2205
|
--cirth-typography-spacing-vertical: var(--cirth-space-4);
|
|
@@ -2183,13 +2230,9 @@
|
|
|
2183
2230
|
--cirth-nav-link-spacing-vertical: var(--cirth-space-2);
|
|
2184
2231
|
--cirth-nav-link-spacing-horizontal: var(--cirth-space-2);
|
|
2185
2232
|
--cirth-nav-breadcrumb-divider: ">";
|
|
2186
|
-
--cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='
|
|
2187
|
-
--cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='
|
|
2188
|
-
--cirth-icon-
|
|
2189
|
-
--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");
|
|
2190
|
-
--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");
|
|
2191
|
-
--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");
|
|
2192
|
-
--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");
|
|
2193
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");
|
|
2194
2237
|
}
|
|
2195
2238
|
|
|
@@ -2211,21 +2254,27 @@
|
|
|
2211
2254
|
}
|
|
2212
2255
|
|
|
2213
2256
|
.cirth h1 {
|
|
2214
|
-
--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));
|
|
2215
2260
|
--cirth-line-height: var(--cirth-line-height-tight);
|
|
2216
2261
|
--cirth-letter-spacing: var(--cirth-letter-spacing-tight);
|
|
2217
2262
|
--cirth-typography-spacing-top: var(--cirth-space-12);
|
|
2218
2263
|
}
|
|
2219
2264
|
|
|
2220
2265
|
.cirth h2 {
|
|
2221
|
-
--cirth-font-size: clamp(
|
|
2266
|
+
--cirth-font-size: clamp(var(--cirth-font-size-2xl),
|
|
2267
|
+
1.3rem + 1vw,
|
|
2268
|
+
var(--cirth-font-size-4xl));
|
|
2222
2269
|
--cirth-line-height: 1.15;
|
|
2223
2270
|
--cirth-letter-spacing: var(--cirth-letter-spacing-tight);
|
|
2224
2271
|
--cirth-typography-spacing-top: var(--cirth-space-12);
|
|
2225
2272
|
}
|
|
2226
2273
|
|
|
2227
2274
|
.cirth h3 {
|
|
2228
|
-
--cirth-font-size: clamp(
|
|
2275
|
+
--cirth-font-size: clamp(var(--cirth-font-size-xl),
|
|
2276
|
+
1.15rem + .5vw,
|
|
2277
|
+
var(--cirth-font-size-2xl));
|
|
2229
2278
|
--cirth-line-height: 1.2;
|
|
2230
2279
|
--cirth-letter-spacing: var(--cirth-letter-spacing-snug);
|
|
2231
2280
|
--cirth-typography-spacing-top: var(--cirth-space-10);
|
|
@@ -2273,7 +2322,7 @@
|
|
|
2273
2322
|
}
|
|
2274
2323
|
|
|
2275
2324
|
.cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where(select, textarea) {
|
|
2276
|
-
--cirth-outline-width: var(--cirth-
|
|
2325
|
+
--cirth-outline-width: var(--cirth-border-width-1);
|
|
2277
2326
|
--cirth-line-height: var(--cirth-line-height-relaxed);
|
|
2278
2327
|
}
|
|
2279
2328
|
|
|
@@ -2308,18 +2357,18 @@
|
|
|
2308
2357
|
}
|
|
2309
2358
|
|
|
2310
2359
|
.cirth details.dropdown summary:not([role="button"]) {
|
|
2311
|
-
--cirth-outline-width: var(--cirth-
|
|
2360
|
+
--cirth-outline-width: var(--cirth-border-width-1);
|
|
2312
2361
|
}
|
|
2313
2362
|
|
|
2314
2363
|
.cirth nav details.dropdown summary:focus-visible {
|
|
2315
|
-
--cirth-outline-width: var(--cirth-
|
|
2364
|
+
--cirth-outline-width: var(--cirth-border-width-2);
|
|
2316
2365
|
}
|
|
2317
2366
|
|
|
2318
2367
|
.cirth [role="search"] {
|
|
2319
2368
|
--cirth-border-radius: var(--cirth-radius-pill);
|
|
2320
2369
|
}
|
|
2321
2370
|
|
|
2322
|
-
|
|
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) {
|
|
2323
2372
|
--cirth-group-box-shadow-focus-with-button: 0
|
|
2324
2373
|
0
|
|
2325
2374
|
0
|
|
@@ -2327,7 +2376,7 @@
|
|
|
2327
2376
|
var(--cirth-secondary-focus);
|
|
2328
2377
|
}
|
|
2329
2378
|
|
|
2330
|
-
|
|
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) {
|
|
2331
2380
|
--cirth-group-box-shadow-focus-with-button: 0
|
|
2332
2381
|
0
|
|
2333
2382
|
0
|
|
@@ -2343,112 +2392,133 @@
|
|
|
2343
2392
|
filter: brightness(0) invert();
|
|
2344
2393
|
}
|
|
2345
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
|
+
|
|
2346
2446
|
.cirth:where([data-theme="light"]), .cirth :where([data-theme="light"]), .cirth:where(:not([data-theme="dark"])) {
|
|
2347
|
-
--lightningcss-light: initial;
|
|
2348
|
-
--lightningcss-dark: ;
|
|
2349
2447
|
color-scheme: light;
|
|
2350
|
-
--cirth-
|
|
2351
|
-
--cirth-
|
|
2352
|
-
--cirth-
|
|
2353
|
-
--cirth-
|
|
2354
|
-
--cirth-
|
|
2355
|
-
--cirth-
|
|
2356
|
-
--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);
|
|
2357
2461
|
--cirth-primary-border: var(--cirth-primary-background);
|
|
2358
|
-
--cirth-primary-underline: oklch(
|
|
2359
|
-
--cirth-primary-hover: oklch(
|
|
2360
|
-
--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);
|
|
2361
2467
|
--cirth-primary-hover-border: var(--cirth-primary-hover-background);
|
|
2362
2468
|
--cirth-primary-hover-underline: var(--cirth-primary-hover);
|
|
2363
|
-
--cirth-primary-focus: oklch(
|
|
2469
|
+
--cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
|
|
2364
2470
|
--cirth-primary-inverse: oklch(100% 0 0);
|
|
2365
|
-
--cirth-secondary: oklch(52.7% .032 264);
|
|
2366
2471
|
--cirth-secondary-background: oklch(48.3% .03 264);
|
|
2367
2472
|
--cirth-secondary-border: var(--cirth-secondary-background);
|
|
2368
|
-
--cirth-secondary-underline: oklch(52.7% .032 264 / .5);
|
|
2369
|
-
--cirth-secondary-hover: oklch(44% .028 264);
|
|
2370
|
-
--cirth-secondary-hover-background: oklch(44% .028 264);
|
|
2371
2473
|
--cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
|
|
2372
2474
|
--cirth-secondary-hover-underline: var(--cirth-secondary-hover);
|
|
2373
|
-
--cirth-secondary-focus: oklch(48.3% .03 264 / .7);
|
|
2374
2475
|
--cirth-secondary-inverse: oklch(100% 0 0);
|
|
2375
|
-
--cirth-contrast: oklch(22.3% .006 264);
|
|
2376
|
-
--cirth-contrast-background: oklch(22.3% .006 264);
|
|
2377
2476
|
--cirth-contrast-border: var(--cirth-contrast-background);
|
|
2378
|
-
--cirth-contrast-underline: oklch(22.3% .006 264 / .5);
|
|
2379
|
-
--cirth-contrast-hover: oklch(0% 0 0);
|
|
2380
|
-
--cirth-contrast-hover-background: oklch(0% 0 0);
|
|
2381
2477
|
--cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
|
|
2382
2478
|
--cirth-contrast-hover-underline: var(--cirth-secondary-hover);
|
|
2383
|
-
--cirth-
|
|
2384
|
-
--cirth-
|
|
2385
|
-
--cirth-
|
|
2386
|
-
--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);
|
|
2387
|
-
--cirth-h1-color: oklch(22.3% .006 264);
|
|
2388
|
-
--cirth-h2-color: oklch(26.7% .011 264);
|
|
2389
|
-
--cirth-h3-color: oklch(31% .016 264);
|
|
2390
|
-
--cirth-h4-color: oklch(35.3% .021 264);
|
|
2391
|
-
--cirth-h5-color: oklch(39.7% .025 264);
|
|
2392
|
-
--cirth-h6-color: oklch(44% .028 264);
|
|
2393
|
-
--cirth-mark-background-color: oklch(93% .05 78);
|
|
2394
|
-
--cirth-mark-color: oklch(18% 0 264);
|
|
2395
|
-
--cirth-ins-color: oklch(35.3% .067 160.59);
|
|
2396
|
-
--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);
|
|
2397
2482
|
--cirth-blockquote-border-color: var(--cirth-muted-border-color);
|
|
2398
2483
|
--cirth-blockquote-footer-color: var(--cirth-muted-color);
|
|
2399
2484
|
--cirth-button-box-shadow: 0 0 0 #0000;
|
|
2400
2485
|
--cirth-button-hover-box-shadow: 0 0 0 #0000;
|
|
2401
2486
|
--cirth-table-border-color: var(--cirth-muted-border-color);
|
|
2402
2487
|
--cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
|
|
2403
|
-
--cirth-code-background-color: oklch(97% 0 288);
|
|
2404
|
-
--cirth-code-color: oklch(52.7% .032 264);
|
|
2405
2488
|
--cirth-code-kbd-background-color: var(--cirth-color);
|
|
2406
2489
|
--cirth-code-kbd-color: var(--cirth-background-color);
|
|
2407
|
-
--cirth-form-element-background-color: oklch(99% 0 336);
|
|
2408
|
-
--cirth-form-element-selected-background-color: oklch(91.7% .006 264);
|
|
2409
|
-
--cirth-form-element-border-color: oklch(61.3% .032 264);
|
|
2410
|
-
--cirth-form-element-color: oklch(26.7% .011 264);
|
|
2411
2490
|
--cirth-form-element-placeholder-color: var(--cirth-muted-color);
|
|
2412
|
-
--cirth-form-element-active-background-color: oklch(100% 0 0);
|
|
2413
2491
|
--cirth-form-element-active-border-color: var(--cirth-primary-border);
|
|
2414
2492
|
--cirth-form-element-focus-color: var(--cirth-primary-border);
|
|
2415
2493
|
--cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
|
|
2416
|
-
--cirth-form-element-invalid-border-color:
|
|
2417
|
-
--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);
|
|
2418
2496
|
--cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
|
|
2419
|
-
--cirth-form-element-valid-border-color:
|
|
2420
|
-
--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);
|
|
2421
2499
|
--cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
|
|
2422
|
-
--cirth-switch-
|
|
2500
|
+
--cirth-switch-thumb-box-shadow: 0 0 0 #0000;
|
|
2423
2501
|
--cirth-switch-checked-background-color: var(--cirth-primary-background);
|
|
2424
2502
|
--cirth-switch-color: var(--cirth-primary-inverse);
|
|
2425
|
-
--cirth-switch-thumb-box-shadow: 0 0 0 #0000;
|
|
2426
|
-
--cirth-range-border-color: oklch(91.7% .006 264);
|
|
2427
|
-
--cirth-range-active-border-color: oklch(83% .016 264);
|
|
2428
2503
|
--cirth-range-thumb-border-color: var(--cirth-background-color);
|
|
2429
2504
|
--cirth-range-thumb-color: var(--cirth-secondary-background);
|
|
2430
2505
|
--cirth-range-thumb-active-color: var(--cirth-primary-background);
|
|
2431
|
-
--cirth-accordion-border-color: var(--cirth-muted-border-color);
|
|
2432
2506
|
--cirth-accordion-active-summary-color: var(--cirth-primary-hover);
|
|
2433
2507
|
--cirth-accordion-close-summary-color: var(--cirth-color);
|
|
2434
2508
|
--cirth-accordion-open-summary-color: var(--cirth-muted-color);
|
|
2435
|
-
--cirth-card-background-color: oklch(100% 0 0);
|
|
2436
2509
|
--cirth-card-border-color: var(--cirth-muted-border-color);
|
|
2437
2510
|
--cirth-card-box-shadow: var(--cirth-box-shadow);
|
|
2438
|
-
--cirth-card-sectioning-background-color: oklch(99% 0 336);
|
|
2439
|
-
--cirth-dropdown-background-color: oklch(100% 0 0);
|
|
2440
|
-
--cirth-dropdown-border-color: oklch(96% 0 264);
|
|
2441
2511
|
--cirth-dropdown-box-shadow: var(--cirth-box-shadow);
|
|
2442
2512
|
--cirth-dropdown-color: var(--cirth-color);
|
|
2443
|
-
--cirth-dropdown-hover-background-color: oklch(96% 0 264);
|
|
2444
|
-
--cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
|
|
2445
2513
|
--cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
|
|
2446
|
-
--cirth-meter-optimum-color:
|
|
2447
|
-
--cirth-meter-suboptimum-color:
|
|
2448
|
-
--cirth-meter-even-less-good-color:
|
|
2449
|
-
--cirth-progress-background-color: oklch(91.7% .006 264);
|
|
2450
|
-
--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);
|
|
2451
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");
|
|
2452
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");
|
|
2453
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");
|
|
2454
2524
|
}
|
|
@@ -2459,111 +2529,83 @@
|
|
|
2459
2529
|
|
|
2460
2530
|
@media only screen and (prefers-color-scheme: dark) {
|
|
2461
2531
|
.cirth:where(:not([data-theme])) {
|
|
2462
|
-
--lightningcss-light: ;
|
|
2463
|
-
--lightningcss-dark: initial;
|
|
2464
2532
|
color-scheme: dark;
|
|
2465
|
-
--cirth-
|
|
2466
|
-
--cirth-
|
|
2467
|
-
--cirth-
|
|
2468
|
-
--cirth-
|
|
2469
|
-
--cirth-
|
|
2470
|
-
--cirth-
|
|
2471
|
-
--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);
|
|
2472
2548
|
--cirth-primary-border: var(--cirth-primary-background);
|
|
2473
|
-
--cirth-primary-underline: oklch(
|
|
2474
|
-
--cirth-primary-hover: oklch(
|
|
2475
|
-
--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);
|
|
2476
2554
|
--cirth-primary-hover-border: var(--cirth-primary-hover-background);
|
|
2477
2555
|
--cirth-primary-hover-underline: var(--cirth-primary-hover);
|
|
2478
|
-
--cirth-primary-focus: oklch(
|
|
2556
|
+
--cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
|
|
2479
2557
|
--cirth-primary-inverse: oklch(100% 0 0);
|
|
2480
|
-
--cirth-secondary: oklch(70% .028 264);
|
|
2481
2558
|
--cirth-secondary-background: oklch(48.3% .03 264);
|
|
2482
2559
|
--cirth-secondary-border: var(--cirth-secondary-background);
|
|
2483
|
-
--cirth-secondary-underline: oklch(70% .028 264 / .5);
|
|
2484
|
-
--cirth-secondary-hover: oklch(78.7% .021 264);
|
|
2485
|
-
--cirth-secondary-hover-background: oklch(52.7% .032 264);
|
|
2486
2560
|
--cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
|
|
2487
2561
|
--cirth-secondary-hover-underline: var(--cirth-secondary-hover);
|
|
2488
|
-
--cirth-secondary-focus: oklch(70% .028 264 / .7);
|
|
2489
2562
|
--cirth-secondary-inverse: oklch(100% 0 0);
|
|
2490
|
-
--cirth-contrast: oklch(91.7% .006 264);
|
|
2491
|
-
--cirth-contrast-background: oklch(96% 0 264);
|
|
2492
2563
|
--cirth-contrast-border: var(--cirth-contrast-background);
|
|
2493
|
-
--cirth-contrast-underline: oklch(91.7% .006 264 / .5);
|
|
2494
|
-
--cirth-contrast-hover: oklch(100% 0 0);
|
|
2495
|
-
--cirth-contrast-hover-background: oklch(100% 0 0);
|
|
2496
2564
|
--cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
|
|
2497
2565
|
--cirth-contrast-hover-underline: var(--cirth-contrast-hover);
|
|
2498
|
-
--cirth-
|
|
2499
|
-
--cirth-
|
|
2500
|
-
--cirth-
|
|
2501
|
-
--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);
|
|
2502
|
-
--cirth-h1-color: oklch(96% 0 264);
|
|
2503
|
-
--cirth-h2-color: oklch(91.7% .006 264);
|
|
2504
|
-
--cirth-h3-color: oklch(83% .016 264);
|
|
2505
|
-
--cirth-h4-color: oklch(78.7% .021 264);
|
|
2506
|
-
--cirth-h5-color: oklch(74.3% .025 264);
|
|
2507
|
-
--cirth-h6-color: oklch(65.7% .03 264);
|
|
2508
|
-
--cirth-mark-background-color: oklch(35.3% .063 78);
|
|
2509
|
-
--cirth-mark-color: oklch(100% 0 0);
|
|
2510
|
-
--cirth-ins-color: oklch(78.7% .15 160.59);
|
|
2511
|
-
--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);
|
|
2512
2569
|
--cirth-blockquote-border-color: var(--cirth-muted-border-color);
|
|
2513
2570
|
--cirth-blockquote-footer-color: var(--cirth-muted-color);
|
|
2514
2571
|
--cirth-button-box-shadow: 0 0 0 #0000;
|
|
2515
2572
|
--cirth-button-hover-box-shadow: 0 0 0 #0000;
|
|
2516
2573
|
--cirth-table-border-color: var(--cirth-muted-border-color);
|
|
2517
2574
|
--cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
|
|
2518
|
-
--cirth-code-background-color: oklch(23.4% .00725 264);
|
|
2519
|
-
--cirth-code-color: oklch(65.7% .03 264);
|
|
2520
2575
|
--cirth-code-kbd-background-color: var(--cirth-color);
|
|
2521
2576
|
--cirth-code-kbd-color: var(--cirth-background-color);
|
|
2522
|
-
--cirth-form-element-background-color: oklch(24.5% .0085 264);
|
|
2523
|
-
--cirth-form-element-selected-background-color: oklch(31% .016 264);
|
|
2524
|
-
--cirth-form-element-border-color: oklch(52.7% .032 264);
|
|
2525
|
-
--cirth-form-element-color: oklch(91.7% .006 264);
|
|
2526
2577
|
--cirth-form-element-placeholder-color: oklch(65.7% .03 264);
|
|
2527
|
-
--cirth-form-element-active-background-color: oklch(23.4% .00725 264);
|
|
2528
2578
|
--cirth-form-element-active-border-color: var(--cirth-primary-border);
|
|
2529
2579
|
--cirth-form-element-focus-color: var(--cirth-primary-border);
|
|
2530
2580
|
--cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
|
|
2531
|
-
--cirth-form-element-invalid-border-color:
|
|
2532
|
-
--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);
|
|
2533
2583
|
--cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
|
|
2534
|
-
--cirth-form-element-valid-border-color:
|
|
2535
|
-
--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);
|
|
2536
2586
|
--cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
|
|
2537
|
-
--cirth-switch-
|
|
2587
|
+
--cirth-switch-thumb-box-shadow: 0 0 0 #0000;
|
|
2538
2588
|
--cirth-switch-checked-background-color: var(--cirth-primary-background);
|
|
2539
2589
|
--cirth-switch-color: var(--cirth-primary-inverse);
|
|
2540
|
-
--cirth-switch-thumb-box-shadow: 0 0 0 #0000;
|
|
2541
|
-
--cirth-range-border-color: oklch(26.7% .011 264);
|
|
2542
|
-
--cirth-range-active-border-color: oklch(31% .016 264);
|
|
2543
2590
|
--cirth-range-thumb-border-color: var(--cirth-background-color);
|
|
2544
2591
|
--cirth-range-thumb-color: var(--cirth-secondary-background);
|
|
2545
2592
|
--cirth-range-thumb-active-color: var(--cirth-primary-background);
|
|
2546
|
-
--cirth-accordion-border-color: var(--cirth-muted-border-color);
|
|
2547
2593
|
--cirth-accordion-active-summary-color: var(--cirth-primary-hover);
|
|
2548
2594
|
--cirth-accordion-close-summary-color: var(--cirth-color);
|
|
2549
2595
|
--cirth-accordion-open-summary-color: var(--cirth-muted-color);
|
|
2550
|
-
--cirth-card-background-color: oklch(22.3% .006 264);
|
|
2551
2596
|
--cirth-card-border-color: var(--cirth-card-background-color);
|
|
2552
2597
|
--cirth-card-box-shadow: var(--cirth-box-shadow);
|
|
2553
|
-
--cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
|
|
2554
|
-
--cirth-dropdown-background-color: oklch(22.3% .006 264);
|
|
2555
|
-
--cirth-dropdown-border-color: oklch(26.7% .011 264);
|
|
2556
2598
|
--cirth-dropdown-box-shadow: var(--cirth-box-shadow);
|
|
2557
2599
|
--cirth-dropdown-color: var(--cirth-color);
|
|
2558
|
-
--cirth-dropdown-hover-background-color: oklch(26.7% .011 264);
|
|
2559
|
-
--cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
|
|
2560
2600
|
--cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
|
|
2561
|
-
--cirth-meter-optimum-color:
|
|
2562
|
-
--cirth-meter-suboptimum-color:
|
|
2563
|
-
--cirth-meter-even-less-good-color:
|
|
2564
|
-
--cirth-progress-background-color: oklch(26.7% .011 264);
|
|
2565
|
-
--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);
|
|
2566
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");
|
|
2567
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");
|
|
2568
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");
|
|
2569
2611
|
}
|
|
@@ -2578,111 +2620,83 @@
|
|
|
2578
2620
|
}
|
|
2579
2621
|
|
|
2580
2622
|
.cirth:where([data-theme="dark"]), .cirth :where([data-theme="dark"]) {
|
|
2581
|
-
--lightningcss-light: ;
|
|
2582
|
-
--lightningcss-dark: initial;
|
|
2583
2623
|
color-scheme: dark;
|
|
2584
|
-
--cirth-
|
|
2585
|
-
--cirth-
|
|
2586
|
-
--cirth-
|
|
2587
|
-
--cirth-
|
|
2588
|
-
--cirth-
|
|
2589
|
-
--cirth-
|
|
2590
|
-
--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);
|
|
2591
2639
|
--cirth-primary-border: var(--cirth-primary-background);
|
|
2592
|
-
--cirth-primary-underline: oklch(
|
|
2593
|
-
--cirth-primary-hover: oklch(
|
|
2594
|
-
--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);
|
|
2595
2645
|
--cirth-primary-hover-border: var(--cirth-primary-hover-background);
|
|
2596
2646
|
--cirth-primary-hover-underline: var(--cirth-primary-hover);
|
|
2597
|
-
--cirth-primary-focus: oklch(
|
|
2647
|
+
--cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
|
|
2598
2648
|
--cirth-primary-inverse: oklch(100% 0 0);
|
|
2599
|
-
--cirth-secondary: oklch(70% .028 264);
|
|
2600
2649
|
--cirth-secondary-background: oklch(48.3% .03 264);
|
|
2601
2650
|
--cirth-secondary-border: var(--cirth-secondary-background);
|
|
2602
|
-
--cirth-secondary-underline: oklch(70% .028 264 / .5);
|
|
2603
|
-
--cirth-secondary-hover: oklch(78.7% .021 264);
|
|
2604
|
-
--cirth-secondary-hover-background: oklch(52.7% .032 264);
|
|
2605
2651
|
--cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
|
|
2606
2652
|
--cirth-secondary-hover-underline: var(--cirth-secondary-hover);
|
|
2607
|
-
--cirth-secondary-focus: oklch(70% .028 264 / .7);
|
|
2608
2653
|
--cirth-secondary-inverse: oklch(100% 0 0);
|
|
2609
|
-
--cirth-contrast: oklch(91.7% .006 264);
|
|
2610
|
-
--cirth-contrast-background: oklch(96% 0 264);
|
|
2611
2654
|
--cirth-contrast-border: var(--cirth-contrast-background);
|
|
2612
|
-
--cirth-contrast-underline: oklch(91.7% .006 264 / .5);
|
|
2613
|
-
--cirth-contrast-hover: oklch(100% 0 0);
|
|
2614
|
-
--cirth-contrast-hover-background: oklch(100% 0 0);
|
|
2615
2655
|
--cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
|
|
2616
2656
|
--cirth-contrast-hover-underline: var(--cirth-contrast-hover);
|
|
2617
|
-
--cirth-
|
|
2618
|
-
--cirth-
|
|
2619
|
-
--cirth-
|
|
2620
|
-
--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);
|
|
2621
|
-
--cirth-h1-color: oklch(96% 0 264);
|
|
2622
|
-
--cirth-h2-color: oklch(91.7% .006 264);
|
|
2623
|
-
--cirth-h3-color: oklch(83% .016 264);
|
|
2624
|
-
--cirth-h4-color: oklch(78.7% .021 264);
|
|
2625
|
-
--cirth-h5-color: oklch(74.3% .025 264);
|
|
2626
|
-
--cirth-h6-color: oklch(65.7% .03 264);
|
|
2627
|
-
--cirth-mark-background-color: oklch(35.3% .063 78);
|
|
2628
|
-
--cirth-mark-color: oklch(100% 0 0);
|
|
2629
|
-
--cirth-ins-color: oklch(78.7% .15 160.59);
|
|
2630
|
-
--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);
|
|
2631
2660
|
--cirth-blockquote-border-color: var(--cirth-muted-border-color);
|
|
2632
2661
|
--cirth-blockquote-footer-color: var(--cirth-muted-color);
|
|
2633
2662
|
--cirth-button-box-shadow: 0 0 0 #0000;
|
|
2634
2663
|
--cirth-button-hover-box-shadow: 0 0 0 #0000;
|
|
2635
2664
|
--cirth-table-border-color: var(--cirth-muted-border-color);
|
|
2636
2665
|
--cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
|
|
2637
|
-
--cirth-code-background-color: oklch(23.4% .00725 264);
|
|
2638
|
-
--cirth-code-color: oklch(65.7% .03 264);
|
|
2639
2666
|
--cirth-code-kbd-background-color: var(--cirth-color);
|
|
2640
2667
|
--cirth-code-kbd-color: var(--cirth-background-color);
|
|
2641
|
-
--cirth-form-element-background-color: oklch(24.5% .0085 264);
|
|
2642
|
-
--cirth-form-element-selected-background-color: oklch(31% .016 264);
|
|
2643
|
-
--cirth-form-element-border-color: oklch(52.7% .032 264);
|
|
2644
|
-
--cirth-form-element-color: oklch(91.7% .006 264);
|
|
2645
2668
|
--cirth-form-element-placeholder-color: oklch(65.7% .03 264);
|
|
2646
|
-
--cirth-form-element-active-background-color: oklch(23.4% .00725 264);
|
|
2647
2669
|
--cirth-form-element-active-border-color: var(--cirth-primary-border);
|
|
2648
2670
|
--cirth-form-element-focus-color: var(--cirth-primary-border);
|
|
2649
2671
|
--cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
|
|
2650
|
-
--cirth-form-element-invalid-border-color:
|
|
2651
|
-
--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);
|
|
2652
2674
|
--cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
|
|
2653
|
-
--cirth-form-element-valid-border-color:
|
|
2654
|
-
--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);
|
|
2655
2677
|
--cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
|
|
2656
|
-
--cirth-switch-
|
|
2678
|
+
--cirth-switch-thumb-box-shadow: 0 0 0 #0000;
|
|
2657
2679
|
--cirth-switch-checked-background-color: var(--cirth-primary-background);
|
|
2658
2680
|
--cirth-switch-color: var(--cirth-primary-inverse);
|
|
2659
|
-
--cirth-switch-thumb-box-shadow: 0 0 0 #0000;
|
|
2660
|
-
--cirth-range-border-color: oklch(26.7% .011 264);
|
|
2661
|
-
--cirth-range-active-border-color: oklch(31% .016 264);
|
|
2662
2681
|
--cirth-range-thumb-border-color: var(--cirth-background-color);
|
|
2663
2682
|
--cirth-range-thumb-color: var(--cirth-secondary-background);
|
|
2664
2683
|
--cirth-range-thumb-active-color: var(--cirth-primary-background);
|
|
2665
|
-
--cirth-accordion-border-color: var(--cirth-muted-border-color);
|
|
2666
2684
|
--cirth-accordion-active-summary-color: var(--cirth-primary-hover);
|
|
2667
2685
|
--cirth-accordion-close-summary-color: var(--cirth-color);
|
|
2668
2686
|
--cirth-accordion-open-summary-color: var(--cirth-muted-color);
|
|
2669
|
-
--cirth-card-background-color: oklch(22.3% .006 264);
|
|
2670
2687
|
--cirth-card-border-color: var(--cirth-card-background-color);
|
|
2671
2688
|
--cirth-card-box-shadow: var(--cirth-box-shadow);
|
|
2672
|
-
--cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
|
|
2673
|
-
--cirth-dropdown-background-color: oklch(22.3% .006 264);
|
|
2674
|
-
--cirth-dropdown-border-color: oklch(26.7% .011 264);
|
|
2675
2689
|
--cirth-dropdown-box-shadow: var(--cirth-box-shadow);
|
|
2676
2690
|
--cirth-dropdown-color: var(--cirth-color);
|
|
2677
|
-
--cirth-dropdown-hover-background-color: oklch(26.7% .011 264);
|
|
2678
|
-
--cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
|
|
2679
2691
|
--cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
|
|
2680
|
-
--cirth-meter-optimum-color:
|
|
2681
|
-
--cirth-meter-suboptimum-color:
|
|
2682
|
-
--cirth-meter-even-less-good-color:
|
|
2683
|
-
--cirth-progress-background-color: oklch(26.7% .011 264);
|
|
2684
|
-
--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);
|
|
2685
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");
|
|
2686
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");
|
|
2687
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");
|
|
2688
2702
|
}
|
|
@@ -2713,6 +2727,10 @@
|
|
|
2713
2727
|
--cirth-code-color: oklch(35.3% .021 264);
|
|
2714
2728
|
--cirth-link-visited-color: oklch(35.3% .021 264);
|
|
2715
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");
|
|
2716
2734
|
--cirth-form-element-border-color: oklch(39.7% .025 264);
|
|
2717
2735
|
--cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
|
|
2718
2736
|
--cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
|
|
@@ -2743,6 +2761,10 @@
|
|
|
2743
2761
|
--cirth-h5-color: var(--cirth-color);
|
|
2744
2762
|
--cirth-h6-color: var(--cirth-color);
|
|
2745
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");
|
|
2746
2768
|
--cirth-secondary: oklch(78.7% .021 264);
|
|
2747
2769
|
--cirth-code-color: oklch(83% .016 264);
|
|
2748
2770
|
--cirth-link-visited-color: oklch(78.7% .021 264);
|
|
@@ -2753,6 +2775,8 @@
|
|
|
2753
2775
|
--cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
|
|
2754
2776
|
--cirth-primary: oklch(78.7% .146 69.35);
|
|
2755
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);
|
|
2756
2780
|
--cirth-primary-underline: var(--cirth-primary);
|
|
2757
2781
|
--cirth-secondary-underline: var(--cirth-secondary);
|
|
2758
2782
|
--cirth-contrast-underline: var(--cirth-contrast);
|
|
@@ -2778,6 +2802,10 @@
|
|
|
2778
2802
|
--cirth-h5-color: var(--cirth-color);
|
|
2779
2803
|
--cirth-h6-color: var(--cirth-color);
|
|
2780
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");
|
|
2781
2809
|
--cirth-secondary: oklch(78.7% .021 264);
|
|
2782
2810
|
--cirth-code-color: oklch(83% .016 264);
|
|
2783
2811
|
--cirth-link-visited-color: oklch(78.7% .021 264);
|
|
@@ -2788,6 +2816,8 @@
|
|
|
2788
2816
|
--cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
|
|
2789
2817
|
--cirth-primary: oklch(78.7% .146 69.35);
|
|
2790
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);
|
|
2791
2821
|
--cirth-primary-underline: var(--cirth-primary);
|
|
2792
2822
|
--cirth-secondary-underline: var(--cirth-secondary);
|
|
2793
2823
|
--cirth-contrast-underline: var(--cirth-contrast);
|
|
@@ -2802,133 +2832,3 @@
|
|
|
2802
2832
|
--cirth-dropdown-border-color: var(--cirth-muted-border-color);
|
|
2803
2833
|
}
|
|
2804
2834
|
}
|
|
2805
|
-
|
|
2806
|
-
@media print {
|
|
2807
|
-
.cirth {
|
|
2808
|
-
--cirth-print-color: oklch(0% 0 0);
|
|
2809
|
-
--cirth-print-muted-color: oklch(48.3% .03 264);
|
|
2810
|
-
--cirth-print-border-color: oklch(61.3% .032 264);
|
|
2811
|
-
color: var(--cirth-print-color);
|
|
2812
|
-
--lightningcss-light: initial;
|
|
2813
|
-
--lightningcss-dark: ;
|
|
2814
|
-
--lightningcss-light: initial;
|
|
2815
|
-
--lightningcss-dark: ;
|
|
2816
|
-
color-scheme: light;
|
|
2817
|
-
--cirth-color: var(--cirth-print-color);
|
|
2818
|
-
--cirth-h1-color: var(--cirth-print-color);
|
|
2819
|
-
--cirth-h2-color: var(--cirth-print-color);
|
|
2820
|
-
--cirth-h3-color: var(--cirth-print-color);
|
|
2821
|
-
--cirth-h4-color: var(--cirth-print-color);
|
|
2822
|
-
--cirth-h5-color: var(--cirth-print-color);
|
|
2823
|
-
--cirth-h6-color: var(--cirth-print-color);
|
|
2824
|
-
--cirth-code-color: var(--cirth-print-color);
|
|
2825
|
-
--cirth-code-kbd-color: var(--cirth-print-color);
|
|
2826
|
-
--cirth-form-element-color: var(--cirth-print-color);
|
|
2827
|
-
--cirth-muted-color: var(--cirth-print-muted-color);
|
|
2828
|
-
--cirth-form-element-placeholder-color: var(--cirth-print-muted-color);
|
|
2829
|
-
--cirth-primary: var(--cirth-print-color);
|
|
2830
|
-
--cirth-primary-hover: var(--cirth-print-color);
|
|
2831
|
-
--cirth-primary-underline: var(--cirth-print-color);
|
|
2832
|
-
--cirth-secondary: var(--cirth-print-color);
|
|
2833
|
-
--cirth-secondary-underline: var(--cirth-print-color);
|
|
2834
|
-
--cirth-contrast: var(--cirth-print-color);
|
|
2835
|
-
--cirth-contrast-underline: var(--cirth-print-color);
|
|
2836
|
-
--cirth-link-visited-color: var(--cirth-print-color);
|
|
2837
|
-
--cirth-muted-border-color: var(--cirth-print-border-color);
|
|
2838
|
-
--cirth-form-element-border-color: var(--cirth-print-border-color);
|
|
2839
|
-
--cirth-box-shadow: none;
|
|
2840
|
-
--cirth-card-box-shadow: none;
|
|
2841
|
-
--cirth-card-background-color: transparent;
|
|
2842
|
-
--cirth-card-sectioning-background-color: transparent;
|
|
2843
|
-
--cirth-code-background-color: transparent;
|
|
2844
|
-
--cirth-code-kbd-background-color: transparent;
|
|
2845
|
-
--cirth-form-element-background-color: transparent;
|
|
2846
|
-
--cirth-form-element-active-background-color: transparent;
|
|
2847
|
-
--cirth-table-row-stripped-background-color: transparent;
|
|
2848
|
-
--cirth-modal-overlay-background-color: transparent;
|
|
2849
|
-
--cirth-dropdown-background-color: transparent;
|
|
2850
|
-
--cirth-dropdown-box-shadow: none;
|
|
2851
|
-
--cirth-ins-color: oklch(35.3% .067 160.59);
|
|
2852
|
-
--cirth-del-color: oklch(35.3% .122 29.73);
|
|
2853
|
-
--cirth-meter-optimum-color: oklch(52.7% .1 160.59);
|
|
2854
|
-
--cirth-meter-suboptimum-color: oklch(48.3% .086 78);
|
|
2855
|
-
--cirth-meter-even-less-good-color: oklch(44% .151 29.73);
|
|
2856
|
-
background: none;
|
|
2857
|
-
}
|
|
2858
|
-
|
|
2859
|
-
.cirth kbd {
|
|
2860
|
-
border: var(--cirth-border-width) solid var(--cirth-print-border-color);
|
|
2861
|
-
}
|
|
2862
|
-
|
|
2863
|
-
.cirth :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
|
|
2864
|
-
border-color: var(--cirth-print-border-color);
|
|
2865
|
-
box-shadow: none;
|
|
2866
|
-
color: var(--cirth-print-color);
|
|
2867
|
-
background: none;
|
|
2868
|
-
}
|
|
2869
|
-
|
|
2870
|
-
.cirth [type="file"]::file-selector-button {
|
|
2871
|
-
border-color: var(--cirth-print-border-color);
|
|
2872
|
-
box-shadow: none;
|
|
2873
|
-
color: var(--cirth-print-color);
|
|
2874
|
-
background: none;
|
|
2875
|
-
}
|
|
2876
|
-
|
|
2877
|
-
.cirth :is(mark, meter, progress, [type="checkbox"], [type="radio"]) {
|
|
2878
|
-
-webkit-print-color-adjust: exact;
|
|
2879
|
-
print-color-adjust: exact;
|
|
2880
|
-
}
|
|
2881
|
-
|
|
2882
|
-
.cirth a[href^="http"]:not([role="button"], nav a):after {
|
|
2883
|
-
content: " (" attr(href) ")";
|
|
2884
|
-
color: var(--cirth-print-muted-color);
|
|
2885
|
-
font-size: var(--cirth-font-size-sm);
|
|
2886
|
-
word-break: break-all;
|
|
2887
|
-
}
|
|
2888
|
-
|
|
2889
|
-
.cirth thead {
|
|
2890
|
-
display: table-header-group;
|
|
2891
|
-
}
|
|
2892
|
-
|
|
2893
|
-
.cirth tfoot {
|
|
2894
|
-
display: table-footer-group;
|
|
2895
|
-
}
|
|
2896
|
-
|
|
2897
|
-
.cirth tr {
|
|
2898
|
-
break-inside: avoid;
|
|
2899
|
-
}
|
|
2900
|
-
|
|
2901
|
-
.cirth pre {
|
|
2902
|
-
white-space: pre-wrap;
|
|
2903
|
-
overflow: visible;
|
|
2904
|
-
}
|
|
2905
|
-
|
|
2906
|
-
.cirth .overflow-auto {
|
|
2907
|
-
overflow: visible;
|
|
2908
|
-
}
|
|
2909
|
-
|
|
2910
|
-
.cirth dialog {
|
|
2911
|
-
backdrop-filter: none;
|
|
2912
|
-
min-width: 0;
|
|
2913
|
-
min-height: 0;
|
|
2914
|
-
position: static;
|
|
2915
|
-
}
|
|
2916
|
-
|
|
2917
|
-
.cirth dialog > article {
|
|
2918
|
-
max-height: none;
|
|
2919
|
-
overflow: visible;
|
|
2920
|
-
}
|
|
2921
|
-
|
|
2922
|
-
.cirth :is(h1, h2, h3, h4, h5, h6) {
|
|
2923
|
-
break-after: avoid;
|
|
2924
|
-
}
|
|
2925
|
-
|
|
2926
|
-
.cirth :is(figure, img) {
|
|
2927
|
-
break-inside: avoid;
|
|
2928
|
-
}
|
|
2929
|
-
|
|
2930
|
-
.cirth :is(blockquote, li, p) {
|
|
2931
|
-
orphans: 3;
|
|
2932
|
-
widows: 3;
|
|
2933
|
-
}
|
|
2934
|
-
}
|