@cirthcss/cirth 0.15.0-beta.1 → 0.15.0-beta.2
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 +1 -1
- package/dist/cirth.classless.css +194 -152
- package/dist/cirth.classless.min.css +1 -1
- package/dist/cirth.classless.scoped.css +194 -152
- package/dist/cirth.classless.scoped.min.css +1 -1
- package/dist/cirth.css +241 -152
- package/dist/cirth.min.css +1 -1
- package/dist/cirth.print.classless.css +9 -7
- package/dist/cirth.print.classless.min.css +1 -1
- package/dist/cirth.print.classless.scoped.css +9 -7
- package/dist/cirth.print.classless.scoped.min.css +1 -1
- package/dist/cirth.print.css +9 -7
- package/dist/cirth.print.min.css +1 -1
- package/dist/cirth.print.scoped.css +9 -7
- package/dist/cirth.print.scoped.min.css +1 -1
- package/dist/cirth.scoped.css +241 -152
- package/dist/cirth.scoped.min.css +1 -1
- package/package.json +6 -4
package/dist/cirth.classless.css
CHANGED
|
@@ -50,6 +50,10 @@ section {
|
|
|
50
50
|
margin-bottom: var(--cirth-block-spacing-vertical);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
+
main > section + section {
|
|
54
|
+
margin-block-start: var(--cirth-space-8);
|
|
55
|
+
}
|
|
56
|
+
|
|
53
57
|
b, strong {
|
|
54
58
|
font-weight: bolder;
|
|
55
59
|
}
|
|
@@ -162,6 +166,15 @@ mark {
|
|
|
162
166
|
background-color: var(--cirth-mark-background-color);
|
|
163
167
|
color: var(--cirth-mark-color);
|
|
164
168
|
vertical-align: baseline;
|
|
169
|
+
-webkit-box-decoration-break: clone;
|
|
170
|
+
box-decoration-break: clone;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
@media (forced-colors: active) {
|
|
174
|
+
mark {
|
|
175
|
+
color: marktext;
|
|
176
|
+
background-color: mark;
|
|
177
|
+
}
|
|
165
178
|
}
|
|
166
179
|
|
|
167
180
|
blockquote {
|
|
@@ -384,6 +397,8 @@ form:has(:user-invalid) :is(button:not([type="button"], [type="reset"]), [type="
|
|
|
384
397
|
|
|
385
398
|
caption {
|
|
386
399
|
color: var(--cirth-muted-color);
|
|
400
|
+
font-size: var(--cirth-font-size-sm);
|
|
401
|
+
line-height: var(--cirth-line-height-normal);
|
|
387
402
|
text-align: start;
|
|
388
403
|
padding-block-end: calc(var(--cirth-spacing) * .5);
|
|
389
404
|
}
|
|
@@ -490,6 +505,8 @@ figure {
|
|
|
490
505
|
figure figcaption {
|
|
491
506
|
padding: calc(var(--cirth-spacing) * .5) 0;
|
|
492
507
|
color: var(--cirth-muted-color);
|
|
508
|
+
font-size: var(--cirth-font-size-sm);
|
|
509
|
+
line-height: var(--cirth-line-height-normal);
|
|
493
510
|
}
|
|
494
511
|
|
|
495
512
|
hr {
|
|
@@ -989,9 +1006,9 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
|
|
|
989
1006
|
|
|
990
1007
|
[type="range"] {
|
|
991
1008
|
appearance: none;
|
|
992
|
-
background: none;
|
|
993
1009
|
width: 100%;
|
|
994
|
-
height:
|
|
1010
|
+
height: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
|
|
1011
|
+
background: none;
|
|
995
1012
|
}
|
|
996
1013
|
|
|
997
1014
|
[type="range"]::-webkit-slider-runnable-track {
|
|
@@ -1038,6 +1055,18 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
|
|
|
1038
1055
|
--cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
|
|
1039
1056
|
}
|
|
1040
1057
|
|
|
1058
|
+
@media (hover: hover) and (pointer: fine) {
|
|
1059
|
+
[type="range"]:hover:not(:active, :focus, :disabled) {
|
|
1060
|
+
--cirth-range-border-color: var(--cirth-range-active-border-color);
|
|
1061
|
+
--cirth-range-thumb-color: var(--cirth-secondary-hover);
|
|
1062
|
+
}
|
|
1063
|
+
}
|
|
1064
|
+
|
|
1065
|
+
[type="range"]:focus-visible {
|
|
1066
|
+
outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
|
|
1067
|
+
outline-offset: var(--cirth-space-1);
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1041
1070
|
[type="range"]:active::-webkit-slider-thumb {
|
|
1042
1071
|
transform: scale(1.25);
|
|
1043
1072
|
}
|
|
@@ -1441,7 +1470,7 @@ dialog[open] {
|
|
|
1441
1470
|
@starting-style {
|
|
1442
1471
|
dialog[open] > article {
|
|
1443
1472
|
opacity: 0;
|
|
1444
|
-
transform: translateY(
|
|
1473
|
+
transform: translateY(-.5rem);
|
|
1445
1474
|
}
|
|
1446
1475
|
}
|
|
1447
1476
|
|
|
@@ -1805,6 +1834,7 @@ progress::-moz-progress-bar {
|
|
|
1805
1834
|
scroll-behavior: auto;
|
|
1806
1835
|
transition-delay: var(--cirth-duration-instant);
|
|
1807
1836
|
transition-duration: var(--cirth-duration-instant);
|
|
1837
|
+
--cirth-transition: var(--cirth-duration-instant) var(--cirth-ease-out);
|
|
1808
1838
|
animation-duration: 1ms;
|
|
1809
1839
|
animation-iteration-count: 1;
|
|
1810
1840
|
animation-delay: -1ms;
|
|
@@ -1932,7 +1962,11 @@ progress::-moz-progress-bar {
|
|
|
1932
1962
|
--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");
|
|
1933
1963
|
--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");
|
|
1934
1964
|
--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");
|
|
1935
|
-
--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(
|
|
1965
|
+
--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(142, 144, 161)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
|
|
1966
|
+
}
|
|
1967
|
+
|
|
1968
|
+
:focus-visible {
|
|
1969
|
+
transition-duration: var(--cirth-duration-instant);
|
|
1936
1970
|
}
|
|
1937
1971
|
|
|
1938
1972
|
a {
|
|
@@ -2061,47 +2095,46 @@ details summary[role="button"]:after {
|
|
|
2061
2095
|
}
|
|
2062
2096
|
|
|
2063
2097
|
:root, :host {
|
|
2064
|
-
--cirth-canvas: light-dark(oklch(97.
|
|
2065
|
-
--cirth-ink: light-dark(oklch(35.3% .
|
|
2098
|
+
--cirth-canvas: light-dark(oklch(97.3% .006 44), oklch(20.15% .0225 280));
|
|
2099
|
+
--cirth-ink: light-dark(oklch(35.3% .027 280), oklch(83% .011 280));
|
|
2066
2100
|
--cirth-color: var(--cirth-ink);
|
|
2067
|
-
--cirth-
|
|
2068
|
-
--cirth-muted-color: light-dark(oklch(
|
|
2069
|
-
--cirth-
|
|
2070
|
-
--cirth-
|
|
2071
|
-
--cirth-
|
|
2072
|
-
--cirth-
|
|
2073
|
-
--cirth-
|
|
2074
|
-
--cirth-secondary: light-dark(oklch(52.7% .
|
|
2075
|
-
--cirth-secondary-
|
|
2076
|
-
--cirth-secondary-hover: light-dark(oklch(44% .
|
|
2077
|
-
--cirth-secondary-
|
|
2078
|
-
--cirth-
|
|
2079
|
-
--cirth-contrast: light-dark(oklch(22.3% .
|
|
2080
|
-
--cirth-contrast-
|
|
2081
|
-
--cirth-contrast-underline: light-dark(oklch(22.3% .006 264 / .5), oklch(91.7% .006 264 / .5));
|
|
2101
|
+
--cirth-muted-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
|
|
2102
|
+
--cirth-muted-border-color: light-dark(oklch(93.85% .002 280), oklch(26.7% .025 280));
|
|
2103
|
+
--cirth-error: light-dark(oklch(44% .151 22), oklch(74.3% .133 22));
|
|
2104
|
+
--cirth-success: light-dark(oklch(52.7% .115 153), oklch(65.7% .144 153));
|
|
2105
|
+
--cirth-warning: light-dark(oklch(48.3% .084 89.5), oklch(70% .122 89.5));
|
|
2106
|
+
--cirth-primary: light-dark(oklch(52.7% .107 44), oklch(65.7% .134 44));
|
|
2107
|
+
--cirth-secondary: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
|
|
2108
|
+
--cirth-secondary-underline: light-dark(oklch(52.7% .031 280 / .5), oklch(70% .021 280 / .5));
|
|
2109
|
+
--cirth-secondary-hover: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
|
|
2110
|
+
--cirth-secondary-hover-background: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
|
|
2111
|
+
--cirth-secondary-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(70% .021 280 / .7));
|
|
2112
|
+
--cirth-contrast: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
|
|
2113
|
+
--cirth-contrast-background: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
|
|
2114
|
+
--cirth-contrast-underline: light-dark(oklch(22.3% .023 280 / .5), oklch(91.7% .004 280 / .5));
|
|
2082
2115
|
--cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
|
|
2083
2116
|
--cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
|
|
2084
|
-
--cirth-contrast-focus: light-dark(oklch(48.3% .03
|
|
2117
|
+
--cirth-contrast-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(87.3% .007 280 / .5));
|
|
2085
2118
|
--cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
|
|
2086
|
-
--cirth-link-visited-color: light-dark(oklch(48.3% 0
|
|
2087
|
-
--cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .
|
|
2088
|
-
.0145rem .029rem .174rem oklch(9%
|
|
2089
|
-
--cirth-h1-color: light-dark(oklch(22.3% .
|
|
2090
|
-
--cirth-h2-color: light-dark(oklch(26.7% .
|
|
2091
|
-
--cirth-h3-color: light-dark(oklch(31% .
|
|
2092
|
-
--cirth-h4-color: light-dark(oklch(35.3% .
|
|
2093
|
-
--cirth-h5-color: light-dark(oklch(39.7% .
|
|
2094
|
-
--cirth-h6-color: light-dark(oklch(44% .
|
|
2095
|
-
--cirth-mark-color: light-dark(oklch(18%
|
|
2096
|
-
--cirth-code-color: light-dark(oklch(52.7% .
|
|
2097
|
-
--cirth-form-element-selected-background-color: light-dark(oklch(91.7% .
|
|
2098
|
-
--cirth-form-element-border-color: light-dark(oklch(61.3% .
|
|
2099
|
-
--cirth-form-element-color: light-dark(oklch(26.7% .
|
|
2100
|
-
--cirth-switch-background-color: light-dark(oklch(61.3% .
|
|
2101
|
-
--cirth-range-border-color: light-dark(oklch(91.7% .
|
|
2102
|
-
--cirth-range-active-border-color: light-dark(oklch(83% .
|
|
2103
|
-
--cirth-progress-background-color: light-dark(oklch(91.7% .
|
|
2104
|
-
--cirth-progress-border-color: light-dark(oklch(61.3% .
|
|
2119
|
+
--cirth-link-visited-color: light-dark(oklch(48.3% 0 280), oklch(65.7% 0 280));
|
|
2120
|
+
--cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .025 280 / .01698), .0335rem .067rem .402rem oklch(65.7% .025 280 / .024), .0625rem .125rem .75rem oklch(65.7% .025 280 / .03), .1125rem .225rem 1.35rem oklch(65.7% .025 280 / .036), .2085rem .417rem 2.502rem oklch(65.7% .025 280 / .04302), .5rem 1rem 6rem oklch(65.7% .025 280 / .06), 0 0 0 .0625rem oklch(65.7% .025 280 / .015),
|
|
2121
|
+
.0145rem .029rem .174rem oklch(9% .011 280 / .01698), .0335rem .067rem .402rem oklch(9% .011 280 / .024), .0625rem .125rem .75rem oklch(9% .011 280 / .03), .1125rem .225rem 1.35rem oklch(9% .011 280 / .036), .2085rem .417rem 2.502rem oklch(9% .011 280 / .04302), .5rem 1rem 6rem oklch(9% .011 280 / .06), 0 0 0 .0625rem oklch(9% .011 280 / .015));
|
|
2122
|
+
--cirth-h1-color: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
|
|
2123
|
+
--cirth-h2-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
|
|
2124
|
+
--cirth-h3-color: light-dark(oklch(31% .026 280), oklch(83% .011 280));
|
|
2125
|
+
--cirth-h4-color: light-dark(oklch(35.3% .027 280), oklch(78.7% .014 280));
|
|
2126
|
+
--cirth-h5-color: light-dark(oklch(39.7% .028 280), oklch(74.3% .018 280));
|
|
2127
|
+
--cirth-h6-color: light-dark(oklch(44% .029 280), oklch(65.7% .025 280));
|
|
2128
|
+
--cirth-mark-color: light-dark(oklch(18% .022 280), oklch(100% 0 0));
|
|
2129
|
+
--cirth-code-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
|
|
2130
|
+
--cirth-form-element-selected-background-color: light-dark(oklch(91.7% .004 280), oklch(31% .026 280));
|
|
2131
|
+
--cirth-form-element-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
|
|
2132
|
+
--cirth-form-element-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
|
|
2133
|
+
--cirth-switch-background-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
|
|
2134
|
+
--cirth-range-border-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
|
|
2135
|
+
--cirth-range-active-border-color: light-dark(oklch(83% .011 280), oklch(31% .026 280));
|
|
2136
|
+
--cirth-progress-background-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
|
|
2137
|
+
--cirth-progress-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
|
|
2105
2138
|
}
|
|
2106
2139
|
|
|
2107
2140
|
:where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
|
|
@@ -2129,6 +2162,7 @@ details summary[role="button"]:after {
|
|
|
2129
2162
|
--cirth-primary-hover-underline: var(--cirth-primary-hover);
|
|
2130
2163
|
--cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
|
|
2131
2164
|
--cirth-primary-inverse: oklch(100% 0 0);
|
|
2165
|
+
--cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.247) c h / 25%);
|
|
2132
2166
|
--cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .019) c h);
|
|
2133
2167
|
--cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .009) c h);
|
|
2134
2168
|
--cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
|
|
@@ -2136,7 +2170,7 @@ details summary[role="button"]:after {
|
|
|
2136
2170
|
--cirth-form-element-active-background-color: var(--cirth-canvas);
|
|
2137
2171
|
--cirth-dropdown-background-color: var(--cirth-card-background-color);
|
|
2138
2172
|
--cirth-popover-background-color: var(--cirth-card-background-color);
|
|
2139
|
-
--cirth-secondary-background: oklch(48.3% .03
|
|
2173
|
+
--cirth-secondary-background: oklch(48.3% .03 280);
|
|
2140
2174
|
--cirth-secondary-border: var(--cirth-secondary-background);
|
|
2141
2175
|
--cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
|
|
2142
2176
|
--cirth-secondary-hover-underline: var(--cirth-secondary-hover);
|
|
@@ -2144,7 +2178,9 @@ details summary[role="button"]:after {
|
|
|
2144
2178
|
--cirth-contrast-border: var(--cirth-contrast-background);
|
|
2145
2179
|
--cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
|
|
2146
2180
|
--cirth-contrast-hover-underline: var(--cirth-secondary-hover);
|
|
2147
|
-
--cirth-mark-background-color:
|
|
2181
|
+
--cirth-mark-background-color: color-mix(in oklab,
|
|
2182
|
+
var(--cirth-primary) 18%,
|
|
2183
|
+
var(--cirth-canvas));
|
|
2148
2184
|
--cirth-ins-color: var(--cirth-success-text);
|
|
2149
2185
|
--cirth-del-color: var(--cirth-error-text);
|
|
2150
2186
|
--cirth-blockquote-border-color: var(--cirth-muted-border-color);
|
|
@@ -2152,7 +2188,7 @@ details summary[role="button"]:after {
|
|
|
2152
2188
|
--cirth-button-box-shadow: 0 0 0 #0000;
|
|
2153
2189
|
--cirth-button-hover-box-shadow: 0 0 0 #0000;
|
|
2154
2190
|
--cirth-table-border-color: var(--cirth-card-border-color);
|
|
2155
|
-
--cirth-table-row-stripped-background-color: oklch(57% .032
|
|
2191
|
+
--cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
|
|
2156
2192
|
--cirth-code-kbd-background-color: var(--cirth-ink);
|
|
2157
2193
|
--cirth-code-kbd-color: var(--cirth-background-color);
|
|
2158
2194
|
--cirth-form-element-placeholder-color: var(--cirth-muted-color);
|
|
@@ -2169,25 +2205,25 @@ details summary[role="button"]:after {
|
|
|
2169
2205
|
--cirth-switch-checked-background-color: var(--cirth-primary-background);
|
|
2170
2206
|
--cirth-switch-color: var(--cirth-primary-inverse);
|
|
2171
2207
|
--cirth-range-thumb-border-color: var(--cirth-background-color);
|
|
2172
|
-
--cirth-range-thumb-color: var(--cirth-secondary
|
|
2208
|
+
--cirth-range-thumb-color: var(--cirth-secondary);
|
|
2173
2209
|
--cirth-range-thumb-active-color: var(--cirth-primary-background);
|
|
2174
2210
|
--cirth-accordion-active-summary-color: var(--cirth-primary-hover);
|
|
2175
2211
|
--cirth-accordion-close-summary-color: var(--cirth-ink);
|
|
2176
2212
|
--cirth-accordion-open-summary-color: var(--cirth-ink);
|
|
2177
2213
|
--cirth-card-border-color: color-mix(in oklab,
|
|
2178
2214
|
var(--cirth-form-element-border-color) 38%,
|
|
2179
|
-
var(--cirth-card-background-color));
|
|
2180
|
-
--cirth-modal-overlay-background-color: oklch(93.85% .
|
|
2215
|
+
oklch(from var(--cirth-card-background-color) l 0 h));
|
|
2216
|
+
--cirth-modal-overlay-background-color: oklch(93.85% .002 280deg / var(--cirth-opacity-overlay));
|
|
2181
2217
|
--cirth-meter-optimum-color: var(--cirth-success);
|
|
2182
2218
|
--cirth-meter-suboptimum-color: var(--cirth-warning);
|
|
2183
2219
|
--cirth-meter-even-less-good-color: var(--cirth-error);
|
|
2184
2220
|
--cirth-progress-color: var(--cirth-primary-background);
|
|
2185
|
-
--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(
|
|
2186
|
-
--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(
|
|
2187
|
-
--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(
|
|
2188
|
-
--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(
|
|
2189
|
-
--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,
|
|
2190
|
-
--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,
|
|
2221
|
+
--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(103, 105, 125)' 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");
|
|
2222
|
+
--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(103, 105, 125)' 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");
|
|
2223
|
+
--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(103, 105, 125)' 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");
|
|
2224
|
+
--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(103, 105, 125)' 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");
|
|
2225
|
+
--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, 126, 74)' 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");
|
|
2226
|
+
--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, 44, 56)' 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");
|
|
2191
2227
|
}
|
|
2192
2228
|
|
|
2193
2229
|
@media only screen and (prefers-color-scheme: dark) {
|
|
@@ -2216,7 +2252,8 @@ details summary[role="button"]:after {
|
|
|
2216
2252
|
black);
|
|
2217
2253
|
--cirth-primary-hover-border: var(--cirth-primary-hover-background);
|
|
2218
2254
|
--cirth-primary-hover-underline: var(--cirth-primary-hover);
|
|
2219
|
-
--cirth-primary-focus: oklch(from var(--cirth-primary) l c h /
|
|
2255
|
+
--cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
|
|
2256
|
+
--cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
|
|
2220
2257
|
--cirth-primary-inverse: oklch(100% 0 0);
|
|
2221
2258
|
--cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
|
|
2222
2259
|
--cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
|
|
@@ -2225,7 +2262,7 @@ details summary[role="button"]:after {
|
|
|
2225
2262
|
--cirth-form-element-active-background-color: var(--cirth-canvas);
|
|
2226
2263
|
--cirth-dropdown-background-color: var(--cirth-card-background-color);
|
|
2227
2264
|
--cirth-popover-background-color: var(--cirth-card-background-color);
|
|
2228
|
-
--cirth-secondary-background: oklch(48.3% .03
|
|
2265
|
+
--cirth-secondary-background: oklch(48.3% .03 280);
|
|
2229
2266
|
--cirth-secondary-border: var(--cirth-secondary-background);
|
|
2230
2267
|
--cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
|
|
2231
2268
|
--cirth-secondary-hover-underline: var(--cirth-secondary-hover);
|
|
@@ -2233,7 +2270,9 @@ details summary[role="button"]:after {
|
|
|
2233
2270
|
--cirth-contrast-border: var(--cirth-contrast-background);
|
|
2234
2271
|
--cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
|
|
2235
2272
|
--cirth-contrast-hover-underline: var(--cirth-contrast-hover);
|
|
2236
|
-
--cirth-mark-background-color:
|
|
2273
|
+
--cirth-mark-background-color: color-mix(in oklab,
|
|
2274
|
+
var(--cirth-primary) 24%,
|
|
2275
|
+
var(--cirth-canvas));
|
|
2237
2276
|
--cirth-ins-color: var(--cirth-success-text);
|
|
2238
2277
|
--cirth-del-color: var(--cirth-error-text);
|
|
2239
2278
|
--cirth-blockquote-border-color: var(--cirth-muted-border-color);
|
|
@@ -2241,10 +2280,10 @@ details summary[role="button"]:after {
|
|
|
2241
2280
|
--cirth-button-box-shadow: 0 0 0 #0000;
|
|
2242
2281
|
--cirth-button-hover-box-shadow: 0 0 0 #0000;
|
|
2243
2282
|
--cirth-table-border-color: var(--cirth-card-border-color);
|
|
2244
|
-
--cirth-table-row-stripped-background-color: oklch(57% .032
|
|
2283
|
+
--cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
|
|
2245
2284
|
--cirth-code-kbd-background-color: var(--cirth-ink);
|
|
2246
2285
|
--cirth-code-kbd-color: var(--cirth-background-color);
|
|
2247
|
-
--cirth-form-element-placeholder-color: oklch(65.7% .
|
|
2286
|
+
--cirth-form-element-placeholder-color: oklch(65.7% .025 280);
|
|
2248
2287
|
--cirth-form-element-active-border-color: var(--cirth-primary-border);
|
|
2249
2288
|
--cirth-form-element-focus-color: var(--cirth-primary-focus);
|
|
2250
2289
|
--cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
|
|
@@ -2258,7 +2297,7 @@ details summary[role="button"]:after {
|
|
|
2258
2297
|
--cirth-switch-checked-background-color: var(--cirth-primary-background);
|
|
2259
2298
|
--cirth-switch-color: var(--cirth-primary-inverse);
|
|
2260
2299
|
--cirth-range-thumb-border-color: var(--cirth-background-color);
|
|
2261
|
-
--cirth-range-thumb-color: var(--cirth-secondary
|
|
2300
|
+
--cirth-range-thumb-color: var(--cirth-secondary);
|
|
2262
2301
|
--cirth-range-thumb-active-color: var(--cirth-primary-background);
|
|
2263
2302
|
--cirth-accordion-active-summary-color: var(--cirth-primary-hover);
|
|
2264
2303
|
--cirth-accordion-close-summary-color: var(--cirth-ink);
|
|
@@ -2266,17 +2305,17 @@ details summary[role="button"]:after {
|
|
|
2266
2305
|
--cirth-card-border-color: color-mix(in oklab,
|
|
2267
2306
|
var(--cirth-form-element-border-color) 46%,
|
|
2268
2307
|
var(--cirth-card-background-color));
|
|
2269
|
-
--cirth-modal-overlay-background-color: oklch(9%
|
|
2308
|
+
--cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
|
|
2270
2309
|
--cirth-meter-optimum-color: var(--cirth-success);
|
|
2271
2310
|
--cirth-meter-suboptimum-color: var(--cirth-warning);
|
|
2272
2311
|
--cirth-meter-even-less-good-color: var(--cirth-error);
|
|
2273
2312
|
--cirth-progress-color: var(--cirth-primary);
|
|
2274
|
-
--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(
|
|
2275
|
-
--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(
|
|
2276
|
-
--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(
|
|
2277
|
-
--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(
|
|
2278
|
-
--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,
|
|
2279
|
-
--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,
|
|
2313
|
+
--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(142, 144, 161)' 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");
|
|
2314
|
+
--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(142, 144, 161)' 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");
|
|
2315
|
+
--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(142, 144, 161)' 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");
|
|
2316
|
+
--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(142, 144, 161)' 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");
|
|
2317
|
+
--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, 216, 131)' 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");
|
|
2318
|
+
--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, 158, 155)' 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");
|
|
2280
2319
|
}
|
|
2281
2320
|
}
|
|
2282
2321
|
|
|
@@ -2305,7 +2344,8 @@ details summary[role="button"]:after {
|
|
|
2305
2344
|
black);
|
|
2306
2345
|
--cirth-primary-hover-border: var(--cirth-primary-hover-background);
|
|
2307
2346
|
--cirth-primary-hover-underline: var(--cirth-primary-hover);
|
|
2308
|
-
--cirth-primary-focus: oklch(from var(--cirth-primary) l c h /
|
|
2347
|
+
--cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
|
|
2348
|
+
--cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
|
|
2309
2349
|
--cirth-primary-inverse: oklch(100% 0 0);
|
|
2310
2350
|
--cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
|
|
2311
2351
|
--cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
|
|
@@ -2314,7 +2354,7 @@ details summary[role="button"]:after {
|
|
|
2314
2354
|
--cirth-form-element-active-background-color: var(--cirth-canvas);
|
|
2315
2355
|
--cirth-dropdown-background-color: var(--cirth-card-background-color);
|
|
2316
2356
|
--cirth-popover-background-color: var(--cirth-card-background-color);
|
|
2317
|
-
--cirth-secondary-background: oklch(48.3% .03
|
|
2357
|
+
--cirth-secondary-background: oklch(48.3% .03 280);
|
|
2318
2358
|
--cirth-secondary-border: var(--cirth-secondary-background);
|
|
2319
2359
|
--cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
|
|
2320
2360
|
--cirth-secondary-hover-underline: var(--cirth-secondary-hover);
|
|
@@ -2322,7 +2362,9 @@ details summary[role="button"]:after {
|
|
|
2322
2362
|
--cirth-contrast-border: var(--cirth-contrast-background);
|
|
2323
2363
|
--cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
|
|
2324
2364
|
--cirth-contrast-hover-underline: var(--cirth-contrast-hover);
|
|
2325
|
-
--cirth-mark-background-color:
|
|
2365
|
+
--cirth-mark-background-color: color-mix(in oklab,
|
|
2366
|
+
var(--cirth-primary) 24%,
|
|
2367
|
+
var(--cirth-canvas));
|
|
2326
2368
|
--cirth-ins-color: var(--cirth-success-text);
|
|
2327
2369
|
--cirth-del-color: var(--cirth-error-text);
|
|
2328
2370
|
--cirth-blockquote-border-color: var(--cirth-muted-border-color);
|
|
@@ -2330,10 +2372,10 @@ details summary[role="button"]:after {
|
|
|
2330
2372
|
--cirth-button-box-shadow: 0 0 0 #0000;
|
|
2331
2373
|
--cirth-button-hover-box-shadow: 0 0 0 #0000;
|
|
2332
2374
|
--cirth-table-border-color: var(--cirth-card-border-color);
|
|
2333
|
-
--cirth-table-row-stripped-background-color: oklch(57% .032
|
|
2375
|
+
--cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
|
|
2334
2376
|
--cirth-code-kbd-background-color: var(--cirth-ink);
|
|
2335
2377
|
--cirth-code-kbd-color: var(--cirth-background-color);
|
|
2336
|
-
--cirth-form-element-placeholder-color: oklch(65.7% .
|
|
2378
|
+
--cirth-form-element-placeholder-color: oklch(65.7% .025 280);
|
|
2337
2379
|
--cirth-form-element-active-border-color: var(--cirth-primary-border);
|
|
2338
2380
|
--cirth-form-element-focus-color: var(--cirth-primary-focus);
|
|
2339
2381
|
--cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
|
|
@@ -2347,7 +2389,7 @@ details summary[role="button"]:after {
|
|
|
2347
2389
|
--cirth-switch-checked-background-color: var(--cirth-primary-background);
|
|
2348
2390
|
--cirth-switch-color: var(--cirth-primary-inverse);
|
|
2349
2391
|
--cirth-range-thumb-border-color: var(--cirth-background-color);
|
|
2350
|
-
--cirth-range-thumb-color: var(--cirth-secondary
|
|
2392
|
+
--cirth-range-thumb-color: var(--cirth-secondary);
|
|
2351
2393
|
--cirth-range-thumb-active-color: var(--cirth-primary-background);
|
|
2352
2394
|
--cirth-accordion-active-summary-color: var(--cirth-primary-hover);
|
|
2353
2395
|
--cirth-accordion-close-summary-color: var(--cirth-ink);
|
|
@@ -2355,17 +2397,17 @@ details summary[role="button"]:after {
|
|
|
2355
2397
|
--cirth-card-border-color: color-mix(in oklab,
|
|
2356
2398
|
var(--cirth-form-element-border-color) 46%,
|
|
2357
2399
|
var(--cirth-card-background-color));
|
|
2358
|
-
--cirth-modal-overlay-background-color: oklch(9%
|
|
2400
|
+
--cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
|
|
2359
2401
|
--cirth-meter-optimum-color: var(--cirth-success);
|
|
2360
2402
|
--cirth-meter-suboptimum-color: var(--cirth-warning);
|
|
2361
2403
|
--cirth-meter-even-less-good-color: var(--cirth-error);
|
|
2362
2404
|
--cirth-progress-color: var(--cirth-primary);
|
|
2363
|
-
--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(
|
|
2364
|
-
--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(
|
|
2365
|
-
--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(
|
|
2366
|
-
--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(
|
|
2367
|
-
--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,
|
|
2368
|
-
--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,
|
|
2405
|
+
--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(142, 144, 161)' 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");
|
|
2406
|
+
--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(142, 144, 161)' 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");
|
|
2407
|
+
--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(142, 144, 161)' 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");
|
|
2408
|
+
--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(142, 144, 161)' 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");
|
|
2409
|
+
--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, 216, 131)' 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");
|
|
2410
|
+
--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, 158, 155)' 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");
|
|
2369
2411
|
}
|
|
2370
2412
|
|
|
2371
2413
|
progress, [type="checkbox"], [type="radio"], [type="range"] {
|
|
@@ -2374,117 +2416,117 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
|
|
|
2374
2416
|
|
|
2375
2417
|
@media (prefers-contrast: more) {
|
|
2376
2418
|
:where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
|
|
2377
|
-
--cirth-ink: oklch(22.3% .
|
|
2419
|
+
--cirth-ink: oklch(22.3% .023 280);
|
|
2378
2420
|
--cirth-h1-color: var(--cirth-color);
|
|
2379
2421
|
--cirth-h2-color: var(--cirth-color);
|
|
2380
2422
|
--cirth-h3-color: var(--cirth-color);
|
|
2381
2423
|
--cirth-h4-color: var(--cirth-color);
|
|
2382
2424
|
--cirth-h5-color: var(--cirth-color);
|
|
2383
2425
|
--cirth-h6-color: var(--cirth-color);
|
|
2384
|
-
--cirth-muted-color: oklch(39.7% .
|
|
2385
|
-
--cirth-secondary: oklch(39.7% .
|
|
2386
|
-
--cirth-code-color: oklch(35.3% .
|
|
2387
|
-
--cirth-link-visited-color: oklch(35.3% .
|
|
2388
|
-
--cirth-muted-border-color: oklch(57% .032
|
|
2389
|
-
--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(
|
|
2390
|
-
--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(
|
|
2391
|
-
--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(
|
|
2392
|
-
--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(
|
|
2393
|
-
--cirth-form-element-border-color: oklch(39.7% .
|
|
2394
|
-
--cirth-form-element-invalid-border-color: oklch(48.3% .
|
|
2395
|
-
--cirth-form-element-valid-border-color: oklch(48.3% .
|
|
2396
|
-
--cirth-primary: oklch(39.7% .
|
|
2397
|
-
--cirth-primary-hover: oklch(31% .
|
|
2426
|
+
--cirth-muted-color: oklch(39.7% .028 280);
|
|
2427
|
+
--cirth-secondary: oklch(39.7% .028 280);
|
|
2428
|
+
--cirth-code-color: oklch(35.3% .027 280);
|
|
2429
|
+
--cirth-link-visited-color: oklch(35.3% .027 280);
|
|
2430
|
+
--cirth-muted-border-color: oklch(57% .032 280);
|
|
2431
|
+
--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(68, 69, 86)' 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");
|
|
2432
|
+
--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(68, 69, 86)' 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");
|
|
2433
|
+
--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(68, 69, 86)' 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");
|
|
2434
|
+
--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(68, 69, 86)' 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");
|
|
2435
|
+
--cirth-form-element-border-color: oklch(39.7% .028 280);
|
|
2436
|
+
--cirth-form-element-invalid-border-color: oklch(48.3% .165 22);
|
|
2437
|
+
--cirth-form-element-valid-border-color: oklch(48.3% .106 153);
|
|
2438
|
+
--cirth-primary: oklch(39.7% .081 44);
|
|
2439
|
+
--cirth-primary-hover: oklch(31% .063 44);
|
|
2398
2440
|
--cirth-primary-underline: var(--cirth-primary);
|
|
2399
2441
|
--cirth-secondary-underline: var(--cirth-secondary);
|
|
2400
2442
|
--cirth-contrast-underline: var(--cirth-contrast);
|
|
2401
|
-
--cirth-primary-focus: oklch(48.3% .
|
|
2402
|
-
--cirth-secondary-focus: oklch(48.3% .03
|
|
2403
|
-
--cirth-contrast-focus: oklch(48.3% .03
|
|
2404
|
-
--cirth-switch-background-color: oklch(48.3% .03
|
|
2405
|
-
--cirth-progress-border-color: oklch(48.3% .03
|
|
2406
|
-
--cirth-meter-optimum-color: oklch(44% .
|
|
2407
|
-
--cirth-meter-suboptimum-color: oklch(39.7% .
|
|
2408
|
-
--cirth-meter-even-less-good-color: oklch(35.3% .
|
|
2443
|
+
--cirth-primary-focus: oklch(48.3% .098 44);
|
|
2444
|
+
--cirth-secondary-focus: oklch(48.3% .03 280);
|
|
2445
|
+
--cirth-contrast-focus: oklch(48.3% .03 280);
|
|
2446
|
+
--cirth-switch-background-color: oklch(48.3% .03 280);
|
|
2447
|
+
--cirth-progress-border-color: oklch(48.3% .03 280);
|
|
2448
|
+
--cirth-meter-optimum-color: oklch(44% .096 153);
|
|
2449
|
+
--cirth-meter-suboptimum-color: oklch(39.7% .069 89.5);
|
|
2450
|
+
--cirth-meter-even-less-good-color: oklch(35.3% .121 22);
|
|
2409
2451
|
}
|
|
2410
2452
|
}
|
|
2411
2453
|
|
|
2412
2454
|
@media only screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
|
|
2413
2455
|
:root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
|
|
2414
|
-
--cirth-ink: oklch(96% 0
|
|
2456
|
+
--cirth-ink: oklch(96% 0 280);
|
|
2415
2457
|
--cirth-h1-color: var(--cirth-color);
|
|
2416
2458
|
--cirth-h2-color: var(--cirth-color);
|
|
2417
2459
|
--cirth-h3-color: var(--cirth-color);
|
|
2418
2460
|
--cirth-h4-color: var(--cirth-color);
|
|
2419
2461
|
--cirth-h5-color: var(--cirth-color);
|
|
2420
2462
|
--cirth-h6-color: var(--cirth-color);
|
|
2421
|
-
--cirth-muted-color: oklch(78.7% .
|
|
2422
|
-
--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(
|
|
2423
|
-
--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(
|
|
2424
|
-
--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(
|
|
2425
|
-
--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(
|
|
2426
|
-
--cirth-secondary: oklch(78.7% .
|
|
2427
|
-
--cirth-code-color: oklch(83% .
|
|
2428
|
-
--cirth-link-visited-color: oklch(78.7% .
|
|
2429
|
-
--cirth-muted-border-color: oklch(57% .032
|
|
2463
|
+
--cirth-muted-color: oklch(78.7% .014 280);
|
|
2464
|
+
--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(183, 185, 195)' 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");
|
|
2465
|
+
--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(183, 185, 195)' 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");
|
|
2466
|
+
--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(183, 185, 195)' 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");
|
|
2467
|
+
--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(183, 185, 195)' 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");
|
|
2468
|
+
--cirth-secondary: oklch(78.7% .014 280);
|
|
2469
|
+
--cirth-code-color: oklch(83% .011 280);
|
|
2470
|
+
--cirth-link-visited-color: oklch(78.7% .014 280);
|
|
2471
|
+
--cirth-muted-border-color: oklch(57% .032 280);
|
|
2430
2472
|
--cirth-card-border-color: var(--cirth-muted-border-color);
|
|
2431
|
-
--cirth-form-element-border-color: oklch(70% .
|
|
2432
|
-
--cirth-form-element-invalid-border-color: oklch(78.7% .
|
|
2433
|
-
--cirth-form-element-valid-border-color: oklch(78.7% .
|
|
2434
|
-
--cirth-primary: oklch(78.7% .
|
|
2435
|
-
--cirth-primary-hover: oklch(87.3% .
|
|
2436
|
-
--cirth-primary-background: oklch(44% .
|
|
2437
|
-
--cirth-primary-hover-background: oklch(39.7% .
|
|
2473
|
+
--cirth-form-element-border-color: oklch(70% .021 280);
|
|
2474
|
+
--cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
|
|
2475
|
+
--cirth-form-element-valid-border-color: oklch(78.7% .172 153);
|
|
2476
|
+
--cirth-primary: oklch(78.7% .092 44);
|
|
2477
|
+
--cirth-primary-hover: oklch(87.3% .051 44);
|
|
2478
|
+
--cirth-primary-background: oklch(44% .09 44);
|
|
2479
|
+
--cirth-primary-hover-background: oklch(39.7% .081 44);
|
|
2438
2480
|
--cirth-primary-underline: var(--cirth-primary);
|
|
2439
2481
|
--cirth-secondary-underline: var(--cirth-secondary);
|
|
2440
2482
|
--cirth-contrast-underline: var(--cirth-contrast);
|
|
2441
|
-
--cirth-primary-focus: oklch(70% .
|
|
2442
|
-
--cirth-secondary-focus: oklch(70% .
|
|
2443
|
-
--cirth-contrast-focus: oklch(87.3% .
|
|
2444
|
-
--cirth-switch-background-color: oklch(65.7% .
|
|
2445
|
-
--cirth-progress-border-color: oklch(70% .
|
|
2446
|
-
--cirth-meter-optimum-color: oklch(74.3% .
|
|
2447
|
-
--cirth-meter-suboptimum-color: oklch(78.7% .
|
|
2448
|
-
--cirth-meter-even-less-good-color: oklch(83% .
|
|
2483
|
+
--cirth-primary-focus: oklch(70% .141 44);
|
|
2484
|
+
--cirth-secondary-focus: oklch(70% .021 280);
|
|
2485
|
+
--cirth-contrast-focus: oklch(87.3% .007 280);
|
|
2486
|
+
--cirth-switch-background-color: oklch(65.7% .025 280);
|
|
2487
|
+
--cirth-progress-border-color: oklch(70% .021 280);
|
|
2488
|
+
--cirth-meter-optimum-color: oklch(74.3% .163 153);
|
|
2489
|
+
--cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
|
|
2490
|
+
--cirth-meter-even-less-good-color: oklch(83% .08 22);
|
|
2449
2491
|
}
|
|
2450
2492
|
}
|
|
2451
2493
|
|
|
2452
2494
|
@media (prefers-contrast: more) {
|
|
2453
2495
|
:where([data-theme="dark"]) {
|
|
2454
|
-
--cirth-ink: oklch(96% 0
|
|
2496
|
+
--cirth-ink: oklch(96% 0 280);
|
|
2455
2497
|
--cirth-h1-color: var(--cirth-color);
|
|
2456
2498
|
--cirth-h2-color: var(--cirth-color);
|
|
2457
2499
|
--cirth-h3-color: var(--cirth-color);
|
|
2458
2500
|
--cirth-h4-color: var(--cirth-color);
|
|
2459
2501
|
--cirth-h5-color: var(--cirth-color);
|
|
2460
2502
|
--cirth-h6-color: var(--cirth-color);
|
|
2461
|
-
--cirth-muted-color: oklch(78.7% .
|
|
2462
|
-
--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(
|
|
2463
|
-
--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(
|
|
2464
|
-
--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(
|
|
2465
|
-
--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(
|
|
2466
|
-
--cirth-secondary: oklch(78.7% .
|
|
2467
|
-
--cirth-code-color: oklch(83% .
|
|
2468
|
-
--cirth-link-visited-color: oklch(78.7% .
|
|
2469
|
-
--cirth-muted-border-color: oklch(57% .032
|
|
2503
|
+
--cirth-muted-color: oklch(78.7% .014 280);
|
|
2504
|
+
--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(183, 185, 195)' 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");
|
|
2505
|
+
--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(183, 185, 195)' 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");
|
|
2506
|
+
--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(183, 185, 195)' 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");
|
|
2507
|
+
--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(183, 185, 195)' 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");
|
|
2508
|
+
--cirth-secondary: oklch(78.7% .014 280);
|
|
2509
|
+
--cirth-code-color: oklch(83% .011 280);
|
|
2510
|
+
--cirth-link-visited-color: oklch(78.7% .014 280);
|
|
2511
|
+
--cirth-muted-border-color: oklch(57% .032 280);
|
|
2470
2512
|
--cirth-card-border-color: var(--cirth-muted-border-color);
|
|
2471
|
-
--cirth-form-element-border-color: oklch(70% .
|
|
2472
|
-
--cirth-form-element-invalid-border-color: oklch(78.7% .
|
|
2473
|
-
--cirth-form-element-valid-border-color: oklch(78.7% .
|
|
2474
|
-
--cirth-primary: oklch(78.7% .
|
|
2475
|
-
--cirth-primary-hover: oklch(87.3% .
|
|
2476
|
-
--cirth-primary-background: oklch(44% .
|
|
2477
|
-
--cirth-primary-hover-background: oklch(39.7% .
|
|
2513
|
+
--cirth-form-element-border-color: oklch(70% .021 280);
|
|
2514
|
+
--cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
|
|
2515
|
+
--cirth-form-element-valid-border-color: oklch(78.7% .172 153);
|
|
2516
|
+
--cirth-primary: oklch(78.7% .092 44);
|
|
2517
|
+
--cirth-primary-hover: oklch(87.3% .051 44);
|
|
2518
|
+
--cirth-primary-background: oklch(44% .09 44);
|
|
2519
|
+
--cirth-primary-hover-background: oklch(39.7% .081 44);
|
|
2478
2520
|
--cirth-primary-underline: var(--cirth-primary);
|
|
2479
2521
|
--cirth-secondary-underline: var(--cirth-secondary);
|
|
2480
2522
|
--cirth-contrast-underline: var(--cirth-contrast);
|
|
2481
|
-
--cirth-primary-focus: oklch(70% .
|
|
2482
|
-
--cirth-secondary-focus: oklch(70% .
|
|
2483
|
-
--cirth-contrast-focus: oklch(87.3% .
|
|
2484
|
-
--cirth-switch-background-color: oklch(65.7% .
|
|
2485
|
-
--cirth-progress-border-color: oklch(70% .
|
|
2486
|
-
--cirth-meter-optimum-color: oklch(74.3% .
|
|
2487
|
-
--cirth-meter-suboptimum-color: oklch(78.7% .
|
|
2488
|
-
--cirth-meter-even-less-good-color: oklch(83% .
|
|
2523
|
+
--cirth-primary-focus: oklch(70% .141 44);
|
|
2524
|
+
--cirth-secondary-focus: oklch(70% .021 280);
|
|
2525
|
+
--cirth-contrast-focus: oklch(87.3% .007 280);
|
|
2526
|
+
--cirth-switch-background-color: oklch(65.7% .025 280);
|
|
2527
|
+
--cirth-progress-border-color: oklch(70% .021 280);
|
|
2528
|
+
--cirth-meter-optimum-color: oklch(74.3% .163 153);
|
|
2529
|
+
--cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
|
|
2530
|
+
--cirth-meter-even-less-good-color: oklch(83% .08 22);
|
|
2489
2531
|
}
|
|
2490
2532
|
}
|