@shohojdhara/atomix 0.2.2 → 0.2.4
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 +714 -646
- package/dist/atomix.min.css +5 -5
- package/dist/index.d.ts +794 -146
- package/dist/index.esm.js +12052 -6091
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +5133 -2674
- 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 +662 -594
- package/dist/themes/boomdevs.min.css +7 -7
- package/dist/themes/esrar.css +714 -646
- package/dist/themes/esrar.min.css +6 -6
- package/dist/themes/mashroom.css +707 -642
- package/dist/themes/mashroom.min.css +7 -7
- package/dist/themes/shaj-default.css +707 -642
- package/dist/themes/shaj-default.min.css +6 -6
- package/package.json +66 -15
- package/src/components/Accordion/Accordion.stories.tsx +800 -0
- package/src/components/Accordion/Accordion.tsx +33 -5
- package/src/components/AtomixGlass/AtomixGlass.stories.tsx +1230 -0
- package/src/components/AtomixGlass/AtomixGlass.test.tsx +199 -0
- package/src/components/AtomixGlass/AtomixGlass.tsx +1343 -0
- package/src/components/AtomixGlass/README.md +134 -0
- package/src/components/AtomixGlass/index.ts +10 -0
- package/src/components/AtomixGlass/shader-utils.ts +696 -0
- package/src/components/AtomixGlass/stories/Examples.stories.tsx +5800 -0
- package/src/components/AtomixGlass/stories/Modes.stories.tsx +1065 -0
- package/src/components/AtomixGlass/stories/Playground.stories.tsx +1066 -0
- package/src/components/AtomixGlass/stories/ShaderVariants.stories.tsx +397 -0
- package/src/components/AtomixGlass/stories/shared-components.tsx +310 -0
- package/src/components/AtomixGlass/utils.ts +8 -0
- package/src/components/Badge/Badge.stories.tsx +170 -0
- package/src/components/Badge/Badge.tsx +31 -4
- package/src/components/Button/Button.stories.tsx +826 -0
- package/src/components/Button/Button.tsx +34 -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 +43 -6
- package/src/components/Callout/README.md +409 -0
- package/src/components/Card/Card.stories.tsx +699 -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 +877 -1
- 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/EdgePanel/EdgePanel.stories.tsx +476 -3
- package/src/components/EdgePanel/EdgePanel.tsx +86 -13
- 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/Messages/Messages.stories.tsx +113 -0
- package/src/components/Messages/Messages.tsx +51 -9
- package/src/components/Modal/Modal.stories.tsx +237 -0
- package/src/components/Modal/Modal.tsx +63 -35
- package/src/components/Navigation/Nav/Nav.stories.tsx +469 -0
- package/src/components/Navigation/Nav/Nav.tsx +17 -4
- package/src/components/Navigation/Navbar/Navbar.stories.tsx +413 -0
- package/src/components/Navigation/Navbar/Navbar.tsx +66 -28
- package/src/components/Navigation/SideMenu/SideMenu.stories.tsx +340 -0
- package/src/components/Navigation/SideMenu/SideMenu.tsx +28 -2
- 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/Progress/Progress.tsx +17 -2
- package/src/components/Rating/Rating.stories.tsx +112 -0
- package/src/components/Rating/Rating.tsx +25 -1
- package/src/components/Spinner/Spinner.tsx +17 -2
- 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/useBarChart.ts +14 -4
- package/src/lib/composables/useButton.ts +3 -1
- package/src/lib/composables/useCallout.ts +4 -1
- package/src/lib/composables/useChart.ts +223 -370
- package/src/lib/composables/useChartToolbar.ts +11 -20
- package/src/lib/composables/useEdgePanel.ts +81 -35
- package/src/lib/composables/useGlassContainer.ts +168 -0
- package/src/lib/composables/useLineChart.ts +4 -2
- package/src/lib/composables/usePieChart.ts +4 -14
- package/src/lib/constants/components.ts +89 -0
- package/src/lib/types/components.ts +448 -14
- 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/01-settings/_settings.edge-panel.scss +1 -1
- 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/02-tools/_tools.utility-api.scss +62 -27
- 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 +72 -0
- package/src/styles/06-components/_components.badge.scss +21 -0
- package/src/styles/06-components/_components.button.scss +10 -0
- package/src/styles/06-components/_components.callout.scss +46 -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.edge-panel.scss +101 -0
- 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.messages.scss +176 -0
- package/src/styles/06-components/_components.modal.scss +13 -3
- package/src/styles/06-components/_components.navbar.scss +12 -1
- package/src/styles/06-components/_components.side-menu.scss +5 -0
- 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/_index.scss +1 -0
- package/src/styles/99-utilities/_utilities.glass-fixes.scss +49 -0
- package/src/styles/99-utilities/_utilities.opacity.scss +1 -1
- 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);
|
|
@@ -2122,6 +2121,61 @@ a, a:hover {
|
|
|
2122
2121
|
margin-left: calc(var(--atomix-avatar-size) * -1 * var(--atomix-avatar-group-stacked-overlap) / 100);
|
|
2123
2122
|
z-index: 1;
|
|
2124
2123
|
}
|
|
2124
|
+
.atomix-glass__layer, .atomix-glass__overlay, .atomix-glass__base, .atomix-glass__border-1, .atomix-glass__border-2 {
|
|
2125
|
+
pointer-events: none;
|
|
2126
|
+
position: absolute;
|
|
2127
|
+
inset: 0;
|
|
2128
|
+
border-radius: inherit;
|
|
2129
|
+
transform: inherit;
|
|
2130
|
+
transition: inherit;
|
|
2131
|
+
}
|
|
2132
|
+
.atomix-glass__border-1, .atomix-glass__border-2 {
|
|
2133
|
+
box-sizing: border-box;
|
|
2134
|
+
padding: 1.5px;
|
|
2135
|
+
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
2136
|
+
-webkit-mask-composite: xor;
|
|
2137
|
+
mask-composite: exclude;
|
|
2138
|
+
box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35);
|
|
2139
|
+
transition-property: transform;
|
|
2140
|
+
}
|
|
2141
|
+
.atomix-glass__border-1 {
|
|
2142
|
+
z-index: 5;
|
|
2143
|
+
opacity: 0.3;
|
|
2144
|
+
mix-blend-mode: screen;
|
|
2145
|
+
}
|
|
2146
|
+
.atomix-glass__border-2 {
|
|
2147
|
+
z-index: 6;
|
|
2148
|
+
}
|
|
2149
|
+
.atomix-glass__hover-1, .atomix-glass__hover-2, .atomix-glass__hover-3 {
|
|
2150
|
+
position: absolute;
|
|
2151
|
+
inset: 0;
|
|
2152
|
+
pointer-events: none;
|
|
2153
|
+
border-radius: inherit;
|
|
2154
|
+
transform: inherit;
|
|
2155
|
+
transition: inherit;
|
|
2156
|
+
transition-property: transform, opacity;
|
|
2157
|
+
}
|
|
2158
|
+
.atomix-glass__hover-1 {
|
|
2159
|
+
opacity: 0;
|
|
2160
|
+
}
|
|
2161
|
+
.atomix-glass__hover-2 {
|
|
2162
|
+
overflow: hidden;
|
|
2163
|
+
opacity: 0;
|
|
2164
|
+
}
|
|
2165
|
+
.atomix-glass__hover-3 {
|
|
2166
|
+
opacity: 0;
|
|
2167
|
+
}
|
|
2168
|
+
.atomix-glass__base {
|
|
2169
|
+
will-change: transform;
|
|
2170
|
+
transition-property: transform, opacity;
|
|
2171
|
+
opacity: 0;
|
|
2172
|
+
}
|
|
2173
|
+
.atomix-glass__overlay {
|
|
2174
|
+
mix-blend-mode: overlay;
|
|
2175
|
+
will-change: transform;
|
|
2176
|
+
transition-property: transform, opacity;
|
|
2177
|
+
opacity: 0;
|
|
2178
|
+
}
|
|
2125
2179
|
.c-badge {
|
|
2126
2180
|
--atomix-tag-font-size: 0.75rem;
|
|
2127
2181
|
--atomix-tag-font-weight: 600;
|
|
@@ -2141,10 +2195,7 @@ a, a:hover {
|
|
|
2141
2195
|
line-height: 1;
|
|
2142
2196
|
padding: var(--atomix-tag-padding-y) var(--atomix-tag-padding-x);
|
|
2143
2197
|
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);
|
|
2198
|
+
background-color: var(--atomix-tag-bg-color);
|
|
2148
2199
|
-webkit-user-select: none;
|
|
2149
2200
|
-moz-user-select: none;
|
|
2150
2201
|
user-select: none;
|
|
@@ -2160,6 +2211,10 @@ a, a:hover {
|
|
|
2160
2211
|
.c-badge--lg {
|
|
2161
2212
|
--atomix-tag-padding-y: 0.5rem;
|
|
2162
2213
|
}
|
|
2214
|
+
.c-badge--glass {
|
|
2215
|
+
background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent);
|
|
2216
|
+
border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 90%, transparent);
|
|
2217
|
+
}
|
|
2163
2218
|
.c-badge--primary {
|
|
2164
2219
|
--atomix-tag-bg-color: var(--atomix-brand-bg-subtle);
|
|
2165
2220
|
--atomix-tag-color: var(--atomix-brand-text-emphasis);
|
|
@@ -2187,10 +2242,12 @@ a, a:hover {
|
|
|
2187
2242
|
.c-badge--light {
|
|
2188
2243
|
--atomix-tag-bg-color: var(--atomix-light);
|
|
2189
2244
|
--atomix-tag-color: var(--atomix-dark);
|
|
2245
|
+
border: 1px solid var(--atomix-light);
|
|
2190
2246
|
}
|
|
2191
2247
|
.c-badge--dark {
|
|
2192
2248
|
--atomix-tag-bg-color: var(--atomix-dark);
|
|
2193
2249
|
--atomix-tag-color: var(--atomix-light);
|
|
2250
|
+
border: 1px solid var(--atomix-dark);
|
|
2194
2251
|
}
|
|
2195
2252
|
.c-breadcrumb {
|
|
2196
2253
|
--atomix-breadcrumb-font-size: 0.875rem;
|
|
@@ -2212,10 +2269,7 @@ a, a:hover {
|
|
|
2212
2269
|
list-style: none;
|
|
2213
2270
|
padding-left: 0px;
|
|
2214
2271
|
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);
|
|
2272
|
+
background-color: var(--atomix-breadcrumb-bg);
|
|
2219
2273
|
}
|
|
2220
2274
|
.c-breadcrumb__item {
|
|
2221
2275
|
display: flex;
|
|
@@ -2310,10 +2364,7 @@ a, a:hover {
|
|
|
2310
2364
|
text-align: center;
|
|
2311
2365
|
white-space: nowrap;
|
|
2312
2366
|
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);
|
|
2367
|
+
background-color: var(--atomix-btn-bg);
|
|
2317
2368
|
cursor: pointer;
|
|
2318
2369
|
-webkit-user-select: none;
|
|
2319
2370
|
-moz-user-select: none;
|
|
@@ -2327,10 +2378,7 @@ a, a:hover {
|
|
|
2327
2378
|
}
|
|
2328
2379
|
.c-btn:hover {
|
|
2329
2380
|
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);
|
|
2381
|
+
background-color: var(--atomix-btn-hover-bg);
|
|
2334
2382
|
border-color: var(--atomix-btn-hover-border-color);
|
|
2335
2383
|
}
|
|
2336
2384
|
.c-btn--primary {
|
|
@@ -2594,13 +2642,16 @@ a, a:hover {
|
|
|
2594
2642
|
.c-btn:disabled, .c-btn--disabled, fieldset:disabled .c-btn {
|
|
2595
2643
|
color: var(--atomix-btn-disabled-color);
|
|
2596
2644
|
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);
|
|
2645
|
+
background-color: var(--atomix-btn-disabled-bg);
|
|
2601
2646
|
border-color: var(--atomix-btn-disabled-border-color);
|
|
2602
2647
|
opacity: var(--atomix-btn-disabled-opacity);
|
|
2603
2648
|
}
|
|
2649
|
+
.c-btn--glass {
|
|
2650
|
+
background-color: color-mix(in srgb, var(--atomix-btn-bg) 50%, transparent);
|
|
2651
|
+
}
|
|
2652
|
+
.c-btn--glass:hover {
|
|
2653
|
+
background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 50%, transparent);
|
|
2654
|
+
}
|
|
2604
2655
|
.c-datepicker {
|
|
2605
2656
|
--atomix-datepicker-width: 19rem;
|
|
2606
2657
|
--atomix-datepicker-padding-x: 0.5rem;
|
|
@@ -2679,10 +2730,7 @@ a, a:hover {
|
|
|
2679
2730
|
z-index: 5;
|
|
2680
2731
|
width: var(--atomix-datepicker-width);
|
|
2681
2732
|
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);
|
|
2733
|
+
background-color: var(--atomix-datepicker-bg);
|
|
2686
2734
|
border-radius: var(--atomix-datepicker-border-radius);
|
|
2687
2735
|
box-shadow: var(--atomix-datepicker-box-shadow);
|
|
2688
2736
|
margin-top: 0.25rem;
|
|
@@ -2726,6 +2774,24 @@ a, a:hover {
|
|
|
2726
2774
|
.c-datepicker__calendar--right-end {
|
|
2727
2775
|
bottom: 0;
|
|
2728
2776
|
}
|
|
2777
|
+
.c-datepicker__calendar--glass {
|
|
2778
|
+
z-index: auto;
|
|
2779
|
+
z-index: initial;
|
|
2780
|
+
box-shadow: none;
|
|
2781
|
+
border: none;
|
|
2782
|
+
border-radius: 0;
|
|
2783
|
+
padding: 0;
|
|
2784
|
+
background: transparent;
|
|
2785
|
+
}
|
|
2786
|
+
.c-datepicker__glass-content {
|
|
2787
|
+
z-index: auto;
|
|
2788
|
+
z-index: initial;
|
|
2789
|
+
box-shadow: none;
|
|
2790
|
+
border: none;
|
|
2791
|
+
border-radius: var(--atomix-datepicker-border-radius);
|
|
2792
|
+
padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
|
|
2793
|
+
background: color-mix(in srgb, var(--atomix-datepicker-bg) 50%, transparent 0%);
|
|
2794
|
+
}
|
|
2729
2795
|
.c-datepicker--inline {
|
|
2730
2796
|
--atomix-datepicker-width: calc(
|
|
2731
2797
|
var(--atomix-datepicker-width) + var(--atomix-datepicker-week-width)
|
|
@@ -3047,10 +3113,7 @@ a, a:hover {
|
|
|
3047
3113
|
transition-duration: 0.2s;
|
|
3048
3114
|
transition-timing-function: ease-in-out;
|
|
3049
3115
|
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);
|
|
3116
|
+
background-color: var(--atomix-card-bg);
|
|
3054
3117
|
}
|
|
3055
3118
|
.c-card__header {
|
|
3056
3119
|
margin-bottom: var(--atomix-card-header-spacer-y);
|
|
@@ -3128,6 +3191,21 @@ a, a:hover {
|
|
|
3128
3191
|
padding: var(--atomix-card-row-spacer-y) var(--atomix-card-row-spacer-x);
|
|
3129
3192
|
padding-top: 0;
|
|
3130
3193
|
}
|
|
3194
|
+
.c-card--glass {
|
|
3195
|
+
background-color: transparent;
|
|
3196
|
+
padding: 0;
|
|
3197
|
+
border: none;
|
|
3198
|
+
display: block;
|
|
3199
|
+
border-radius: 0;
|
|
3200
|
+
}
|
|
3201
|
+
.c-card--glass .c-card__glass-content {
|
|
3202
|
+
padding: var(--atomix-card-spacer-y) var(--atomix-card-spacer-x);
|
|
3203
|
+
max-width: var(--atomix-card-width);
|
|
3204
|
+
border-radius: var(--atomix-card-border-radius);
|
|
3205
|
+
width: 100%;
|
|
3206
|
+
background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
|
|
3207
|
+
background-blend-mode: overlay;
|
|
3208
|
+
}
|
|
3131
3209
|
.is-elevated .c-card {
|
|
3132
3210
|
box-shadow: var(--atomix-box-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.175));
|
|
3133
3211
|
z-index: 1;
|
|
@@ -3153,19 +3231,12 @@ a, a:hover {
|
|
|
3153
3231
|
min-height: var(--atomix-chart-min-height);
|
|
3154
3232
|
width: 100%;
|
|
3155
3233
|
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);
|
|
3234
|
+
background-color: var(--atomix-chart-bg);
|
|
3159
3235
|
transition-property: all;
|
|
3160
3236
|
transition-duration: 0.2s;
|
|
3161
3237
|
transition-timing-function: ease-in-out;
|
|
3162
3238
|
transition-delay: 0s;
|
|
3163
3239
|
}
|
|
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
3240
|
.c-chart::after {
|
|
3170
3241
|
content: "";
|
|
3171
3242
|
position: absolute;
|
|
@@ -4868,7 +4939,7 @@ a, a:hover {
|
|
|
4868
4939
|
animation: none;
|
|
4869
4940
|
}
|
|
4870
4941
|
}
|
|
4871
|
-
.c-chart:focus-
|
|
4942
|
+
.c-chart:focus-within .c-chart__data-point:focus {
|
|
4872
4943
|
outline: 2px solid var(--atomix-primary-6);
|
|
4873
4944
|
outline-offset: 2px;
|
|
4874
4945
|
z-index: 10;
|
|
@@ -4970,10 +5041,7 @@ a, a:hover {
|
|
|
4970
5041
|
-webkit-appearance: none;
|
|
4971
5042
|
-moz-appearance: none;
|
|
4972
5043
|
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);
|
|
5044
|
+
background-color: var(--atomix-checkbox-bg);
|
|
4977
5045
|
width: var(--atomix-checkbox-width);
|
|
4978
5046
|
height: var(--atomix-checkbox-height);
|
|
4979
5047
|
color: currentColor;
|
|
@@ -5062,10 +5130,7 @@ a, a:hover {
|
|
|
5062
5130
|
color: var(--atomix-body-color);
|
|
5063
5131
|
}
|
|
5064
5132
|
.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);
|
|
5133
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
5069
5134
|
}
|
|
5070
5135
|
.c-color-mode-toggle:focus {
|
|
5071
5136
|
outline: none;
|
|
@@ -5076,10 +5141,7 @@ a, a:hover {
|
|
|
5076
5141
|
height: 1.5rem;
|
|
5077
5142
|
}
|
|
5078
5143
|
[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);
|
|
5144
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
5083
5145
|
}
|
|
5084
5146
|
.c-countdown {
|
|
5085
5147
|
--atomix-countdown-color: var(--atomix-body-color);
|
|
@@ -5117,10 +5179,7 @@ a, a:hover {
|
|
|
5117
5179
|
align-items: center;
|
|
5118
5180
|
padding: var(--atomix-countdown-item-padding-y) var(--atomix-countdown-item-padding-x);
|
|
5119
5181
|
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);
|
|
5182
|
+
background-color: var(--atomix-countdown-focused-bg);
|
|
5124
5183
|
}
|
|
5125
5184
|
.c-countdown--focused .c-countdown__time-label {
|
|
5126
5185
|
font-size: var(--atomix-countdown-focused-label-font-size);
|
|
@@ -5147,17 +5206,11 @@ a, a:hover {
|
|
|
5147
5206
|
width: 100%;
|
|
5148
5207
|
margin-bottom: 0;
|
|
5149
5208
|
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);
|
|
5209
|
+
background-color: var(--atomix-data-table-bg);
|
|
5154
5210
|
border-collapse: collapse;
|
|
5155
5211
|
}
|
|
5156
5212
|
.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);
|
|
5213
|
+
background-color: var(--atomix-data-table-header-bg);
|
|
5161
5214
|
}
|
|
5162
5215
|
.c-data-table__header-cell {
|
|
5163
5216
|
padding: 0.75rem 1rem;
|
|
@@ -5174,10 +5227,7 @@ a, a:hover {
|
|
|
5174
5227
|
user-select: none;
|
|
5175
5228
|
}
|
|
5176
5229
|
.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);
|
|
5230
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
5181
5231
|
}
|
|
5182
5232
|
.c-data-table__header-content {
|
|
5183
5233
|
display: flex;
|
|
@@ -5198,16 +5248,10 @@ a, a:hover {
|
|
|
5198
5248
|
vertical-align: middle;
|
|
5199
5249
|
}
|
|
5200
5250
|
.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);
|
|
5251
|
+
background-color: var(--atomix-data-table-bg);
|
|
5205
5252
|
}
|
|
5206
5253
|
.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);
|
|
5254
|
+
background-color: var(--atomix-data-table-hover-bg);
|
|
5211
5255
|
}
|
|
5212
5256
|
.c-data-table__row[role=button] {
|
|
5213
5257
|
cursor: pointer;
|
|
@@ -5225,10 +5269,7 @@ a, a:hover {
|
|
|
5225
5269
|
color: var(--atomix-gray-500);
|
|
5226
5270
|
}
|
|
5227
5271
|
.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);
|
|
5272
|
+
background-color: var(--atomix-data-table-striped-bg);
|
|
5232
5273
|
}
|
|
5233
5274
|
.c-data-table--bordered {
|
|
5234
5275
|
border: var(--atomix-border-width) var(--atomix-border-style) var(--atomix-data-table-border-color);
|
|
@@ -5338,7 +5379,6 @@ a, a:hover {
|
|
|
5338
5379
|
.c-dropdown__menu-wrapper {
|
|
5339
5380
|
position: absolute;
|
|
5340
5381
|
left: 0;
|
|
5341
|
-
z-index: 99;
|
|
5342
5382
|
display: flex;
|
|
5343
5383
|
opacity: 0;
|
|
5344
5384
|
visibility: hidden;
|
|
@@ -5420,14 +5460,16 @@ a, a:hover {
|
|
|
5420
5460
|
padding: var(--atomix-dropdown-padding-y) var(--atomix-dropdown-padding-x);
|
|
5421
5461
|
list-style: none;
|
|
5422
5462
|
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);
|
|
5463
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
5464
|
+
background-color: var(--atomix-dropdown-bg);
|
|
5427
5465
|
border-radius: var(--atomix-dropdown-border-radius);
|
|
5428
5466
|
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
5429
5467
|
overflow: hidden;
|
|
5430
5468
|
}
|
|
5469
|
+
.c-dropdown__menu--glass {
|
|
5470
|
+
background-color: color-mix(in srgb, var(--atomix-dropdown-bg) 50%, transparent);
|
|
5471
|
+
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
5472
|
+
}
|
|
5431
5473
|
.c-dropdown__menu-item {
|
|
5432
5474
|
display: block;
|
|
5433
5475
|
width: 100%;
|
|
@@ -5444,19 +5486,13 @@ a, a:hover {
|
|
|
5444
5486
|
}
|
|
5445
5487
|
.c-dropdown__menu-item:hover, .c-dropdown__menu-item:focus {
|
|
5446
5488
|
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);
|
|
5489
|
+
background-color: var(--atomix-dropdown-link-hover-bg);
|
|
5451
5490
|
outline: none;
|
|
5452
5491
|
padding-left: calc(var(--atomix-dropdown-item-padding-x) + 3px);
|
|
5453
5492
|
}
|
|
5454
5493
|
.c-dropdown__menu-item.is-active {
|
|
5455
5494
|
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);
|
|
5495
|
+
background-color: var(--atomix-dropdown-active-bg);
|
|
5460
5496
|
}
|
|
5461
5497
|
.c-dropdown__menu-item.is-disabled {
|
|
5462
5498
|
color: var(--atomix-dropdown-color);
|
|
@@ -5539,7 +5575,7 @@ a, a:hover {
|
|
|
5539
5575
|
--atomix-edge-panel-bg: var(--atomix-body-bg);
|
|
5540
5576
|
--atomix-edge-panel-color: var(--atomix-body-color);
|
|
5541
5577
|
--atomix-edge-panel-shadow: var(--atomix-box-shadow);
|
|
5542
|
-
--atomix-edge-panel-backdrop-bg: var(--atomix-
|
|
5578
|
+
--atomix-edge-panel-backdrop-bg: var(--atomix-dark-bg-subtle);
|
|
5543
5579
|
--atomix-edge-panel-backdrop-opacity: 0.5;
|
|
5544
5580
|
--atomix-edge-panel-backdrop-blur: 10px;
|
|
5545
5581
|
--atomix-edge-panel-animation-duration: 300ms;
|
|
@@ -5553,10 +5589,7 @@ a, a:hover {
|
|
|
5553
5589
|
.c-edge-panel__backdrop {
|
|
5554
5590
|
position: absolute;
|
|
5555
5591
|
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);
|
|
5592
|
+
background-color: var(--atomix-edge-panel-backdrop-bg);
|
|
5560
5593
|
-webkit-backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
|
|
5561
5594
|
backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
|
|
5562
5595
|
opacity: 0;
|
|
@@ -5575,10 +5608,7 @@ a, a:hover {
|
|
|
5575
5608
|
color: var(--atomix-edge-panel-color);
|
|
5576
5609
|
width: var(--atomix-edge-panel-width);
|
|
5577
5610
|
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);
|
|
5611
|
+
background-color: var(--atomix-edge-panel-bg);
|
|
5582
5612
|
box-shadow: var(--atomix-edge-panel-shadow);
|
|
5583
5613
|
z-index: 2;
|
|
5584
5614
|
overflow: hidden;
|
|
@@ -5613,10 +5643,7 @@ a, a:hover {
|
|
|
5613
5643
|
transition: background-color 0.2s ease;
|
|
5614
5644
|
}
|
|
5615
5645
|
.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);
|
|
5646
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
5620
5647
|
}
|
|
5621
5648
|
.c-edge-panel__close:focus-visible {
|
|
5622
5649
|
outline: 2px solid var(--atomix-primary);
|
|
@@ -5802,6 +5829,89 @@ a, a:hover {
|
|
|
5802
5829
|
transform: translateY(100%);
|
|
5803
5830
|
}
|
|
5804
5831
|
}
|
|
5832
|
+
.c-edge-panel--glass {
|
|
5833
|
+
position: absolute;
|
|
5834
|
+
z-index: auto;
|
|
5835
|
+
z-index: initial;
|
|
5836
|
+
}
|
|
5837
|
+
.c-edge-panel--glass .c-edge-panel__container {
|
|
5838
|
+
background: transparent;
|
|
5839
|
+
box-shadow: none;
|
|
5840
|
+
overflow: hidden;
|
|
5841
|
+
border: none;
|
|
5842
|
+
padding: 0;
|
|
5843
|
+
z-index: auto;
|
|
5844
|
+
z-index: initial;
|
|
5845
|
+
will-change: initial;
|
|
5846
|
+
transform: none !important;
|
|
5847
|
+
border-radius: inherit;
|
|
5848
|
+
opacity: 0;
|
|
5849
|
+
transition: opacity 0.3s ease;
|
|
5850
|
+
}
|
|
5851
|
+
.c-edge-panel--glass .c-edge-panel__glass-content {
|
|
5852
|
+
display: flex;
|
|
5853
|
+
flex-direction: column;
|
|
5854
|
+
overflow: hidden;
|
|
5855
|
+
width: 100%;
|
|
5856
|
+
height: 100vh;
|
|
5857
|
+
padding: 0;
|
|
5858
|
+
border-radius: inherit;
|
|
5859
|
+
transition: opacity 0.3s ease;
|
|
5860
|
+
}
|
|
5861
|
+
.c-edge-panel--glass .c-edge-panel__header {
|
|
5862
|
+
background: transparent;
|
|
5863
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
|
5864
|
+
flex-shrink: 0;
|
|
5865
|
+
padding: var(--atomix-edge-panel-padding-y) var(--atomix-edge-panel-padding-x);
|
|
5866
|
+
}
|
|
5867
|
+
.c-edge-panel--glass .c-edge-panel__body {
|
|
5868
|
+
background: transparent;
|
|
5869
|
+
flex: 1 1;
|
|
5870
|
+
overflow-y: auto;
|
|
5871
|
+
padding: var(--atomix-edge-panel-padding-y) var(--atomix-edge-panel-padding-x);
|
|
5872
|
+
}
|
|
5873
|
+
.c-edge-panel--glass .c-edge-panel__close {
|
|
5874
|
+
background: rgba(255, 255, 255, 0.05);
|
|
5875
|
+
}
|
|
5876
|
+
.c-edge-panel--glass .c-edge-panel__close:hover {
|
|
5877
|
+
background: rgba(255, 255, 255, 0.15);
|
|
5878
|
+
}
|
|
5879
|
+
.c-edge-panel--glass .c-edge-panel__close:focus-visible {
|
|
5880
|
+
outline-color: rgba(255, 255, 255, 0.5);
|
|
5881
|
+
}
|
|
5882
|
+
.c-edge-panel--glass .c-edge-panel__backdrop {
|
|
5883
|
+
animation: fadeIn 0.3s ease forwards;
|
|
5884
|
+
z-index: 0;
|
|
5885
|
+
}
|
|
5886
|
+
.c-edge-panel--glass .c-edge-panel__backdrop.is-animating-out {
|
|
5887
|
+
animation: fadeOut 0.3s ease forwards;
|
|
5888
|
+
}
|
|
5889
|
+
.c-edge-panel--glass.c-edge-panel--start .c-edge-panel__glass-wrapper {
|
|
5890
|
+
animation: slideInStart 0.3s ease forwards;
|
|
5891
|
+
}
|
|
5892
|
+
.c-edge-panel--glass.c-edge-panel--start .c-edge-panel__glass-wrapper.is-animating-out {
|
|
5893
|
+
animation: slideOutStart 0.3s ease forwards;
|
|
5894
|
+
}
|
|
5895
|
+
.c-edge-panel--glass.c-edge-panel--end .c-edge-panel__glass-wrapper {
|
|
5896
|
+
animation: slideInEnd 0.3s ease forwards;
|
|
5897
|
+
}
|
|
5898
|
+
.c-edge-panel--glass.c-edge-panel--end .c-edge-panel__glass-wrapper.is-animating-out {
|
|
5899
|
+
animation: slideOutEnd 0.3s ease forwards;
|
|
5900
|
+
}
|
|
5901
|
+
.c-edge-panel--glass.c-edge-panel--top .c-edge-panel__glass-wrapper {
|
|
5902
|
+
animation: slideInTop 0.3s ease forwards;
|
|
5903
|
+
}
|
|
5904
|
+
.c-edge-panel--glass.c-edge-panel--bottom .c-edge-panel__glass-wrapper {
|
|
5905
|
+
animation: slideInBottom 0.3s ease forwards;
|
|
5906
|
+
}
|
|
5907
|
+
.c-edge-panel--glass.c-edge-panel--bottom .c-edge-panel__container, .c-edge-panel--glass.c-edge-panel--top .c-edge-panel__container {
|
|
5908
|
+
width: 100vw;
|
|
5909
|
+
height: auto;
|
|
5910
|
+
}
|
|
5911
|
+
.c-edge-panel--glass.c-edge-panel--bottom .c-edge-panel__glass-content, .c-edge-panel--glass.c-edge-panel--top .c-edge-panel__glass-content {
|
|
5912
|
+
width: 100vw;
|
|
5913
|
+
height: auto;
|
|
5914
|
+
}
|
|
5805
5915
|
.c-footer {
|
|
5806
5916
|
--atomix-footer-padding-x: 1rem;
|
|
5807
5917
|
--atomix-footer-padding-y: 3rem;
|
|
@@ -5816,10 +5926,7 @@ a, a:hover {
|
|
|
5816
5926
|
--atomix-footer-newsletter-padding: 1.5rem;
|
|
5817
5927
|
--atomix-footer-bottom-padding-top: 1.5rem;
|
|
5818
5928
|
--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);
|
|
5929
|
+
background-color: var(--atomix-footer-bg);
|
|
5823
5930
|
color: var(--atomix-footer-color);
|
|
5824
5931
|
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
5825
5932
|
padding: var(--atomix-footer-padding-y) 0;
|
|
@@ -6031,10 +6138,7 @@ a, a:hover {
|
|
|
6031
6138
|
justify-content: center;
|
|
6032
6139
|
width: 2.5rem;
|
|
6033
6140
|
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);
|
|
6141
|
+
background-color: var(--atomix-surface-variant);
|
|
6038
6142
|
color: var(--atomix-text);
|
|
6039
6143
|
border-radius: 50%;
|
|
6040
6144
|
text-decoration: none;
|
|
@@ -6051,10 +6155,7 @@ a, a:hover {
|
|
|
6051
6155
|
transition: transform 0.6s ease;
|
|
6052
6156
|
}
|
|
6053
6157
|
.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);
|
|
6158
|
+
background-color: var(--atomix-primary);
|
|
6058
6159
|
color: var(--atomix-primary-contrast);
|
|
6059
6160
|
transform: translateY(-3px) scale(1.05);
|
|
6060
6161
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
@@ -6122,10 +6223,7 @@ a, a:hover {
|
|
|
6122
6223
|
background: linear-gradient(135deg, #25d366, #66bb6a);
|
|
6123
6224
|
}
|
|
6124
6225
|
.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);
|
|
6226
|
+
background-color: linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8));
|
|
6129
6227
|
padding: 1.5rem;
|
|
6130
6228
|
border-radius: 0.5rem;
|
|
6131
6229
|
border: 1px solid var(--atomix-border-subtle);
|
|
@@ -6181,10 +6279,7 @@ a, a:hover {
|
|
|
6181
6279
|
flex: 1 1;
|
|
6182
6280
|
padding: 0.75rem 1rem;
|
|
6183
6281
|
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);
|
|
6282
|
+
background-color: var(--atomix-surface);
|
|
6188
6283
|
color: var(--atomix-text);
|
|
6189
6284
|
border: 1px solid var(--atomix-border);
|
|
6190
6285
|
border-radius: 0.375rem;
|
|
@@ -6213,10 +6308,7 @@ a, a:hover {
|
|
|
6213
6308
|
}
|
|
6214
6309
|
.c-footer__newsletter-button {
|
|
6215
6310
|
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);
|
|
6311
|
+
background-color: var(--atomix-primary);
|
|
6220
6312
|
color: var(--atomix-primary-contrast);
|
|
6221
6313
|
border: none;
|
|
6222
6314
|
border-radius: 0.375rem;
|
|
@@ -6236,10 +6328,7 @@ a, a:hover {
|
|
|
6236
6328
|
transition: transform 0.6s ease;
|
|
6237
6329
|
}
|
|
6238
6330
|
.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);
|
|
6331
|
+
background-color: var(--atomix-primary-hover);
|
|
6243
6332
|
transform: translateY(-2px);
|
|
6244
6333
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
6245
6334
|
}
|
|
@@ -6284,10 +6373,7 @@ a, a:hover {
|
|
|
6284
6373
|
align-items: center;
|
|
6285
6374
|
gap: 0.5rem;
|
|
6286
6375
|
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);
|
|
6376
|
+
background-color: var(--atomix-surface-variant);
|
|
6291
6377
|
border: 1px solid var(--atomix-border-subtle);
|
|
6292
6378
|
color: var(--atomix-text);
|
|
6293
6379
|
font-size: 0.875rem;
|
|
@@ -6308,10 +6394,7 @@ a, a:hover {
|
|
|
6308
6394
|
}
|
|
6309
6395
|
.c-footer__back-to-top:hover, .c-footer__back-to-top:focus {
|
|
6310
6396
|
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);
|
|
6397
|
+
background-color: var(--atomix-primary);
|
|
6315
6398
|
border-color: var(--atomix-primary);
|
|
6316
6399
|
transform: translateY(-2px);
|
|
6317
6400
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
@@ -6856,10 +6939,7 @@ a, a:hover {
|
|
|
6856
6939
|
display: grid;
|
|
6857
6940
|
place-items: center;
|
|
6858
6941
|
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);
|
|
6942
|
+
background-color: var(--atomix-hero-bg);
|
|
6863
6943
|
overflow: hidden;
|
|
6864
6944
|
}
|
|
6865
6945
|
.c-hero__bg {
|
|
@@ -6882,16 +6962,12 @@ a, a:hover {
|
|
|
6882
6962
|
.c-hero__overlay {
|
|
6883
6963
|
position: absolute;
|
|
6884
6964
|
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);
|
|
6965
|
+
background-color: var(--atomix-hero-overlay);
|
|
6889
6966
|
opacity: var(--atomix-hero-overlay-opacity);
|
|
6890
|
-
z-index:
|
|
6967
|
+
z-index: 0;
|
|
6891
6968
|
}
|
|
6892
6969
|
.c-hero__container {
|
|
6893
6970
|
position: relative;
|
|
6894
|
-
z-index: 2;
|
|
6895
6971
|
}
|
|
6896
6972
|
.c-hero__grid {
|
|
6897
6973
|
--atomix-gutter-x: var(--atomix-hero-grid-gutter);
|
|
@@ -7019,10 +7095,7 @@ a, a:hover {
|
|
|
7019
7095
|
border: var(--atomix-input-border-width) solid var(--atomix-input-border-color);
|
|
7020
7096
|
border-radius: var(--atomix-input-border-radius);
|
|
7021
7097
|
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);
|
|
7098
|
+
background-color: var(--atomix-input-bg);
|
|
7026
7099
|
transition-property: all;
|
|
7027
7100
|
transition-duration: 0.2s;
|
|
7028
7101
|
transition-timing-function: ease-in-out;
|
|
@@ -7094,6 +7167,21 @@ a, a:hover {
|
|
|
7094
7167
|
--atomix-input-bg: var(--atomix-secondary-bg-subtle);
|
|
7095
7168
|
pointer-events: none;
|
|
7096
7169
|
}
|
|
7170
|
+
.c-input--glass {
|
|
7171
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
7172
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
7173
|
+
}
|
|
7174
|
+
.c-input--glass:focus, .c-input--glass:hover {
|
|
7175
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
7176
|
+
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);
|
|
7177
|
+
}
|
|
7178
|
+
.c-input--glass.c-input--textarea {
|
|
7179
|
+
resize: vertical;
|
|
7180
|
+
}
|
|
7181
|
+
.c-input--glass:disabled, .c-input--glass.is-disabled {
|
|
7182
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
7183
|
+
opacity: 0.6;
|
|
7184
|
+
}
|
|
7097
7185
|
.c-list-group {
|
|
7098
7186
|
--atomix-list-group-width: 100%;
|
|
7099
7187
|
--atomix-list-group-bg: ;
|
|
@@ -7112,20 +7200,14 @@ a, a:hover {
|
|
|
7112
7200
|
list-style: none;
|
|
7113
7201
|
width: 100%;
|
|
7114
7202
|
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);
|
|
7203
|
+
background-color: var(--atomix-list-group-bg);
|
|
7119
7204
|
}
|
|
7120
7205
|
.c-list-group__item {
|
|
7121
7206
|
padding: var(--atomix-list-group-item-padding-y) var(--atomix-list-group-item-padding-x);
|
|
7122
7207
|
font-size: var(--atomix-list-group-item-font-size);
|
|
7123
7208
|
color: var(--atomix-list-group-item-color);
|
|
7124
7209
|
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);
|
|
7210
|
+
background-color: var(--atomix-list-group-item-bg);
|
|
7129
7211
|
}
|
|
7130
7212
|
.c-list-group__item--primary {
|
|
7131
7213
|
--atomix-list-group-item-bg: var(--atomix-brand-bg-subtle);
|
|
@@ -7190,10 +7272,7 @@ a, a:hover {
|
|
|
7190
7272
|
left: 0;
|
|
7191
7273
|
width: var(--atomix-list-item-dash-width);
|
|
7192
7274
|
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);
|
|
7275
|
+
background-color: var(--atomix-list-color);
|
|
7197
7276
|
transform: translateY(-50%);
|
|
7198
7277
|
}
|
|
7199
7278
|
.c-list--number {
|
|
@@ -7233,10 +7312,7 @@ a, a:hover {
|
|
|
7233
7312
|
display: inline-block;
|
|
7234
7313
|
min-width: var(--atomix-menu-min-width);
|
|
7235
7314
|
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);
|
|
7315
|
+
background-color: var(--atomix-menu-bg);
|
|
7240
7316
|
border-radius: var(--atomix-menu-border-radius);
|
|
7241
7317
|
box-shadow: var(--atomix-menu-box-shadow);
|
|
7242
7318
|
z-index: 5;
|
|
@@ -7282,10 +7358,7 @@ a, a:hover {
|
|
|
7282
7358
|
color: var(--atomix-menu-item-color);
|
|
7283
7359
|
font-size: var(--atomix-menu-item-font-size);
|
|
7284
7360
|
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);
|
|
7361
|
+
background-color: var(--atomix-menu-item-bg);
|
|
7289
7362
|
border-radius: var(--atomix-menu-border-radius);
|
|
7290
7363
|
cursor: pointer;
|
|
7291
7364
|
transition-property: all;
|
|
@@ -7295,16 +7368,10 @@ a, a:hover {
|
|
|
7295
7368
|
}
|
|
7296
7369
|
.c-menu__link:hover {
|
|
7297
7370
|
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);
|
|
7371
|
+
background-color: var(--atomix-menu-item-bg-hover);
|
|
7302
7372
|
}
|
|
7303
7373
|
.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);
|
|
7374
|
+
background-color: var(--atomix-menu-item-bg-active);
|
|
7308
7375
|
}
|
|
7309
7376
|
.c-menu__icon {
|
|
7310
7377
|
font-size: var(--atomix-menu-item-icon-size);
|
|
@@ -7474,10 +7541,7 @@ a, a:hover {
|
|
|
7474
7541
|
padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
|
|
7475
7542
|
border-radius: var(--atomix-messages-border-radius);
|
|
7476
7543
|
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);
|
|
7544
|
+
background-color: var(--atomix-messages-bg);
|
|
7481
7545
|
}
|
|
7482
7546
|
.c-messages__body {
|
|
7483
7547
|
max-height: var(--atomix-messages-body-height);
|
|
@@ -7527,10 +7591,7 @@ a, a:hover {
|
|
|
7527
7591
|
color: var(--atomix-messages-text-color);
|
|
7528
7592
|
font-size: var(--atomix-messages-text-font-size);
|
|
7529
7593
|
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);
|
|
7594
|
+
background-color: var(--atomix-messages-text-bg);
|
|
7534
7595
|
border-radius: 0.25rem var(--atomix-messages-text-border-radius) var(--atomix-messages-text-border-radius) 0.25rem;
|
|
7535
7596
|
}
|
|
7536
7597
|
.c-messages__file {
|
|
@@ -7538,10 +7599,7 @@ a, a:hover {
|
|
|
7538
7599
|
flex-wrap: wrap;
|
|
7539
7600
|
padding: var(--atomix-messages-file-padding-y) var(--atomix-messages-file-padding-x);
|
|
7540
7601
|
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);
|
|
7602
|
+
background-color: var(--atomix-messages-file-bg);
|
|
7545
7603
|
}
|
|
7546
7604
|
.c-messages__file-icon {
|
|
7547
7605
|
display: grid !important;
|
|
@@ -7551,10 +7609,7 @@ a, a:hover {
|
|
|
7551
7609
|
height: var(--atomix-messages-file-icon-size);
|
|
7552
7610
|
color: var(--atomix-tertiary-text-emphasis);
|
|
7553
7611
|
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);
|
|
7612
|
+
background-color: var(--atomix-body-bg);
|
|
7558
7613
|
border-radius: 50rem;
|
|
7559
7614
|
}
|
|
7560
7615
|
.c-messages__file-name {
|
|
@@ -7610,10 +7665,7 @@ a, a:hover {
|
|
|
7610
7665
|
}
|
|
7611
7666
|
.c-messages__content--self .c-messages__file-icon {
|
|
7612
7667
|
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);
|
|
7668
|
+
background-color: var(--atomix-messages-file-icon-bg);
|
|
7617
7669
|
}
|
|
7618
7670
|
.c-messages__content--self .c-messages__file-icon [data-atomix-color-mode=dark] {
|
|
7619
7671
|
--atomix-messages-file-icon-bg: #004ecf;
|
|
@@ -7657,10 +7709,7 @@ a, a:hover {
|
|
|
7657
7709
|
font-size: var(--atomix-messages-input-font-size);
|
|
7658
7710
|
border: var(--atomix-messages-input-border-width) solid var(--atomix-messages-input-border-color);
|
|
7659
7711
|
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);
|
|
7712
|
+
background-color: var(--atomix-messages-bg);
|
|
7664
7713
|
resize: none;
|
|
7665
7714
|
}
|
|
7666
7715
|
.c-messages__input::-moz-placeholder {
|
|
@@ -7680,10 +7729,7 @@ a, a:hover {
|
|
|
7680
7729
|
place-items: center;
|
|
7681
7730
|
align-self: flex-end;
|
|
7682
7731
|
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);
|
|
7732
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
7687
7733
|
color: var(--atomix-invert-text-emphasis);
|
|
7688
7734
|
border-radius: 50rem;
|
|
7689
7735
|
cursor: pointer;
|
|
@@ -7700,6 +7746,134 @@ a, a:hover {
|
|
|
7700
7746
|
opacity: 0.5;
|
|
7701
7747
|
cursor: not-allowed;
|
|
7702
7748
|
}
|
|
7749
|
+
.c-messages--glass {
|
|
7750
|
+
background: transparent;
|
|
7751
|
+
border: none;
|
|
7752
|
+
padding: 0;
|
|
7753
|
+
}
|
|
7754
|
+
.c-messages--glass .c-messages__glass-content {
|
|
7755
|
+
padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
|
|
7756
|
+
border-radius: var(--atomix-messages-border-radius);
|
|
7757
|
+
}
|
|
7758
|
+
.c-messages--glass .c-messages__body {
|
|
7759
|
+
border-radius: 0.5rem;
|
|
7760
|
+
padding: 0.5rem;
|
|
7761
|
+
background-color: color-mix(in srgb, var(--atomix-body-bg) 15%, transparent);
|
|
7762
|
+
}
|
|
7763
|
+
.c-messages--glass .c-messages__text {
|
|
7764
|
+
background-color: color-mix(in srgb, var(--atomix-body-bg) 50%, transparent);
|
|
7765
|
+
-webkit-backdrop-filter: blur(8px);
|
|
7766
|
+
backdrop-filter: blur(8px);
|
|
7767
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
7768
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
7769
|
+
}
|
|
7770
|
+
.c-messages--glass .c-messages__content--self .c-messages__text {
|
|
7771
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
|
|
7772
|
+
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
7773
|
+
-webkit-backdrop-filter: blur(8px);
|
|
7774
|
+
backdrop-filter: blur(8px);
|
|
7775
|
+
}
|
|
7776
|
+
.c-messages--glass .c-messages__content--self .c-messages__file {
|
|
7777
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
|
|
7778
|
+
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
7779
|
+
-webkit-backdrop-filter: blur(8px);
|
|
7780
|
+
backdrop-filter: blur(8px);
|
|
7781
|
+
}
|
|
7782
|
+
.c-messages--glass .c-messages__file {
|
|
7783
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
|
|
7784
|
+
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
7785
|
+
-webkit-backdrop-filter: blur(8px);
|
|
7786
|
+
backdrop-filter: blur(8px);
|
|
7787
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
7788
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
7789
|
+
}
|
|
7790
|
+
.c-messages--glass .c-messages__file-icon {
|
|
7791
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
|
|
7792
|
+
-webkit-backdrop-filter: blur(8px);
|
|
7793
|
+
backdrop-filter: blur(8px);
|
|
7794
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
7795
|
+
}
|
|
7796
|
+
.c-messages--glass .c-messages__image {
|
|
7797
|
+
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
7798
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
7799
|
+
}
|
|
7800
|
+
.c-messages--glass .c-messages__avatar {
|
|
7801
|
+
border: 2px solid rgba(255, 255, 255, 0.4);
|
|
7802
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
7803
|
+
}
|
|
7804
|
+
.c-messages--glass .c-messages__name {
|
|
7805
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7806
|
+
font-weight: 600;
|
|
7807
|
+
}
|
|
7808
|
+
.c-messages--glass .c-messages__time {
|
|
7809
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7810
|
+
}
|
|
7811
|
+
.c-messages--glass .c-messages__form {
|
|
7812
|
+
padding-top: 0.75rem;
|
|
7813
|
+
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
|
7814
|
+
margin-top: 1rem;
|
|
7815
|
+
}
|
|
7816
|
+
.c-messages--glass .c-messages__input {
|
|
7817
|
+
background: rgba(255, 255, 255, 0.3);
|
|
7818
|
+
-webkit-backdrop-filter: blur(8px);
|
|
7819
|
+
backdrop-filter: blur(8px);
|
|
7820
|
+
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
7821
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
|
7822
|
+
color: var(--atomix-primary-text-emphasis);
|
|
7823
|
+
}
|
|
7824
|
+
.c-messages--glass .c-messages__input:focus {
|
|
7825
|
+
background: rgba(255, 255, 255, 0.45);
|
|
7826
|
+
border-color: var(--atomix-primary);
|
|
7827
|
+
box-shadow: 0 0 0 3px rgba(var(--atomix-primary-rgb), 0.15);
|
|
7828
|
+
}
|
|
7829
|
+
.c-messages--glass .c-messages__input::-moz-placeholder {
|
|
7830
|
+
opacity: 0.8;
|
|
7831
|
+
color: var(--atomix-primary-text-emphasis);
|
|
7832
|
+
}
|
|
7833
|
+
.c-messages--glass .c-messages__input::placeholder {
|
|
7834
|
+
opacity: 0.8;
|
|
7835
|
+
color: var(--atomix-primary-text-emphasis);
|
|
7836
|
+
}
|
|
7837
|
+
.c-messages--glass .c-messages__option {
|
|
7838
|
+
padding: 0.375rem;
|
|
7839
|
+
border-radius: 0.25rem;
|
|
7840
|
+
transition: background-color 0.2s ease;
|
|
7841
|
+
}
|
|
7842
|
+
.c-messages--glass .c-messages__option:hover:not(:disabled) {
|
|
7843
|
+
background: rgba(var(--atomix-secondary-bg-rgb), 0.4);
|
|
7844
|
+
}
|
|
7845
|
+
.c-messages--glass .c-messages__option:focus-visible {
|
|
7846
|
+
outline: 2px solid var(--atomix-primary);
|
|
7847
|
+
outline-offset: 2px;
|
|
7848
|
+
}
|
|
7849
|
+
.c-messages--glass .c-messages__option-icon {
|
|
7850
|
+
opacity: 0.8;
|
|
7851
|
+
transition: opacity 0.2s ease;
|
|
7852
|
+
}
|
|
7853
|
+
.c-messages__option:hover .c-messages--glass .c-messages__option-icon {
|
|
7854
|
+
opacity: 1;
|
|
7855
|
+
}
|
|
7856
|
+
.c-messages--glass .c-messages__submit {
|
|
7857
|
+
background: rgba(var(--atomix-primary-rgb), 0.9);
|
|
7858
|
+
-webkit-backdrop-filter: blur(8px);
|
|
7859
|
+
backdrop-filter: blur(8px);
|
|
7860
|
+
border: 1px solid rgba(var(--atomix-primary-rgb), 0.4);
|
|
7861
|
+
box-shadow: 0 2px 8px rgba(var(--atomix-primary-rgb), 0.3);
|
|
7862
|
+
transition: all 0.2s ease;
|
|
7863
|
+
}
|
|
7864
|
+
.c-messages--glass .c-messages__submit:hover:not(:disabled) {
|
|
7865
|
+
background: rgba(var(--atomix-primary-rgb), 1);
|
|
7866
|
+
box-shadow: 0 4px 12px rgba(var(--atomix-primary-rgb), 0.4);
|
|
7867
|
+
transform: translateY(-1px);
|
|
7868
|
+
}
|
|
7869
|
+
.c-messages--glass .c-messages__submit:active:not(:disabled) {
|
|
7870
|
+
transform: translateY(0);
|
|
7871
|
+
box-shadow: 0 1px 4px rgba(var(--atomix-primary-rgb), 0.3);
|
|
7872
|
+
}
|
|
7873
|
+
.c-messages--glass .c-messages__submit:disabled {
|
|
7874
|
+
opacity: 0.5;
|
|
7875
|
+
background: rgba(var(--atomix-primary-rgb), 0.5);
|
|
7876
|
+
}
|
|
7703
7877
|
.c-modal {
|
|
7704
7878
|
--atomix-modal-inner-padding: 1rem;
|
|
7705
7879
|
--atomix-modal-content-color: ;
|
|
@@ -7722,7 +7896,7 @@ a, a:hover {
|
|
|
7722
7896
|
--atomix-modal-lg: 62.5rem;
|
|
7723
7897
|
--atomix-modal-xl: 71.25rem;
|
|
7724
7898
|
--atomix-modal-width: var(--atomix-modal-md);
|
|
7725
|
-
position:
|
|
7899
|
+
position: absolute;
|
|
7726
7900
|
inset: 0;
|
|
7727
7901
|
width: 100%;
|
|
7728
7902
|
height: 100%;
|
|
@@ -7732,10 +7906,7 @@ a, a:hover {
|
|
|
7732
7906
|
.c-modal__backdrop {
|
|
7733
7907
|
position: absolute;
|
|
7734
7908
|
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);
|
|
7909
|
+
background-color: var(--atomix-modal-backdrop-bg);
|
|
7739
7910
|
opacity: 0;
|
|
7740
7911
|
transition: 0.3s;
|
|
7741
7912
|
}
|
|
@@ -7749,10 +7920,8 @@ a, a:hover {
|
|
|
7749
7920
|
margin-left: auto;
|
|
7750
7921
|
margin-right: auto;
|
|
7751
7922
|
opacity: 0;
|
|
7752
|
-
z-index: 2;
|
|
7753
7923
|
pointer-events: none;
|
|
7754
7924
|
transition: 0.3s ease;
|
|
7755
|
-
will-change: transform;
|
|
7756
7925
|
}
|
|
7757
7926
|
.c-modal__content {
|
|
7758
7927
|
display: flex;
|
|
@@ -7760,10 +7929,7 @@ a, a:hover {
|
|
|
7760
7929
|
width: 100%;
|
|
7761
7930
|
max-height: 100%;
|
|
7762
7931
|
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);
|
|
7932
|
+
background-color: var(--atomix-modal-content-bg);
|
|
7767
7933
|
box-shadow: var(--atomix-modal-content-box-shadow);
|
|
7768
7934
|
border-radius: var(--atomix-modal-content-border-radius);
|
|
7769
7935
|
overflow: hidden;
|
|
@@ -7819,6 +7985,9 @@ a, a:hover {
|
|
|
7819
7985
|
.c-modal--xl {
|
|
7820
7986
|
--atomix-modal-width: var(--atomix-modal-xl);
|
|
7821
7987
|
}
|
|
7988
|
+
.c-modal--glass .c-modal .c-modal--glass .c-modal__content {
|
|
7989
|
+
background-color: color-mix(in srgb, var(--atomix-modal-content-bg) 50%, transparent);
|
|
7990
|
+
}
|
|
7822
7991
|
.c-modal.is-open .c-modal__backdrop {
|
|
7823
7992
|
opacity: var(--atomix-modal-backdrop-opacity);
|
|
7824
7993
|
}
|
|
@@ -7874,20 +8043,14 @@ a, a:hover {
|
|
|
7874
8043
|
color: var(--atomix-nav-link-color);
|
|
7875
8044
|
}
|
|
7876
8045
|
.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);
|
|
8046
|
+
background-color: var(--atomix-nav-link-hover-bg);
|
|
7881
8047
|
}
|
|
7882
8048
|
.c-nav__link--disabled {
|
|
7883
8049
|
color: var(--atomix-disabled-text-emphasis);
|
|
7884
8050
|
pointer-events: none;
|
|
7885
8051
|
}
|
|
7886
8052
|
.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);
|
|
8053
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
7891
8054
|
}
|
|
7892
8055
|
.c-nav__icon {
|
|
7893
8056
|
font-size: var(--atomix-nav-icon-size);
|
|
@@ -7941,24 +8104,14 @@ a, a:hover {
|
|
|
7941
8104
|
left: 50%;
|
|
7942
8105
|
transform: translateX(-50%);
|
|
7943
8106
|
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);
|
|
8107
|
+
background-color: var(--atomix-body-bg);
|
|
7948
8108
|
border: 1px solid var(--atomix-border-color);
|
|
7949
8109
|
border-radius: 50rem;
|
|
7950
8110
|
box-shadow: var(--atomix-box-shadow-lg);
|
|
7951
8111
|
padding: 0.5rem 1rem;
|
|
7952
8112
|
-webkit-backdrop-filter: blur(10px);
|
|
7953
8113
|
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
|
-
}
|
|
8114
|
+
background-color: rgba(var(--atomix-body-bg-rgb), 0.95);
|
|
7962
8115
|
}
|
|
7963
8116
|
.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
8117
|
margin-left: 0.25rem;
|
|
@@ -7968,10 +8121,7 @@ a, a:hover {
|
|
|
7968
8121
|
border-radius: 0.75rem;
|
|
7969
8122
|
}
|
|
7970
8123
|
.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);
|
|
8124
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
7975
8125
|
}
|
|
7976
8126
|
.c-nav--float-top-center {
|
|
7977
8127
|
top: 1.25rem;
|
|
@@ -8005,10 +8155,7 @@ a, a:hover {
|
|
|
8005
8155
|
position: relative;
|
|
8006
8156
|
padding: var(--atomix-navbar-padding-y) 0;
|
|
8007
8157
|
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);
|
|
8158
|
+
background-color: var(--atomix-navbar-bg);
|
|
8012
8159
|
z-index: var(--atomix-navbar-z-index);
|
|
8013
8160
|
}
|
|
8014
8161
|
.c-navbar__container {
|
|
@@ -8043,10 +8190,7 @@ a, a:hover {
|
|
|
8043
8190
|
width: var(--atomix-navbar-toggler-size);
|
|
8044
8191
|
height: var(--atomix-navbar-toggler-size);
|
|
8045
8192
|
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);
|
|
8193
|
+
background-color: var(--atomix-navbar-toggler-bg);
|
|
8050
8194
|
border: var(--atomix-navbar-toggler-border);
|
|
8051
8195
|
border-radius: var(--atomix-navbar-toggler-border-radius);
|
|
8052
8196
|
cursor: pointer;
|
|
@@ -8099,10 +8243,7 @@ a, a:hover {
|
|
|
8099
8243
|
left: 0;
|
|
8100
8244
|
width: 100%;
|
|
8101
8245
|
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);
|
|
8246
|
+
background-color: var(--atomix-navbar-backdrop-bg);
|
|
8106
8247
|
z-index: var(--atomix-navbar-backdrop-z-index);
|
|
8107
8248
|
opacity: 0;
|
|
8108
8249
|
visibility: hidden;
|
|
@@ -8169,8 +8310,10 @@ a, a:hover {
|
|
|
8169
8310
|
display: flex !important;
|
|
8170
8311
|
}
|
|
8171
8312
|
}
|
|
8172
|
-
.c-navbar--fixed, .c-navbar--fixed-bottom {
|
|
8313
|
+
.c-navbar--fixed:not(.c-navbar--glass), .c-navbar--fixed-bottom:not(.c-navbar--glass) {
|
|
8173
8314
|
position: fixed;
|
|
8315
|
+
}
|
|
8316
|
+
.c-navbar--fixed, .c-navbar--fixed-bottom {
|
|
8174
8317
|
left: 0;
|
|
8175
8318
|
right: 0;
|
|
8176
8319
|
width: 100%;
|
|
@@ -8179,12 +8322,18 @@ a, a:hover {
|
|
|
8179
8322
|
.c-navbar--fixed {
|
|
8180
8323
|
top: 0;
|
|
8181
8324
|
}
|
|
8325
|
+
.c-navbar--glass {
|
|
8326
|
+
position: relative;
|
|
8327
|
+
background-color: transparent;
|
|
8328
|
+
border-bottom: none;
|
|
8329
|
+
}
|
|
8182
8330
|
.c-navbar--fixed-bottom {
|
|
8183
8331
|
bottom: 0;
|
|
8184
8332
|
}
|
|
8185
8333
|
.c-navbar--fixed-bottom .c-nav__dropdown-menu {
|
|
8186
8334
|
top: auto;
|
|
8187
8335
|
bottom: 100%;
|
|
8336
|
+
z-index: 999;
|
|
8188
8337
|
}
|
|
8189
8338
|
.c-navbar--fixed-bottom .c-nav--end .c-nav__dropdown-menu {
|
|
8190
8339
|
left: 50%;
|
|
@@ -8351,23 +8500,23 @@ a, a:hover {
|
|
|
8351
8500
|
--atomix-callout-padding-y: 1rem;
|
|
8352
8501
|
--atomix-callout-tost-padding-x: 1rem;
|
|
8353
8502
|
--atomix-callout-tost-padding-y: 1rem;
|
|
8354
|
-
--atomix-callout-bg:
|
|
8503
|
+
--atomix-callout-bg: var(--atomix-body-bg);
|
|
8355
8504
|
--atomix-callout-border-radius: 6px;
|
|
8356
|
-
--atomix-callout-border-color:
|
|
8505
|
+
--atomix-callout-border-color: var(--atomix-border-color);
|
|
8357
8506
|
--atomix-callout-border-witdh: var(--atomix-border-width);
|
|
8358
8507
|
--atomix-callout-title-font-size: 1rem;
|
|
8359
8508
|
--atomix-callout-title-font-weight: 600;
|
|
8360
|
-
--atomix-callout-title-color:
|
|
8509
|
+
--atomix-callout-title-color: var(--atomix-body-color);
|
|
8361
8510
|
--atomix-callout-text-font-size: ;
|
|
8362
8511
|
--atomix-callout-text-font-weight: 400;
|
|
8363
|
-
--atomix-callout-text-color:
|
|
8512
|
+
--atomix-callout-text-color: var(--atomix-body-color);
|
|
8364
8513
|
--atomix-callout-message-spacer: 0.75rem;
|
|
8365
8514
|
--atomix-callout-icon-size: 1.25rem;
|
|
8366
|
-
--atomix-callout-icon-color:
|
|
8515
|
+
--atomix-callout-icon-color: var(--atomix-primary);
|
|
8367
8516
|
--atomix-callout-close-btn-size: 1.25rem;
|
|
8368
8517
|
--atomix-callout-actions-spacer: 0.5rem;
|
|
8369
8518
|
--atomix-callout-actions-spacer-y: 0.75rem;
|
|
8370
|
-
--atomix-callout-toast-bg:
|
|
8519
|
+
--atomix-callout-toast-bg: var(--atomix-body-bg);
|
|
8371
8520
|
--atomix-callout-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
8372
8521
|
--atomix-callout-transition-duration: 0.3s;
|
|
8373
8522
|
--atomix-callout-transition-timing: cubic-bezier(0.16, 1, 0.3, 1);
|
|
@@ -8378,10 +8527,7 @@ a, a:hover {
|
|
|
8378
8527
|
max-width: var(--atomix-callout-width);
|
|
8379
8528
|
gap: var(--atomix-callout-actions-spacer);
|
|
8380
8529
|
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);
|
|
8530
|
+
background-color: var(--atomix-callout-bg);
|
|
8385
8531
|
border-radius: var(--atomix-callout-border-radius);
|
|
8386
8532
|
border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
|
|
8387
8533
|
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 +8566,9 @@ a, a:hover {
|
|
|
8420
8566
|
.c-callout__actions {
|
|
8421
8567
|
display: flex;
|
|
8422
8568
|
align-items: center;
|
|
8423
|
-
flex-wrap: wrap;
|
|
8424
8569
|
gap: var(--atomix-callout-actions-spacer);
|
|
8425
8570
|
margin-left: auto;
|
|
8571
|
+
margin-right: 10px;
|
|
8426
8572
|
}
|
|
8427
8573
|
.c-callout__close-btn {
|
|
8428
8574
|
display: inline-flex;
|
|
@@ -8462,10 +8608,7 @@ a, a:hover {
|
|
|
8462
8608
|
align-items: flex-start;
|
|
8463
8609
|
justify-content: flex-start;
|
|
8464
8610
|
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);
|
|
8611
|
+
background-color: var(--atomix-callout-toast-bg);
|
|
8469
8612
|
box-shadow: var(--atomix-callout-box-shadow);
|
|
8470
8613
|
animation: calloutToastIn 0.3s var(--atomix-callout-transition-timing) forwards;
|
|
8471
8614
|
}
|
|
@@ -8527,9 +8670,36 @@ a, a:hover {
|
|
|
8527
8670
|
--atomix-callout-title-color: var(--atomix-light);
|
|
8528
8671
|
--atomix-callout-text-color: #dee2e6;
|
|
8529
8672
|
--atomix-callout-bg: var(--atomix-dark);
|
|
8530
|
-
--atomix-callout-border-color: var(--atomix-
|
|
8673
|
+
--atomix-callout-border-color: var(--atomix-dark-border-subtle);
|
|
8531
8674
|
--atomix-callout-icon-color: var(--atomix-light);
|
|
8532
8675
|
}
|
|
8676
|
+
.c-callout--glass {
|
|
8677
|
+
background: none;
|
|
8678
|
+
padding: 0;
|
|
8679
|
+
border: none;
|
|
8680
|
+
display: block;
|
|
8681
|
+
}
|
|
8682
|
+
.c-callout--glass .c-callout__glass-content {
|
|
8683
|
+
display: flex;
|
|
8684
|
+
justify-content: center;
|
|
8685
|
+
align-items: center;
|
|
8686
|
+
padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
|
|
8687
|
+
border: var(--atomix-callout-border-witdh) solid color-mix(in srgb, var(--atomix-callout-border-color) 20%, transparent);
|
|
8688
|
+
max-width: var(--atomix-callout-width);
|
|
8689
|
+
border-radius: var(--atomix-callout-border-radius);
|
|
8690
|
+
width: 100%;
|
|
8691
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
|
|
8692
|
+
}
|
|
8693
|
+
.c-callout--glass .c-callout__title {
|
|
8694
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8695
|
+
}
|
|
8696
|
+
.c-callout--glass .c-callout__text {
|
|
8697
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8698
|
+
}
|
|
8699
|
+
.c-callout--glass.c-callout--toast {
|
|
8700
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
|
|
8701
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
8702
|
+
}
|
|
8533
8703
|
.c-callout.is-hide {
|
|
8534
8704
|
opacity: 0;
|
|
8535
8705
|
transform: translateY(-10px);
|
|
@@ -8670,10 +8840,7 @@ a, a:hover {
|
|
|
8670
8840
|
color: var(--atomix-pagination-color);
|
|
8671
8841
|
font-size: var(--atomix-pagination-font-size);
|
|
8672
8842
|
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);
|
|
8843
|
+
background-color: var(--atomix-pagination-bg);
|
|
8677
8844
|
border-radius: var(--atomix-pagination-border-radius);
|
|
8678
8845
|
border: none;
|
|
8679
8846
|
cursor: pointer;
|
|
@@ -8757,10 +8924,7 @@ a, a:hover {
|
|
|
8757
8924
|
flex-direction: column;
|
|
8758
8925
|
gap: var(--atomix-popover-inner-gap-y) var(--atomix-popover-inner-gap-x);
|
|
8759
8926
|
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);
|
|
8927
|
+
background-color: var(--atomix-popover-bg);
|
|
8764
8928
|
border-radius: var(--atomix-popover-border-radius);
|
|
8765
8929
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
8766
8930
|
}
|
|
@@ -8768,10 +8932,7 @@ a, a:hover {
|
|
|
8768
8932
|
position: absolute;
|
|
8769
8933
|
width: var(--atomix-popover-arrow-size);
|
|
8770
8934
|
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);
|
|
8935
|
+
background-color: var(--atomix-popover-bg);
|
|
8775
8936
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
8776
8937
|
z-index: 1;
|
|
8777
8938
|
transform-origin: center;
|
|
@@ -8813,10 +8974,7 @@ a, a:hover {
|
|
|
8813
8974
|
--atomix-product-review-label-color: var(--atomix-text-muted);
|
|
8814
8975
|
padding: var(--atomix-product-review-padding);
|
|
8815
8976
|
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);
|
|
8977
|
+
background-color: var(--atomix-product-review-bg);
|
|
8820
8978
|
border: 1px solid var(--atomix-product-review-border-color);
|
|
8821
8979
|
width: 100%;
|
|
8822
8980
|
max-width: 37.5rem;
|
|
@@ -8876,10 +9034,7 @@ a, a:hover {
|
|
|
8876
9034
|
padding: 0.75rem;
|
|
8877
9035
|
border: 1px solid var(--atomix-product-review-border-color);
|
|
8878
9036
|
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);
|
|
9037
|
+
background-color: var(--atomix-body-bg);
|
|
8883
9038
|
color: var(--atomix-body-color);
|
|
8884
9039
|
font-family: inherit;
|
|
8885
9040
|
resize: vertical;
|
|
@@ -8927,10 +9082,7 @@ a, a:hover {
|
|
|
8927
9082
|
width: 100%;
|
|
8928
9083
|
max-width: var(--atomix-progress-width);
|
|
8929
9084
|
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);
|
|
9085
|
+
background-color: var(--atomix-progress-bg);
|
|
8934
9086
|
border-radius: var(--atomix-progress-border-radius);
|
|
8935
9087
|
overflow: hidden;
|
|
8936
9088
|
}
|
|
@@ -8938,10 +9090,7 @@ a, a:hover {
|
|
|
8938
9090
|
width: var(--atomix-progress-bar-width);
|
|
8939
9091
|
height: var(--atomix-progress-bar-height);
|
|
8940
9092
|
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);
|
|
9093
|
+
background-color: var(--atomix-progress-bar-bg);
|
|
8945
9094
|
border-radius: var(--atomix-progress-border-radius);
|
|
8946
9095
|
transition: var(--atomix-progress-bar-transition) var(--atomix-progress-bar-easing);
|
|
8947
9096
|
}
|
|
@@ -9148,10 +9297,7 @@ a, a:hover {
|
|
|
9148
9297
|
max-width: var(--atomix-river-width);
|
|
9149
9298
|
padding: var(--atomix-river-padding-y) var(--atomix-river-padding-x);
|
|
9150
9299
|
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);
|
|
9300
|
+
background-color: var(--atomix-river-bg);
|
|
9155
9301
|
}
|
|
9156
9302
|
.c-river__bg {
|
|
9157
9303
|
position: absolute;
|
|
@@ -9171,10 +9317,7 @@ a, a:hover {
|
|
|
9171
9317
|
.c-river__overlay {
|
|
9172
9318
|
position: absolute;
|
|
9173
9319
|
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);
|
|
9320
|
+
background-color: var(--atomix-river-overlay);
|
|
9178
9321
|
opacity: var(--atomix-river-overlay-opacity);
|
|
9179
9322
|
border-radius: var(--atomix-river-border-radius);
|
|
9180
9323
|
}
|
|
@@ -9398,10 +9541,7 @@ a, a:hover {
|
|
|
9398
9541
|
left: 0;
|
|
9399
9542
|
width: 100%;
|
|
9400
9543
|
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);
|
|
9544
|
+
background-color: var(--atomix-sectionintro-overlay-bg-color);
|
|
9405
9545
|
opacity: var(--atomix-sectionintro-overlay-opacity);
|
|
9406
9546
|
}
|
|
9407
9547
|
.c-sectionintro--has-bg {
|
|
@@ -9481,10 +9621,7 @@ a, a:hover {
|
|
|
9481
9621
|
padding: var(--atomix-select-padding-x) var(--atomix-select-padding-y);
|
|
9482
9622
|
color: var(--atomix-select-placeholder-color);
|
|
9483
9623
|
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);
|
|
9624
|
+
background-color: var(--atomix-select-bg);
|
|
9488
9625
|
border: 1px solid var(--atomix-select-border-color);
|
|
9489
9626
|
border-radius: var(--atomix-select-border-radius);
|
|
9490
9627
|
cursor: pointer;
|
|
@@ -9514,10 +9651,7 @@ a, a:hover {
|
|
|
9514
9651
|
height: 0px;
|
|
9515
9652
|
top: calc(100% + var(--atomix-select-panel-spacer-y));
|
|
9516
9653
|
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);
|
|
9654
|
+
background-color: var(--atomix-select-panel-bg);
|
|
9521
9655
|
border-radius: var(--atomix-select-panel-border-radius);
|
|
9522
9656
|
box-shadow: var(--atomix-select-panel-box-shadow);
|
|
9523
9657
|
overflow: hidden;
|
|
@@ -9538,10 +9672,7 @@ a, a:hover {
|
|
|
9538
9672
|
.c-select__item {
|
|
9539
9673
|
padding: var(--atomix-select-item-padding-x) var(--atomix-select-item-padding-y);
|
|
9540
9674
|
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);
|
|
9675
|
+
background-color: var(--atomix-select-item-bg);
|
|
9545
9676
|
border-radius: var(--atomix-select-item-border-radius);
|
|
9546
9677
|
transition-property: all;
|
|
9547
9678
|
transition-duration: 0.2s;
|
|
@@ -9552,10 +9683,7 @@ a, a:hover {
|
|
|
9552
9683
|
cursor: pointer;
|
|
9553
9684
|
}
|
|
9554
9685
|
.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);
|
|
9686
|
+
background-color: var(--atomix-select-item-bg-hover);
|
|
9559
9687
|
}
|
|
9560
9688
|
.c-select--lg {
|
|
9561
9689
|
--atomix-select-font-size: var(--atomix-select-font-size-lg);
|
|
@@ -9605,10 +9733,7 @@ a, a:hover {
|
|
|
9605
9733
|
--atomix-side-menu-inner-padding-top: 1.25rem;
|
|
9606
9734
|
width: 100%;
|
|
9607
9735
|
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);
|
|
9736
|
+
background-color: var(--atomix-side-menu-bg);
|
|
9612
9737
|
border-radius: var(--atomix-side-menu-border-radius);
|
|
9613
9738
|
border: var(--atomix-side-menu-border-width) solid var(--atomix-side-menu-border-color);
|
|
9614
9739
|
box-shadow: var(--atomix-side-menu-box-shadow);
|
|
@@ -9646,10 +9771,7 @@ a, a:hover {
|
|
|
9646
9771
|
justify-content: space-between;
|
|
9647
9772
|
width: 100%;
|
|
9648
9773
|
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);
|
|
9774
|
+
background-color: var(--atomix-side-menu-toggler-bg);
|
|
9653
9775
|
border: none;
|
|
9654
9776
|
border-radius: var(--atomix-side-menu-toggler-border-radius);
|
|
9655
9777
|
cursor: pointer;
|
|
@@ -9665,10 +9787,7 @@ a, a:hover {
|
|
|
9665
9787
|
}
|
|
9666
9788
|
}
|
|
9667
9789
|
.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);
|
|
9790
|
+
background-color: var(--atomix-side-menu-toggler-hover-bg);
|
|
9672
9791
|
}
|
|
9673
9792
|
.c-side-menu__toggler:focus {
|
|
9674
9793
|
outline: 2px solid var(--atomix-focus-ring-color);
|
|
@@ -9706,10 +9825,7 @@ a, a:hover {
|
|
|
9706
9825
|
color: var(--atomix-side-menu-item-color);
|
|
9707
9826
|
font-size: var(--atomix-side-menu-item-font-size);
|
|
9708
9827
|
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);
|
|
9828
|
+
background-color: var(--atomix-side-menu-item-bg);
|
|
9713
9829
|
border: none;
|
|
9714
9830
|
border-radius: var(--atomix-side-menu-item-border-radius);
|
|
9715
9831
|
text-decoration: none;
|
|
@@ -9718,10 +9834,7 @@ a, a:hover {
|
|
|
9718
9834
|
}
|
|
9719
9835
|
.c-side-menu__link:hover {
|
|
9720
9836
|
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);
|
|
9837
|
+
background-color: var(--atomix-side-menu-item-hover-bg);
|
|
9725
9838
|
text-decoration: none;
|
|
9726
9839
|
}
|
|
9727
9840
|
.c-side-menu__link:focus {
|
|
@@ -9733,18 +9846,12 @@ a, a:hover {
|
|
|
9733
9846
|
}
|
|
9734
9847
|
.c-side-menu__link.is-active {
|
|
9735
9848
|
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);
|
|
9849
|
+
background-color: var(--atomix-side-menu-item-active-bg);
|
|
9740
9850
|
font-weight: 500;
|
|
9741
9851
|
}
|
|
9742
9852
|
.c-side-menu__link.is-disabled, .c-side-menu__link[aria-disabled=true] {
|
|
9743
9853
|
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);
|
|
9854
|
+
background-color: var(--atomix-side-menu-item-disabled-bg);
|
|
9748
9855
|
cursor: not-allowed;
|
|
9749
9856
|
pointer-events: none;
|
|
9750
9857
|
opacity: 0.6;
|
|
@@ -9756,6 +9863,10 @@ a, a:hover {
|
|
|
9756
9863
|
.c-side-menu__link-text {
|
|
9757
9864
|
flex: 1 1;
|
|
9758
9865
|
}
|
|
9866
|
+
.c-side-menu--glass {
|
|
9867
|
+
background-color: transparent;
|
|
9868
|
+
border-bottom: none;
|
|
9869
|
+
}
|
|
9759
9870
|
.c-side-menu.is-open .c-side-menu__toggler-icon {
|
|
9760
9871
|
transform: rotate(90deg);
|
|
9761
9872
|
}
|
|
@@ -9788,10 +9899,7 @@ a, a:hover {
|
|
|
9788
9899
|
display: inline-block;
|
|
9789
9900
|
width: var(--atomix-skeleton-width);
|
|
9790
9901
|
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);
|
|
9902
|
+
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
9903
|
background-size: 400% 100%;
|
|
9796
9904
|
border-radius: var(--atomix-skeleton-border-radius);
|
|
9797
9905
|
animation-name: atomix--skeleton-loading;
|
|
@@ -9887,10 +9995,7 @@ a, a:hover {
|
|
|
9887
9995
|
display: flex;
|
|
9888
9996
|
align-items: center;
|
|
9889
9997
|
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);
|
|
9998
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
9894
9999
|
border: 2px dashed var(--atomix-primary-border-subtle);
|
|
9895
10000
|
border-radius: 0.5rem;
|
|
9896
10001
|
}
|
|
@@ -9930,10 +10035,7 @@ a, a:hover {
|
|
|
9930
10035
|
height: var(--atomix-slider-nav-size);
|
|
9931
10036
|
border: none;
|
|
9932
10037
|
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);
|
|
10038
|
+
background-color: var(--atomix-primary-bg-subtle);
|
|
9937
10039
|
color: var(--atomix-primary-text);
|
|
9938
10040
|
cursor: pointer;
|
|
9939
10041
|
pointer-events: auto;
|
|
@@ -9946,10 +10048,7 @@ a, a:hover {
|
|
|
9946
10048
|
}
|
|
9947
10049
|
.c-slider__navigation-prev:hover,
|
|
9948
10050
|
.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);
|
|
10051
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
9953
10052
|
transform: translateY(-50%) scale(1.05);
|
|
9954
10053
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
9955
10054
|
}
|
|
@@ -10001,29 +10100,20 @@ a, a:hover {
|
|
|
10001
10100
|
height: 0.5rem;
|
|
10002
10101
|
border-radius: 50rem;
|
|
10003
10102
|
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);
|
|
10103
|
+
background-color: var(--atomix-tertiary-bg-subtle);
|
|
10008
10104
|
cursor: pointer;
|
|
10009
10105
|
pointer-events: auto;
|
|
10010
10106
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10011
10107
|
}
|
|
10012
10108
|
.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);
|
|
10109
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
10017
10110
|
transform: scale(1.2);
|
|
10018
10111
|
}
|
|
10019
10112
|
.c-slider__pagination-bullet:active {
|
|
10020
10113
|
transform: scale(1.1);
|
|
10021
10114
|
}
|
|
10022
10115
|
.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);
|
|
10116
|
+
background-color: var(--atomix-primary);
|
|
10027
10117
|
transform: scale(1.2);
|
|
10028
10118
|
}
|
|
10029
10119
|
.c-slider__empty-message {
|
|
@@ -10180,10 +10270,7 @@ a, a:hover {
|
|
|
10180
10270
|
.c-steps__line {
|
|
10181
10271
|
width: var(--atomix-steps-line-width);
|
|
10182
10272
|
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);
|
|
10273
|
+
background-color: var(--atomix-steps-item-bg);
|
|
10187
10274
|
transition: 1s;
|
|
10188
10275
|
}
|
|
10189
10276
|
.c-steps__content {
|
|
@@ -10199,10 +10286,7 @@ a, a:hover {
|
|
|
10199
10286
|
height: var(--atomix-steps-item-number-size);
|
|
10200
10287
|
color: var(--atomix-steps-item-number-color);
|
|
10201
10288
|
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);
|
|
10289
|
+
background-color: var(--atomix-steps-item-number-bg);
|
|
10206
10290
|
border-radius: var(--atomix-steps-item-number-border-radius);
|
|
10207
10291
|
}
|
|
10208
10292
|
.c-steps__text {
|
|
@@ -10279,10 +10363,7 @@ a, a:hover {
|
|
|
10279
10363
|
border-radius: var(--atomix-tabs-nav-btn-border-radius);
|
|
10280
10364
|
border: var(--atomix-tabs-nav-btn-border-width) solid transparent;
|
|
10281
10365
|
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);
|
|
10366
|
+
background-color: var(--atomix-tabs-nav-btn-bg);
|
|
10286
10367
|
transition-property: all;
|
|
10287
10368
|
transition-duration: 0.2s;
|
|
10288
10369
|
transition-timing-function: ease-in-out;
|
|
@@ -10293,20 +10374,14 @@ a, a:hover {
|
|
|
10293
10374
|
border-color: transparent transparent var(--atomix-tabs-nav-btn-border-active-color) transparent;
|
|
10294
10375
|
}
|
|
10295
10376
|
.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);
|
|
10377
|
+
background-color: var(--atomix-tabs-nav-btn-bg-hover);
|
|
10300
10378
|
}
|
|
10301
10379
|
.c-tabs__nav-btn:disabled, .c-tabs__nav-btn.is-disabled {
|
|
10302
10380
|
--atomix-tabs-nav-btn-border-active-color: var(
|
|
10303
10381
|
--atomix-tabs-nav-btn-border-disabled-color
|
|
10304
10382
|
);
|
|
10305
10383
|
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);
|
|
10384
|
+
background-color: var(--atomix-tabs-nav-btn-bg-disabled);
|
|
10310
10385
|
pointer-events: none;
|
|
10311
10386
|
}
|
|
10312
10387
|
.c-tabs__nav-btn:focus-visible {
|
|
@@ -10351,10 +10426,7 @@ a, a:hover {
|
|
|
10351
10426
|
width: 100%;
|
|
10352
10427
|
max-width: var(--atomix-testimonial-width);
|
|
10353
10428
|
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);
|
|
10429
|
+
background-color: var(--atomix-testimonial-bg);
|
|
10358
10430
|
}
|
|
10359
10431
|
.c-testimonial__quote {
|
|
10360
10432
|
color: var(--atomix-testimonial-quote-color);
|
|
@@ -10398,10 +10470,7 @@ a, a:hover {
|
|
|
10398
10470
|
margin-bottom: 1.5rem;
|
|
10399
10471
|
border: 1px solid var(--atomix-todo-border-color);
|
|
10400
10472
|
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);
|
|
10473
|
+
background-color: var(--atomix-todo-bg);
|
|
10405
10474
|
color: var(--atomix-todo-color);
|
|
10406
10475
|
padding: 1.25rem;
|
|
10407
10476
|
}
|
|
@@ -10443,10 +10512,7 @@ a, a:hover {
|
|
|
10443
10512
|
transition: background-color 0.2s ease;
|
|
10444
10513
|
}
|
|
10445
10514
|
.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);
|
|
10515
|
+
background-color: var(--atomix-todo-item-hover-bg);
|
|
10450
10516
|
}
|
|
10451
10517
|
.c-todo__item--completed .c-todo__item-text {
|
|
10452
10518
|
color: var(--atomix-todo-completed-color);
|
|
@@ -10534,10 +10600,7 @@ a, a:hover {
|
|
|
10534
10600
|
flex: 0 0 var(--atomix-toggle-switch-width);
|
|
10535
10601
|
width: var(--atomix-toggle-switch-width);
|
|
10536
10602
|
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);
|
|
10603
|
+
background-color: var(--atomix-toggle-switch-bg);
|
|
10541
10604
|
border-radius: var(--atomix-toggle-switch-border-radius);
|
|
10542
10605
|
-webkit-user-select: none;
|
|
10543
10606
|
-moz-user-select: none;
|
|
@@ -10554,10 +10617,7 @@ a, a:hover {
|
|
|
10554
10617
|
width: var(--atomix-toggle-switch-handle-width);
|
|
10555
10618
|
height: var(--atomix-toggle-switch-handle-height);
|
|
10556
10619
|
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);
|
|
10620
|
+
background-color: var(--atomix-toggle-switch-handle-bg);
|
|
10561
10621
|
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
10562
10622
|
transition-property: all;
|
|
10563
10623
|
transition-duration: 0.2s;
|
|
@@ -10578,10 +10638,7 @@ a, a:hover {
|
|
|
10578
10638
|
pointer-events: none;
|
|
10579
10639
|
}
|
|
10580
10640
|
.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);
|
|
10641
|
+
background-color: var(--atomix-toggle-switch-disabled-bg);
|
|
10585
10642
|
}
|
|
10586
10643
|
.c-toggle.is-disabled.is-on {
|
|
10587
10644
|
pointer-events: none;
|
|
@@ -10590,10 +10647,7 @@ a, a:hover {
|
|
|
10590
10647
|
content: "";
|
|
10591
10648
|
position: absolute;
|
|
10592
10649
|
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);
|
|
10650
|
+
background-color: rgba(173, 181, 189, 0.6);
|
|
10597
10651
|
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
10598
10652
|
}
|
|
10599
10653
|
.c-tooltip {
|
|
@@ -10627,10 +10681,7 @@ a, a:hover {
|
|
|
10627
10681
|
font-size: var(--atomix-tooltip-font-size);
|
|
10628
10682
|
font-weight: var(--atomix-tooltip-font-weight);
|
|
10629
10683
|
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);
|
|
10684
|
+
background-color: var(--atomix-tooltip-bg);
|
|
10634
10685
|
border-radius: var(--atomix-tooltip-border-radius);
|
|
10635
10686
|
z-index: 2;
|
|
10636
10687
|
opacity: 0;
|
|
@@ -10648,10 +10699,7 @@ a, a:hover {
|
|
|
10648
10699
|
transform: translateX(-50%) rotate(45deg);
|
|
10649
10700
|
width: var(--atomix-tooltip-arrow-size);
|
|
10650
10701
|
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);
|
|
10702
|
+
background-color: var(--atomix-tooltip-bg);
|
|
10655
10703
|
z-index: 1;
|
|
10656
10704
|
}
|
|
10657
10705
|
.c-tooltip--top-left {
|
|
@@ -10764,10 +10812,7 @@ a, a:hover {
|
|
|
10764
10812
|
width: 100%;
|
|
10765
10813
|
max-width: var(--atomix-upload-width);
|
|
10766
10814
|
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);
|
|
10815
|
+
background-color: var(--atomix-upload-bg);
|
|
10771
10816
|
border-radius: var(--atomix-upload-border-radius);
|
|
10772
10817
|
transition-property: all;
|
|
10773
10818
|
transition-duration: 0.2s;
|
|
@@ -10775,10 +10820,7 @@ a, a:hover {
|
|
|
10775
10820
|
transition-delay: 0s;
|
|
10776
10821
|
}
|
|
10777
10822
|
.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);
|
|
10823
|
+
background-color: var(--atomix-upload-hover-bg);
|
|
10782
10824
|
}
|
|
10783
10825
|
.c-upload__inner {
|
|
10784
10826
|
display: flex;
|
|
@@ -10791,10 +10833,7 @@ a, a:hover {
|
|
|
10791
10833
|
.c-upload__icon {
|
|
10792
10834
|
font-size: var(--atomix-upload-icon-size);
|
|
10793
10835
|
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);
|
|
10836
|
+
background-color: var(--atomix-upload-icon-bg);
|
|
10798
10837
|
border-radius: 50rem;
|
|
10799
10838
|
}
|
|
10800
10839
|
.c-upload__title {
|
|
@@ -10932,37 +10971,34 @@ a, a:hover {
|
|
|
10932
10971
|
pointer-events: none;
|
|
10933
10972
|
}
|
|
10934
10973
|
.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
|
|
10974
|
+
--atomix--video-player-bg: #000;
|
|
10975
|
+
--atomix--video-player-border-radius: 12px;
|
|
10976
|
+
--atomix--video-player-controls-padding: 20px 16px 16px;
|
|
10977
|
+
--atomix--video-player-progress-height: 4px;
|
|
10978
|
+
--atomix--video-player-button-size: 40px;
|
|
10979
|
+
--atomix--video-player-font-size: 14px;
|
|
10980
|
+
--atomix--video-player-transition: all 0.3s ease;
|
|
10981
|
+
--atomix--video-player-volume-width: 80px;
|
|
10982
|
+
--atomix--video-player-volume-width-mobile: 60px;
|
|
10983
|
+
--atomix--video-player-volume-height: 4px;
|
|
10984
|
+
--atomix--video-player-volume-height-hover: 6px;
|
|
10985
|
+
--atomix--video-player-volume-thumb-size: 12px;
|
|
10986
|
+
--atomix--video-player-volume-bg: rgba(255, 255, 255, 0.3);
|
|
10987
|
+
--atomix--video-player-volume-bg-hover: rgba(255, 255, 255, 0.5);
|
|
10988
|
+
--atomix--video-player-volume-fill: var(--atomix-primary);
|
|
10989
|
+
--atomix--video-player-volume-fill-hover: var(--atomix-primary-7);
|
|
10990
|
+
--atomix--video-player-volume-fill-active: var(--atomix-primary-8);
|
|
10991
|
+
--atomix--video-player-subtitle-bg: rgba(0, 0, 0, 0.85);
|
|
10992
|
+
--atomix--video-player-subtitle-color: #ffffff;
|
|
10993
|
+
--atomix--video-player-subtitle-font-size: 18px;
|
|
10994
|
+
--atomix--video-player-subtitle-font-weight: 500;
|
|
10995
|
+
--atomix--video-player-subtitle-line-height: 1.5;
|
|
10996
|
+
--atomix--video-player-subtitle-border-radius: 6px;
|
|
10997
|
+
--atomix--video-player-subtitle-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
|
10998
|
+
--atomix--video-player-subtitle-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
10960
10999
|
position: relative;
|
|
10961
11000
|
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);
|
|
11001
|
+
background-color: var(--atomix--video-player-bg, #000);
|
|
10966
11002
|
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
10967
11003
|
overflow: hidden;
|
|
10968
11004
|
font-family: var(--atomix--font-family-base);
|
|
@@ -11032,10 +11068,7 @@ a, a:hover {
|
|
|
11032
11068
|
bottom: 0;
|
|
11033
11069
|
left: 0;
|
|
11034
11070
|
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);
|
|
11071
|
+
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
|
|
11039
11072
|
padding: 1.25rem 1rem 1rem;
|
|
11040
11073
|
opacity: 0;
|
|
11041
11074
|
visibility: hidden;
|
|
@@ -11219,10 +11252,7 @@ a, a:hover {
|
|
|
11219
11252
|
bottom: 3.125rem;
|
|
11220
11253
|
right: 0;
|
|
11221
11254
|
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);
|
|
11255
|
+
background-color: rgba(var(--atomix-primary-rgb), 0.7);
|
|
11226
11256
|
border-radius: 0.5rem;
|
|
11227
11257
|
padding: 0.5rem;
|
|
11228
11258
|
-webkit-backdrop-filter: blur(10px);
|
|
@@ -11418,6 +11448,24 @@ a, a:hover {
|
|
|
11418
11448
|
.c-video-player--ambient .c-video-player__ambient-canvas {
|
|
11419
11449
|
display: block;
|
|
11420
11450
|
}
|
|
11451
|
+
.c-video-player--glass {
|
|
11452
|
+
position: relative;
|
|
11453
|
+
}
|
|
11454
|
+
.c-video-player__glass-overlay {
|
|
11455
|
+
overflow: hidden;
|
|
11456
|
+
position: absolute;
|
|
11457
|
+
top: 0;
|
|
11458
|
+
left: 0;
|
|
11459
|
+
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
11460
|
+
}
|
|
11461
|
+
.c-video-player__glass-content {
|
|
11462
|
+
position: absolute;
|
|
11463
|
+
top: 0;
|
|
11464
|
+
left: 0;
|
|
11465
|
+
right: 0;
|
|
11466
|
+
bottom: 0;
|
|
11467
|
+
pointer-events: auto;
|
|
11468
|
+
}
|
|
11421
11469
|
.c-video-player__subtitles {
|
|
11422
11470
|
position: absolute;
|
|
11423
11471
|
bottom: 5rem;
|
|
@@ -11472,10 +11520,7 @@ a, a:hover {
|
|
|
11472
11520
|
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11473
11521
|
}
|
|
11474
11522
|
.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);
|
|
11523
|
+
background-color: var(--atomix-body-bg);
|
|
11479
11524
|
border: 1px solid var(--atomix-primary-border-subtle);
|
|
11480
11525
|
border-radius: 0.75rem;
|
|
11481
11526
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
@@ -11529,10 +11574,7 @@ a, a:hover {
|
|
|
11529
11574
|
border: 2px solid transparent;
|
|
11530
11575
|
border-radius: 0.5rem;
|
|
11531
11576
|
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);
|
|
11577
|
+
background-color: transparent;
|
|
11536
11578
|
cursor: pointer;
|
|
11537
11579
|
overflow: hidden;
|
|
11538
11580
|
position: relative;
|
|
@@ -11590,10 +11632,7 @@ body.is-open-photoviewer {
|
|
|
11590
11632
|
width: 100vw;
|
|
11591
11633
|
height: 100vh;
|
|
11592
11634
|
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);
|
|
11635
|
+
background-color: transparent;
|
|
11597
11636
|
opacity: 1;
|
|
11598
11637
|
transition-property: opacity;
|
|
11599
11638
|
}
|
|
@@ -12248,6 +12287,35 @@ body.is-open-photoviewer {
|
|
|
12248
12287
|
display: block !important;
|
|
12249
12288
|
clear: both !important;
|
|
12250
12289
|
}
|
|
12290
|
+
.u-glass-clean-root {
|
|
12291
|
+
isolation: initial !important;
|
|
12292
|
+
contain: none !important;
|
|
12293
|
+
transform-style: flat !important;
|
|
12294
|
+
will-change: auto !important;
|
|
12295
|
+
transform: none !important;
|
|
12296
|
+
z-index: auto;
|
|
12297
|
+
z-index: initial;
|
|
12298
|
+
}
|
|
12299
|
+
.u-glass-debug {
|
|
12300
|
+
outline: 2px dashed red !important;
|
|
12301
|
+
}
|
|
12302
|
+
.u-glass-debug::after {
|
|
12303
|
+
content: "Glass Debug";
|
|
12304
|
+
position: absolute;
|
|
12305
|
+
top: -20px;
|
|
12306
|
+
left: 0;
|
|
12307
|
+
background: red;
|
|
12308
|
+
color: white;
|
|
12309
|
+
font-size: 10px;
|
|
12310
|
+
padding: 2px 4px;
|
|
12311
|
+
z-index: 9999;
|
|
12312
|
+
}
|
|
12313
|
+
@media (prefers-reduced-motion: reduce) {
|
|
12314
|
+
.u-glass-no-motion {
|
|
12315
|
+
transition: none !important;
|
|
12316
|
+
animation: none !important;
|
|
12317
|
+
}
|
|
12318
|
+
}
|
|
12251
12319
|
.u-link-primary {
|
|
12252
12320
|
color: RGBA(var(--atomix-primary-rgb), var(--atomix-u-link-opacity, 1)) !important;
|
|
12253
12321
|
text-decoration-color: RGBA(var(--atomix-primary-rgb), var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
@@ -12498,19 +12566,19 @@ body.is-open-photoviewer {
|
|
|
12498
12566
|
border-width: 5px;
|
|
12499
12567
|
}
|
|
12500
12568
|
.u-border-opacity-10 {
|
|
12501
|
-
: 0.1;
|
|
12569
|
+
--atomix-u-u-border-opacity-10: 0.1;
|
|
12502
12570
|
}
|
|
12503
12571
|
.u-border-opacity-25 {
|
|
12504
|
-
: 0.25;
|
|
12572
|
+
--atomix-u-u-border-opacity-25: 0.25;
|
|
12505
12573
|
}
|
|
12506
12574
|
.u-border-opacity-50 {
|
|
12507
|
-
: 0.5;
|
|
12575
|
+
--atomix-u-u-border-opacity-50: 0.5;
|
|
12508
12576
|
}
|
|
12509
12577
|
.u-border-opacity-75 {
|
|
12510
|
-
: 0.75;
|
|
12578
|
+
--atomix-u-u-border-opacity-75: 0.75;
|
|
12511
12579
|
}
|
|
12512
12580
|
.u-border-opacity-100 {
|
|
12513
|
-
: 1;
|
|
12581
|
+
--atomix-u-u-border-opacity-100: 1;
|
|
12514
12582
|
}
|
|
12515
12583
|
.u-rounded {
|
|
12516
12584
|
border-radius: var(--atomix-border-radius);
|
|
@@ -12846,27 +12914,27 @@ body.is-open-photoviewer {
|
|
|
12846
12914
|
order: 6;
|
|
12847
12915
|
}
|
|
12848
12916
|
.u-link-opacityhover-10 {
|
|
12849
|
-
: 0.1;
|
|
12917
|
+
--atomix-u-u-link-opacity-10: 0.1;
|
|
12850
12918
|
}
|
|
12851
|
-
.u-link-
|
|
12852
|
-
: 0.25;
|
|
12919
|
+
.u-link-opacityhover-25 {
|
|
12920
|
+
--atomix-u-u-link-opacity-25: 0.25;
|
|
12853
12921
|
}
|
|
12854
|
-
.u-link-
|
|
12855
|
-
: 0.5;
|
|
12922
|
+
.u-link-opacityhover-50 {
|
|
12923
|
+
--atomix-u-u-link-opacity-50: 0.5;
|
|
12856
12924
|
}
|
|
12857
|
-
.u-link-
|
|
12858
|
-
: 0.75;
|
|
12925
|
+
.u-link-opacityhover-75 {
|
|
12926
|
+
--atomix-u-u-link-opacity-75: 0.75;
|
|
12859
12927
|
}
|
|
12860
|
-
.u-link-
|
|
12861
|
-
: 1;
|
|
12928
|
+
.u-link-opacityhover-100 {
|
|
12929
|
+
--atomix-u-u-link-opacity-100: 1;
|
|
12862
12930
|
}
|
|
12863
12931
|
.u-link-offsethover-1 {
|
|
12864
12932
|
text-underline-offset: 0.125em;
|
|
12865
12933
|
}
|
|
12866
|
-
.u-link-
|
|
12934
|
+
.u-link-offsethover-2 {
|
|
12867
12935
|
text-underline-offset: 0.25em;
|
|
12868
12936
|
}
|
|
12869
|
-
.u-link-
|
|
12937
|
+
.u-link-offsethover-3 {
|
|
12870
12938
|
text-underline-offset: 0.375em;
|
|
12871
12939
|
}
|
|
12872
12940
|
.u-link-underline-primary {
|
|
@@ -12903,22 +12971,22 @@ body.is-open-photoviewer {
|
|
|
12903
12971
|
text-decoration-color: rgba(var(--atomix-link-color-rgb), var(--atomix-u-link-underline-opacity, 1));
|
|
12904
12972
|
}
|
|
12905
12973
|
.u-link-underline-opacityhover-0 {
|
|
12906
|
-
: 0;
|
|
12974
|
+
--atomix-u-u-link-underline-opacity-0: 0;
|
|
12907
12975
|
}
|
|
12908
|
-
.u-link-underline-
|
|
12909
|
-
: 0.1;
|
|
12976
|
+
.u-link-underline-opacityhover-10 {
|
|
12977
|
+
--atomix-u-u-link-underline-opacity-10: 0.1;
|
|
12910
12978
|
}
|
|
12911
|
-
.u-link-underline-
|
|
12912
|
-
: 0.25;
|
|
12979
|
+
.u-link-underline-opacityhover-25 {
|
|
12980
|
+
--atomix-u-u-link-underline-opacity-25: 0.25;
|
|
12913
12981
|
}
|
|
12914
|
-
.u-link-underline-
|
|
12915
|
-
: 0.5;
|
|
12982
|
+
.u-link-underline-opacityhover-50 {
|
|
12983
|
+
--atomix-u-u-link-underline-opacity-50: 0.5;
|
|
12916
12984
|
}
|
|
12917
|
-
.u-link-underline-
|
|
12918
|
-
: 0.75;
|
|
12985
|
+
.u-link-underline-opacityhover-75 {
|
|
12986
|
+
--atomix-u-u-link-underline-opacity-75: 0.75;
|
|
12919
12987
|
}
|
|
12920
|
-
.u-link-underline-
|
|
12921
|
-
: 1;
|
|
12988
|
+
.u-link-underline-opacityhover-100 {
|
|
12989
|
+
--atomix-u-u-link-underline-opacity-100: 1;
|
|
12922
12990
|
}
|
|
12923
12991
|
.u-object-fit-contain {
|
|
12924
12992
|
-o-object-fit: contain;
|
|
@@ -13162,13 +13230,13 @@ body.is-open-photoviewer {
|
|
|
13162
13230
|
.u-m-1 {
|
|
13163
13231
|
margin: 0.25rem;
|
|
13164
13232
|
}
|
|
13165
|
-
.u-m-
|
|
13233
|
+
.u-m-1\.5 {
|
|
13166
13234
|
margin: 0.375rem;
|
|
13167
13235
|
}
|
|
13168
13236
|
.u-m-2 {
|
|
13169
13237
|
margin: 0.5rem;
|
|
13170
13238
|
}
|
|
13171
|
-
.u-m-
|
|
13239
|
+
.u-m-2\.5 {
|
|
13172
13240
|
margin: 0.625rem;
|
|
13173
13241
|
}
|
|
13174
13242
|
.u-m-3 {
|
|
@@ -13236,7 +13304,7 @@ body.is-open-photoviewer {
|
|
|
13236
13304
|
margin-right: 0.25rem;
|
|
13237
13305
|
margin-left: 0.25rem;
|
|
13238
13306
|
}
|
|
13239
|
-
.u-mx-
|
|
13307
|
+
.u-mx-1\.5 {
|
|
13240
13308
|
margin-right: 0.375rem;
|
|
13241
13309
|
margin-left: 0.375rem;
|
|
13242
13310
|
}
|
|
@@ -13244,7 +13312,7 @@ body.is-open-photoviewer {
|
|
|
13244
13312
|
margin-right: 0.5rem;
|
|
13245
13313
|
margin-left: 0.5rem;
|
|
13246
13314
|
}
|
|
13247
|
-
.u-mx-
|
|
13315
|
+
.u-mx-2\.5 {
|
|
13248
13316
|
margin-right: 0.625rem;
|
|
13249
13317
|
margin-left: 0.625rem;
|
|
13250
13318
|
}
|
|
@@ -13332,7 +13400,7 @@ body.is-open-photoviewer {
|
|
|
13332
13400
|
margin-top: 0.25rem;
|
|
13333
13401
|
margin-bottom: 0.25rem;
|
|
13334
13402
|
}
|
|
13335
|
-
.u-my-
|
|
13403
|
+
.u-my-1\.5 {
|
|
13336
13404
|
margin-top: 0.375rem;
|
|
13337
13405
|
margin-bottom: 0.375rem;
|
|
13338
13406
|
}
|
|
@@ -13340,7 +13408,7 @@ body.is-open-photoviewer {
|
|
|
13340
13408
|
margin-top: 0.5rem;
|
|
13341
13409
|
margin-bottom: 0.5rem;
|
|
13342
13410
|
}
|
|
13343
|
-
.u-my-
|
|
13411
|
+
.u-my-2\.5 {
|
|
13344
13412
|
margin-top: 0.625rem;
|
|
13345
13413
|
margin-bottom: 0.625rem;
|
|
13346
13414
|
}
|
|
@@ -13426,13 +13494,13 @@ body.is-open-photoviewer {
|
|
|
13426
13494
|
.u-mt-1 {
|
|
13427
13495
|
margin-top: 0.25rem;
|
|
13428
13496
|
}
|
|
13429
|
-
.u-mt-
|
|
13497
|
+
.u-mt-1\.5 {
|
|
13430
13498
|
margin-top: 0.375rem;
|
|
13431
13499
|
}
|
|
13432
13500
|
.u-mt-2 {
|
|
13433
13501
|
margin-top: 0.5rem;
|
|
13434
13502
|
}
|
|
13435
|
-
.u-mt-
|
|
13503
|
+
.u-mt-2\.5 {
|
|
13436
13504
|
margin-top: 0.625rem;
|
|
13437
13505
|
}
|
|
13438
13506
|
.u-mt-3 {
|
|
@@ -13498,13 +13566,13 @@ body.is-open-photoviewer {
|
|
|
13498
13566
|
.u-me-1 {
|
|
13499
13567
|
margin-right: 0.25rem;
|
|
13500
13568
|
}
|
|
13501
|
-
.u-me-
|
|
13569
|
+
.u-me-1\.5 {
|
|
13502
13570
|
margin-right: 0.375rem;
|
|
13503
13571
|
}
|
|
13504
13572
|
.u-me-2 {
|
|
13505
13573
|
margin-right: 0.5rem;
|
|
13506
13574
|
}
|
|
13507
|
-
.u-me-
|
|
13575
|
+
.u-me-2\.5 {
|
|
13508
13576
|
margin-right: 0.625rem;
|
|
13509
13577
|
}
|
|
13510
13578
|
.u-me-3 {
|
|
@@ -13570,13 +13638,13 @@ body.is-open-photoviewer {
|
|
|
13570
13638
|
.u-mb-1 {
|
|
13571
13639
|
margin-bottom: 0.25rem;
|
|
13572
13640
|
}
|
|
13573
|
-
.u-mb-
|
|
13641
|
+
.u-mb-1\.5 {
|
|
13574
13642
|
margin-bottom: 0.375rem;
|
|
13575
13643
|
}
|
|
13576
13644
|
.u-mb-2 {
|
|
13577
13645
|
margin-bottom: 0.5rem;
|
|
13578
13646
|
}
|
|
13579
|
-
.u-mb-
|
|
13647
|
+
.u-mb-2\.5 {
|
|
13580
13648
|
margin-bottom: 0.625rem;
|
|
13581
13649
|
}
|
|
13582
13650
|
.u-mb-3 {
|
|
@@ -13642,13 +13710,13 @@ body.is-open-photoviewer {
|
|
|
13642
13710
|
.u-ms-1 {
|
|
13643
13711
|
margin-left: 0.25rem;
|
|
13644
13712
|
}
|
|
13645
|
-
.u-ms-
|
|
13713
|
+
.u-ms-1\.5 {
|
|
13646
13714
|
margin-left: 0.375rem;
|
|
13647
13715
|
}
|
|
13648
13716
|
.u-ms-2 {
|
|
13649
13717
|
margin-left: 0.5rem;
|
|
13650
13718
|
}
|
|
13651
|
-
.u-ms-
|
|
13719
|
+
.u-ms-2\.5 {
|
|
13652
13720
|
margin-left: 0.625rem;
|
|
13653
13721
|
}
|
|
13654
13722
|
.u-ms-3 {
|
|
@@ -13714,13 +13782,13 @@ body.is-open-photoviewer {
|
|
|
13714
13782
|
.u-p-1 {
|
|
13715
13783
|
padding: 0.25rem;
|
|
13716
13784
|
}
|
|
13717
|
-
.u-p-
|
|
13785
|
+
.u-p-1\.5 {
|
|
13718
13786
|
padding: 0.375rem;
|
|
13719
13787
|
}
|
|
13720
13788
|
.u-p-2 {
|
|
13721
13789
|
padding: 0.5rem;
|
|
13722
13790
|
}
|
|
13723
|
-
.u-p-
|
|
13791
|
+
.u-p-2\.5 {
|
|
13724
13792
|
padding: 0.625rem;
|
|
13725
13793
|
}
|
|
13726
13794
|
.u-p-3 {
|
|
@@ -13785,7 +13853,7 @@ body.is-open-photoviewer {
|
|
|
13785
13853
|
padding-right: 0.25rem;
|
|
13786
13854
|
padding-left: 0.25rem;
|
|
13787
13855
|
}
|
|
13788
|
-
.u-px-
|
|
13856
|
+
.u-px-1\.5 {
|
|
13789
13857
|
padding-right: 0.375rem;
|
|
13790
13858
|
padding-left: 0.375rem;
|
|
13791
13859
|
}
|
|
@@ -13793,7 +13861,7 @@ body.is-open-photoviewer {
|
|
|
13793
13861
|
padding-right: 0.5rem;
|
|
13794
13862
|
padding-left: 0.5rem;
|
|
13795
13863
|
}
|
|
13796
|
-
.u-px-
|
|
13864
|
+
.u-px-2\.5 {
|
|
13797
13865
|
padding-right: 0.625rem;
|
|
13798
13866
|
padding-left: 0.625rem;
|
|
13799
13867
|
}
|
|
@@ -13877,7 +13945,7 @@ body.is-open-photoviewer {
|
|
|
13877
13945
|
padding-top: 0.25rem;
|
|
13878
13946
|
padding-bottom: 0.25rem;
|
|
13879
13947
|
}
|
|
13880
|
-
.u-py-
|
|
13948
|
+
.u-py-1\.5 {
|
|
13881
13949
|
padding-top: 0.375rem;
|
|
13882
13950
|
padding-bottom: 0.375rem;
|
|
13883
13951
|
}
|
|
@@ -13885,7 +13953,7 @@ body.is-open-photoviewer {
|
|
|
13885
13953
|
padding-top: 0.5rem;
|
|
13886
13954
|
padding-bottom: 0.5rem;
|
|
13887
13955
|
}
|
|
13888
|
-
.u-py-
|
|
13956
|
+
.u-py-2\.5 {
|
|
13889
13957
|
padding-top: 0.625rem;
|
|
13890
13958
|
padding-bottom: 0.625rem;
|
|
13891
13959
|
}
|
|
@@ -13967,13 +14035,13 @@ body.is-open-photoviewer {
|
|
|
13967
14035
|
.u-pt-1 {
|
|
13968
14036
|
padding-top: 0.25rem;
|
|
13969
14037
|
}
|
|
13970
|
-
.u-pt-
|
|
14038
|
+
.u-pt-1\.5 {
|
|
13971
14039
|
padding-top: 0.375rem;
|
|
13972
14040
|
}
|
|
13973
14041
|
.u-pt-2 {
|
|
13974
14042
|
padding-top: 0.5rem;
|
|
13975
14043
|
}
|
|
13976
|
-
.u-pt-
|
|
14044
|
+
.u-pt-2\.5 {
|
|
13977
14045
|
padding-top: 0.625rem;
|
|
13978
14046
|
}
|
|
13979
14047
|
.u-pt-3 {
|
|
@@ -14036,13 +14104,13 @@ body.is-open-photoviewer {
|
|
|
14036
14104
|
.u-pe-1 {
|
|
14037
14105
|
padding-right: 0.25rem;
|
|
14038
14106
|
}
|
|
14039
|
-
.u-pe-
|
|
14107
|
+
.u-pe-1\.5 {
|
|
14040
14108
|
padding-right: 0.375rem;
|
|
14041
14109
|
}
|
|
14042
14110
|
.u-pe-2 {
|
|
14043
14111
|
padding-right: 0.5rem;
|
|
14044
14112
|
}
|
|
14045
|
-
.u-pe-
|
|
14113
|
+
.u-pe-2\.5 {
|
|
14046
14114
|
padding-right: 0.625rem;
|
|
14047
14115
|
}
|
|
14048
14116
|
.u-pe-3 {
|
|
@@ -14105,13 +14173,13 @@ body.is-open-photoviewer {
|
|
|
14105
14173
|
.u-pb-1 {
|
|
14106
14174
|
padding-bottom: 0.25rem;
|
|
14107
14175
|
}
|
|
14108
|
-
.u-pb-
|
|
14176
|
+
.u-pb-1\.5 {
|
|
14109
14177
|
padding-bottom: 0.375rem;
|
|
14110
14178
|
}
|
|
14111
14179
|
.u-pb-2 {
|
|
14112
14180
|
padding-bottom: 0.5rem;
|
|
14113
14181
|
}
|
|
14114
|
-
.u-pb-
|
|
14182
|
+
.u-pb-2\.5 {
|
|
14115
14183
|
padding-bottom: 0.625rem;
|
|
14116
14184
|
}
|
|
14117
14185
|
.u-pb-3 {
|
|
@@ -14174,13 +14242,13 @@ body.is-open-photoviewer {
|
|
|
14174
14242
|
.u-ps-1 {
|
|
14175
14243
|
padding-left: 0.25rem;
|
|
14176
14244
|
}
|
|
14177
|
-
.u-ps-
|
|
14245
|
+
.u-ps-1\.5 {
|
|
14178
14246
|
padding-left: 0.375rem;
|
|
14179
14247
|
}
|
|
14180
14248
|
.u-ps-2 {
|
|
14181
14249
|
padding-left: 0.5rem;
|
|
14182
14250
|
}
|
|
14183
|
-
.u-ps-
|
|
14251
|
+
.u-ps-2\.5 {
|
|
14184
14252
|
padding-left: 0.625rem;
|
|
14185
14253
|
}
|
|
14186
14254
|
.u-ps-3 {
|
|
@@ -14243,13 +14311,13 @@ body.is-open-photoviewer {
|
|
|
14243
14311
|
.u-gap-1 {
|
|
14244
14312
|
gap: 0.25rem;
|
|
14245
14313
|
}
|
|
14246
|
-
.u-gap-
|
|
14314
|
+
.u-gap-1\.5 {
|
|
14247
14315
|
gap: 0.375rem;
|
|
14248
14316
|
}
|
|
14249
14317
|
.u-gap-2 {
|
|
14250
14318
|
gap: 0.5rem;
|
|
14251
14319
|
}
|
|
14252
|
-
.u-gap-
|
|
14320
|
+
.u-gap-2\.5 {
|
|
14253
14321
|
gap: 0.625rem;
|
|
14254
14322
|
}
|
|
14255
14323
|
.u-gap-3 {
|
|
@@ -14312,13 +14380,13 @@ body.is-open-photoviewer {
|
|
|
14312
14380
|
.u-row-gap-1 {
|
|
14313
14381
|
row-gap: 0.25rem;
|
|
14314
14382
|
}
|
|
14315
|
-
.u-row-gap-
|
|
14383
|
+
.u-row-gap-1\.5 {
|
|
14316
14384
|
row-gap: 0.375rem;
|
|
14317
14385
|
}
|
|
14318
14386
|
.u-row-gap-2 {
|
|
14319
14387
|
row-gap: 0.5rem;
|
|
14320
14388
|
}
|
|
14321
|
-
.u-row-gap-
|
|
14389
|
+
.u-row-gap-2\.5 {
|
|
14322
14390
|
row-gap: 0.625rem;
|
|
14323
14391
|
}
|
|
14324
14392
|
.u-row-gap-3 {
|
|
@@ -14383,7 +14451,7 @@ body.is-open-photoviewer {
|
|
|
14383
14451
|
-moz-column-gap: 0.25rem;
|
|
14384
14452
|
column-gap: 0.25rem;
|
|
14385
14453
|
}
|
|
14386
|
-
.u-column-gap-
|
|
14454
|
+
.u-column-gap-1\.5 {
|
|
14387
14455
|
-moz-column-gap: 0.375rem;
|
|
14388
14456
|
column-gap: 0.375rem;
|
|
14389
14457
|
}
|
|
@@ -14391,7 +14459,7 @@ body.is-open-photoviewer {
|
|
|
14391
14459
|
-moz-column-gap: 0.5rem;
|
|
14392
14460
|
column-gap: 0.5rem;
|
|
14393
14461
|
}
|
|
14394
|
-
.u-column-gap-
|
|
14462
|
+
.u-column-gap-2\.5 {
|
|
14395
14463
|
-moz-column-gap: 0.625rem;
|
|
14396
14464
|
column-gap: 0.625rem;
|
|
14397
14465
|
}
|