@shohojdhara/atomix 0.2.2 → 0.2.3
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/dist/atomix.css +292 -529
- package/dist/atomix.min.css +5 -5
- package/dist/index.d.ts +623 -121
- package/dist/index.esm.js +11475 -6047
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4698 -2755
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/themes/boomdevs.css +291 -528
- package/dist/themes/boomdevs.min.css +6 -6
- package/dist/themes/esrar.css +292 -529
- package/dist/themes/esrar.min.css +6 -6
- package/dist/themes/mashroom.css +286 -526
- package/dist/themes/mashroom.min.css +6 -6
- package/dist/themes/shaj-default.css +286 -526
- package/dist/themes/shaj-default.min.css +6 -6
- package/package.json +66 -15
- package/src/components/Accordion/Accordion.stories.tsx +137 -0
- package/src/components/Accordion/Accordion.tsx +33 -3
- package/src/components/AtomixGlass/AtomixGlass.stories.tsx +3011 -0
- package/src/components/AtomixGlass/AtomixGlass.test.tsx +199 -0
- package/src/components/AtomixGlass/AtomixGlass.tsx +1281 -0
- package/src/components/AtomixGlass/AtomixGlassComprehensivePreview.stories.tsx +1369 -0
- package/src/components/AtomixGlass/README.md +134 -0
- package/src/components/AtomixGlass/index.ts +10 -0
- package/src/components/AtomixGlass/shader-utils.ts +140 -0
- package/src/components/AtomixGlass/utils.ts +8 -0
- package/src/components/Badge/Badge.stories.tsx +169 -0
- package/src/components/Badge/Badge.tsx +27 -2
- package/src/components/Button/Button.stories.tsx +345 -0
- package/src/components/Button/Button.tsx +35 -3
- package/src/components/Button/README.md +216 -0
- package/src/components/Callout/Callout.stories.tsx +813 -78
- package/src/components/Callout/Callout.test.tsx +368 -0
- package/src/components/Callout/Callout.tsx +26 -7
- package/src/components/Callout/README.md +409 -0
- package/src/components/Card/Card.stories.tsx +140 -0
- package/src/components/Card/Card.tsx +19 -3
- package/src/components/DatePicker/DatePicker copy.tsx +551 -0
- package/src/components/DatePicker/DatePicker.stories.tsx +188 -0
- package/src/components/DatePicker/DatePicker.tsx +379 -332
- package/src/components/DatePicker/readme.md +110 -1
- package/src/components/DatePicker/types.ts +8 -0
- package/src/components/Dropdown/Dropdown.stories.tsx +145 -0
- package/src/components/Dropdown/Dropdown.tsx +34 -5
- package/src/components/Form/Checkbox.stories.tsx +101 -0
- package/src/components/Form/Checkbox.tsx +26 -2
- package/src/components/Form/Input.stories.tsx +124 -0
- package/src/components/Form/Input.tsx +36 -7
- package/src/components/Form/Radio.stories.tsx +139 -0
- package/src/components/Form/Radio.tsx +26 -2
- package/src/components/Form/Select.stories.tsx +110 -0
- package/src/components/Form/Select.tsx +26 -2
- package/src/components/Form/Textarea.stories.tsx +104 -0
- package/src/components/Form/Textarea.tsx +36 -7
- package/src/components/Hero/Hero.stories.tsx +54 -1
- package/src/components/Hero/Hero.tsx +70 -11
- package/src/components/Modal/Modal.stories.tsx +235 -0
- package/src/components/Modal/Modal.tsx +64 -35
- package/src/components/Pagination/Pagination.stories.tsx +101 -0
- package/src/components/Pagination/Pagination.tsx +25 -1
- package/src/components/Popover/Popover.stories.tsx +94 -0
- package/src/components/Popover/Popover.tsx +30 -4
- package/src/components/Rating/Rating.stories.tsx +112 -0
- package/src/components/Rating/Rating.tsx +25 -1
- package/src/components/Steps/Steps.stories.tsx +119 -0
- package/src/components/Steps/Steps.tsx +32 -1
- package/src/components/Tab/Tab.stories.tsx +88 -0
- package/src/components/Tab/Tab.tsx +32 -1
- package/src/components/Toggle/Toggle.stories.tsx +92 -0
- package/src/components/Toggle/Toggle.tsx +32 -1
- package/src/components/Tooltip/Tooltip.stories.tsx +131 -0
- package/src/components/Tooltip/Tooltip.tsx +43 -7
- package/src/components/VideoPlayer/VideoPlayer.stories.tsx +1002 -196
- package/src/components/VideoPlayer/VideoPlayer.tsx +161 -4
- package/src/components/index.ts +1 -0
- package/src/lib/composables/index.ts +4 -0
- package/src/lib/composables/useAtomixGlass.ts +71 -0
- package/src/lib/composables/useButton.ts +3 -1
- package/src/lib/composables/useCallout.ts +4 -1
- package/src/lib/composables/useGlassContainer.ts +168 -0
- package/src/lib/constants/components.ts +88 -0
- package/src/lib/types/components.ts +352 -0
- package/src/lib/utils/displacement-generator.ts +86 -0
- package/src/styles/01-settings/_settings.background.scss +8 -7
- package/src/styles/01-settings/_settings.callout.scss +7 -7
- package/src/styles/02-tools/_tools.animations.scss +19 -0
- package/src/styles/02-tools/_tools.background.scss +19 -17
- package/src/styles/02-tools/_tools.glass.scss +1 -0
- package/src/styles/03-generic/_generic.root.scss +3 -2
- package/src/styles/04-elements/_elements.body.scss +0 -18
- package/src/styles/06-components/_components.accordion.scss +16 -0
- package/src/styles/06-components/_components.atomix-glass.scss +0 -0
- package/src/styles/06-components/_components.badge.scss +34 -0
- package/src/styles/06-components/_components.button.scss +10 -0
- package/src/styles/06-components/_components.callout.scss +41 -2
- package/src/styles/06-components/_components.card.scss +17 -0
- package/src/styles/06-components/_components.chart.scss +1 -1
- package/src/styles/06-components/_components.datepicker.scss +18 -0
- package/src/styles/06-components/_components.dropdown.scss +7 -1
- package/src/styles/06-components/_components.hero.scss +1 -2
- package/src/styles/06-components/_components.input.scss +31 -1
- package/src/styles/06-components/_components.video-player.scss +48 -26
- package/src/styles/06-components/_index.scss +1 -0
- package/src/styles/99-utilities/_utilities.glass-fixes.scss +48 -0
- package/dist/themes/yabai.css +0 -15207
- package/dist/themes/yabai.min.css +0 -189
package/dist/themes/boomdevs.css
CHANGED
|
@@ -384,6 +384,23 @@
|
|
|
384
384
|
background-position: 0 50%;
|
|
385
385
|
}
|
|
386
386
|
}
|
|
387
|
+
@keyframes backgroundMoving {
|
|
388
|
+
0% {
|
|
389
|
+
background-position: 0 0%;
|
|
390
|
+
}
|
|
391
|
+
250% {
|
|
392
|
+
background-position: 100% 100%;
|
|
393
|
+
}
|
|
394
|
+
50% {
|
|
395
|
+
background-position: 100% 0%;
|
|
396
|
+
}
|
|
397
|
+
75% {
|
|
398
|
+
background-position: 0% 100%;
|
|
399
|
+
}
|
|
400
|
+
100% {
|
|
401
|
+
background-position: 100% 100%;
|
|
402
|
+
}
|
|
403
|
+
}
|
|
387
404
|
@keyframes component-spin {
|
|
388
405
|
0% {
|
|
389
406
|
transform: rotate(0deg);
|
|
@@ -967,25 +984,10 @@ body {
|
|
|
967
984
|
font-weight: 400;
|
|
968
985
|
font-size: 1rem;
|
|
969
986
|
line-height: 1.2;
|
|
970
|
-
background: url("https://plus.unsplash.com/premium_photo-1685082778205-8665f65e8c2c?q=80&w=3864&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
|
|
971
|
-
background-size: cover;
|
|
972
|
-
background-repeat: no-repeat;
|
|
973
|
-
background-attachment: fixed;
|
|
974
987
|
}
|
|
975
988
|
body.is-blocked, body.is-modal-open {
|
|
976
989
|
overflow: hidden;
|
|
977
990
|
}
|
|
978
|
-
body::after {
|
|
979
|
-
content: "";
|
|
980
|
-
position: fixed;
|
|
981
|
-
top: 0;
|
|
982
|
-
left: 0;
|
|
983
|
-
width: 100%;
|
|
984
|
-
height: 100%;
|
|
985
|
-
opacity: 0.7;
|
|
986
|
-
z-index: -1;
|
|
987
|
-
background: var(--atomix-gradient);
|
|
988
|
-
}
|
|
989
991
|
h1,
|
|
990
992
|
.h1 {
|
|
991
993
|
font-size: 2.5rem;
|
|
@@ -1881,10 +1883,7 @@ a, a:hover {
|
|
|
1881
1883
|
transition-duration: 0.2s;
|
|
1882
1884
|
transition-timing-function: ease-in-out;
|
|
1883
1885
|
transition-delay: 0s;
|
|
1884
|
-
background
|
|
1885
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
1886
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
1887
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-accordion-header-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-accordion-header-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
1886
|
+
background-color: var(--atomix-accordion-header-bg);
|
|
1888
1887
|
}
|
|
1889
1888
|
.c-accordion__header--icon-left {
|
|
1890
1889
|
flex-direction: row-reverse;
|
|
@@ -1919,10 +1918,7 @@ a, a:hover {
|
|
|
1919
1918
|
color: var(--atomix-accordion-body-color);
|
|
1920
1919
|
padding: var(--atomix-accordion-body-padding-y) var(--atomix-accordion-body-padding-x);
|
|
1921
1920
|
border-radius: 0 0 var(--atomix-accordion-border-radius) var(--atomix-accordion-border-radius);
|
|
1922
|
-
background
|
|
1923
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
1924
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
1925
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-accordion-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-accordion-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-accordion-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
1921
|
+
background-color: var(--atomix-accordion-body-bg);
|
|
1926
1922
|
}
|
|
1927
1923
|
.c-accordion:focus, .c-accordion.is-focused {
|
|
1928
1924
|
--atomix-accordion-border-color: var(--atomix-focus-border-color);
|
|
@@ -1939,6 +1935,15 @@ a, a:hover {
|
|
|
1939
1935
|
--atomix-accordion-body-color: var(--atomix-accordion-disable-color);
|
|
1940
1936
|
--atomix-accordion-icon-color: var(--atomix-accordion-disable-color);
|
|
1941
1937
|
}
|
|
1938
|
+
.c-accordion--glass {
|
|
1939
|
+
border-color: transparent;
|
|
1940
|
+
}
|
|
1941
|
+
.c-accordion--glass .c-accordion__header {
|
|
1942
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
|
|
1943
|
+
}
|
|
1944
|
+
.c-accordion--glass .c-accordion__body {
|
|
1945
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
|
|
1946
|
+
}
|
|
1942
1947
|
.c-avatar {
|
|
1943
1948
|
--atomix-avatar-fit: cover;
|
|
1944
1949
|
--atomix-avatar-size: 2.5rem;
|
|
@@ -1960,10 +1965,7 @@ a, a:hover {
|
|
|
1960
1965
|
width: var(--atomix-avatar-size);
|
|
1961
1966
|
height: var(--atomix-avatar-size);
|
|
1962
1967
|
border-radius: var(--atomix-avatar-border-radius);
|
|
1963
|
-
background
|
|
1964
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
1965
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
1966
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-avatar-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-avatar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-avatar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
1968
|
+
background-color: var(--atomix-avatar-bg);
|
|
1967
1969
|
color: var(--atomix-avatar-color);
|
|
1968
1970
|
border: var(--atomix-avatar-border-width) solid var(--atomix-avatar-border-color);
|
|
1969
1971
|
overflow: hidden;
|
|
@@ -2065,10 +2067,7 @@ a, a:hover {
|
|
|
2065
2067
|
color: var(--atomix-avatar-group-more-color);
|
|
2066
2068
|
font-size: var(--atomix-avatar-group-more-font-size);
|
|
2067
2069
|
font-weight: var(--atomix-avatar-group-more-font-weight);
|
|
2068
|
-
background
|
|
2069
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2070
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2071
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-avatar-group-more-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-avatar-group-more-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-avatar-group-more-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
2070
|
+
background-color: var(--atomix-avatar-group-more-bg);
|
|
2072
2071
|
border: var(--atomix-avatar-group-more-border-width) solid var(--atomix-avatar-group-more-border-color);
|
|
2073
2072
|
width: var(--atomix-avatar-size);
|
|
2074
2073
|
height: var(--atomix-avatar-size);
|
|
@@ -2141,10 +2140,7 @@ a, a:hover {
|
|
|
2141
2140
|
line-height: 1;
|
|
2142
2141
|
padding: var(--atomix-tag-padding-y) var(--atomix-tag-padding-x);
|
|
2143
2142
|
border-radius: var(--atomix-tag-border-radius);
|
|
2144
|
-
background
|
|
2145
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2146
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2147
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
2143
|
+
background-color: var(--atomix-tag-bg-color);
|
|
2148
2144
|
-webkit-user-select: none;
|
|
2149
2145
|
-moz-user-select: none;
|
|
2150
2146
|
user-select: none;
|
|
@@ -2160,6 +2156,10 @@ a, a:hover {
|
|
|
2160
2156
|
.c-badge--lg {
|
|
2161
2157
|
--atomix-tag-padding-y: 0.5rem;
|
|
2162
2158
|
}
|
|
2159
|
+
.c-badge--glass {
|
|
2160
|
+
background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 80%, transparent);
|
|
2161
|
+
border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 20%, transparent);
|
|
2162
|
+
}
|
|
2163
2163
|
.c-badge--primary {
|
|
2164
2164
|
--atomix-tag-bg-color: var(--atomix-brand-bg-subtle);
|
|
2165
2165
|
--atomix-tag-color: var(--atomix-brand-text-emphasis);
|
|
@@ -2187,10 +2187,16 @@ a, a:hover {
|
|
|
2187
2187
|
.c-badge--light {
|
|
2188
2188
|
--atomix-tag-bg-color: var(--atomix-light);
|
|
2189
2189
|
--atomix-tag-color: var(--atomix-dark);
|
|
2190
|
+
border: 1px solid var(--atomix-light);
|
|
2190
2191
|
}
|
|
2191
2192
|
.c-badge--dark {
|
|
2192
2193
|
--atomix-tag-bg-color: var(--atomix-dark);
|
|
2193
2194
|
--atomix-tag-color: var(--atomix-light);
|
|
2195
|
+
border: 1px solid var(--atomix-dark);
|
|
2196
|
+
}
|
|
2197
|
+
.c-badge-glass {
|
|
2198
|
+
box-shadow: inset 1px 2px 3px rgba(255, 255, 255, 0.1), inset 0 -2px 2px rgba(0, 0, 0, 0.3);
|
|
2199
|
+
border-radius: 999px;
|
|
2194
2200
|
}
|
|
2195
2201
|
.c-breadcrumb {
|
|
2196
2202
|
--atomix-breadcrumb-font-size: 0.875rem;
|
|
@@ -2212,10 +2218,7 @@ a, a:hover {
|
|
|
2212
2218
|
list-style: none;
|
|
2213
2219
|
padding-left: 0px;
|
|
2214
2220
|
margin-bottom: var(--atomix-breadcrumb-margin-bottom);
|
|
2215
|
-
background
|
|
2216
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2217
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2218
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-breadcrumb-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-breadcrumb-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-breadcrumb-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
2221
|
+
background-color: var(--atomix-breadcrumb-bg);
|
|
2219
2222
|
}
|
|
2220
2223
|
.c-breadcrumb__item {
|
|
2221
2224
|
display: flex;
|
|
@@ -2310,10 +2313,7 @@ a, a:hover {
|
|
|
2310
2313
|
text-align: center;
|
|
2311
2314
|
white-space: nowrap;
|
|
2312
2315
|
vertical-align: middle;
|
|
2313
|
-
background
|
|
2314
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2315
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2316
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-btn-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-btn-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-btn-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
2316
|
+
background-color: var(--atomix-btn-bg);
|
|
2317
2317
|
cursor: pointer;
|
|
2318
2318
|
-webkit-user-select: none;
|
|
2319
2319
|
-moz-user-select: none;
|
|
@@ -2327,10 +2327,7 @@ a, a:hover {
|
|
|
2327
2327
|
}
|
|
2328
2328
|
.c-btn:hover {
|
|
2329
2329
|
color: var(--atomix-btn-hover-color);
|
|
2330
|
-
background
|
|
2331
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2332
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2333
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-btn-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-btn-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
2330
|
+
background-color: var(--atomix-btn-hover-bg);
|
|
2334
2331
|
border-color: var(--atomix-btn-hover-border-color);
|
|
2335
2332
|
}
|
|
2336
2333
|
.c-btn--primary {
|
|
@@ -2594,13 +2591,16 @@ a, a:hover {
|
|
|
2594
2591
|
.c-btn:disabled, .c-btn--disabled, fieldset:disabled .c-btn {
|
|
2595
2592
|
color: var(--atomix-btn-disabled-color);
|
|
2596
2593
|
pointer-events: none;
|
|
2597
|
-
background
|
|
2598
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2599
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2600
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-btn-disabled-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-btn-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-btn-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
2594
|
+
background-color: var(--atomix-btn-disabled-bg);
|
|
2601
2595
|
border-color: var(--atomix-btn-disabled-border-color);
|
|
2602
2596
|
opacity: var(--atomix-btn-disabled-opacity);
|
|
2603
2597
|
}
|
|
2598
|
+
.c-btn--glass {
|
|
2599
|
+
background-color: color-mix(in srgb, var(--atomix-btn-bg) 50%, transparent);
|
|
2600
|
+
}
|
|
2601
|
+
.c-btn--glass:hover {
|
|
2602
|
+
background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 50%, transparent);
|
|
2603
|
+
}
|
|
2604
2604
|
.c-datepicker {
|
|
2605
2605
|
--atomix-datepicker-width: 19rem;
|
|
2606
2606
|
--atomix-datepicker-padding-x: 0.5rem;
|
|
@@ -2679,10 +2679,7 @@ a, a:hover {
|
|
|
2679
2679
|
z-index: 5;
|
|
2680
2680
|
width: var(--atomix-datepicker-width);
|
|
2681
2681
|
padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
|
|
2682
|
-
background
|
|
2683
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2684
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2685
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-datepicker-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-datepicker-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-datepicker-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
2682
|
+
background-color: var(--atomix-datepicker-bg);
|
|
2686
2683
|
border-radius: var(--atomix-datepicker-border-radius);
|
|
2687
2684
|
box-shadow: var(--atomix-datepicker-box-shadow);
|
|
2688
2685
|
margin-top: 0.25rem;
|
|
@@ -2726,6 +2723,24 @@ a, a:hover {
|
|
|
2726
2723
|
.c-datepicker__calendar--right-end {
|
|
2727
2724
|
bottom: 0;
|
|
2728
2725
|
}
|
|
2726
|
+
.c-datepicker__calendar--glass {
|
|
2727
|
+
z-index: auto;
|
|
2728
|
+
z-index: initial;
|
|
2729
|
+
box-shadow: none;
|
|
2730
|
+
border: none;
|
|
2731
|
+
border-radius: 0;
|
|
2732
|
+
padding: 0;
|
|
2733
|
+
background: transparent;
|
|
2734
|
+
}
|
|
2735
|
+
.c-datepicker__glass-content {
|
|
2736
|
+
z-index: auto;
|
|
2737
|
+
z-index: initial;
|
|
2738
|
+
box-shadow: none;
|
|
2739
|
+
border: none;
|
|
2740
|
+
border-radius: var(--atomix-datepicker-border-radius);
|
|
2741
|
+
padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
|
|
2742
|
+
background: color-mix(in srgb, var(--atomix-datepicker-bg) 50%, transparent 0%);
|
|
2743
|
+
}
|
|
2729
2744
|
.c-datepicker--inline {
|
|
2730
2745
|
--atomix-datepicker-width: calc(
|
|
2731
2746
|
var(--atomix-datepicker-width) + var(--atomix-datepicker-week-width)
|
|
@@ -3047,10 +3062,7 @@ a, a:hover {
|
|
|
3047
3062
|
transition-duration: 0.2s;
|
|
3048
3063
|
transition-timing-function: ease-in-out;
|
|
3049
3064
|
transition-delay: 0s;
|
|
3050
|
-
background
|
|
3051
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
3052
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
3053
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-card-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-card-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-card-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
3065
|
+
background-color: var(--atomix-card-bg);
|
|
3054
3066
|
}
|
|
3055
3067
|
.c-card__header {
|
|
3056
3068
|
margin-bottom: var(--atomix-card-header-spacer-y);
|
|
@@ -3128,6 +3140,21 @@ a, a:hover {
|
|
|
3128
3140
|
padding: var(--atomix-card-row-spacer-y) var(--atomix-card-row-spacer-x);
|
|
3129
3141
|
padding-top: 0;
|
|
3130
3142
|
}
|
|
3143
|
+
.c-card--glass {
|
|
3144
|
+
background-color: transparent;
|
|
3145
|
+
padding: 0;
|
|
3146
|
+
border: none;
|
|
3147
|
+
display: block;
|
|
3148
|
+
border-radius: 0;
|
|
3149
|
+
}
|
|
3150
|
+
.c-card--glass .c-card__glass-content {
|
|
3151
|
+
padding: var(--atomix-card-spacer-y) var(--atomix-card-spacer-x);
|
|
3152
|
+
max-width: var(--atomix-card-width);
|
|
3153
|
+
border-radius: var(--atomix-card-border-radius);
|
|
3154
|
+
width: 100%;
|
|
3155
|
+
background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
|
|
3156
|
+
background-blend-mode: overlay;
|
|
3157
|
+
}
|
|
3131
3158
|
.is-elevated .c-card {
|
|
3132
3159
|
box-shadow: var(--atomix-box-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.175));
|
|
3133
3160
|
z-index: 1;
|
|
@@ -3153,19 +3180,12 @@ a, a:hover {
|
|
|
3153
3180
|
min-height: var(--atomix-chart-min-height);
|
|
3154
3181
|
width: 100%;
|
|
3155
3182
|
max-width: 100%;
|
|
3156
|
-
background
|
|
3157
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
3158
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
3183
|
+
background-color: var(--atomix-chart-bg);
|
|
3159
3184
|
transition-property: all;
|
|
3160
3185
|
transition-duration: 0.2s;
|
|
3161
3186
|
transition-timing-function: ease-in-out;
|
|
3162
3187
|
transition-delay: 0s;
|
|
3163
3188
|
}
|
|
3164
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
3165
|
-
.c-chart {
|
|
3166
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-chart-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-chart-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-chart-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
3167
|
-
}
|
|
3168
|
-
}
|
|
3169
3189
|
.c-chart::after {
|
|
3170
3190
|
content: "";
|
|
3171
3191
|
position: absolute;
|
|
@@ -4868,7 +4888,7 @@ a, a:hover {
|
|
|
4868
4888
|
animation: none;
|
|
4869
4889
|
}
|
|
4870
4890
|
}
|
|
4871
|
-
.c-chart:focus-
|
|
4891
|
+
.c-chart:focus-within .c-chart__data-point:focus {
|
|
4872
4892
|
outline: 2px solid var(--atomix-primary-6);
|
|
4873
4893
|
outline-offset: 2px;
|
|
4874
4894
|
z-index: 10;
|
|
@@ -4970,10 +4990,7 @@ a, a:hover {
|
|
|
4970
4990
|
-webkit-appearance: none;
|
|
4971
4991
|
-moz-appearance: none;
|
|
4972
4992
|
appearance: none;
|
|
4973
|
-
background
|
|
4974
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
4975
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
4976
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-checkbox-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-checkbox-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-checkbox-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
4993
|
+
background-color: var(--atomix-checkbox-bg);
|
|
4977
4994
|
width: var(--atomix-checkbox-width);
|
|
4978
4995
|
height: var(--atomix-checkbox-height);
|
|
4979
4996
|
color: currentColor;
|
|
@@ -5062,10 +5079,7 @@ a, a:hover {
|
|
|
5062
5079
|
color: var(--atomix-body-color);
|
|
5063
5080
|
}
|
|
5064
5081
|
.c-color-mode-toggle:hover {
|
|
5065
|
-
background
|
|
5066
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5067
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5068
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5082
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
5069
5083
|
}
|
|
5070
5084
|
.c-color-mode-toggle:focus {
|
|
5071
5085
|
outline: none;
|
|
@@ -5076,10 +5090,7 @@ a, a:hover {
|
|
|
5076
5090
|
height: 1.5rem;
|
|
5077
5091
|
}
|
|
5078
5092
|
[data-atomix-theme=dark] .c-color-mode-toggle:hover {
|
|
5079
|
-
background
|
|
5080
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5081
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5082
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(255, 255, 255, 0.1) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(255, 255, 255, 0.1) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(255, 255, 255, 0.1) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5093
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
5083
5094
|
}
|
|
5084
5095
|
.c-countdown {
|
|
5085
5096
|
--atomix-countdown-color: var(--atomix-body-color);
|
|
@@ -5117,10 +5128,7 @@ a, a:hover {
|
|
|
5117
5128
|
align-items: center;
|
|
5118
5129
|
padding: var(--atomix-countdown-item-padding-y) var(--atomix-countdown-item-padding-x);
|
|
5119
5130
|
border-radius: var(--atomix-countdown-focused-border-radius);
|
|
5120
|
-
background
|
|
5121
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5122
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5123
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-countdown-focused-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-countdown-focused-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-countdown-focused-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5131
|
+
background-color: var(--atomix-countdown-focused-bg);
|
|
5124
5132
|
}
|
|
5125
5133
|
.c-countdown--focused .c-countdown__time-label {
|
|
5126
5134
|
font-size: var(--atomix-countdown-focused-label-font-size);
|
|
@@ -5147,17 +5155,11 @@ a, a:hover {
|
|
|
5147
5155
|
width: 100%;
|
|
5148
5156
|
margin-bottom: 0;
|
|
5149
5157
|
color: var(--atomix-data-table-color);
|
|
5150
|
-
background
|
|
5151
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5152
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5153
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5158
|
+
background-color: var(--atomix-data-table-bg);
|
|
5154
5159
|
border-collapse: collapse;
|
|
5155
5160
|
}
|
|
5156
5161
|
.c-data-table__header {
|
|
5157
|
-
background
|
|
5158
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5159
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5160
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-header-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-header-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5162
|
+
background-color: var(--atomix-data-table-header-bg);
|
|
5161
5163
|
}
|
|
5162
5164
|
.c-data-table__header-cell {
|
|
5163
5165
|
padding: 0.75rem 1rem;
|
|
@@ -5174,10 +5176,7 @@ a, a:hover {
|
|
|
5174
5176
|
user-select: none;
|
|
5175
5177
|
}
|
|
5176
5178
|
.c-data-table__header-cell--sortable:hover {
|
|
5177
|
-
background
|
|
5178
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5179
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5180
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5179
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
5181
5180
|
}
|
|
5182
5181
|
.c-data-table__header-content {
|
|
5183
5182
|
display: flex;
|
|
@@ -5198,16 +5197,10 @@ a, a:hover {
|
|
|
5198
5197
|
vertical-align: middle;
|
|
5199
5198
|
}
|
|
5200
5199
|
.c-data-table__row {
|
|
5201
|
-
background
|
|
5202
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5203
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5204
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5200
|
+
background-color: var(--atomix-data-table-bg);
|
|
5205
5201
|
}
|
|
5206
5202
|
.c-data-table__row:hover {
|
|
5207
|
-
background
|
|
5208
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5209
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5210
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5203
|
+
background-color: var(--atomix-data-table-hover-bg);
|
|
5211
5204
|
}
|
|
5212
5205
|
.c-data-table__row[role=button] {
|
|
5213
5206
|
cursor: pointer;
|
|
@@ -5225,10 +5218,7 @@ a, a:hover {
|
|
|
5225
5218
|
color: var(--atomix-gray-500);
|
|
5226
5219
|
}
|
|
5227
5220
|
.c-data-table--striped tbody tr:nth-of-type(odd) {
|
|
5228
|
-
background
|
|
5229
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5230
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5231
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-striped-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-striped-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-striped-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5221
|
+
background-color: var(--atomix-data-table-striped-bg);
|
|
5232
5222
|
}
|
|
5233
5223
|
.c-data-table--bordered {
|
|
5234
5224
|
border: var(--atomix-border-width) var(--atomix-border-style) var(--atomix-data-table-border-color);
|
|
@@ -5338,7 +5328,6 @@ a, a:hover {
|
|
|
5338
5328
|
.c-dropdown__menu-wrapper {
|
|
5339
5329
|
position: absolute;
|
|
5340
5330
|
left: 0;
|
|
5341
|
-
z-index: 99;
|
|
5342
5331
|
display: flex;
|
|
5343
5332
|
opacity: 0;
|
|
5344
5333
|
visibility: hidden;
|
|
@@ -5420,14 +5409,16 @@ a, a:hover {
|
|
|
5420
5409
|
padding: var(--atomix-dropdown-padding-y) var(--atomix-dropdown-padding-x);
|
|
5421
5410
|
list-style: none;
|
|
5422
5411
|
margin-bottom: 0rem;
|
|
5423
|
-
|
|
5424
|
-
|
|
5425
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5426
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-dropdown-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-dropdown-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5412
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
5413
|
+
background-color: var(--atomix-dropdown-bg);
|
|
5427
5414
|
border-radius: var(--atomix-dropdown-border-radius);
|
|
5428
5415
|
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
5429
5416
|
overflow: hidden;
|
|
5430
5417
|
}
|
|
5418
|
+
.c-dropdown__menu--glass {
|
|
5419
|
+
background-color: color-mix(in srgb, var(--atomix-dropdown-bg) 50%, transparent);
|
|
5420
|
+
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
5421
|
+
}
|
|
5431
5422
|
.c-dropdown__menu-item {
|
|
5432
5423
|
display: block;
|
|
5433
5424
|
width: 100%;
|
|
@@ -5444,19 +5435,13 @@ a, a:hover {
|
|
|
5444
5435
|
}
|
|
5445
5436
|
.c-dropdown__menu-item:hover, .c-dropdown__menu-item:focus {
|
|
5446
5437
|
color: var(--atomix-dropdown-link-hover-color);
|
|
5447
|
-
background
|
|
5448
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5449
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5450
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5438
|
+
background-color: var(--atomix-dropdown-link-hover-bg);
|
|
5451
5439
|
outline: none;
|
|
5452
5440
|
padding-left: calc(var(--atomix-dropdown-item-padding-x) + 3px);
|
|
5453
5441
|
}
|
|
5454
5442
|
.c-dropdown__menu-item.is-active {
|
|
5455
5443
|
color: var(--atomix-dropdown-active-color);
|
|
5456
|
-
background
|
|
5457
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5458
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5459
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-dropdown-active-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-dropdown-active-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-dropdown-active-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5444
|
+
background-color: var(--atomix-dropdown-active-bg);
|
|
5460
5445
|
}
|
|
5461
5446
|
.c-dropdown__menu-item.is-disabled {
|
|
5462
5447
|
color: var(--atomix-dropdown-color);
|
|
@@ -5553,10 +5538,7 @@ a, a:hover {
|
|
|
5553
5538
|
.c-edge-panel__backdrop {
|
|
5554
5539
|
position: absolute;
|
|
5555
5540
|
inset: 0;
|
|
5556
|
-
background
|
|
5557
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5558
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5559
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5541
|
+
background-color: var(--atomix-edge-panel-backdrop-bg);
|
|
5560
5542
|
-webkit-backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
|
|
5561
5543
|
backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
|
|
5562
5544
|
opacity: 0;
|
|
@@ -5575,10 +5557,7 @@ a, a:hover {
|
|
|
5575
5557
|
color: var(--atomix-edge-panel-color);
|
|
5576
5558
|
width: var(--atomix-edge-panel-width);
|
|
5577
5559
|
height: 100%;
|
|
5578
|
-
background
|
|
5579
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5580
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5581
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-edge-panel-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-edge-panel-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5560
|
+
background-color: var(--atomix-edge-panel-bg);
|
|
5582
5561
|
box-shadow: var(--atomix-edge-panel-shadow);
|
|
5583
5562
|
z-index: 2;
|
|
5584
5563
|
overflow: hidden;
|
|
@@ -5613,10 +5592,7 @@ a, a:hover {
|
|
|
5613
5592
|
transition: background-color 0.2s ease;
|
|
5614
5593
|
}
|
|
5615
5594
|
.c-edge-panel__close:hover {
|
|
5616
|
-
background
|
|
5617
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5618
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5619
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5595
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
5620
5596
|
}
|
|
5621
5597
|
.c-edge-panel__close:focus-visible {
|
|
5622
5598
|
outline: 2px solid var(--atomix-primary);
|
|
@@ -5816,10 +5792,7 @@ a, a:hover {
|
|
|
5816
5792
|
--atomix-footer-newsletter-padding: 1.5rem;
|
|
5817
5793
|
--atomix-footer-bottom-padding-top: 1.5rem;
|
|
5818
5794
|
--atomix-footer-bottom-margin-top: 2rem;
|
|
5819
|
-
background
|
|
5820
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5821
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5822
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-footer-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-footer-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-footer-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5795
|
+
background-color: var(--atomix-footer-bg);
|
|
5823
5796
|
color: var(--atomix-footer-color);
|
|
5824
5797
|
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
5825
5798
|
padding: var(--atomix-footer-padding-y) 0;
|
|
@@ -6031,10 +6004,7 @@ a, a:hover {
|
|
|
6031
6004
|
justify-content: center;
|
|
6032
6005
|
width: 2.5rem;
|
|
6033
6006
|
height: 2.5rem;
|
|
6034
|
-
background
|
|
6035
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6036
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6037
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-surface-variant) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-surface-variant) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-surface-variant) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6007
|
+
background-color: var(--atomix-surface-variant);
|
|
6038
6008
|
color: var(--atomix-text);
|
|
6039
6009
|
border-radius: 50%;
|
|
6040
6010
|
text-decoration: none;
|
|
@@ -6051,10 +6021,7 @@ a, a:hover {
|
|
|
6051
6021
|
transition: transform 0.6s ease;
|
|
6052
6022
|
}
|
|
6053
6023
|
.c-footer__social-link:hover, .c-footer__social-link:focus {
|
|
6054
|
-
background
|
|
6055
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6056
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6057
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6024
|
+
background-color: var(--atomix-primary);
|
|
6058
6025
|
color: var(--atomix-primary-contrast);
|
|
6059
6026
|
transform: translateY(-3px) scale(1.05);
|
|
6060
6027
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
@@ -6122,10 +6089,7 @@ a, a:hover {
|
|
|
6122
6089
|
background: linear-gradient(135deg, #25d366, #66bb6a);
|
|
6123
6090
|
}
|
|
6124
6091
|
.c-footer__newsletter {
|
|
6125
|
-
background
|
|
6126
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6127
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6128
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8)) 10%, transparent), 4px 8px 32px color-mix(in srgb, linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8)) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8)) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6092
|
+
background-color: linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8));
|
|
6129
6093
|
padding: 1.5rem;
|
|
6130
6094
|
border-radius: 0.5rem;
|
|
6131
6095
|
border: 1px solid var(--atomix-border-subtle);
|
|
@@ -6181,10 +6145,7 @@ a, a:hover {
|
|
|
6181
6145
|
flex: 1 1;
|
|
6182
6146
|
padding: 0.75rem 1rem;
|
|
6183
6147
|
font-size: 0.875rem;
|
|
6184
|
-
background
|
|
6185
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6186
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6187
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-surface) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-surface) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-surface) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6148
|
+
background-color: var(--atomix-surface);
|
|
6188
6149
|
color: var(--atomix-text);
|
|
6189
6150
|
border: 1px solid var(--atomix-border);
|
|
6190
6151
|
border-radius: 0.375rem;
|
|
@@ -6213,10 +6174,7 @@ a, a:hover {
|
|
|
6213
6174
|
}
|
|
6214
6175
|
.c-footer__newsletter-button {
|
|
6215
6176
|
padding: 0.75rem 1.5rem;
|
|
6216
|
-
background
|
|
6217
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6218
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6219
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6177
|
+
background-color: var(--atomix-primary);
|
|
6220
6178
|
color: var(--atomix-primary-contrast);
|
|
6221
6179
|
border: none;
|
|
6222
6180
|
border-radius: 0.375rem;
|
|
@@ -6236,10 +6194,7 @@ a, a:hover {
|
|
|
6236
6194
|
transition: transform 0.6s ease;
|
|
6237
6195
|
}
|
|
6238
6196
|
.c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
|
|
6239
|
-
background
|
|
6240
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6241
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6242
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary-hover) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6197
|
+
background-color: var(--atomix-primary-hover);
|
|
6243
6198
|
transform: translateY(-2px);
|
|
6244
6199
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
6245
6200
|
}
|
|
@@ -6284,10 +6239,7 @@ a, a:hover {
|
|
|
6284
6239
|
align-items: center;
|
|
6285
6240
|
gap: 0.5rem;
|
|
6286
6241
|
padding: 0.75rem 1.25rem;
|
|
6287
|
-
background
|
|
6288
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6289
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6290
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-surface-variant) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-surface-variant) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-surface-variant) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6242
|
+
background-color: var(--atomix-surface-variant);
|
|
6291
6243
|
border: 1px solid var(--atomix-border-subtle);
|
|
6292
6244
|
color: var(--atomix-text);
|
|
6293
6245
|
font-size: 0.875rem;
|
|
@@ -6308,10 +6260,7 @@ a, a:hover {
|
|
|
6308
6260
|
}
|
|
6309
6261
|
.c-footer__back-to-top:hover, .c-footer__back-to-top:focus {
|
|
6310
6262
|
color: var(--atomix-primary);
|
|
6311
|
-
background
|
|
6312
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6313
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6314
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6263
|
+
background-color: var(--atomix-primary);
|
|
6315
6264
|
border-color: var(--atomix-primary);
|
|
6316
6265
|
transform: translateY(-2px);
|
|
6317
6266
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
@@ -6856,10 +6805,7 @@ a, a:hover {
|
|
|
6856
6805
|
display: grid;
|
|
6857
6806
|
place-items: center;
|
|
6858
6807
|
padding: var(--atomix-hero-padding-y) var(--atomix-hero-padding-x);
|
|
6859
|
-
background
|
|
6860
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6861
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6862
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-hero-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-hero-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-hero-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6808
|
+
background-color: var(--atomix-hero-bg);
|
|
6863
6809
|
overflow: hidden;
|
|
6864
6810
|
}
|
|
6865
6811
|
.c-hero__bg {
|
|
@@ -6882,16 +6828,12 @@ a, a:hover {
|
|
|
6882
6828
|
.c-hero__overlay {
|
|
6883
6829
|
position: absolute;
|
|
6884
6830
|
inset: 0;
|
|
6885
|
-
background
|
|
6886
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6887
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6888
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-hero-overlay) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-hero-overlay) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-hero-overlay) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6831
|
+
background-color: var(--atomix-hero-overlay);
|
|
6889
6832
|
opacity: var(--atomix-hero-overlay-opacity);
|
|
6890
|
-
z-index:
|
|
6833
|
+
z-index: 0;
|
|
6891
6834
|
}
|
|
6892
6835
|
.c-hero__container {
|
|
6893
6836
|
position: relative;
|
|
6894
|
-
z-index: 2;
|
|
6895
6837
|
}
|
|
6896
6838
|
.c-hero__grid {
|
|
6897
6839
|
--atomix-gutter-x: var(--atomix-hero-grid-gutter);
|
|
@@ -7019,10 +6961,7 @@ a, a:hover {
|
|
|
7019
6961
|
border: var(--atomix-input-border-width) solid var(--atomix-input-border-color);
|
|
7020
6962
|
border-radius: var(--atomix-input-border-radius);
|
|
7021
6963
|
outline: none;
|
|
7022
|
-
background
|
|
7023
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7024
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7025
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-input-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-input-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6964
|
+
background-color: var(--atomix-input-bg);
|
|
7026
6965
|
transition-property: all;
|
|
7027
6966
|
transition-duration: 0.2s;
|
|
7028
6967
|
transition-timing-function: ease-in-out;
|
|
@@ -7094,6 +7033,21 @@ a, a:hover {
|
|
|
7094
7033
|
--atomix-input-bg: var(--atomix-secondary-bg-subtle);
|
|
7095
7034
|
pointer-events: none;
|
|
7096
7035
|
}
|
|
7036
|
+
.c-input--glass {
|
|
7037
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
7038
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
7039
|
+
}
|
|
7040
|
+
.c-input--glass:focus, .c-input--glass:hover {
|
|
7041
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
7042
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 0 0 2px rgba(var(--atomix-primary-rgb, 122, 255, 215), 0.3);
|
|
7043
|
+
}
|
|
7044
|
+
.c-input--glass.c-input--textarea {
|
|
7045
|
+
resize: vertical;
|
|
7046
|
+
}
|
|
7047
|
+
.c-input--glass:disabled, .c-input--glass.is-disabled {
|
|
7048
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
7049
|
+
opacity: 0.6;
|
|
7050
|
+
}
|
|
7097
7051
|
.c-list-group {
|
|
7098
7052
|
--atomix-list-group-width: 100%;
|
|
7099
7053
|
--atomix-list-group-bg: ;
|
|
@@ -7112,20 +7066,14 @@ a, a:hover {
|
|
|
7112
7066
|
list-style: none;
|
|
7113
7067
|
width: 100%;
|
|
7114
7068
|
max-width: var(--atomix-list-group-width);
|
|
7115
|
-
background
|
|
7116
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7117
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7118
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-list-group-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-list-group-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-list-group-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7069
|
+
background-color: var(--atomix-list-group-bg);
|
|
7119
7070
|
}
|
|
7120
7071
|
.c-list-group__item {
|
|
7121
7072
|
padding: var(--atomix-list-group-item-padding-y) var(--atomix-list-group-item-padding-x);
|
|
7122
7073
|
font-size: var(--atomix-list-group-item-font-size);
|
|
7123
7074
|
color: var(--atomix-list-group-item-color);
|
|
7124
7075
|
border-bottom: var(--atomix-list-group-item-border-width) solid var(--atomix-list-group-item-border-color);
|
|
7125
|
-
background
|
|
7126
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7127
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7128
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-list-group-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-list-group-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-list-group-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7076
|
+
background-color: var(--atomix-list-group-item-bg);
|
|
7129
7077
|
}
|
|
7130
7078
|
.c-list-group__item--primary {
|
|
7131
7079
|
--atomix-list-group-item-bg: var(--atomix-brand-bg-subtle);
|
|
@@ -7190,10 +7138,7 @@ a, a:hover {
|
|
|
7190
7138
|
left: 0;
|
|
7191
7139
|
width: var(--atomix-list-item-dash-width);
|
|
7192
7140
|
height: var(--atomix-list-item-dash-height);
|
|
7193
|
-
background
|
|
7194
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7195
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7196
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-list-color) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-list-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-list-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7141
|
+
background-color: var(--atomix-list-color);
|
|
7197
7142
|
transform: translateY(-50%);
|
|
7198
7143
|
}
|
|
7199
7144
|
.c-list--number {
|
|
@@ -7233,10 +7178,7 @@ a, a:hover {
|
|
|
7233
7178
|
display: inline-block;
|
|
7234
7179
|
min-width: var(--atomix-menu-min-width);
|
|
7235
7180
|
padding: var(--atomix-menu-item-padding-y) var(--atomix-menu-item-padding-x);
|
|
7236
|
-
background
|
|
7237
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7238
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7239
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-menu-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-menu-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-menu-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7181
|
+
background-color: var(--atomix-menu-bg);
|
|
7240
7182
|
border-radius: var(--atomix-menu-border-radius);
|
|
7241
7183
|
box-shadow: var(--atomix-menu-box-shadow);
|
|
7242
7184
|
z-index: 5;
|
|
@@ -7282,10 +7224,7 @@ a, a:hover {
|
|
|
7282
7224
|
color: var(--atomix-menu-item-color);
|
|
7283
7225
|
font-size: var(--atomix-menu-item-font-size);
|
|
7284
7226
|
font-weight: var(--atomix-menu-item-font-weight);
|
|
7285
|
-
background
|
|
7286
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7287
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7288
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-menu-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-menu-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-menu-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7227
|
+
background-color: var(--atomix-menu-item-bg);
|
|
7289
7228
|
border-radius: var(--atomix-menu-border-radius);
|
|
7290
7229
|
cursor: pointer;
|
|
7291
7230
|
transition-property: all;
|
|
@@ -7295,16 +7234,10 @@ a, a:hover {
|
|
|
7295
7234
|
}
|
|
7296
7235
|
.c-menu__link:hover {
|
|
7297
7236
|
color: var(--atomix-menu-item-color);
|
|
7298
|
-
background
|
|
7299
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7300
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7301
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-menu-item-bg-hover) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-menu-item-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-menu-item-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7237
|
+
background-color: var(--atomix-menu-item-bg-hover);
|
|
7302
7238
|
}
|
|
7303
7239
|
.c-menu__link:focus, .c-menu__link:active, .c-menu__link.is-active {
|
|
7304
|
-
background
|
|
7305
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7306
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7307
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-menu-item-bg-active) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-menu-item-bg-active) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-menu-item-bg-active) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7240
|
+
background-color: var(--atomix-menu-item-bg-active);
|
|
7308
7241
|
}
|
|
7309
7242
|
.c-menu__icon {
|
|
7310
7243
|
font-size: var(--atomix-menu-item-icon-size);
|
|
@@ -7474,10 +7407,7 @@ a, a:hover {
|
|
|
7474
7407
|
padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
|
|
7475
7408
|
border-radius: var(--atomix-messages-border-radius);
|
|
7476
7409
|
border: var(--atomix-messages-border-width) solid var(--atomix-messages-border-color);
|
|
7477
|
-
background
|
|
7478
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7479
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7480
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7410
|
+
background-color: var(--atomix-messages-bg);
|
|
7481
7411
|
}
|
|
7482
7412
|
.c-messages__body {
|
|
7483
7413
|
max-height: var(--atomix-messages-body-height);
|
|
@@ -7527,10 +7457,7 @@ a, a:hover {
|
|
|
7527
7457
|
color: var(--atomix-messages-text-color);
|
|
7528
7458
|
font-size: var(--atomix-messages-text-font-size);
|
|
7529
7459
|
padding: var(--atomix-messages-text-padding-y) var(--atomix-messages-text-padding-x);
|
|
7530
|
-
background
|
|
7531
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7532
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7533
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-text-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-text-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-text-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7460
|
+
background-color: var(--atomix-messages-text-bg);
|
|
7534
7461
|
border-radius: 0.25rem var(--atomix-messages-text-border-radius) var(--atomix-messages-text-border-radius) 0.25rem;
|
|
7535
7462
|
}
|
|
7536
7463
|
.c-messages__file {
|
|
@@ -7538,10 +7465,7 @@ a, a:hover {
|
|
|
7538
7465
|
flex-wrap: wrap;
|
|
7539
7466
|
padding: var(--atomix-messages-file-padding-y) var(--atomix-messages-file-padding-x);
|
|
7540
7467
|
border-radius: 0.25rem var(--atomix-messages-file-border-radius) var(--atomix-messages-file-border-radius) 0.25rem;
|
|
7541
|
-
background
|
|
7542
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7543
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7544
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-file-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-file-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-file-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7468
|
+
background-color: var(--atomix-messages-file-bg);
|
|
7545
7469
|
}
|
|
7546
7470
|
.c-messages__file-icon {
|
|
7547
7471
|
display: grid !important;
|
|
@@ -7551,10 +7475,7 @@ a, a:hover {
|
|
|
7551
7475
|
height: var(--atomix-messages-file-icon-size);
|
|
7552
7476
|
color: var(--atomix-tertiary-text-emphasis);
|
|
7553
7477
|
margin-right: var(--atomix-messages-file-icon-margin-right);
|
|
7554
|
-
background
|
|
7555
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7556
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7557
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7478
|
+
background-color: var(--atomix-body-bg);
|
|
7558
7479
|
border-radius: 50rem;
|
|
7559
7480
|
}
|
|
7560
7481
|
.c-messages__file-name {
|
|
@@ -7610,10 +7531,7 @@ a, a:hover {
|
|
|
7610
7531
|
}
|
|
7611
7532
|
.c-messages__content--self .c-messages__file-icon {
|
|
7612
7533
|
color: var(--atomix-invert-text-emphasis);
|
|
7613
|
-
background
|
|
7614
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7615
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7616
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-file-icon-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-file-icon-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-file-icon-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7534
|
+
background-color: var(--atomix-messages-file-icon-bg);
|
|
7617
7535
|
}
|
|
7618
7536
|
.c-messages__content--self .c-messages__file-icon [data-atomix-color-mode=dark] {
|
|
7619
7537
|
--atomix-messages-file-icon-bg: #004ecf;
|
|
@@ -7657,10 +7575,7 @@ a, a:hover {
|
|
|
7657
7575
|
font-size: var(--atomix-messages-input-font-size);
|
|
7658
7576
|
border: var(--atomix-messages-input-border-width) solid var(--atomix-messages-input-border-color);
|
|
7659
7577
|
border-radius: var(--atomix-messages-input-border-radius);
|
|
7660
|
-
background
|
|
7661
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7662
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7663
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7578
|
+
background-color: var(--atomix-messages-bg);
|
|
7664
7579
|
resize: none;
|
|
7665
7580
|
}
|
|
7666
7581
|
.c-messages__input::-moz-placeholder {
|
|
@@ -7680,10 +7595,7 @@ a, a:hover {
|
|
|
7680
7595
|
place-items: center;
|
|
7681
7596
|
align-self: flex-end;
|
|
7682
7597
|
padding: 0.625rem;
|
|
7683
|
-
background
|
|
7684
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7685
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7686
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7598
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
7687
7599
|
color: var(--atomix-invert-text-emphasis);
|
|
7688
7600
|
border-radius: 50rem;
|
|
7689
7601
|
cursor: pointer;
|
|
@@ -7732,10 +7644,7 @@ a, a:hover {
|
|
|
7732
7644
|
.c-modal__backdrop {
|
|
7733
7645
|
position: absolute;
|
|
7734
7646
|
inset: 0;
|
|
7735
|
-
background
|
|
7736
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7737
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7738
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-modal-backdrop-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-modal-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-modal-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7647
|
+
background-color: var(--atomix-modal-backdrop-bg);
|
|
7739
7648
|
opacity: 0;
|
|
7740
7649
|
transition: 0.3s;
|
|
7741
7650
|
}
|
|
@@ -7760,10 +7669,7 @@ a, a:hover {
|
|
|
7760
7669
|
width: 100%;
|
|
7761
7670
|
max-height: 100%;
|
|
7762
7671
|
padding: var(--atomix-modal-inner-padding);
|
|
7763
|
-
background
|
|
7764
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7765
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7766
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-modal-content-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-modal-content-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7672
|
+
background-color: var(--atomix-modal-content-bg);
|
|
7767
7673
|
box-shadow: var(--atomix-modal-content-box-shadow);
|
|
7768
7674
|
border-radius: var(--atomix-modal-content-border-radius);
|
|
7769
7675
|
overflow: hidden;
|
|
@@ -7874,20 +7780,14 @@ a, a:hover {
|
|
|
7874
7780
|
color: var(--atomix-nav-link-color);
|
|
7875
7781
|
}
|
|
7876
7782
|
.c-nav__link:hover, .c-nav__link:active, .c-nav__link:focus, .c-nav__link:focus-visible {
|
|
7877
|
-
background
|
|
7878
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7879
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7880
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-nav-link-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-nav-link-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-nav-link-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7783
|
+
background-color: var(--atomix-nav-link-hover-bg);
|
|
7881
7784
|
}
|
|
7882
7785
|
.c-nav__link--disabled {
|
|
7883
7786
|
color: var(--atomix-disabled-text-emphasis);
|
|
7884
7787
|
pointer-events: none;
|
|
7885
7788
|
}
|
|
7886
7789
|
.c-nav__link:focus, .c-nav__link:active, .c-nav__link.is-active {
|
|
7887
|
-
background
|
|
7888
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7889
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7890
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7790
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
7891
7791
|
}
|
|
7892
7792
|
.c-nav__icon {
|
|
7893
7793
|
font-size: var(--atomix-nav-icon-size);
|
|
@@ -7941,24 +7841,14 @@ a, a:hover {
|
|
|
7941
7841
|
left: 50%;
|
|
7942
7842
|
transform: translateX(-50%);
|
|
7943
7843
|
z-index: 1000;
|
|
7944
|
-
background
|
|
7945
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7946
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7947
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7844
|
+
background-color: var(--atomix-body-bg);
|
|
7948
7845
|
border: 1px solid var(--atomix-border-color);
|
|
7949
7846
|
border-radius: 50rem;
|
|
7950
7847
|
box-shadow: var(--atomix-box-shadow-lg);
|
|
7951
7848
|
padding: 0.5rem 1rem;
|
|
7952
7849
|
-webkit-backdrop-filter: blur(10px);
|
|
7953
7850
|
backdrop-filter: blur(10px);
|
|
7954
|
-
|
|
7955
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7956
|
-
}
|
|
7957
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
7958
|
-
.c-nav--float-top-center, .c-nav--float-bottom-center {
|
|
7959
|
-
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 60%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 50%, transparent) 35%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 40%, transparent) 65%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 15%, transparent) 0%, transparent 70%);
|
|
7960
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7961
|
-
}
|
|
7851
|
+
background-color: rgba(var(--atomix-body-bg-rgb), 0.95);
|
|
7962
7852
|
}
|
|
7963
7853
|
.c-nav--float-top-center .c-nav__item + .c-nav--float-top-center .c-nav__item, .c-nav--float-top-center .c-nav__item + .c-nav--float-bottom-center .c-nav__item, .c-nav--float-bottom-center .c-nav__item + .c-nav--float-top-center .c-nav__item, .c-nav--float-bottom-center .c-nav__item + .c-nav--float-bottom-center .c-nav__item {
|
|
7964
7854
|
margin-left: 0.25rem;
|
|
@@ -7968,10 +7858,7 @@ a, a:hover {
|
|
|
7968
7858
|
border-radius: 0.75rem;
|
|
7969
7859
|
}
|
|
7970
7860
|
.c-nav--float-top-center .c-nav__link:hover, .c-nav--float-top-center .c-nav__link:focus, .c-nav--float-top-center .c-nav__link:active, .c-nav--float-top-center .c-nav__link.is-active, .c-nav--float-bottom-center .c-nav__link:hover, .c-nav--float-bottom-center .c-nav__link:focus, .c-nav--float-bottom-center .c-nav__link:active, .c-nav--float-bottom-center .c-nav__link.is-active {
|
|
7971
|
-
background
|
|
7972
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7973
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7974
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7861
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
7975
7862
|
}
|
|
7976
7863
|
.c-nav--float-top-center {
|
|
7977
7864
|
top: 1.25rem;
|
|
@@ -8005,10 +7892,7 @@ a, a:hover {
|
|
|
8005
7892
|
position: relative;
|
|
8006
7893
|
padding: var(--atomix-navbar-padding-y) 0;
|
|
8007
7894
|
border-bottom: var(--atomix-navbar-border-width) solid var(--atomix-navbar-border-color);
|
|
8008
|
-
background
|
|
8009
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8010
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8011
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-navbar-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-navbar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-navbar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7895
|
+
background-color: var(--atomix-navbar-bg);
|
|
8012
7896
|
z-index: var(--atomix-navbar-z-index);
|
|
8013
7897
|
}
|
|
8014
7898
|
.c-navbar__container {
|
|
@@ -8043,10 +7927,7 @@ a, a:hover {
|
|
|
8043
7927
|
width: var(--atomix-navbar-toggler-size);
|
|
8044
7928
|
height: var(--atomix-navbar-toggler-size);
|
|
8045
7929
|
padding: 0;
|
|
8046
|
-
background
|
|
8047
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8048
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8049
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-navbar-toggler-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-navbar-toggler-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-navbar-toggler-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7930
|
+
background-color: var(--atomix-navbar-toggler-bg);
|
|
8050
7931
|
border: var(--atomix-navbar-toggler-border);
|
|
8051
7932
|
border-radius: var(--atomix-navbar-toggler-border-radius);
|
|
8052
7933
|
cursor: pointer;
|
|
@@ -8099,10 +7980,7 @@ a, a:hover {
|
|
|
8099
7980
|
left: 0;
|
|
8100
7981
|
width: 100%;
|
|
8101
7982
|
height: 100%;
|
|
8102
|
-
background
|
|
8103
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8104
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8105
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7983
|
+
background-color: var(--atomix-navbar-backdrop-bg);
|
|
8106
7984
|
z-index: var(--atomix-navbar-backdrop-z-index);
|
|
8107
7985
|
opacity: 0;
|
|
8108
7986
|
visibility: hidden;
|
|
@@ -8351,23 +8229,23 @@ a, a:hover {
|
|
|
8351
8229
|
--atomix-callout-padding-y: 1rem;
|
|
8352
8230
|
--atomix-callout-tost-padding-x: 1rem;
|
|
8353
8231
|
--atomix-callout-tost-padding-y: 1rem;
|
|
8354
|
-
--atomix-callout-bg:
|
|
8232
|
+
--atomix-callout-bg: var(--atomix-body-bg);
|
|
8355
8233
|
--atomix-callout-border-radius: 6px;
|
|
8356
|
-
--atomix-callout-border-color:
|
|
8234
|
+
--atomix-callout-border-color: var(--atomix-border-color);
|
|
8357
8235
|
--atomix-callout-border-witdh: var(--atomix-border-width);
|
|
8358
8236
|
--atomix-callout-title-font-size: 1rem;
|
|
8359
8237
|
--atomix-callout-title-font-weight: 600;
|
|
8360
|
-
--atomix-callout-title-color:
|
|
8238
|
+
--atomix-callout-title-color: var(--atomix-body-color);
|
|
8361
8239
|
--atomix-callout-text-font-size: ;
|
|
8362
8240
|
--atomix-callout-text-font-weight: 400;
|
|
8363
|
-
--atomix-callout-text-color:
|
|
8241
|
+
--atomix-callout-text-color: var(--atomix-body-color);
|
|
8364
8242
|
--atomix-callout-message-spacer: 0.75rem;
|
|
8365
8243
|
--atomix-callout-icon-size: 1.25rem;
|
|
8366
|
-
--atomix-callout-icon-color:
|
|
8244
|
+
--atomix-callout-icon-color: var(--atomix-primary);
|
|
8367
8245
|
--atomix-callout-close-btn-size: 1.25rem;
|
|
8368
8246
|
--atomix-callout-actions-spacer: 0.5rem;
|
|
8369
8247
|
--atomix-callout-actions-spacer-y: 0.75rem;
|
|
8370
|
-
--atomix-callout-toast-bg:
|
|
8248
|
+
--atomix-callout-toast-bg: var(--atomix-body-bg);
|
|
8371
8249
|
--atomix-callout-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
8372
8250
|
--atomix-callout-transition-duration: 0.3s;
|
|
8373
8251
|
--atomix-callout-transition-timing: cubic-bezier(0.16, 1, 0.3, 1);
|
|
@@ -8378,10 +8256,7 @@ a, a:hover {
|
|
|
8378
8256
|
max-width: var(--atomix-callout-width);
|
|
8379
8257
|
gap: var(--atomix-callout-actions-spacer);
|
|
8380
8258
|
padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
|
|
8381
|
-
background
|
|
8382
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8383
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8384
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-callout-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-callout-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8259
|
+
background-color: var(--atomix-callout-bg);
|
|
8385
8260
|
border-radius: var(--atomix-callout-border-radius);
|
|
8386
8261
|
border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
|
|
8387
8262
|
transition: opacity var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing), transform var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing);
|
|
@@ -8420,9 +8295,9 @@ a, a:hover {
|
|
|
8420
8295
|
.c-callout__actions {
|
|
8421
8296
|
display: flex;
|
|
8422
8297
|
align-items: center;
|
|
8423
|
-
flex-wrap: wrap;
|
|
8424
8298
|
gap: var(--atomix-callout-actions-spacer);
|
|
8425
8299
|
margin-left: auto;
|
|
8300
|
+
margin-right: 10px;
|
|
8426
8301
|
}
|
|
8427
8302
|
.c-callout__close-btn {
|
|
8428
8303
|
display: inline-flex;
|
|
@@ -8462,10 +8337,7 @@ a, a:hover {
|
|
|
8462
8337
|
align-items: flex-start;
|
|
8463
8338
|
justify-content: flex-start;
|
|
8464
8339
|
border: none;
|
|
8465
|
-
background
|
|
8466
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8467
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8468
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-callout-toast-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-callout-toast-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-callout-toast-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8340
|
+
background-color: var(--atomix-callout-toast-bg);
|
|
8469
8341
|
box-shadow: var(--atomix-callout-box-shadow);
|
|
8470
8342
|
animation: calloutToastIn 0.3s var(--atomix-callout-transition-timing) forwards;
|
|
8471
8343
|
}
|
|
@@ -8527,9 +8399,35 @@ a, a:hover {
|
|
|
8527
8399
|
--atomix-callout-title-color: var(--atomix-light);
|
|
8528
8400
|
--atomix-callout-text-color: #dee2e6;
|
|
8529
8401
|
--atomix-callout-bg: var(--atomix-dark);
|
|
8530
|
-
--atomix-callout-border-color: var(--atomix-
|
|
8402
|
+
--atomix-callout-border-color: var(--atomix-dark-border-subtle);
|
|
8531
8403
|
--atomix-callout-icon-color: var(--atomix-light);
|
|
8532
8404
|
}
|
|
8405
|
+
.c-callout--glass {
|
|
8406
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
|
|
8407
|
+
padding: 0;
|
|
8408
|
+
border: none;
|
|
8409
|
+
display: block;
|
|
8410
|
+
}
|
|
8411
|
+
.c-callout--glass .c-callout__glass-content {
|
|
8412
|
+
display: flex;
|
|
8413
|
+
justify-content: center;
|
|
8414
|
+
align-items: center;
|
|
8415
|
+
padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
|
|
8416
|
+
border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
|
|
8417
|
+
max-width: var(--atomix-callout-width);
|
|
8418
|
+
border-radius: var(--atomix-callout-border-radius);
|
|
8419
|
+
width: 100%;
|
|
8420
|
+
}
|
|
8421
|
+
.c-callout--glass .c-callout__title {
|
|
8422
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8423
|
+
}
|
|
8424
|
+
.c-callout--glass .c-callout__text {
|
|
8425
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8426
|
+
}
|
|
8427
|
+
.c-callout--glass.c-callout--toast {
|
|
8428
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
|
|
8429
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
8430
|
+
}
|
|
8533
8431
|
.c-callout.is-hide {
|
|
8534
8432
|
opacity: 0;
|
|
8535
8433
|
transform: translateY(-10px);
|
|
@@ -8670,10 +8568,7 @@ a, a:hover {
|
|
|
8670
8568
|
color: var(--atomix-pagination-color);
|
|
8671
8569
|
font-size: var(--atomix-pagination-font-size);
|
|
8672
8570
|
padding: var(--atomix-pagination-padding-y) var(--atomix-pagination-padding-x);
|
|
8673
|
-
background
|
|
8674
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8675
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8676
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-pagination-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-pagination-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8571
|
+
background-color: var(--atomix-pagination-bg);
|
|
8677
8572
|
border-radius: var(--atomix-pagination-border-radius);
|
|
8678
8573
|
border: none;
|
|
8679
8574
|
cursor: pointer;
|
|
@@ -8757,10 +8652,7 @@ a, a:hover {
|
|
|
8757
8652
|
flex-direction: column;
|
|
8758
8653
|
gap: var(--atomix-popover-inner-gap-y) var(--atomix-popover-inner-gap-x);
|
|
8759
8654
|
padding: var(--atomix-popover-padding-y) var(--atomix-popover-padding-x);
|
|
8760
|
-
background
|
|
8761
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8762
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8763
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8655
|
+
background-color: var(--atomix-popover-bg);
|
|
8764
8656
|
border-radius: var(--atomix-popover-border-radius);
|
|
8765
8657
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
8766
8658
|
}
|
|
@@ -8768,10 +8660,7 @@ a, a:hover {
|
|
|
8768
8660
|
position: absolute;
|
|
8769
8661
|
width: var(--atomix-popover-arrow-size);
|
|
8770
8662
|
height: var(--atomix-popover-arrow-size);
|
|
8771
|
-
background
|
|
8772
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8773
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8774
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8663
|
+
background-color: var(--atomix-popover-bg);
|
|
8775
8664
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
8776
8665
|
z-index: 1;
|
|
8777
8666
|
transform-origin: center;
|
|
@@ -8813,10 +8702,7 @@ a, a:hover {
|
|
|
8813
8702
|
--atomix-product-review-label-color: var(--atomix-text-muted);
|
|
8814
8703
|
padding: var(--atomix-product-review-padding);
|
|
8815
8704
|
border-radius: var(--atomix-product-review-border-radius);
|
|
8816
|
-
background
|
|
8817
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8818
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8819
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-product-review-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-product-review-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-product-review-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8705
|
+
background-color: var(--atomix-product-review-bg);
|
|
8820
8706
|
border: 1px solid var(--atomix-product-review-border-color);
|
|
8821
8707
|
width: 100%;
|
|
8822
8708
|
max-width: 37.5rem;
|
|
@@ -8876,10 +8762,7 @@ a, a:hover {
|
|
|
8876
8762
|
padding: 0.75rem;
|
|
8877
8763
|
border: 1px solid var(--atomix-product-review-border-color);
|
|
8878
8764
|
border-radius: var(--atomix-border-radius);
|
|
8879
|
-
background
|
|
8880
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8881
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8882
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8765
|
+
background-color: var(--atomix-body-bg);
|
|
8883
8766
|
color: var(--atomix-body-color);
|
|
8884
8767
|
font-family: inherit;
|
|
8885
8768
|
resize: vertical;
|
|
@@ -8927,10 +8810,7 @@ a, a:hover {
|
|
|
8927
8810
|
width: 100%;
|
|
8928
8811
|
max-width: var(--atomix-progress-width);
|
|
8929
8812
|
height: var(--atomix-progress-bar-height);
|
|
8930
|
-
background
|
|
8931
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8932
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8933
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-progress-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-progress-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-progress-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8813
|
+
background-color: var(--atomix-progress-bg);
|
|
8934
8814
|
border-radius: var(--atomix-progress-border-radius);
|
|
8935
8815
|
overflow: hidden;
|
|
8936
8816
|
}
|
|
@@ -8938,10 +8818,7 @@ a, a:hover {
|
|
|
8938
8818
|
width: var(--atomix-progress-bar-width);
|
|
8939
8819
|
height: var(--atomix-progress-bar-height);
|
|
8940
8820
|
color: var(--atomix-progress-bar-color);
|
|
8941
|
-
background
|
|
8942
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8943
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8944
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-progress-bar-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-progress-bar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-progress-bar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8821
|
+
background-color: var(--atomix-progress-bar-bg);
|
|
8945
8822
|
border-radius: var(--atomix-progress-border-radius);
|
|
8946
8823
|
transition: var(--atomix-progress-bar-transition) var(--atomix-progress-bar-easing);
|
|
8947
8824
|
}
|
|
@@ -9148,10 +9025,7 @@ a, a:hover {
|
|
|
9148
9025
|
max-width: var(--atomix-river-width);
|
|
9149
9026
|
padding: var(--atomix-river-padding-y) var(--atomix-river-padding-x);
|
|
9150
9027
|
border-radius: var(--atomix-river-border-radius);
|
|
9151
|
-
background
|
|
9152
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9153
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9154
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-river-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-river-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-river-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9028
|
+
background-color: var(--atomix-river-bg);
|
|
9155
9029
|
}
|
|
9156
9030
|
.c-river__bg {
|
|
9157
9031
|
position: absolute;
|
|
@@ -9171,10 +9045,7 @@ a, a:hover {
|
|
|
9171
9045
|
.c-river__overlay {
|
|
9172
9046
|
position: absolute;
|
|
9173
9047
|
inset: 0;
|
|
9174
|
-
background
|
|
9175
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9176
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9177
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-river-overlay) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-river-overlay) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-river-overlay) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9048
|
+
background-color: var(--atomix-river-overlay);
|
|
9178
9049
|
opacity: var(--atomix-river-overlay-opacity);
|
|
9179
9050
|
border-radius: var(--atomix-river-border-radius);
|
|
9180
9051
|
}
|
|
@@ -9398,10 +9269,7 @@ a, a:hover {
|
|
|
9398
9269
|
left: 0;
|
|
9399
9270
|
width: 100%;
|
|
9400
9271
|
height: 100%;
|
|
9401
|
-
background
|
|
9402
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9403
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9404
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9272
|
+
background-color: var(--atomix-sectionintro-overlay-bg-color);
|
|
9405
9273
|
opacity: var(--atomix-sectionintro-overlay-opacity);
|
|
9406
9274
|
}
|
|
9407
9275
|
.c-sectionintro--has-bg {
|
|
@@ -9481,10 +9349,7 @@ a, a:hover {
|
|
|
9481
9349
|
padding: var(--atomix-select-padding-x) var(--atomix-select-padding-y);
|
|
9482
9350
|
color: var(--atomix-select-placeholder-color);
|
|
9483
9351
|
font-size: var(--atomix-select-font-size);
|
|
9484
|
-
background
|
|
9485
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9486
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9487
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-select-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-select-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-select-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9352
|
+
background-color: var(--atomix-select-bg);
|
|
9488
9353
|
border: 1px solid var(--atomix-select-border-color);
|
|
9489
9354
|
border-radius: var(--atomix-select-border-radius);
|
|
9490
9355
|
cursor: pointer;
|
|
@@ -9514,10 +9379,7 @@ a, a:hover {
|
|
|
9514
9379
|
height: 0px;
|
|
9515
9380
|
top: calc(100% + var(--atomix-select-panel-spacer-y));
|
|
9516
9381
|
left: 0;
|
|
9517
|
-
background
|
|
9518
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9519
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9520
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-select-panel-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-select-panel-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-select-panel-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9382
|
+
background-color: var(--atomix-select-panel-bg);
|
|
9521
9383
|
border-radius: var(--atomix-select-panel-border-radius);
|
|
9522
9384
|
box-shadow: var(--atomix-select-panel-box-shadow);
|
|
9523
9385
|
overflow: hidden;
|
|
@@ -9538,10 +9400,7 @@ a, a:hover {
|
|
|
9538
9400
|
.c-select__item {
|
|
9539
9401
|
padding: var(--atomix-select-item-padding-x) var(--atomix-select-item-padding-y);
|
|
9540
9402
|
color: var(--atomix-select-item-color);
|
|
9541
|
-
background
|
|
9542
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9543
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9544
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-select-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-select-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-select-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9403
|
+
background-color: var(--atomix-select-item-bg);
|
|
9545
9404
|
border-radius: var(--atomix-select-item-border-radius);
|
|
9546
9405
|
transition-property: all;
|
|
9547
9406
|
transition-duration: 0.2s;
|
|
@@ -9552,10 +9411,7 @@ a, a:hover {
|
|
|
9552
9411
|
cursor: pointer;
|
|
9553
9412
|
}
|
|
9554
9413
|
.c-select__item:hover {
|
|
9555
|
-
background
|
|
9556
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9557
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9558
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-select-item-bg-hover) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-select-item-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-select-item-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9414
|
+
background-color: var(--atomix-select-item-bg-hover);
|
|
9559
9415
|
}
|
|
9560
9416
|
.c-select--lg {
|
|
9561
9417
|
--atomix-select-font-size: var(--atomix-select-font-size-lg);
|
|
@@ -9605,10 +9461,7 @@ a, a:hover {
|
|
|
9605
9461
|
--atomix-side-menu-inner-padding-top: 1.25rem;
|
|
9606
9462
|
width: 100%;
|
|
9607
9463
|
padding: var(--atomix-side-menu-padding-y) var(--atomix-side-menu-padding-x);
|
|
9608
|
-
background
|
|
9609
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9610
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9611
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9464
|
+
background-color: var(--atomix-side-menu-bg);
|
|
9612
9465
|
border-radius: var(--atomix-side-menu-border-radius);
|
|
9613
9466
|
border: var(--atomix-side-menu-border-width) solid var(--atomix-side-menu-border-color);
|
|
9614
9467
|
box-shadow: var(--atomix-side-menu-box-shadow);
|
|
@@ -9646,10 +9499,7 @@ a, a:hover {
|
|
|
9646
9499
|
justify-content: space-between;
|
|
9647
9500
|
width: 100%;
|
|
9648
9501
|
padding: var(--atomix-side-menu-toggler-padding-y) var(--atomix-side-menu-toggler-padding-x);
|
|
9649
|
-
background
|
|
9650
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9651
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9652
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9502
|
+
background-color: var(--atomix-side-menu-toggler-bg);
|
|
9653
9503
|
border: none;
|
|
9654
9504
|
border-radius: var(--atomix-side-menu-toggler-border-radius);
|
|
9655
9505
|
cursor: pointer;
|
|
@@ -9665,10 +9515,7 @@ a, a:hover {
|
|
|
9665
9515
|
}
|
|
9666
9516
|
}
|
|
9667
9517
|
.c-side-menu__toggler:hover {
|
|
9668
|
-
background
|
|
9669
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9670
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9671
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9518
|
+
background-color: var(--atomix-side-menu-toggler-hover-bg);
|
|
9672
9519
|
}
|
|
9673
9520
|
.c-side-menu__toggler:focus {
|
|
9674
9521
|
outline: 2px solid var(--atomix-focus-ring-color);
|
|
@@ -9706,10 +9553,7 @@ a, a:hover {
|
|
|
9706
9553
|
color: var(--atomix-side-menu-item-color);
|
|
9707
9554
|
font-size: var(--atomix-side-menu-item-font-size);
|
|
9708
9555
|
font-weight: var(--atomix-side-menu-item-font-weight);
|
|
9709
|
-
background
|
|
9710
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9711
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9712
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9556
|
+
background-color: var(--atomix-side-menu-item-bg);
|
|
9713
9557
|
border: none;
|
|
9714
9558
|
border-radius: var(--atomix-side-menu-item-border-radius);
|
|
9715
9559
|
text-decoration: none;
|
|
@@ -9718,10 +9562,7 @@ a, a:hover {
|
|
|
9718
9562
|
}
|
|
9719
9563
|
.c-side-menu__link:hover {
|
|
9720
9564
|
color: var(--atomix-side-menu-item-hover-color);
|
|
9721
|
-
background
|
|
9722
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9723
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9724
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9565
|
+
background-color: var(--atomix-side-menu-item-hover-bg);
|
|
9725
9566
|
text-decoration: none;
|
|
9726
9567
|
}
|
|
9727
9568
|
.c-side-menu__link:focus {
|
|
@@ -9733,18 +9574,12 @@ a, a:hover {
|
|
|
9733
9574
|
}
|
|
9734
9575
|
.c-side-menu__link.is-active {
|
|
9735
9576
|
color: var(--atomix-side-menu-item-active-color);
|
|
9736
|
-
background
|
|
9737
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9738
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9739
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9577
|
+
background-color: var(--atomix-side-menu-item-active-bg);
|
|
9740
9578
|
font-weight: 500;
|
|
9741
9579
|
}
|
|
9742
9580
|
.c-side-menu__link.is-disabled, .c-side-menu__link[aria-disabled=true] {
|
|
9743
9581
|
color: var(--atomix-side-menu-item-disabled-color);
|
|
9744
|
-
background
|
|
9745
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9746
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9747
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9582
|
+
background-color: var(--atomix-side-menu-item-disabled-bg);
|
|
9748
9583
|
cursor: not-allowed;
|
|
9749
9584
|
pointer-events: none;
|
|
9750
9585
|
opacity: 0.6;
|
|
@@ -9788,10 +9623,7 @@ a, a:hover {
|
|
|
9788
9623
|
display: inline-block;
|
|
9789
9624
|
width: var(--atomix-skeleton-width);
|
|
9790
9625
|
min-height: var(--atomix-skeleton-height);
|
|
9791
|
-
background
|
|
9792
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9793
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9794
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 10%, transparent), 4px 8px 32px color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9626
|
+
background-color: linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%);
|
|
9795
9627
|
background-size: 400% 100%;
|
|
9796
9628
|
border-radius: var(--atomix-skeleton-border-radius);
|
|
9797
9629
|
animation-name: atomix--skeleton-loading;
|
|
@@ -9887,10 +9719,7 @@ a, a:hover {
|
|
|
9887
9719
|
display: flex;
|
|
9888
9720
|
align-items: center;
|
|
9889
9721
|
justify-content: center;
|
|
9890
|
-
background
|
|
9891
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9892
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9893
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9722
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
9894
9723
|
border: 2px dashed var(--atomix-primary-border-subtle);
|
|
9895
9724
|
border-radius: 0.5rem;
|
|
9896
9725
|
}
|
|
@@ -9930,10 +9759,7 @@ a, a:hover {
|
|
|
9930
9759
|
height: var(--atomix-slider-nav-size);
|
|
9931
9760
|
border: none;
|
|
9932
9761
|
border-radius: 50rem;
|
|
9933
|
-
background
|
|
9934
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9935
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9936
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9762
|
+
background-color: var(--atomix-primary-bg-subtle);
|
|
9937
9763
|
color: var(--atomix-primary-text);
|
|
9938
9764
|
cursor: pointer;
|
|
9939
9765
|
pointer-events: auto;
|
|
@@ -9946,10 +9772,7 @@ a, a:hover {
|
|
|
9946
9772
|
}
|
|
9947
9773
|
.c-slider__navigation-prev:hover,
|
|
9948
9774
|
.c-slider__navigation-next:hover {
|
|
9949
|
-
background
|
|
9950
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9951
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9952
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9775
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
9953
9776
|
transform: translateY(-50%) scale(1.05);
|
|
9954
9777
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
9955
9778
|
}
|
|
@@ -10001,29 +9824,20 @@ a, a:hover {
|
|
|
10001
9824
|
height: 0.5rem;
|
|
10002
9825
|
border-radius: 50rem;
|
|
10003
9826
|
border: none;
|
|
10004
|
-
background
|
|
10005
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10006
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10007
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9827
|
+
background-color: var(--atomix-tertiary-bg-subtle);
|
|
10008
9828
|
cursor: pointer;
|
|
10009
9829
|
pointer-events: auto;
|
|
10010
9830
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10011
9831
|
}
|
|
10012
9832
|
.c-slider__pagination-bullet:hover {
|
|
10013
|
-
background
|
|
10014
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10015
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10016
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9833
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
10017
9834
|
transform: scale(1.2);
|
|
10018
9835
|
}
|
|
10019
9836
|
.c-slider__pagination-bullet:active {
|
|
10020
9837
|
transform: scale(1.1);
|
|
10021
9838
|
}
|
|
10022
9839
|
.c-slider__pagination-bullet--active {
|
|
10023
|
-
background
|
|
10024
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10025
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10026
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9840
|
+
background-color: var(--atomix-primary);
|
|
10027
9841
|
transform: scale(1.2);
|
|
10028
9842
|
}
|
|
10029
9843
|
.c-slider__empty-message {
|
|
@@ -10180,10 +9994,7 @@ a, a:hover {
|
|
|
10180
9994
|
.c-steps__line {
|
|
10181
9995
|
width: var(--atomix-steps-line-width);
|
|
10182
9996
|
height: var(--atomix-steps-line-height);
|
|
10183
|
-
background
|
|
10184
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10185
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10186
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-steps-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-steps-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-steps-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9997
|
+
background-color: var(--atomix-steps-item-bg);
|
|
10187
9998
|
transition: 1s;
|
|
10188
9999
|
}
|
|
10189
10000
|
.c-steps__content {
|
|
@@ -10199,10 +10010,7 @@ a, a:hover {
|
|
|
10199
10010
|
height: var(--atomix-steps-item-number-size);
|
|
10200
10011
|
color: var(--atomix-steps-item-number-color);
|
|
10201
10012
|
font-size: var(--atomix-steps-item-number-font-size);
|
|
10202
|
-
background
|
|
10203
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10204
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10205
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-steps-item-number-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-steps-item-number-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-steps-item-number-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10013
|
+
background-color: var(--atomix-steps-item-number-bg);
|
|
10206
10014
|
border-radius: var(--atomix-steps-item-number-border-radius);
|
|
10207
10015
|
}
|
|
10208
10016
|
.c-steps__text {
|
|
@@ -10279,10 +10087,7 @@ a, a:hover {
|
|
|
10279
10087
|
border-radius: var(--atomix-tabs-nav-btn-border-radius);
|
|
10280
10088
|
border: var(--atomix-tabs-nav-btn-border-width) solid transparent;
|
|
10281
10089
|
border-bottom: var(--atomix-tabs-nav-btn-border-width) solid var(--atomix-tabs-nav-btn-border-color);
|
|
10282
|
-
background
|
|
10283
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10284
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10285
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10090
|
+
background-color: var(--atomix-tabs-nav-btn-bg);
|
|
10286
10091
|
transition-property: all;
|
|
10287
10092
|
transition-duration: 0.2s;
|
|
10288
10093
|
transition-timing-function: ease-in-out;
|
|
@@ -10293,20 +10098,14 @@ a, a:hover {
|
|
|
10293
10098
|
border-color: transparent transparent var(--atomix-tabs-nav-btn-border-active-color) transparent;
|
|
10294
10099
|
}
|
|
10295
10100
|
.c-tabs__nav-btn:hover {
|
|
10296
|
-
background
|
|
10297
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10298
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10299
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10101
|
+
background-color: var(--atomix-tabs-nav-btn-bg-hover);
|
|
10300
10102
|
}
|
|
10301
10103
|
.c-tabs__nav-btn:disabled, .c-tabs__nav-btn.is-disabled {
|
|
10302
10104
|
--atomix-tabs-nav-btn-border-active-color: var(
|
|
10303
10105
|
--atomix-tabs-nav-btn-border-disabled-color
|
|
10304
10106
|
);
|
|
10305
10107
|
color: var(--atomix-tabs-nav-btn-border-disabled-color);
|
|
10306
|
-
background
|
|
10307
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10308
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10309
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10108
|
+
background-color: var(--atomix-tabs-nav-btn-bg-disabled);
|
|
10310
10109
|
pointer-events: none;
|
|
10311
10110
|
}
|
|
10312
10111
|
.c-tabs__nav-btn:focus-visible {
|
|
@@ -10351,10 +10150,7 @@ a, a:hover {
|
|
|
10351
10150
|
width: 100%;
|
|
10352
10151
|
max-width: var(--atomix-testimonial-width);
|
|
10353
10152
|
padding: var(--atomix-testimonial-padding-y) var(--atomix-testimonial-padding-x);
|
|
10354
|
-
background
|
|
10355
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10356
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10357
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-testimonial-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-testimonial-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-testimonial-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10153
|
+
background-color: var(--atomix-testimonial-bg);
|
|
10358
10154
|
}
|
|
10359
10155
|
.c-testimonial__quote {
|
|
10360
10156
|
color: var(--atomix-testimonial-quote-color);
|
|
@@ -10398,10 +10194,7 @@ a, a:hover {
|
|
|
10398
10194
|
margin-bottom: 1.5rem;
|
|
10399
10195
|
border: 1px solid var(--atomix-todo-border-color);
|
|
10400
10196
|
border-radius: var(--atomix-todo-border-radius);
|
|
10401
|
-
background
|
|
10402
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10403
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10404
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-todo-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-todo-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-todo-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10197
|
+
background-color: var(--atomix-todo-bg);
|
|
10405
10198
|
color: var(--atomix-todo-color);
|
|
10406
10199
|
padding: 1.25rem;
|
|
10407
10200
|
}
|
|
@@ -10443,10 +10236,7 @@ a, a:hover {
|
|
|
10443
10236
|
transition: background-color 0.2s ease;
|
|
10444
10237
|
}
|
|
10445
10238
|
.c-todo__item:hover {
|
|
10446
|
-
background
|
|
10447
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10448
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10449
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-todo-item-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-todo-item-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-todo-item-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10239
|
+
background-color: var(--atomix-todo-item-hover-bg);
|
|
10450
10240
|
}
|
|
10451
10241
|
.c-todo__item--completed .c-todo__item-text {
|
|
10452
10242
|
color: var(--atomix-todo-completed-color);
|
|
@@ -10534,10 +10324,7 @@ a, a:hover {
|
|
|
10534
10324
|
flex: 0 0 var(--atomix-toggle-switch-width);
|
|
10535
10325
|
width: var(--atomix-toggle-switch-width);
|
|
10536
10326
|
height: var(--atomix-toggle-switch-height);
|
|
10537
|
-
background
|
|
10538
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10539
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10540
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-toggle-switch-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-toggle-switch-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10327
|
+
background-color: var(--atomix-toggle-switch-bg);
|
|
10541
10328
|
border-radius: var(--atomix-toggle-switch-border-radius);
|
|
10542
10329
|
-webkit-user-select: none;
|
|
10543
10330
|
-moz-user-select: none;
|
|
@@ -10554,10 +10341,7 @@ a, a:hover {
|
|
|
10554
10341
|
width: var(--atomix-toggle-switch-handle-width);
|
|
10555
10342
|
height: var(--atomix-toggle-switch-handle-height);
|
|
10556
10343
|
margin: var(--atomix-toggle-switch-handle-margin);
|
|
10557
|
-
background
|
|
10558
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10559
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10560
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10344
|
+
background-color: var(--atomix-toggle-switch-handle-bg);
|
|
10561
10345
|
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
10562
10346
|
transition-property: all;
|
|
10563
10347
|
transition-duration: 0.2s;
|
|
@@ -10578,10 +10362,7 @@ a, a:hover {
|
|
|
10578
10362
|
pointer-events: none;
|
|
10579
10363
|
}
|
|
10580
10364
|
.c-toggle.is-disabled:not(.is-on) .c-toggle__switch {
|
|
10581
|
-
background
|
|
10582
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10583
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10584
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10365
|
+
background-color: var(--atomix-toggle-switch-disabled-bg);
|
|
10585
10366
|
}
|
|
10586
10367
|
.c-toggle.is-disabled.is-on {
|
|
10587
10368
|
pointer-events: none;
|
|
@@ -10590,10 +10371,7 @@ a, a:hover {
|
|
|
10590
10371
|
content: "";
|
|
10591
10372
|
position: absolute;
|
|
10592
10373
|
inset: 0;
|
|
10593
|
-
background
|
|
10594
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10595
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10596
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(173, 181, 189, 0.6) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(173, 181, 189, 0.6) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(173, 181, 189, 0.6) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10374
|
+
background-color: rgba(173, 181, 189, 0.6);
|
|
10597
10375
|
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
10598
10376
|
}
|
|
10599
10377
|
.c-tooltip {
|
|
@@ -10627,10 +10405,7 @@ a, a:hover {
|
|
|
10627
10405
|
font-size: var(--atomix-tooltip-font-size);
|
|
10628
10406
|
font-weight: var(--atomix-tooltip-font-weight);
|
|
10629
10407
|
padding: var(--atomix-tooltip-padding-y) var(--atomix-tooltip-padding-x);
|
|
10630
|
-
background
|
|
10631
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10632
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10633
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10408
|
+
background-color: var(--atomix-tooltip-bg);
|
|
10634
10409
|
border-radius: var(--atomix-tooltip-border-radius);
|
|
10635
10410
|
z-index: 2;
|
|
10636
10411
|
opacity: 0;
|
|
@@ -10648,10 +10423,7 @@ a, a:hover {
|
|
|
10648
10423
|
transform: translateX(-50%) rotate(45deg);
|
|
10649
10424
|
width: var(--atomix-tooltip-arrow-size);
|
|
10650
10425
|
height: var(--atomix-tooltip-arrow-size);
|
|
10651
|
-
background
|
|
10652
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10653
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10654
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10426
|
+
background-color: var(--atomix-tooltip-bg);
|
|
10655
10427
|
z-index: 1;
|
|
10656
10428
|
}
|
|
10657
10429
|
.c-tooltip--top-left {
|
|
@@ -10764,10 +10536,7 @@ a, a:hover {
|
|
|
10764
10536
|
width: 100%;
|
|
10765
10537
|
max-width: var(--atomix-upload-width);
|
|
10766
10538
|
padding: var(--atomix-upload-padding-y) var(--atomix-upload-padding-x);
|
|
10767
|
-
background
|
|
10768
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10769
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10770
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-upload-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-upload-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-upload-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10539
|
+
background-color: var(--atomix-upload-bg);
|
|
10771
10540
|
border-radius: var(--atomix-upload-border-radius);
|
|
10772
10541
|
transition-property: all;
|
|
10773
10542
|
transition-duration: 0.2s;
|
|
@@ -10775,10 +10544,7 @@ a, a:hover {
|
|
|
10775
10544
|
transition-delay: 0s;
|
|
10776
10545
|
}
|
|
10777
10546
|
.c-upload:hover {
|
|
10778
|
-
background
|
|
10779
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10780
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10781
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-upload-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-upload-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-upload-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10547
|
+
background-color: var(--atomix-upload-hover-bg);
|
|
10782
10548
|
}
|
|
10783
10549
|
.c-upload__inner {
|
|
10784
10550
|
display: flex;
|
|
@@ -10791,10 +10557,7 @@ a, a:hover {
|
|
|
10791
10557
|
.c-upload__icon {
|
|
10792
10558
|
font-size: var(--atomix-upload-icon-size);
|
|
10793
10559
|
padding: var(--atomix-upload-icon-padding);
|
|
10794
|
-
background
|
|
10795
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10796
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10797
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-upload-icon-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-upload-icon-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-upload-icon-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10560
|
+
background-color: var(--atomix-upload-icon-bg);
|
|
10798
10561
|
border-radius: 50rem;
|
|
10799
10562
|
}
|
|
10800
10563
|
.c-upload__title {
|
|
@@ -10932,37 +10695,34 @@ a, a:hover {
|
|
|
10932
10695
|
pointer-events: none;
|
|
10933
10696
|
}
|
|
10934
10697
|
.c-video-player {
|
|
10935
|
-
--atomix
|
|
10936
|
-
--atomix
|
|
10937
|
-
--atomix
|
|
10938
|
-
--atomix
|
|
10939
|
-
--atomix
|
|
10940
|
-
--atomix
|
|
10941
|
-
--atomix
|
|
10942
|
-
--atomix
|
|
10943
|
-
--atomix
|
|
10944
|
-
--atomix
|
|
10945
|
-
--atomix
|
|
10946
|
-
--atomix
|
|
10947
|
-
--atomix
|
|
10948
|
-
--atomix
|
|
10949
|
-
--atomix
|
|
10950
|
-
--atomix
|
|
10951
|
-
--atomix
|
|
10952
|
-
--atomix
|
|
10953
|
-
--atomix
|
|
10954
|
-
--atomix
|
|
10955
|
-
--atomix
|
|
10956
|
-
--atomix
|
|
10957
|
-
--atomix
|
|
10958
|
-
--atomix
|
|
10959
|
-
--atomix
|
|
10698
|
+
--atomix--video-player-bg: #000;
|
|
10699
|
+
--atomix--video-player-border-radius: 12px;
|
|
10700
|
+
--atomix--video-player-controls-padding: 20px 16px 16px;
|
|
10701
|
+
--atomix--video-player-progress-height: 4px;
|
|
10702
|
+
--atomix--video-player-button-size: 40px;
|
|
10703
|
+
--atomix--video-player-font-size: 14px;
|
|
10704
|
+
--atomix--video-player-transition: all 0.3s ease;
|
|
10705
|
+
--atomix--video-player-volume-width: 80px;
|
|
10706
|
+
--atomix--video-player-volume-width-mobile: 60px;
|
|
10707
|
+
--atomix--video-player-volume-height: 4px;
|
|
10708
|
+
--atomix--video-player-volume-height-hover: 6px;
|
|
10709
|
+
--atomix--video-player-volume-thumb-size: 12px;
|
|
10710
|
+
--atomix--video-player-volume-bg: rgba(255, 255, 255, 0.3);
|
|
10711
|
+
--atomix--video-player-volume-bg-hover: rgba(255, 255, 255, 0.5);
|
|
10712
|
+
--atomix--video-player-volume-fill: var(--atomix-primary);
|
|
10713
|
+
--atomix--video-player-volume-fill-hover: var(--atomix-primary-7);
|
|
10714
|
+
--atomix--video-player-volume-fill-active: var(--atomix-primary-8);
|
|
10715
|
+
--atomix--video-player-subtitle-bg: rgba(0, 0, 0, 0.85);
|
|
10716
|
+
--atomix--video-player-subtitle-color: #ffffff;
|
|
10717
|
+
--atomix--video-player-subtitle-font-size: 18px;
|
|
10718
|
+
--atomix--video-player-subtitle-font-weight: 500;
|
|
10719
|
+
--atomix--video-player-subtitle-line-height: 1.5;
|
|
10720
|
+
--atomix--video-player-subtitle-border-radius: 6px;
|
|
10721
|
+
--atomix--video-player-subtitle-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
|
10722
|
+
--atomix--video-player-subtitle-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
10960
10723
|
position: relative;
|
|
10961
10724
|
width: 100%;
|
|
10962
|
-
background
|
|
10963
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10964
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10965
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix--video-player-bg, #000) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix--video-player-bg, #000) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix--video-player-bg, #000) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10725
|
+
background-color: var(--atomix--video-player-bg, #000);
|
|
10966
10726
|
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
10967
10727
|
overflow: hidden;
|
|
10968
10728
|
font-family: var(--atomix--font-family-base);
|
|
@@ -11032,10 +10792,7 @@ a, a:hover {
|
|
|
11032
10792
|
bottom: 0;
|
|
11033
10793
|
left: 0;
|
|
11034
10794
|
right: 0;
|
|
11035
|
-
background: linear-gradient(
|
|
11036
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11037
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11038
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, linear-gradient(transparent, rgba(0, 0, 0, 0.8)) 10%, transparent), 4px 8px 32px color-mix(in srgb, linear-gradient(transparent, rgba(0, 0, 0, 0.8)) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, linear-gradient(transparent, rgba(0, 0, 0, 0.8)) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10795
|
+
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
|
|
11039
10796
|
padding: 1.25rem 1rem 1rem;
|
|
11040
10797
|
opacity: 0;
|
|
11041
10798
|
visibility: hidden;
|
|
@@ -11219,10 +10976,7 @@ a, a:hover {
|
|
|
11219
10976
|
bottom: 3.125rem;
|
|
11220
10977
|
right: 0;
|
|
11221
10978
|
min-width: 12.5rem;
|
|
11222
|
-
background
|
|
11223
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11224
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11225
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10979
|
+
background-color: rgba(var(--atomix-primary-rgb), 0.7);
|
|
11226
10980
|
border-radius: 0.5rem;
|
|
11227
10981
|
padding: 0.5rem;
|
|
11228
10982
|
-webkit-backdrop-filter: blur(10px);
|
|
@@ -11418,6 +11172,24 @@ a, a:hover {
|
|
|
11418
11172
|
.c-video-player--ambient .c-video-player__ambient-canvas {
|
|
11419
11173
|
display: block;
|
|
11420
11174
|
}
|
|
11175
|
+
.c-video-player--glass {
|
|
11176
|
+
position: relative;
|
|
11177
|
+
}
|
|
11178
|
+
.c-video-player__glass-overlay {
|
|
11179
|
+
overflow: hidden;
|
|
11180
|
+
position: absolute;
|
|
11181
|
+
top: 0;
|
|
11182
|
+
left: 0;
|
|
11183
|
+
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
11184
|
+
}
|
|
11185
|
+
.c-video-player__glass-content {
|
|
11186
|
+
position: absolute;
|
|
11187
|
+
top: 0;
|
|
11188
|
+
left: 0;
|
|
11189
|
+
right: 0;
|
|
11190
|
+
bottom: 0;
|
|
11191
|
+
pointer-events: auto;
|
|
11192
|
+
}
|
|
11421
11193
|
.c-video-player__subtitles {
|
|
11422
11194
|
position: absolute;
|
|
11423
11195
|
bottom: 5rem;
|
|
@@ -11472,10 +11244,7 @@ a, a:hover {
|
|
|
11472
11244
|
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11473
11245
|
}
|
|
11474
11246
|
.c-photo-viewer__container {
|
|
11475
|
-
background
|
|
11476
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11477
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11478
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
11247
|
+
background-color: var(--atomix-body-bg);
|
|
11479
11248
|
border: 1px solid var(--atomix-primary-border-subtle);
|
|
11480
11249
|
border-radius: 0.75rem;
|
|
11481
11250
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
@@ -11529,10 +11298,7 @@ a, a:hover {
|
|
|
11529
11298
|
border: 2px solid transparent;
|
|
11530
11299
|
border-radius: 0.5rem;
|
|
11531
11300
|
padding: 0;
|
|
11532
|
-
background
|
|
11533
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11534
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11535
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, transparent 10%, transparent), 4px 8px 32px color-mix(in srgb, transparent 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, transparent 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
11301
|
+
background-color: transparent;
|
|
11536
11302
|
cursor: pointer;
|
|
11537
11303
|
overflow: hidden;
|
|
11538
11304
|
position: relative;
|
|
@@ -11590,10 +11356,7 @@ body.is-open-photoviewer {
|
|
|
11590
11356
|
width: 100vw;
|
|
11591
11357
|
height: 100vh;
|
|
11592
11358
|
z-index: 1000;
|
|
11593
|
-
background
|
|
11594
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11595
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11596
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, transparent 10%, transparent), 4px 8px 32px color-mix(in srgb, transparent 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, transparent 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
11359
|
+
background-color: transparent;
|
|
11597
11360
|
opacity: 1;
|
|
11598
11361
|
transition-property: opacity;
|
|
11599
11362
|
}
|