@shohojdhara/atomix 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/atomix.css +292 -529
- package/dist/atomix.min.css +5 -5
- package/dist/index.d.ts +623 -121
- package/dist/index.esm.js +11475 -6047
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4698 -2755
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/themes/boomdevs.css +291 -528
- package/dist/themes/boomdevs.min.css +6 -6
- package/dist/themes/esrar.css +292 -529
- package/dist/themes/esrar.min.css +6 -6
- package/dist/themes/mashroom.css +286 -526
- package/dist/themes/mashroom.min.css +6 -6
- package/dist/themes/shaj-default.css +286 -526
- package/dist/themes/shaj-default.min.css +6 -6
- package/package.json +66 -15
- package/src/components/Accordion/Accordion.stories.tsx +137 -0
- package/src/components/Accordion/Accordion.tsx +33 -3
- package/src/components/AtomixGlass/AtomixGlass.stories.tsx +3011 -0
- package/src/components/AtomixGlass/AtomixGlass.test.tsx +199 -0
- package/src/components/AtomixGlass/AtomixGlass.tsx +1281 -0
- package/src/components/AtomixGlass/AtomixGlassComprehensivePreview.stories.tsx +1369 -0
- package/src/components/AtomixGlass/README.md +134 -0
- package/src/components/AtomixGlass/index.ts +10 -0
- package/src/components/AtomixGlass/shader-utils.ts +140 -0
- package/src/components/AtomixGlass/utils.ts +8 -0
- package/src/components/Badge/Badge.stories.tsx +169 -0
- package/src/components/Badge/Badge.tsx +27 -2
- package/src/components/Button/Button.stories.tsx +345 -0
- package/src/components/Button/Button.tsx +35 -3
- package/src/components/Button/README.md +216 -0
- package/src/components/Callout/Callout.stories.tsx +813 -78
- package/src/components/Callout/Callout.test.tsx +368 -0
- package/src/components/Callout/Callout.tsx +26 -7
- package/src/components/Callout/README.md +409 -0
- package/src/components/Card/Card.stories.tsx +140 -0
- package/src/components/Card/Card.tsx +19 -3
- package/src/components/DatePicker/DatePicker copy.tsx +551 -0
- package/src/components/DatePicker/DatePicker.stories.tsx +188 -0
- package/src/components/DatePicker/DatePicker.tsx +379 -332
- package/src/components/DatePicker/readme.md +110 -1
- package/src/components/DatePicker/types.ts +8 -0
- package/src/components/Dropdown/Dropdown.stories.tsx +145 -0
- package/src/components/Dropdown/Dropdown.tsx +34 -5
- package/src/components/Form/Checkbox.stories.tsx +101 -0
- package/src/components/Form/Checkbox.tsx +26 -2
- package/src/components/Form/Input.stories.tsx +124 -0
- package/src/components/Form/Input.tsx +36 -7
- package/src/components/Form/Radio.stories.tsx +139 -0
- package/src/components/Form/Radio.tsx +26 -2
- package/src/components/Form/Select.stories.tsx +110 -0
- package/src/components/Form/Select.tsx +26 -2
- package/src/components/Form/Textarea.stories.tsx +104 -0
- package/src/components/Form/Textarea.tsx +36 -7
- package/src/components/Hero/Hero.stories.tsx +54 -1
- package/src/components/Hero/Hero.tsx +70 -11
- package/src/components/Modal/Modal.stories.tsx +235 -0
- package/src/components/Modal/Modal.tsx +64 -35
- package/src/components/Pagination/Pagination.stories.tsx +101 -0
- package/src/components/Pagination/Pagination.tsx +25 -1
- package/src/components/Popover/Popover.stories.tsx +94 -0
- package/src/components/Popover/Popover.tsx +30 -4
- package/src/components/Rating/Rating.stories.tsx +112 -0
- package/src/components/Rating/Rating.tsx +25 -1
- package/src/components/Steps/Steps.stories.tsx +119 -0
- package/src/components/Steps/Steps.tsx +32 -1
- package/src/components/Tab/Tab.stories.tsx +88 -0
- package/src/components/Tab/Tab.tsx +32 -1
- package/src/components/Toggle/Toggle.stories.tsx +92 -0
- package/src/components/Toggle/Toggle.tsx +32 -1
- package/src/components/Tooltip/Tooltip.stories.tsx +131 -0
- package/src/components/Tooltip/Tooltip.tsx +43 -7
- package/src/components/VideoPlayer/VideoPlayer.stories.tsx +1002 -196
- package/src/components/VideoPlayer/VideoPlayer.tsx +161 -4
- package/src/components/index.ts +1 -0
- package/src/lib/composables/index.ts +4 -0
- package/src/lib/composables/useAtomixGlass.ts +71 -0
- package/src/lib/composables/useButton.ts +3 -1
- package/src/lib/composables/useCallout.ts +4 -1
- package/src/lib/composables/useGlassContainer.ts +168 -0
- package/src/lib/constants/components.ts +88 -0
- package/src/lib/types/components.ts +352 -0
- package/src/lib/utils/displacement-generator.ts +86 -0
- package/src/styles/01-settings/_settings.background.scss +8 -7
- package/src/styles/01-settings/_settings.callout.scss +7 -7
- package/src/styles/02-tools/_tools.animations.scss +19 -0
- package/src/styles/02-tools/_tools.background.scss +19 -17
- package/src/styles/02-tools/_tools.glass.scss +1 -0
- package/src/styles/03-generic/_generic.root.scss +3 -2
- package/src/styles/04-elements/_elements.body.scss +0 -18
- package/src/styles/06-components/_components.accordion.scss +16 -0
- package/src/styles/06-components/_components.atomix-glass.scss +0 -0
- package/src/styles/06-components/_components.badge.scss +34 -0
- package/src/styles/06-components/_components.button.scss +10 -0
- package/src/styles/06-components/_components.callout.scss +41 -2
- package/src/styles/06-components/_components.card.scss +17 -0
- package/src/styles/06-components/_components.chart.scss +1 -1
- package/src/styles/06-components/_components.datepicker.scss +18 -0
- package/src/styles/06-components/_components.dropdown.scss +7 -1
- package/src/styles/06-components/_components.hero.scss +1 -2
- package/src/styles/06-components/_components.input.scss +31 -1
- package/src/styles/06-components/_components.video-player.scss +48 -26
- package/src/styles/06-components/_index.scss +1 -0
- package/src/styles/99-utilities/_utilities.glass-fixes.scss +48 -0
- package/dist/themes/yabai.css +0 -15207
- package/dist/themes/yabai.min.css +0 -189
|
@@ -480,6 +480,23 @@
|
|
|
480
480
|
background-position: 0 50%;
|
|
481
481
|
}
|
|
482
482
|
}
|
|
483
|
+
@keyframes backgroundMoving {
|
|
484
|
+
0% {
|
|
485
|
+
background-position: 0 0%;
|
|
486
|
+
}
|
|
487
|
+
250% {
|
|
488
|
+
background-position: 100% 100%;
|
|
489
|
+
}
|
|
490
|
+
50% {
|
|
491
|
+
background-position: 100% 0%;
|
|
492
|
+
}
|
|
493
|
+
75% {
|
|
494
|
+
background-position: 0% 100%;
|
|
495
|
+
}
|
|
496
|
+
100% {
|
|
497
|
+
background-position: 100% 100%;
|
|
498
|
+
}
|
|
499
|
+
}
|
|
483
500
|
@keyframes component-spin {
|
|
484
501
|
0% {
|
|
485
502
|
transform: rotate(0deg);
|
|
@@ -1055,25 +1072,10 @@ body {
|
|
|
1055
1072
|
font-weight: 400;
|
|
1056
1073
|
font-size: 1rem;
|
|
1057
1074
|
line-height: 1.6;
|
|
1058
|
-
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");
|
|
1059
|
-
background-size: cover;
|
|
1060
|
-
background-repeat: no-repeat;
|
|
1061
|
-
background-attachment: fixed;
|
|
1062
1075
|
}
|
|
1063
1076
|
body.is-blocked, body.is-modal-open {
|
|
1064
1077
|
overflow: hidden;
|
|
1065
1078
|
}
|
|
1066
|
-
body::after {
|
|
1067
|
-
content: "";
|
|
1068
|
-
position: fixed;
|
|
1069
|
-
top: 0;
|
|
1070
|
-
left: 0;
|
|
1071
|
-
width: 100%;
|
|
1072
|
-
height: 100%;
|
|
1073
|
-
opacity: 0.7;
|
|
1074
|
-
z-index: -1;
|
|
1075
|
-
background: var(--atomix-gradient);
|
|
1076
|
-
}
|
|
1077
1079
|
h1,
|
|
1078
1080
|
.h1 {
|
|
1079
1081
|
font-size: 2.75rem;
|
|
@@ -2157,10 +2159,7 @@ a, a:hover {
|
|
|
2157
2159
|
transition-duration: 0.2s;
|
|
2158
2160
|
transition-timing-function: ease-in-out;
|
|
2159
2161
|
transition-delay: 0s;
|
|
2160
|
-
background
|
|
2161
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2162
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2163
|
-
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);
|
|
2162
|
+
background-color: var(--atomix-accordion-header-bg);
|
|
2164
2163
|
}
|
|
2165
2164
|
.c-accordion__header--icon-left {
|
|
2166
2165
|
flex-direction: row-reverse;
|
|
@@ -2195,10 +2194,7 @@ a, a:hover {
|
|
|
2195
2194
|
color: var(--atomix-accordion-body-color);
|
|
2196
2195
|
padding: var(--atomix-accordion-body-padding-y) var(--atomix-accordion-body-padding-x);
|
|
2197
2196
|
border-radius: 0 0 var(--atomix-accordion-border-radius) var(--atomix-accordion-border-radius);
|
|
2198
|
-
background
|
|
2199
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2200
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2201
|
-
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);
|
|
2197
|
+
background-color: var(--atomix-accordion-body-bg);
|
|
2202
2198
|
}
|
|
2203
2199
|
.c-accordion:focus, .c-accordion.is-focused {
|
|
2204
2200
|
--atomix-accordion-border-color: var(--atomix-focus-border-color);
|
|
@@ -2215,6 +2211,15 @@ a, a:hover {
|
|
|
2215
2211
|
--atomix-accordion-body-color: var(--atomix-accordion-disable-color);
|
|
2216
2212
|
--atomix-accordion-icon-color: var(--atomix-accordion-disable-color);
|
|
2217
2213
|
}
|
|
2214
|
+
.c-accordion--glass {
|
|
2215
|
+
border-color: transparent;
|
|
2216
|
+
}
|
|
2217
|
+
.c-accordion--glass .c-accordion__header {
|
|
2218
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
|
|
2219
|
+
}
|
|
2220
|
+
.c-accordion--glass .c-accordion__body {
|
|
2221
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
|
|
2222
|
+
}
|
|
2218
2223
|
.c-avatar {
|
|
2219
2224
|
--atomix-avatar-fit: cover;
|
|
2220
2225
|
--atomix-avatar-size: 2.75rem;
|
|
@@ -2236,10 +2241,7 @@ a, a:hover {
|
|
|
2236
2241
|
width: var(--atomix-avatar-size);
|
|
2237
2242
|
height: var(--atomix-avatar-size);
|
|
2238
2243
|
border-radius: var(--atomix-avatar-border-radius);
|
|
2239
|
-
background
|
|
2240
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2241
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2242
|
-
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);
|
|
2244
|
+
background-color: var(--atomix-avatar-bg);
|
|
2243
2245
|
color: var(--atomix-avatar-color);
|
|
2244
2246
|
border: var(--atomix-avatar-border-width) solid var(--atomix-avatar-border-color);
|
|
2245
2247
|
overflow: hidden;
|
|
@@ -2341,10 +2343,7 @@ a, a:hover {
|
|
|
2341
2343
|
color: var(--atomix-avatar-group-more-color);
|
|
2342
2344
|
font-size: var(--atomix-avatar-group-more-font-size);
|
|
2343
2345
|
font-weight: var(--atomix-avatar-group-more-font-weight);
|
|
2344
|
-
background
|
|
2345
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2346
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2347
|
-
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);
|
|
2346
|
+
background-color: var(--atomix-avatar-group-more-bg);
|
|
2348
2347
|
border: var(--atomix-avatar-group-more-border-width) solid var(--atomix-avatar-group-more-border-color);
|
|
2349
2348
|
width: var(--atomix-avatar-size);
|
|
2350
2349
|
height: var(--atomix-avatar-size);
|
|
@@ -2417,10 +2416,7 @@ a, a:hover {
|
|
|
2417
2416
|
line-height: 1;
|
|
2418
2417
|
padding: var(--atomix-tag-padding-y) var(--atomix-tag-padding-x);
|
|
2419
2418
|
border-radius: var(--atomix-tag-border-radius);
|
|
2420
|
-
background
|
|
2421
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2422
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2423
|
-
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);
|
|
2419
|
+
background-color: var(--atomix-tag-bg-color);
|
|
2424
2420
|
-webkit-user-select: none;
|
|
2425
2421
|
-moz-user-select: none;
|
|
2426
2422
|
user-select: none;
|
|
@@ -2436,6 +2432,10 @@ a, a:hover {
|
|
|
2436
2432
|
.c-badge--lg {
|
|
2437
2433
|
--atomix-tag-padding-y: 8px;
|
|
2438
2434
|
}
|
|
2435
|
+
.c-badge--glass {
|
|
2436
|
+
background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 80%, transparent);
|
|
2437
|
+
border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 20%, transparent);
|
|
2438
|
+
}
|
|
2439
2439
|
.c-badge--primary {
|
|
2440
2440
|
--atomix-tag-bg-color: var(--atomix-brand-bg-subtle);
|
|
2441
2441
|
--atomix-tag-color: var(--atomix-brand-text-emphasis);
|
|
@@ -2463,10 +2463,16 @@ a, a:hover {
|
|
|
2463
2463
|
.c-badge--light {
|
|
2464
2464
|
--atomix-tag-bg-color: var(--atomix-light);
|
|
2465
2465
|
--atomix-tag-color: var(--atomix-dark);
|
|
2466
|
+
border: 1px solid var(--atomix-light);
|
|
2466
2467
|
}
|
|
2467
2468
|
.c-badge--dark {
|
|
2468
2469
|
--atomix-tag-bg-color: var(--atomix-dark);
|
|
2469
2470
|
--atomix-tag-color: var(--atomix-light);
|
|
2471
|
+
border: 1px solid var(--atomix-dark);
|
|
2472
|
+
}
|
|
2473
|
+
.c-badge-glass {
|
|
2474
|
+
box-shadow: inset 1px 2px 3px rgba(255, 255, 255, 0.1), inset 0 -2px 2px rgba(0, 0, 0, 0.3);
|
|
2475
|
+
border-radius: 999px;
|
|
2470
2476
|
}
|
|
2471
2477
|
.c-breadcrumb {
|
|
2472
2478
|
--atomix-breadcrumb-font-size: 0.875rem;
|
|
@@ -2488,10 +2494,7 @@ a, a:hover {
|
|
|
2488
2494
|
list-style: none;
|
|
2489
2495
|
padding-left: 0px;
|
|
2490
2496
|
margin-bottom: var(--atomix-breadcrumb-margin-bottom);
|
|
2491
|
-
background
|
|
2492
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2493
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2494
|
-
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);
|
|
2497
|
+
background-color: var(--atomix-breadcrumb-bg);
|
|
2495
2498
|
}
|
|
2496
2499
|
.c-breadcrumb__item {
|
|
2497
2500
|
display: flex;
|
|
@@ -2586,10 +2589,7 @@ a, a:hover {
|
|
|
2586
2589
|
text-align: center;
|
|
2587
2590
|
white-space: nowrap;
|
|
2588
2591
|
vertical-align: middle;
|
|
2589
|
-
background
|
|
2590
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2591
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2592
|
-
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);
|
|
2592
|
+
background-color: var(--atomix-btn-bg);
|
|
2593
2593
|
cursor: pointer;
|
|
2594
2594
|
-webkit-user-select: none;
|
|
2595
2595
|
-moz-user-select: none;
|
|
@@ -2603,10 +2603,7 @@ a, a:hover {
|
|
|
2603
2603
|
}
|
|
2604
2604
|
.c-btn:hover {
|
|
2605
2605
|
color: var(--atomix-btn-hover-color);
|
|
2606
|
-
background
|
|
2607
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2608
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2609
|
-
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);
|
|
2606
|
+
background-color: var(--atomix-btn-hover-bg);
|
|
2610
2607
|
border-color: var(--atomix-btn-hover-border-color);
|
|
2611
2608
|
}
|
|
2612
2609
|
.c-btn--primary {
|
|
@@ -2870,13 +2867,16 @@ a, a:hover {
|
|
|
2870
2867
|
.c-btn:disabled, .c-btn--disabled, fieldset:disabled .c-btn {
|
|
2871
2868
|
color: var(--atomix-btn-disabled-color);
|
|
2872
2869
|
pointer-events: none;
|
|
2873
|
-
background
|
|
2874
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2875
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2876
|
-
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);
|
|
2870
|
+
background-color: var(--atomix-btn-disabled-bg);
|
|
2877
2871
|
border-color: var(--atomix-btn-disabled-border-color);
|
|
2878
2872
|
opacity: var(--atomix-btn-disabled-opacity);
|
|
2879
2873
|
}
|
|
2874
|
+
.c-btn--glass {
|
|
2875
|
+
background-color: color-mix(in srgb, var(--atomix-btn-bg) 50%, transparent);
|
|
2876
|
+
}
|
|
2877
|
+
.c-btn--glass:hover {
|
|
2878
|
+
background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 50%, transparent);
|
|
2879
|
+
}
|
|
2880
2880
|
.c-datepicker {
|
|
2881
2881
|
--atomix-datepicker-width: 22rem;
|
|
2882
2882
|
--atomix-datepicker-padding-x: 0.75rem;
|
|
@@ -2955,10 +2955,7 @@ a, a:hover {
|
|
|
2955
2955
|
z-index: 5;
|
|
2956
2956
|
width: var(--atomix-datepicker-width);
|
|
2957
2957
|
padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
|
|
2958
|
-
background
|
|
2959
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2960
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2961
|
-
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);
|
|
2958
|
+
background-color: var(--atomix-datepicker-bg);
|
|
2962
2959
|
border-radius: var(--atomix-datepicker-border-radius);
|
|
2963
2960
|
box-shadow: var(--atomix-datepicker-box-shadow);
|
|
2964
2961
|
margin-top: 0.25rem;
|
|
@@ -3002,6 +2999,24 @@ a, a:hover {
|
|
|
3002
2999
|
.c-datepicker__calendar--right-end {
|
|
3003
3000
|
bottom: 0;
|
|
3004
3001
|
}
|
|
3002
|
+
.c-datepicker__calendar--glass {
|
|
3003
|
+
z-index: auto;
|
|
3004
|
+
z-index: initial;
|
|
3005
|
+
box-shadow: none;
|
|
3006
|
+
border: none;
|
|
3007
|
+
border-radius: 0;
|
|
3008
|
+
padding: 0;
|
|
3009
|
+
background: transparent;
|
|
3010
|
+
}
|
|
3011
|
+
.c-datepicker__glass-content {
|
|
3012
|
+
z-index: auto;
|
|
3013
|
+
z-index: initial;
|
|
3014
|
+
box-shadow: none;
|
|
3015
|
+
border: none;
|
|
3016
|
+
border-radius: var(--atomix-datepicker-border-radius);
|
|
3017
|
+
padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
|
|
3018
|
+
background: color-mix(in srgb, var(--atomix-datepicker-bg) 50%, transparent 0%);
|
|
3019
|
+
}
|
|
3005
3020
|
.c-datepicker--inline {
|
|
3006
3021
|
--atomix-datepicker-width: calc(
|
|
3007
3022
|
var(--atomix-datepicker-width) + var(--atomix-datepicker-week-width)
|
|
@@ -3323,10 +3338,7 @@ a, a:hover {
|
|
|
3323
3338
|
transition-duration: 0.2s;
|
|
3324
3339
|
transition-timing-function: ease-in-out;
|
|
3325
3340
|
transition-delay: 0s;
|
|
3326
|
-
background
|
|
3327
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
3328
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
3329
|
-
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);
|
|
3341
|
+
background-color: var(--atomix-card-bg);
|
|
3330
3342
|
}
|
|
3331
3343
|
.c-card__header {
|
|
3332
3344
|
margin-bottom: var(--atomix-card-header-spacer-y);
|
|
@@ -3367,10 +3379,7 @@ a, a:hover {
|
|
|
3367
3379
|
border-radius: 50rem;
|
|
3368
3380
|
}
|
|
3369
3381
|
.c-card:hover {
|
|
3370
|
-
background
|
|
3371
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
3372
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
3373
|
-
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-hover) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-card-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-card-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
3382
|
+
background-color: var(--atomix-card-bg-hover);
|
|
3374
3383
|
}
|
|
3375
3384
|
.c-card:focus, .c-card.is-active {
|
|
3376
3385
|
--atomix-card-border-color: var(--atomix-brand-border-subtle);
|
|
@@ -3410,6 +3419,21 @@ a, a:hover {
|
|
|
3410
3419
|
padding: var(--atomix-card-row-spacer-y) var(--atomix-card-row-spacer-x);
|
|
3411
3420
|
padding-top: 0;
|
|
3412
3421
|
}
|
|
3422
|
+
.c-card--glass {
|
|
3423
|
+
background-color: transparent;
|
|
3424
|
+
padding: 0;
|
|
3425
|
+
border: none;
|
|
3426
|
+
display: block;
|
|
3427
|
+
border-radius: 0;
|
|
3428
|
+
}
|
|
3429
|
+
.c-card--glass .c-card__glass-content {
|
|
3430
|
+
padding: var(--atomix-card-spacer-y) var(--atomix-card-spacer-x);
|
|
3431
|
+
max-width: var(--atomix-card-width);
|
|
3432
|
+
border-radius: var(--atomix-card-border-radius);
|
|
3433
|
+
width: 100%;
|
|
3434
|
+
background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
|
|
3435
|
+
background-blend-mode: overlay;
|
|
3436
|
+
}
|
|
3413
3437
|
.is-elevated .c-card {
|
|
3414
3438
|
box-shadow: var(--atomix-box-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.175));
|
|
3415
3439
|
z-index: 1;
|
|
@@ -3435,19 +3459,12 @@ a, a:hover {
|
|
|
3435
3459
|
min-height: var(--atomix-chart-min-height);
|
|
3436
3460
|
width: 100%;
|
|
3437
3461
|
max-width: 100%;
|
|
3438
|
-
background
|
|
3439
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
3440
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
3462
|
+
background-color: var(--atomix-chart-bg);
|
|
3441
3463
|
transition-property: all;
|
|
3442
3464
|
transition-duration: 0.2s;
|
|
3443
3465
|
transition-timing-function: ease-in-out;
|
|
3444
3466
|
transition-delay: 0s;
|
|
3445
3467
|
}
|
|
3446
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
3447
|
-
.c-chart {
|
|
3448
|
-
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);
|
|
3449
|
-
}
|
|
3450
|
-
}
|
|
3451
3468
|
.c-chart::after {
|
|
3452
3469
|
content: "";
|
|
3453
3470
|
position: absolute;
|
|
@@ -5151,7 +5168,7 @@ a, a:hover {
|
|
|
5151
5168
|
animation: none;
|
|
5152
5169
|
}
|
|
5153
5170
|
}
|
|
5154
|
-
.c-chart:focus-
|
|
5171
|
+
.c-chart:focus-within .c-chart__data-point:focus {
|
|
5155
5172
|
outline: 2px solid var(--atomix-primary-6);
|
|
5156
5173
|
outline-offset: 2px;
|
|
5157
5174
|
z-index: 10;
|
|
@@ -5253,10 +5270,7 @@ a, a:hover {
|
|
|
5253
5270
|
-webkit-appearance: none;
|
|
5254
5271
|
-moz-appearance: none;
|
|
5255
5272
|
appearance: none;
|
|
5256
|
-
background
|
|
5257
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5258
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5259
|
-
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);
|
|
5273
|
+
background-color: var(--atomix-checkbox-bg);
|
|
5260
5274
|
width: var(--atomix-checkbox-width);
|
|
5261
5275
|
height: var(--atomix-checkbox-height);
|
|
5262
5276
|
color: currentColor;
|
|
@@ -5345,10 +5359,7 @@ a, a:hover {
|
|
|
5345
5359
|
color: var(--atomix-body-color);
|
|
5346
5360
|
}
|
|
5347
5361
|
.c-color-mode-toggle:hover {
|
|
5348
|
-
background
|
|
5349
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5350
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5351
|
-
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);
|
|
5362
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
5352
5363
|
}
|
|
5353
5364
|
.c-color-mode-toggle:focus {
|
|
5354
5365
|
outline: none;
|
|
@@ -5359,10 +5370,7 @@ a, a:hover {
|
|
|
5359
5370
|
height: 1.5rem;
|
|
5360
5371
|
}
|
|
5361
5372
|
[data-atomix-theme=dark] .c-color-mode-toggle:hover {
|
|
5362
|
-
background
|
|
5363
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5364
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5365
|
-
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);
|
|
5373
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
5366
5374
|
}
|
|
5367
5375
|
.c-countdown {
|
|
5368
5376
|
--atomix-countdown-color: var(--atomix-body-color);
|
|
@@ -5400,10 +5408,7 @@ a, a:hover {
|
|
|
5400
5408
|
align-items: center;
|
|
5401
5409
|
padding: var(--atomix-countdown-item-padding-y) var(--atomix-countdown-item-padding-x);
|
|
5402
5410
|
border-radius: var(--atomix-countdown-focused-border-radius);
|
|
5403
|
-
background
|
|
5404
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5405
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5406
|
-
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);
|
|
5411
|
+
background-color: var(--atomix-countdown-focused-bg);
|
|
5407
5412
|
}
|
|
5408
5413
|
.c-countdown--focused .c-countdown__time-label {
|
|
5409
5414
|
font-size: var(--atomix-countdown-focused-label-font-size);
|
|
@@ -5430,17 +5435,11 @@ a, a:hover {
|
|
|
5430
5435
|
width: 100%;
|
|
5431
5436
|
margin-bottom: 0;
|
|
5432
5437
|
color: var(--atomix-data-table-color);
|
|
5433
|
-
background
|
|
5434
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5435
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5436
|
-
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);
|
|
5438
|
+
background-color: var(--atomix-data-table-bg);
|
|
5437
5439
|
border-collapse: collapse;
|
|
5438
5440
|
}
|
|
5439
5441
|
.c-data-table__header {
|
|
5440
|
-
background
|
|
5441
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5442
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5443
|
-
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);
|
|
5442
|
+
background-color: var(--atomix-data-table-header-bg);
|
|
5444
5443
|
}
|
|
5445
5444
|
.c-data-table__header-cell {
|
|
5446
5445
|
padding: 1rem 1.25rem;
|
|
@@ -5457,10 +5456,7 @@ a, a:hover {
|
|
|
5457
5456
|
user-select: none;
|
|
5458
5457
|
}
|
|
5459
5458
|
.c-data-table__header-cell--sortable:hover {
|
|
5460
|
-
background
|
|
5461
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5462
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5463
|
-
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);
|
|
5459
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
5464
5460
|
}
|
|
5465
5461
|
.c-data-table__header-content {
|
|
5466
5462
|
display: flex;
|
|
@@ -5481,16 +5477,10 @@ a, a:hover {
|
|
|
5481
5477
|
vertical-align: middle;
|
|
5482
5478
|
}
|
|
5483
5479
|
.c-data-table__row {
|
|
5484
|
-
background
|
|
5485
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5486
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5487
|
-
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);
|
|
5480
|
+
background-color: var(--atomix-data-table-bg);
|
|
5488
5481
|
}
|
|
5489
5482
|
.c-data-table__row:hover {
|
|
5490
|
-
background
|
|
5491
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5492
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5493
|
-
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);
|
|
5483
|
+
background-color: var(--atomix-data-table-hover-bg);
|
|
5494
5484
|
}
|
|
5495
5485
|
.c-data-table__row[role=button] {
|
|
5496
5486
|
cursor: pointer;
|
|
@@ -5508,10 +5498,7 @@ a, a:hover {
|
|
|
5508
5498
|
color: var(--atomix-gray-500);
|
|
5509
5499
|
}
|
|
5510
5500
|
.c-data-table--striped tbody tr:nth-of-type(odd) {
|
|
5511
|
-
background
|
|
5512
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5513
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5514
|
-
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);
|
|
5501
|
+
background-color: var(--atomix-data-table-striped-bg);
|
|
5515
5502
|
}
|
|
5516
5503
|
.c-data-table--bordered {
|
|
5517
5504
|
border: var(--atomix-border-width) var(--atomix-border-style) var(--atomix-data-table-border-color);
|
|
@@ -5621,7 +5608,6 @@ a, a:hover {
|
|
|
5621
5608
|
.c-dropdown__menu-wrapper {
|
|
5622
5609
|
position: absolute;
|
|
5623
5610
|
left: 0;
|
|
5624
|
-
z-index: 99;
|
|
5625
5611
|
display: flex;
|
|
5626
5612
|
opacity: 0;
|
|
5627
5613
|
visibility: hidden;
|
|
@@ -5703,14 +5689,16 @@ a, a:hover {
|
|
|
5703
5689
|
padding: var(--atomix-dropdown-padding-y) var(--atomix-dropdown-padding-x);
|
|
5704
5690
|
list-style: none;
|
|
5705
5691
|
margin-bottom: 0rem;
|
|
5706
|
-
|
|
5707
|
-
|
|
5708
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5709
|
-
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);
|
|
5692
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
5693
|
+
background-color: var(--atomix-dropdown-bg);
|
|
5710
5694
|
border-radius: var(--atomix-dropdown-border-radius);
|
|
5711
5695
|
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
5712
5696
|
overflow: hidden;
|
|
5713
5697
|
}
|
|
5698
|
+
.c-dropdown__menu--glass {
|
|
5699
|
+
background-color: color-mix(in srgb, var(--atomix-dropdown-bg) 50%, transparent);
|
|
5700
|
+
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
5701
|
+
}
|
|
5714
5702
|
.c-dropdown__menu-item {
|
|
5715
5703
|
display: block;
|
|
5716
5704
|
width: 100%;
|
|
@@ -5727,19 +5715,13 @@ a, a:hover {
|
|
|
5727
5715
|
}
|
|
5728
5716
|
.c-dropdown__menu-item:hover, .c-dropdown__menu-item:focus {
|
|
5729
5717
|
color: var(--atomix-dropdown-link-hover-color);
|
|
5730
|
-
background
|
|
5731
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5732
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5733
|
-
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);
|
|
5718
|
+
background-color: var(--atomix-dropdown-link-hover-bg);
|
|
5734
5719
|
outline: none;
|
|
5735
5720
|
padding-left: calc(var(--atomix-dropdown-item-padding-x) + 3px);
|
|
5736
5721
|
}
|
|
5737
5722
|
.c-dropdown__menu-item.is-active {
|
|
5738
5723
|
color: var(--atomix-dropdown-active-color);
|
|
5739
|
-
background
|
|
5740
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5741
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5742
|
-
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);
|
|
5724
|
+
background-color: var(--atomix-dropdown-active-bg);
|
|
5743
5725
|
}
|
|
5744
5726
|
.c-dropdown__menu-item.is-disabled {
|
|
5745
5727
|
color: var(--atomix-dropdown-color);
|
|
@@ -5836,10 +5818,7 @@ a, a:hover {
|
|
|
5836
5818
|
.c-edge-panel__backdrop {
|
|
5837
5819
|
position: absolute;
|
|
5838
5820
|
inset: 0;
|
|
5839
|
-
background
|
|
5840
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5841
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5842
|
-
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);
|
|
5821
|
+
background-color: var(--atomix-edge-panel-backdrop-bg);
|
|
5843
5822
|
-webkit-backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
|
|
5844
5823
|
backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
|
|
5845
5824
|
opacity: 0;
|
|
@@ -5858,10 +5837,7 @@ a, a:hover {
|
|
|
5858
5837
|
color: var(--atomix-edge-panel-color);
|
|
5859
5838
|
width: var(--atomix-edge-panel-width);
|
|
5860
5839
|
height: 100%;
|
|
5861
|
-
background
|
|
5862
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5863
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5864
|
-
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);
|
|
5840
|
+
background-color: var(--atomix-edge-panel-bg);
|
|
5865
5841
|
box-shadow: var(--atomix-edge-panel-shadow);
|
|
5866
5842
|
z-index: 2;
|
|
5867
5843
|
overflow: hidden;
|
|
@@ -5896,10 +5872,7 @@ a, a:hover {
|
|
|
5896
5872
|
transition: background-color 0.2s ease;
|
|
5897
5873
|
}
|
|
5898
5874
|
.c-edge-panel__close:hover {
|
|
5899
|
-
background
|
|
5900
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5901
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5902
|
-
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);
|
|
5875
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
5903
5876
|
}
|
|
5904
5877
|
.c-edge-panel__close:focus-visible {
|
|
5905
5878
|
outline: 2px solid var(--atomix-primary);
|
|
@@ -6099,10 +6072,7 @@ a, a:hover {
|
|
|
6099
6072
|
--atomix-footer-newsletter-padding: 1.5rem;
|
|
6100
6073
|
--atomix-footer-bottom-padding-top: 1.5rem;
|
|
6101
6074
|
--atomix-footer-bottom-margin-top: 2rem;
|
|
6102
|
-
background
|
|
6103
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6104
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6105
|
-
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);
|
|
6075
|
+
background-color: var(--atomix-footer-bg);
|
|
6106
6076
|
color: var(--atomix-footer-color);
|
|
6107
6077
|
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
6108
6078
|
padding: var(--atomix-footer-padding-y) 0;
|
|
@@ -6314,10 +6284,7 @@ a, a:hover {
|
|
|
6314
6284
|
justify-content: center;
|
|
6315
6285
|
width: 2.5rem;
|
|
6316
6286
|
height: 2.5rem;
|
|
6317
|
-
background
|
|
6318
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6319
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6320
|
-
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);
|
|
6287
|
+
background-color: var(--atomix-surface-variant);
|
|
6321
6288
|
color: var(--atomix-text);
|
|
6322
6289
|
border-radius: 50%;
|
|
6323
6290
|
text-decoration: none;
|
|
@@ -6334,10 +6301,7 @@ a, a:hover {
|
|
|
6334
6301
|
transition: transform 0.6s ease;
|
|
6335
6302
|
}
|
|
6336
6303
|
.c-footer__social-link:hover, .c-footer__social-link:focus {
|
|
6337
|
-
background
|
|
6338
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6339
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6340
|
-
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);
|
|
6304
|
+
background-color: var(--atomix-primary);
|
|
6341
6305
|
color: var(--atomix-primary-contrast);
|
|
6342
6306
|
transform: translateY(-3px) scale(1.05);
|
|
6343
6307
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
@@ -6405,10 +6369,7 @@ a, a:hover {
|
|
|
6405
6369
|
background: linear-gradient(135deg, #25d366, #66bb6a);
|
|
6406
6370
|
}
|
|
6407
6371
|
.c-footer__newsletter {
|
|
6408
|
-
background
|
|
6409
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6410
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6411
|
-
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);
|
|
6372
|
+
background-color: linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8));
|
|
6412
6373
|
padding: 1.5rem;
|
|
6413
6374
|
border-radius: 0.5rem;
|
|
6414
6375
|
border: 1px solid var(--atomix-border-subtle);
|
|
@@ -6464,10 +6425,7 @@ a, a:hover {
|
|
|
6464
6425
|
flex: 1 1;
|
|
6465
6426
|
padding: 0.75rem 1rem;
|
|
6466
6427
|
font-size: 0.875rem;
|
|
6467
|
-
background
|
|
6468
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6469
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6470
|
-
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);
|
|
6428
|
+
background-color: var(--atomix-surface);
|
|
6471
6429
|
color: var(--atomix-text);
|
|
6472
6430
|
border: 1px solid var(--atomix-border);
|
|
6473
6431
|
border-radius: 0.375rem;
|
|
@@ -6496,10 +6454,7 @@ a, a:hover {
|
|
|
6496
6454
|
}
|
|
6497
6455
|
.c-footer__newsletter-button {
|
|
6498
6456
|
padding: 0.75rem 1.5rem;
|
|
6499
|
-
background
|
|
6500
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6501
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6502
|
-
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);
|
|
6457
|
+
background-color: var(--atomix-primary);
|
|
6503
6458
|
color: var(--atomix-primary-contrast);
|
|
6504
6459
|
border: none;
|
|
6505
6460
|
border-radius: 0.375rem;
|
|
@@ -6519,10 +6474,7 @@ a, a:hover {
|
|
|
6519
6474
|
transition: transform 0.6s ease;
|
|
6520
6475
|
}
|
|
6521
6476
|
.c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
|
|
6522
|
-
background
|
|
6523
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6524
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6525
|
-
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);
|
|
6477
|
+
background-color: var(--atomix-primary-hover);
|
|
6526
6478
|
transform: translateY(-2px);
|
|
6527
6479
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
6528
6480
|
}
|
|
@@ -6567,10 +6519,7 @@ a, a:hover {
|
|
|
6567
6519
|
align-items: center;
|
|
6568
6520
|
gap: 0.5rem;
|
|
6569
6521
|
padding: 0.75rem 1.25rem;
|
|
6570
|
-
background
|
|
6571
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6572
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6573
|
-
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);
|
|
6522
|
+
background-color: var(--atomix-surface-variant);
|
|
6574
6523
|
border: 1px solid var(--atomix-border-subtle);
|
|
6575
6524
|
color: var(--atomix-text);
|
|
6576
6525
|
font-size: 0.875rem;
|
|
@@ -6591,10 +6540,7 @@ a, a:hover {
|
|
|
6591
6540
|
}
|
|
6592
6541
|
.c-footer__back-to-top:hover, .c-footer__back-to-top:focus {
|
|
6593
6542
|
color: var(--atomix-primary);
|
|
6594
|
-
background
|
|
6595
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6596
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6597
|
-
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);
|
|
6543
|
+
background-color: var(--atomix-primary);
|
|
6598
6544
|
border-color: var(--atomix-primary);
|
|
6599
6545
|
transform: translateY(-2px);
|
|
6600
6546
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
@@ -7139,10 +7085,7 @@ a, a:hover {
|
|
|
7139
7085
|
display: grid;
|
|
7140
7086
|
place-items: center;
|
|
7141
7087
|
padding: var(--atomix-hero-padding-y) var(--atomix-hero-padding-x);
|
|
7142
|
-
background
|
|
7143
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7144
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7145
|
-
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);
|
|
7088
|
+
background-color: var(--atomix-hero-bg);
|
|
7146
7089
|
overflow: hidden;
|
|
7147
7090
|
}
|
|
7148
7091
|
.c-hero__bg {
|
|
@@ -7165,16 +7108,12 @@ a, a:hover {
|
|
|
7165
7108
|
.c-hero__overlay {
|
|
7166
7109
|
position: absolute;
|
|
7167
7110
|
inset: 0;
|
|
7168
|
-
background
|
|
7169
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7170
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7171
|
-
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);
|
|
7111
|
+
background-color: var(--atomix-hero-overlay);
|
|
7172
7112
|
opacity: var(--atomix-hero-overlay-opacity);
|
|
7173
|
-
z-index:
|
|
7113
|
+
z-index: 0;
|
|
7174
7114
|
}
|
|
7175
7115
|
.c-hero__container {
|
|
7176
7116
|
position: relative;
|
|
7177
|
-
z-index: 2;
|
|
7178
7117
|
}
|
|
7179
7118
|
.c-hero__grid {
|
|
7180
7119
|
--atomix-gutter-x: var(--atomix-hero-grid-gutter);
|
|
@@ -7302,10 +7241,7 @@ a, a:hover {
|
|
|
7302
7241
|
border: var(--atomix-input-border-width) solid var(--atomix-input-border-color);
|
|
7303
7242
|
border-radius: var(--atomix-input-border-radius);
|
|
7304
7243
|
outline: none;
|
|
7305
|
-
background
|
|
7306
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7307
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7308
|
-
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);
|
|
7244
|
+
background-color: var(--atomix-input-bg);
|
|
7309
7245
|
transition-property: all;
|
|
7310
7246
|
transition-duration: 0.2s;
|
|
7311
7247
|
transition-timing-function: ease-in-out;
|
|
@@ -7377,6 +7313,21 @@ a, a:hover {
|
|
|
7377
7313
|
--atomix-input-bg: var(--atomix-secondary-bg-subtle);
|
|
7378
7314
|
pointer-events: none;
|
|
7379
7315
|
}
|
|
7316
|
+
.c-input--glass {
|
|
7317
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
7318
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
7319
|
+
}
|
|
7320
|
+
.c-input--glass:focus, .c-input--glass:hover {
|
|
7321
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
7322
|
+
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);
|
|
7323
|
+
}
|
|
7324
|
+
.c-input--glass.c-input--textarea {
|
|
7325
|
+
resize: vertical;
|
|
7326
|
+
}
|
|
7327
|
+
.c-input--glass:disabled, .c-input--glass.is-disabled {
|
|
7328
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
7329
|
+
opacity: 0.6;
|
|
7330
|
+
}
|
|
7380
7331
|
.c-list-group {
|
|
7381
7332
|
--atomix-list-group-width: 100%;
|
|
7382
7333
|
--atomix-list-group-bg: ;
|
|
@@ -7395,20 +7346,14 @@ a, a:hover {
|
|
|
7395
7346
|
list-style: none;
|
|
7396
7347
|
width: 100%;
|
|
7397
7348
|
max-width: var(--atomix-list-group-width);
|
|
7398
|
-
background
|
|
7399
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7400
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7401
|
-
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);
|
|
7349
|
+
background-color: var(--atomix-list-group-bg);
|
|
7402
7350
|
}
|
|
7403
7351
|
.c-list-group__item {
|
|
7404
7352
|
padding: var(--atomix-list-group-item-padding-y) var(--atomix-list-group-item-padding-x);
|
|
7405
7353
|
font-size: var(--atomix-list-group-item-font-size);
|
|
7406
7354
|
color: var(--atomix-list-group-item-color);
|
|
7407
7355
|
border-bottom: var(--atomix-list-group-item-border-width) solid var(--atomix-list-group-item-border-color);
|
|
7408
|
-
background
|
|
7409
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7410
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7411
|
-
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);
|
|
7356
|
+
background-color: var(--atomix-list-group-item-bg);
|
|
7412
7357
|
}
|
|
7413
7358
|
.c-list-group__item--primary {
|
|
7414
7359
|
--atomix-list-group-item-bg: var(--atomix-brand-bg-subtle);
|
|
@@ -7473,10 +7418,7 @@ a, a:hover {
|
|
|
7473
7418
|
left: 0;
|
|
7474
7419
|
width: var(--atomix-list-item-dash-width);
|
|
7475
7420
|
height: var(--atomix-list-item-dash-height);
|
|
7476
|
-
background
|
|
7477
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7478
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7479
|
-
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);
|
|
7421
|
+
background-color: var(--atomix-list-color);
|
|
7480
7422
|
transform: translateY(-50%);
|
|
7481
7423
|
}
|
|
7482
7424
|
.c-list--number {
|
|
@@ -7516,10 +7458,7 @@ a, a:hover {
|
|
|
7516
7458
|
display: inline-block;
|
|
7517
7459
|
min-width: var(--atomix-menu-min-width);
|
|
7518
7460
|
padding: var(--atomix-menu-item-padding-y) var(--atomix-menu-item-padding-x);
|
|
7519
|
-
background
|
|
7520
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7521
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7522
|
-
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);
|
|
7461
|
+
background-color: var(--atomix-menu-bg);
|
|
7523
7462
|
border-radius: var(--atomix-menu-border-radius);
|
|
7524
7463
|
box-shadow: var(--atomix-menu-box-shadow);
|
|
7525
7464
|
z-index: 5;
|
|
@@ -7565,10 +7504,7 @@ a, a:hover {
|
|
|
7565
7504
|
color: var(--atomix-menu-item-color);
|
|
7566
7505
|
font-size: var(--atomix-menu-item-font-size);
|
|
7567
7506
|
font-weight: var(--atomix-menu-item-font-weight);
|
|
7568
|
-
background
|
|
7569
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7570
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7571
|
-
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);
|
|
7507
|
+
background-color: var(--atomix-menu-item-bg);
|
|
7572
7508
|
border-radius: var(--atomix-menu-border-radius);
|
|
7573
7509
|
cursor: pointer;
|
|
7574
7510
|
transition-property: all;
|
|
@@ -7578,16 +7514,10 @@ a, a:hover {
|
|
|
7578
7514
|
}
|
|
7579
7515
|
.c-menu__link:hover {
|
|
7580
7516
|
color: var(--atomix-menu-item-color);
|
|
7581
|
-
background
|
|
7582
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7583
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7584
|
-
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);
|
|
7517
|
+
background-color: var(--atomix-menu-item-bg-hover);
|
|
7585
7518
|
}
|
|
7586
7519
|
.c-menu__link:focus, .c-menu__link:active, .c-menu__link.is-active {
|
|
7587
|
-
background
|
|
7588
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7589
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7590
|
-
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);
|
|
7520
|
+
background-color: var(--atomix-menu-item-bg-active);
|
|
7591
7521
|
}
|
|
7592
7522
|
.c-menu__icon {
|
|
7593
7523
|
font-size: var(--atomix-menu-item-icon-size);
|
|
@@ -7757,10 +7687,7 @@ a, a:hover {
|
|
|
7757
7687
|
padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
|
|
7758
7688
|
border-radius: var(--atomix-messages-border-radius);
|
|
7759
7689
|
border: var(--atomix-messages-border-width) solid var(--atomix-messages-border-color);
|
|
7760
|
-
background
|
|
7761
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7762
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7763
|
-
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);
|
|
7690
|
+
background-color: var(--atomix-messages-bg);
|
|
7764
7691
|
}
|
|
7765
7692
|
.c-messages__body {
|
|
7766
7693
|
max-height: var(--atomix-messages-body-height);
|
|
@@ -7810,10 +7737,7 @@ a, a:hover {
|
|
|
7810
7737
|
color: var(--atomix-messages-text-color);
|
|
7811
7738
|
font-size: var(--atomix-messages-text-font-size);
|
|
7812
7739
|
padding: var(--atomix-messages-text-padding-y) var(--atomix-messages-text-padding-x);
|
|
7813
|
-
background
|
|
7814
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7815
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7816
|
-
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);
|
|
7740
|
+
background-color: var(--atomix-messages-text-bg);
|
|
7817
7741
|
border-radius: 0.25rem var(--atomix-messages-text-border-radius) var(--atomix-messages-text-border-radius) 0.25rem;
|
|
7818
7742
|
}
|
|
7819
7743
|
.c-messages__file {
|
|
@@ -7821,10 +7745,7 @@ a, a:hover {
|
|
|
7821
7745
|
flex-wrap: wrap;
|
|
7822
7746
|
padding: var(--atomix-messages-file-padding-y) var(--atomix-messages-file-padding-x);
|
|
7823
7747
|
border-radius: 0.25rem var(--atomix-messages-file-border-radius) var(--atomix-messages-file-border-radius) 0.25rem;
|
|
7824
|
-
background
|
|
7825
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7826
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7827
|
-
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);
|
|
7748
|
+
background-color: var(--atomix-messages-file-bg);
|
|
7828
7749
|
}
|
|
7829
7750
|
.c-messages__file-icon {
|
|
7830
7751
|
display: grid !important;
|
|
@@ -7834,10 +7755,7 @@ a, a:hover {
|
|
|
7834
7755
|
height: var(--atomix-messages-file-icon-size);
|
|
7835
7756
|
color: var(--atomix-tertiary-text-emphasis);
|
|
7836
7757
|
margin-right: var(--atomix-messages-file-icon-margin-right);
|
|
7837
|
-
background
|
|
7838
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7839
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7840
|
-
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);
|
|
7758
|
+
background-color: var(--atomix-body-bg);
|
|
7841
7759
|
border-radius: 50rem;
|
|
7842
7760
|
}
|
|
7843
7761
|
.c-messages__file-name {
|
|
@@ -7893,10 +7811,7 @@ a, a:hover {
|
|
|
7893
7811
|
}
|
|
7894
7812
|
.c-messages__content--self .c-messages__file-icon {
|
|
7895
7813
|
color: var(--atomix-invert-text-emphasis);
|
|
7896
|
-
background
|
|
7897
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7898
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7899
|
-
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);
|
|
7814
|
+
background-color: var(--atomix-messages-file-icon-bg);
|
|
7900
7815
|
}
|
|
7901
7816
|
.c-messages__content--self .c-messages__file-icon [data-atomix-color-mode=dark] {
|
|
7902
7817
|
--atomix-messages-file-icon-bg: var(--atomix-primary-7);
|
|
@@ -7940,10 +7855,7 @@ a, a:hover {
|
|
|
7940
7855
|
font-size: var(--atomix-messages-input-font-size);
|
|
7941
7856
|
border: var(--atomix-messages-input-border-width) solid var(--atomix-messages-input-border-color);
|
|
7942
7857
|
border-radius: var(--atomix-messages-input-border-radius);
|
|
7943
|
-
background
|
|
7944
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7945
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7946
|
-
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);
|
|
7858
|
+
background-color: var(--atomix-messages-bg);
|
|
7947
7859
|
resize: none;
|
|
7948
7860
|
}
|
|
7949
7861
|
.c-messages__input::-moz-placeholder {
|
|
@@ -7963,10 +7875,7 @@ a, a:hover {
|
|
|
7963
7875
|
place-items: center;
|
|
7964
7876
|
align-self: flex-end;
|
|
7965
7877
|
padding: 0.625rem;
|
|
7966
|
-
background
|
|
7967
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7968
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7969
|
-
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);
|
|
7878
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
7970
7879
|
color: var(--atomix-invert-text-emphasis);
|
|
7971
7880
|
border-radius: 50rem;
|
|
7972
7881
|
cursor: pointer;
|
|
@@ -8015,10 +7924,7 @@ a, a:hover {
|
|
|
8015
7924
|
.c-modal__backdrop {
|
|
8016
7925
|
position: absolute;
|
|
8017
7926
|
inset: 0;
|
|
8018
|
-
background
|
|
8019
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8020
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8021
|
-
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);
|
|
7927
|
+
background-color: var(--atomix-modal-backdrop-bg);
|
|
8022
7928
|
opacity: 0;
|
|
8023
7929
|
transition: 0.3s;
|
|
8024
7930
|
}
|
|
@@ -8043,10 +7949,7 @@ a, a:hover {
|
|
|
8043
7949
|
width: 100%;
|
|
8044
7950
|
max-height: 100%;
|
|
8045
7951
|
padding: var(--atomix-modal-inner-padding);
|
|
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-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);
|
|
7952
|
+
background-color: var(--atomix-modal-content-bg);
|
|
8050
7953
|
box-shadow: var(--atomix-modal-content-box-shadow);
|
|
8051
7954
|
border-radius: var(--atomix-modal-content-border-radius);
|
|
8052
7955
|
overflow: hidden;
|
|
@@ -8157,20 +8060,14 @@ a, a:hover {
|
|
|
8157
8060
|
color: var(--atomix-nav-link-color);
|
|
8158
8061
|
}
|
|
8159
8062
|
.c-nav__link:hover, .c-nav__link:active, .c-nav__link:focus, .c-nav__link:focus-visible {
|
|
8160
|
-
background
|
|
8161
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8162
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8163
|
-
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);
|
|
8063
|
+
background-color: var(--atomix-nav-link-hover-bg);
|
|
8164
8064
|
}
|
|
8165
8065
|
.c-nav__link--disabled {
|
|
8166
8066
|
color: var(--atomix-disabled-text-emphasis);
|
|
8167
8067
|
pointer-events: none;
|
|
8168
8068
|
}
|
|
8169
8069
|
.c-nav__link:focus, .c-nav__link:active, .c-nav__link.is-active {
|
|
8170
|
-
background
|
|
8171
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8172
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8173
|
-
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);
|
|
8070
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
8174
8071
|
}
|
|
8175
8072
|
.c-nav__icon {
|
|
8176
8073
|
font-size: var(--atomix-nav-icon-size);
|
|
@@ -8224,24 +8121,14 @@ a, a:hover {
|
|
|
8224
8121
|
left: 50%;
|
|
8225
8122
|
transform: translateX(-50%);
|
|
8226
8123
|
z-index: 1000;
|
|
8227
|
-
background
|
|
8228
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8229
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8230
|
-
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);
|
|
8124
|
+
background-color: var(--atomix-body-bg);
|
|
8231
8125
|
border: 1px solid var(--atomix-border-color);
|
|
8232
8126
|
border-radius: 50rem;
|
|
8233
8127
|
box-shadow: var(--atomix-box-shadow-lg);
|
|
8234
8128
|
padding: 0.5rem 1rem;
|
|
8235
8129
|
-webkit-backdrop-filter: blur(10px);
|
|
8236
8130
|
backdrop-filter: blur(10px);
|
|
8237
|
-
|
|
8238
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8239
|
-
}
|
|
8240
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
8241
|
-
.c-nav--float-top-center, .c-nav--float-bottom-center {
|
|
8242
|
-
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%);
|
|
8243
|
-
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);
|
|
8244
|
-
}
|
|
8131
|
+
background-color: rgba(var(--atomix-body-bg-rgb), 0.95);
|
|
8245
8132
|
}
|
|
8246
8133
|
.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 {
|
|
8247
8134
|
margin-left: 0.25rem;
|
|
@@ -8251,10 +8138,7 @@ a, a:hover {
|
|
|
8251
8138
|
border-radius: 0.625rem;
|
|
8252
8139
|
}
|
|
8253
8140
|
.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 {
|
|
8254
|
-
background
|
|
8255
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8256
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8257
|
-
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);
|
|
8141
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
8258
8142
|
}
|
|
8259
8143
|
.c-nav--float-top-center {
|
|
8260
8144
|
top: 1.25rem;
|
|
@@ -8288,10 +8172,7 @@ a, a:hover {
|
|
|
8288
8172
|
position: relative;
|
|
8289
8173
|
padding: var(--atomix-navbar-padding-y) 0;
|
|
8290
8174
|
border-bottom: var(--atomix-navbar-border-width) solid var(--atomix-navbar-border-color);
|
|
8291
|
-
background
|
|
8292
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8293
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8294
|
-
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);
|
|
8175
|
+
background-color: var(--atomix-navbar-bg);
|
|
8295
8176
|
z-index: var(--atomix-navbar-z-index);
|
|
8296
8177
|
}
|
|
8297
8178
|
.c-navbar__container {
|
|
@@ -8326,10 +8207,7 @@ a, a:hover {
|
|
|
8326
8207
|
width: var(--atomix-navbar-toggler-size);
|
|
8327
8208
|
height: var(--atomix-navbar-toggler-size);
|
|
8328
8209
|
padding: 0;
|
|
8329
|
-
background
|
|
8330
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8331
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8332
|
-
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);
|
|
8210
|
+
background-color: var(--atomix-navbar-toggler-bg);
|
|
8333
8211
|
border: var(--atomix-navbar-toggler-border);
|
|
8334
8212
|
border-radius: var(--atomix-navbar-toggler-border-radius);
|
|
8335
8213
|
cursor: pointer;
|
|
@@ -8382,10 +8260,7 @@ a, a:hover {
|
|
|
8382
8260
|
left: 0;
|
|
8383
8261
|
width: 100%;
|
|
8384
8262
|
height: 100%;
|
|
8385
|
-
background
|
|
8386
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8387
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8388
|
-
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);
|
|
8263
|
+
background-color: var(--atomix-navbar-backdrop-bg);
|
|
8389
8264
|
z-index: var(--atomix-navbar-backdrop-z-index);
|
|
8390
8265
|
opacity: 0;
|
|
8391
8266
|
visibility: hidden;
|
|
@@ -8661,10 +8536,7 @@ a, a:hover {
|
|
|
8661
8536
|
max-width: var(--atomix-callout-width);
|
|
8662
8537
|
gap: var(--atomix-callout-actions-spacer);
|
|
8663
8538
|
padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
|
|
8664
|
-
background
|
|
8665
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8666
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8667
|
-
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);
|
|
8539
|
+
background-color: var(--atomix-callout-bg);
|
|
8668
8540
|
border-radius: var(--atomix-callout-border-radius);
|
|
8669
8541
|
border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
|
|
8670
8542
|
transition: opacity var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing), transform var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing);
|
|
@@ -8703,9 +8575,9 @@ a, a:hover {
|
|
|
8703
8575
|
.c-callout__actions {
|
|
8704
8576
|
display: flex;
|
|
8705
8577
|
align-items: center;
|
|
8706
|
-
flex-wrap: wrap;
|
|
8707
8578
|
gap: var(--atomix-callout-actions-spacer);
|
|
8708
8579
|
margin-left: auto;
|
|
8580
|
+
margin-right: 10px;
|
|
8709
8581
|
}
|
|
8710
8582
|
.c-callout__close-btn {
|
|
8711
8583
|
display: inline-flex;
|
|
@@ -8745,10 +8617,7 @@ a, a:hover {
|
|
|
8745
8617
|
align-items: flex-start;
|
|
8746
8618
|
justify-content: flex-start;
|
|
8747
8619
|
border: none;
|
|
8748
|
-
background
|
|
8749
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8750
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8751
|
-
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);
|
|
8620
|
+
background-color: var(--atomix-callout-toast-bg);
|
|
8752
8621
|
box-shadow: var(--atomix-callout-box-shadow);
|
|
8753
8622
|
animation: calloutToastIn 0.3s var(--atomix-callout-transition-timing) forwards;
|
|
8754
8623
|
}
|
|
@@ -8810,9 +8679,35 @@ a, a:hover {
|
|
|
8810
8679
|
--atomix-callout-title-color: var(--atomix-light);
|
|
8811
8680
|
--atomix-callout-text-color: #d1d5db;
|
|
8812
8681
|
--atomix-callout-bg: var(--atomix-dark);
|
|
8813
|
-
--atomix-callout-border-color: var(--atomix-
|
|
8682
|
+
--atomix-callout-border-color: var(--atomix-dark-border-subtle);
|
|
8814
8683
|
--atomix-callout-icon-color: var(--atomix-light);
|
|
8815
8684
|
}
|
|
8685
|
+
.c-callout--glass {
|
|
8686
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
|
|
8687
|
+
padding: 0;
|
|
8688
|
+
border: none;
|
|
8689
|
+
display: block;
|
|
8690
|
+
}
|
|
8691
|
+
.c-callout--glass .c-callout__glass-content {
|
|
8692
|
+
display: flex;
|
|
8693
|
+
justify-content: center;
|
|
8694
|
+
align-items: center;
|
|
8695
|
+
padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
|
|
8696
|
+
border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
|
|
8697
|
+
max-width: var(--atomix-callout-width);
|
|
8698
|
+
border-radius: var(--atomix-callout-border-radius);
|
|
8699
|
+
width: 100%;
|
|
8700
|
+
}
|
|
8701
|
+
.c-callout--glass .c-callout__title {
|
|
8702
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8703
|
+
}
|
|
8704
|
+
.c-callout--glass .c-callout__text {
|
|
8705
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8706
|
+
}
|
|
8707
|
+
.c-callout--glass.c-callout--toast {
|
|
8708
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
|
|
8709
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
8710
|
+
}
|
|
8816
8711
|
.c-callout.is-hide {
|
|
8817
8712
|
opacity: 0;
|
|
8818
8713
|
transform: translateY(-10px);
|
|
@@ -8953,10 +8848,7 @@ a, a:hover {
|
|
|
8953
8848
|
color: var(--atomix-pagination-color);
|
|
8954
8849
|
font-size: var(--atomix-pagination-font-size);
|
|
8955
8850
|
padding: var(--atomix-pagination-padding-y) var(--atomix-pagination-padding-x);
|
|
8956
|
-
background
|
|
8957
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8958
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8959
|
-
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);
|
|
8851
|
+
background-color: var(--atomix-pagination-bg);
|
|
8960
8852
|
border-radius: var(--atomix-pagination-border-radius);
|
|
8961
8853
|
border: none;
|
|
8962
8854
|
cursor: pointer;
|
|
@@ -9040,10 +8932,7 @@ a, a:hover {
|
|
|
9040
8932
|
flex-direction: column;
|
|
9041
8933
|
gap: var(--atomix-popover-inner-gap-y) var(--atomix-popover-inner-gap-x);
|
|
9042
8934
|
padding: var(--atomix-popover-padding-y) var(--atomix-popover-padding-x);
|
|
9043
|
-
background
|
|
9044
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9045
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9046
|
-
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);
|
|
9047
8936
|
border-radius: var(--atomix-popover-border-radius);
|
|
9048
8937
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
9049
8938
|
}
|
|
@@ -9051,10 +8940,7 @@ a, a:hover {
|
|
|
9051
8940
|
position: absolute;
|
|
9052
8941
|
width: var(--atomix-popover-arrow-size);
|
|
9053
8942
|
height: var(--atomix-popover-arrow-size);
|
|
9054
|
-
background
|
|
9055
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9056
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9057
|
-
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);
|
|
8943
|
+
background-color: var(--atomix-popover-bg);
|
|
9058
8944
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
9059
8945
|
z-index: 1;
|
|
9060
8946
|
transform-origin: center;
|
|
@@ -9096,10 +8982,7 @@ a, a:hover {
|
|
|
9096
8982
|
--atomix-product-review-label-color: var(--atomix-text-muted);
|
|
9097
8983
|
padding: var(--atomix-product-review-padding);
|
|
9098
8984
|
border-radius: var(--atomix-product-review-border-radius);
|
|
9099
|
-
background
|
|
9100
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9101
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9102
|
-
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);
|
|
8985
|
+
background-color: var(--atomix-product-review-bg);
|
|
9103
8986
|
border: 1px solid var(--atomix-product-review-border-color);
|
|
9104
8987
|
width: 100%;
|
|
9105
8988
|
max-width: 37.5rem;
|
|
@@ -9159,10 +9042,7 @@ a, a:hover {
|
|
|
9159
9042
|
padding: 0.75rem;
|
|
9160
9043
|
border: 1px solid var(--atomix-product-review-border-color);
|
|
9161
9044
|
border-radius: var(--atomix-border-radius);
|
|
9162
|
-
background
|
|
9163
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9164
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9165
|
-
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);
|
|
9045
|
+
background-color: var(--atomix-body-bg);
|
|
9166
9046
|
color: var(--atomix-body-color);
|
|
9167
9047
|
font-family: inherit;
|
|
9168
9048
|
resize: vertical;
|
|
@@ -9210,10 +9090,7 @@ a, a:hover {
|
|
|
9210
9090
|
width: 100%;
|
|
9211
9091
|
max-width: var(--atomix-progress-width);
|
|
9212
9092
|
height: var(--atomix-progress-bar-height);
|
|
9213
|
-
background
|
|
9214
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9215
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9216
|
-
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);
|
|
9093
|
+
background-color: var(--atomix-progress-bg);
|
|
9217
9094
|
border-radius: var(--atomix-progress-border-radius);
|
|
9218
9095
|
overflow: hidden;
|
|
9219
9096
|
}
|
|
@@ -9221,10 +9098,7 @@ a, a:hover {
|
|
|
9221
9098
|
width: var(--atomix-progress-bar-width);
|
|
9222
9099
|
height: var(--atomix-progress-bar-height);
|
|
9223
9100
|
color: var(--atomix-progress-bar-color);
|
|
9224
|
-
background
|
|
9225
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9226
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9227
|
-
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);
|
|
9101
|
+
background-color: var(--atomix-progress-bar-bg);
|
|
9228
9102
|
border-radius: var(--atomix-progress-border-radius);
|
|
9229
9103
|
transition: var(--atomix-progress-bar-transition) var(--atomix-progress-bar-easing);
|
|
9230
9104
|
}
|
|
@@ -9431,10 +9305,7 @@ a, a:hover {
|
|
|
9431
9305
|
max-width: var(--atomix-river-width);
|
|
9432
9306
|
padding: var(--atomix-river-padding-y) var(--atomix-river-padding-x);
|
|
9433
9307
|
border-radius: var(--atomix-river-border-radius);
|
|
9434
|
-
background
|
|
9435
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9436
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9437
|
-
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);
|
|
9308
|
+
background-color: var(--atomix-river-bg);
|
|
9438
9309
|
}
|
|
9439
9310
|
.c-river__bg {
|
|
9440
9311
|
position: absolute;
|
|
@@ -9454,10 +9325,7 @@ a, a:hover {
|
|
|
9454
9325
|
.c-river__overlay {
|
|
9455
9326
|
position: absolute;
|
|
9456
9327
|
inset: 0;
|
|
9457
|
-
background
|
|
9458
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9459
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9460
|
-
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);
|
|
9328
|
+
background-color: var(--atomix-river-overlay);
|
|
9461
9329
|
opacity: var(--atomix-river-overlay-opacity);
|
|
9462
9330
|
border-radius: var(--atomix-river-border-radius);
|
|
9463
9331
|
}
|
|
@@ -9681,10 +9549,7 @@ a, a:hover {
|
|
|
9681
9549
|
left: 0;
|
|
9682
9550
|
width: 100%;
|
|
9683
9551
|
height: 100%;
|
|
9684
|
-
background
|
|
9685
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9686
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9687
|
-
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);
|
|
9552
|
+
background-color: var(--atomix-sectionintro-overlay-bg-color);
|
|
9688
9553
|
opacity: var(--atomix-sectionintro-overlay-opacity);
|
|
9689
9554
|
}
|
|
9690
9555
|
.c-sectionintro--has-bg {
|
|
@@ -9764,10 +9629,7 @@ a, a:hover {
|
|
|
9764
9629
|
padding: var(--atomix-select-padding-x) var(--atomix-select-padding-y);
|
|
9765
9630
|
color: var(--atomix-select-placeholder-color);
|
|
9766
9631
|
font-size: var(--atomix-select-font-size);
|
|
9767
|
-
background
|
|
9768
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9769
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9770
|
-
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);
|
|
9632
|
+
background-color: var(--atomix-select-bg);
|
|
9771
9633
|
border: 1px solid var(--atomix-select-border-color);
|
|
9772
9634
|
border-radius: var(--atomix-select-border-radius);
|
|
9773
9635
|
cursor: pointer;
|
|
@@ -9797,10 +9659,7 @@ a, a:hover {
|
|
|
9797
9659
|
height: 0px;
|
|
9798
9660
|
top: calc(100% + var(--atomix-select-panel-spacer-y));
|
|
9799
9661
|
left: 0;
|
|
9800
|
-
background
|
|
9801
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9802
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9803
|
-
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);
|
|
9662
|
+
background-color: var(--atomix-select-panel-bg);
|
|
9804
9663
|
border-radius: var(--atomix-select-panel-border-radius);
|
|
9805
9664
|
box-shadow: var(--atomix-select-panel-box-shadow);
|
|
9806
9665
|
overflow: hidden;
|
|
@@ -9821,10 +9680,7 @@ a, a:hover {
|
|
|
9821
9680
|
.c-select__item {
|
|
9822
9681
|
padding: var(--atomix-select-item-padding-x) var(--atomix-select-item-padding-y);
|
|
9823
9682
|
color: var(--atomix-select-item-color);
|
|
9824
|
-
background
|
|
9825
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9826
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9827
|
-
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);
|
|
9683
|
+
background-color: var(--atomix-select-item-bg);
|
|
9828
9684
|
border-radius: var(--atomix-select-item-border-radius);
|
|
9829
9685
|
transition-property: all;
|
|
9830
9686
|
transition-duration: 0.2s;
|
|
@@ -9835,10 +9691,7 @@ a, a:hover {
|
|
|
9835
9691
|
cursor: pointer;
|
|
9836
9692
|
}
|
|
9837
9693
|
.c-select__item:hover {
|
|
9838
|
-
background
|
|
9839
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9840
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9841
|
-
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);
|
|
9694
|
+
background-color: var(--atomix-select-item-bg-hover);
|
|
9842
9695
|
}
|
|
9843
9696
|
.c-select--lg {
|
|
9844
9697
|
--atomix-select-font-size: var(--atomix-select-font-size-lg);
|
|
@@ -9888,10 +9741,7 @@ a, a:hover {
|
|
|
9888
9741
|
--atomix-side-menu-inner-padding-top: 1.5rem;
|
|
9889
9742
|
width: 100%;
|
|
9890
9743
|
padding: var(--atomix-side-menu-padding-y) var(--atomix-side-menu-padding-x);
|
|
9891
|
-
background
|
|
9892
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9893
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9894
|
-
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);
|
|
9744
|
+
background-color: var(--atomix-side-menu-bg);
|
|
9895
9745
|
border-radius: var(--atomix-side-menu-border-radius);
|
|
9896
9746
|
border: var(--atomix-side-menu-border-width) solid var(--atomix-side-menu-border-color);
|
|
9897
9747
|
box-shadow: var(--atomix-side-menu-box-shadow);
|
|
@@ -9929,10 +9779,7 @@ a, a:hover {
|
|
|
9929
9779
|
justify-content: space-between;
|
|
9930
9780
|
width: 100%;
|
|
9931
9781
|
padding: var(--atomix-side-menu-toggler-padding-y) var(--atomix-side-menu-toggler-padding-x);
|
|
9932
|
-
background
|
|
9933
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9934
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9935
|
-
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);
|
|
9782
|
+
background-color: var(--atomix-side-menu-toggler-bg);
|
|
9936
9783
|
border: none;
|
|
9937
9784
|
border-radius: var(--atomix-side-menu-toggler-border-radius);
|
|
9938
9785
|
cursor: pointer;
|
|
@@ -9948,10 +9795,7 @@ a, a:hover {
|
|
|
9948
9795
|
}
|
|
9949
9796
|
}
|
|
9950
9797
|
.c-side-menu__toggler:hover {
|
|
9951
|
-
background
|
|
9952
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9953
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9954
|
-
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);
|
|
9798
|
+
background-color: var(--atomix-side-menu-toggler-hover-bg);
|
|
9955
9799
|
}
|
|
9956
9800
|
.c-side-menu__toggler:focus {
|
|
9957
9801
|
outline: 2px solid var(--atomix-focus-ring-color);
|
|
@@ -9989,10 +9833,7 @@ a, a:hover {
|
|
|
9989
9833
|
color: var(--atomix-side-menu-item-color);
|
|
9990
9834
|
font-size: var(--atomix-side-menu-item-font-size);
|
|
9991
9835
|
font-weight: var(--atomix-side-menu-item-font-weight);
|
|
9992
|
-
background
|
|
9993
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9994
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9995
|
-
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);
|
|
9836
|
+
background-color: var(--atomix-side-menu-item-bg);
|
|
9996
9837
|
border: none;
|
|
9997
9838
|
border-radius: var(--atomix-side-menu-item-border-radius);
|
|
9998
9839
|
text-decoration: none;
|
|
@@ -10001,10 +9842,7 @@ a, a:hover {
|
|
|
10001
9842
|
}
|
|
10002
9843
|
.c-side-menu__link:hover {
|
|
10003
9844
|
color: var(--atomix-side-menu-item-hover-color);
|
|
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-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);
|
|
9845
|
+
background-color: var(--atomix-side-menu-item-hover-bg);
|
|
10008
9846
|
text-decoration: none;
|
|
10009
9847
|
}
|
|
10010
9848
|
.c-side-menu__link:focus {
|
|
@@ -10016,18 +9854,12 @@ a, a:hover {
|
|
|
10016
9854
|
}
|
|
10017
9855
|
.c-side-menu__link.is-active {
|
|
10018
9856
|
color: var(--atomix-side-menu-item-active-color);
|
|
10019
|
-
background
|
|
10020
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10021
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10022
|
-
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);
|
|
9857
|
+
background-color: var(--atomix-side-menu-item-active-bg);
|
|
10023
9858
|
font-weight: 500;
|
|
10024
9859
|
}
|
|
10025
9860
|
.c-side-menu__link.is-disabled, .c-side-menu__link[aria-disabled=true] {
|
|
10026
9861
|
color: var(--atomix-side-menu-item-disabled-color);
|
|
10027
|
-
background
|
|
10028
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10029
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10030
|
-
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);
|
|
9862
|
+
background-color: var(--atomix-side-menu-item-disabled-bg);
|
|
10031
9863
|
cursor: not-allowed;
|
|
10032
9864
|
pointer-events: none;
|
|
10033
9865
|
opacity: 0.6;
|
|
@@ -10071,10 +9903,7 @@ a, a:hover {
|
|
|
10071
9903
|
display: inline-block;
|
|
10072
9904
|
width: var(--atomix-skeleton-width);
|
|
10073
9905
|
min-height: var(--atomix-skeleton-height);
|
|
10074
|
-
background
|
|
10075
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10076
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10077
|
-
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);
|
|
9906
|
+
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%);
|
|
10078
9907
|
background-size: 400% 100%;
|
|
10079
9908
|
border-radius: var(--atomix-skeleton-border-radius);
|
|
10080
9909
|
animation-name: atomix--skeleton-loading;
|
|
@@ -10170,10 +9999,7 @@ a, a:hover {
|
|
|
10170
9999
|
display: flex;
|
|
10171
10000
|
align-items: center;
|
|
10172
10001
|
justify-content: center;
|
|
10173
|
-
background
|
|
10174
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10175
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10176
|
-
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);
|
|
10002
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
10177
10003
|
border: 2px dashed var(--atomix-primary-border-subtle);
|
|
10178
10004
|
border-radius: 0.25rem;
|
|
10179
10005
|
}
|
|
@@ -10213,10 +10039,7 @@ a, a:hover {
|
|
|
10213
10039
|
height: var(--atomix-slider-nav-size);
|
|
10214
10040
|
border: none;
|
|
10215
10041
|
border-radius: 50rem;
|
|
10216
|
-
background
|
|
10217
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10218
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10219
|
-
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);
|
|
10042
|
+
background-color: var(--atomix-primary-bg-subtle);
|
|
10220
10043
|
color: var(--atomix-primary-text);
|
|
10221
10044
|
cursor: pointer;
|
|
10222
10045
|
pointer-events: auto;
|
|
@@ -10229,10 +10052,7 @@ a, a:hover {
|
|
|
10229
10052
|
}
|
|
10230
10053
|
.c-slider__navigation-prev:hover,
|
|
10231
10054
|
.c-slider__navigation-next:hover {
|
|
10232
|
-
background
|
|
10233
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10234
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10235
|
-
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);
|
|
10055
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
10236
10056
|
transform: translateY(-50%) scale(1.05);
|
|
10237
10057
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
10238
10058
|
}
|
|
@@ -10284,29 +10104,20 @@ a, a:hover {
|
|
|
10284
10104
|
height: 0.5rem;
|
|
10285
10105
|
border-radius: 50rem;
|
|
10286
10106
|
border: none;
|
|
10287
|
-
background
|
|
10288
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10289
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10290
|
-
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);
|
|
10107
|
+
background-color: var(--atomix-tertiary-bg-subtle);
|
|
10291
10108
|
cursor: pointer;
|
|
10292
10109
|
pointer-events: auto;
|
|
10293
10110
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10294
10111
|
}
|
|
10295
10112
|
.c-slider__pagination-bullet: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-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);
|
|
10113
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
10300
10114
|
transform: scale(1.2);
|
|
10301
10115
|
}
|
|
10302
10116
|
.c-slider__pagination-bullet:active {
|
|
10303
10117
|
transform: scale(1.1);
|
|
10304
10118
|
}
|
|
10305
10119
|
.c-slider__pagination-bullet--active {
|
|
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-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);
|
|
10120
|
+
background-color: var(--atomix-primary);
|
|
10310
10121
|
transform: scale(1.2);
|
|
10311
10122
|
}
|
|
10312
10123
|
.c-slider__empty-message {
|
|
@@ -10463,10 +10274,7 @@ a, a:hover {
|
|
|
10463
10274
|
.c-steps__line {
|
|
10464
10275
|
width: var(--atomix-steps-line-width);
|
|
10465
10276
|
height: var(--atomix-steps-line-height);
|
|
10466
|
-
background
|
|
10467
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10468
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10469
|
-
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);
|
|
10277
|
+
background-color: var(--atomix-steps-item-bg);
|
|
10470
10278
|
transition: 1s;
|
|
10471
10279
|
}
|
|
10472
10280
|
.c-steps__content {
|
|
@@ -10482,10 +10290,7 @@ a, a:hover {
|
|
|
10482
10290
|
height: var(--atomix-steps-item-number-size);
|
|
10483
10291
|
color: var(--atomix-steps-item-number-color);
|
|
10484
10292
|
font-size: var(--atomix-steps-item-number-font-size);
|
|
10485
|
-
background
|
|
10486
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10487
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10488
|
-
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);
|
|
10293
|
+
background-color: var(--atomix-steps-item-number-bg);
|
|
10489
10294
|
border-radius: var(--atomix-steps-item-number-border-radius);
|
|
10490
10295
|
}
|
|
10491
10296
|
.c-steps__text {
|
|
@@ -10562,10 +10367,7 @@ a, a:hover {
|
|
|
10562
10367
|
border-radius: var(--atomix-tabs-nav-btn-border-radius);
|
|
10563
10368
|
border: var(--atomix-tabs-nav-btn-border-width) solid transparent;
|
|
10564
10369
|
border-bottom: var(--atomix-tabs-nav-btn-border-width) solid var(--atomix-tabs-nav-btn-border-color);
|
|
10565
|
-
background
|
|
10566
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10567
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10568
|
-
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);
|
|
10370
|
+
background-color: var(--atomix-tabs-nav-btn-bg);
|
|
10569
10371
|
transition-property: all;
|
|
10570
10372
|
transition-duration: 0.2s;
|
|
10571
10373
|
transition-timing-function: ease-in-out;
|
|
@@ -10576,20 +10378,14 @@ a, a:hover {
|
|
|
10576
10378
|
border-color: transparent transparent var(--atomix-tabs-nav-btn-border-active-color) transparent;
|
|
10577
10379
|
}
|
|
10578
10380
|
.c-tabs__nav-btn:hover {
|
|
10579
|
-
background
|
|
10580
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10581
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10582
|
-
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);
|
|
10381
|
+
background-color: var(--atomix-tabs-nav-btn-bg-hover);
|
|
10583
10382
|
}
|
|
10584
10383
|
.c-tabs__nav-btn:disabled, .c-tabs__nav-btn.is-disabled {
|
|
10585
10384
|
--atomix-tabs-nav-btn-border-active-color: var(
|
|
10586
10385
|
--atomix-tabs-nav-btn-border-disabled-color
|
|
10587
10386
|
);
|
|
10588
10387
|
color: var(--atomix-tabs-nav-btn-border-disabled-color);
|
|
10589
|
-
background
|
|
10590
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10591
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10592
|
-
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);
|
|
10388
|
+
background-color: var(--atomix-tabs-nav-btn-bg-disabled);
|
|
10593
10389
|
pointer-events: none;
|
|
10594
10390
|
}
|
|
10595
10391
|
.c-tabs__nav-btn:focus-visible {
|
|
@@ -10634,10 +10430,7 @@ a, a:hover {
|
|
|
10634
10430
|
width: 100%;
|
|
10635
10431
|
max-width: var(--atomix-testimonial-width);
|
|
10636
10432
|
padding: var(--atomix-testimonial-padding-y) var(--atomix-testimonial-padding-x);
|
|
10637
|
-
background
|
|
10638
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10639
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10640
|
-
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);
|
|
10433
|
+
background-color: var(--atomix-testimonial-bg);
|
|
10641
10434
|
}
|
|
10642
10435
|
.c-testimonial__quote {
|
|
10643
10436
|
color: var(--atomix-testimonial-quote-color);
|
|
@@ -10681,10 +10474,7 @@ a, a:hover {
|
|
|
10681
10474
|
margin-bottom: 1.5rem;
|
|
10682
10475
|
border: 1px solid var(--atomix-todo-border-color);
|
|
10683
10476
|
border-radius: var(--atomix-todo-border-radius);
|
|
10684
|
-
background
|
|
10685
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10686
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10687
|
-
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);
|
|
10477
|
+
background-color: var(--atomix-todo-bg);
|
|
10688
10478
|
color: var(--atomix-todo-color);
|
|
10689
10479
|
padding: 1.25rem;
|
|
10690
10480
|
}
|
|
@@ -10726,10 +10516,7 @@ a, a:hover {
|
|
|
10726
10516
|
transition: background-color 0.2s ease;
|
|
10727
10517
|
}
|
|
10728
10518
|
.c-todo__item:hover {
|
|
10729
|
-
background
|
|
10730
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10731
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10732
|
-
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);
|
|
10519
|
+
background-color: var(--atomix-todo-item-hover-bg);
|
|
10733
10520
|
}
|
|
10734
10521
|
.c-todo__item--completed .c-todo__item-text {
|
|
10735
10522
|
color: var(--atomix-todo-completed-color);
|
|
@@ -10817,10 +10604,7 @@ a, a:hover {
|
|
|
10817
10604
|
flex: 0 0 var(--atomix-toggle-switch-width);
|
|
10818
10605
|
width: var(--atomix-toggle-switch-width);
|
|
10819
10606
|
height: var(--atomix-toggle-switch-height);
|
|
10820
|
-
background
|
|
10821
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10822
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10823
|
-
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);
|
|
10607
|
+
background-color: var(--atomix-toggle-switch-bg);
|
|
10824
10608
|
border-radius: var(--atomix-toggle-switch-border-radius);
|
|
10825
10609
|
-webkit-user-select: none;
|
|
10826
10610
|
-moz-user-select: none;
|
|
@@ -10837,10 +10621,7 @@ a, a:hover {
|
|
|
10837
10621
|
width: var(--atomix-toggle-switch-handle-width);
|
|
10838
10622
|
height: var(--atomix-toggle-switch-handle-height);
|
|
10839
10623
|
margin: var(--atomix-toggle-switch-handle-margin);
|
|
10840
|
-
background
|
|
10841
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10842
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10843
|
-
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);
|
|
10624
|
+
background-color: var(--atomix-toggle-switch-handle-bg);
|
|
10844
10625
|
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
10845
10626
|
transition-property: all;
|
|
10846
10627
|
transition-duration: 0.2s;
|
|
@@ -10861,10 +10642,7 @@ a, a:hover {
|
|
|
10861
10642
|
pointer-events: none;
|
|
10862
10643
|
}
|
|
10863
10644
|
.c-toggle.is-disabled:not(.is-on) .c-toggle__switch {
|
|
10864
|
-
background
|
|
10865
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10866
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10867
|
-
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);
|
|
10645
|
+
background-color: var(--atomix-toggle-switch-disabled-bg);
|
|
10868
10646
|
}
|
|
10869
10647
|
.c-toggle.is-disabled.is-on {
|
|
10870
10648
|
pointer-events: none;
|
|
@@ -10873,10 +10651,7 @@ a, a:hover {
|
|
|
10873
10651
|
content: "";
|
|
10874
10652
|
position: absolute;
|
|
10875
10653
|
inset: 0;
|
|
10876
|
-
background
|
|
10877
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10878
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10879
|
-
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(107, 114, 128, 0.6) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(107, 114, 128, 0.6) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(107, 114, 128, 0.6) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10654
|
+
background-color: rgba(107, 114, 128, 0.6);
|
|
10880
10655
|
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
10881
10656
|
}
|
|
10882
10657
|
.c-tooltip {
|
|
@@ -10910,10 +10685,7 @@ a, a:hover {
|
|
|
10910
10685
|
font-size: var(--atomix-tooltip-font-size);
|
|
10911
10686
|
font-weight: var(--atomix-tooltip-font-weight);
|
|
10912
10687
|
padding: var(--atomix-tooltip-padding-y) var(--atomix-tooltip-padding-x);
|
|
10913
|
-
background
|
|
10914
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10915
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10916
|
-
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);
|
|
10688
|
+
background-color: var(--atomix-tooltip-bg);
|
|
10917
10689
|
border-radius: var(--atomix-tooltip-border-radius);
|
|
10918
10690
|
z-index: 2;
|
|
10919
10691
|
opacity: 0;
|
|
@@ -10931,10 +10703,7 @@ a, a:hover {
|
|
|
10931
10703
|
transform: translateX(-50%) rotate(45deg);
|
|
10932
10704
|
width: var(--atomix-tooltip-arrow-size);
|
|
10933
10705
|
height: var(--atomix-tooltip-arrow-size);
|
|
10934
|
-
background
|
|
10935
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10936
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10937
|
-
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);
|
|
10706
|
+
background-color: var(--atomix-tooltip-bg);
|
|
10938
10707
|
z-index: 1;
|
|
10939
10708
|
}
|
|
10940
10709
|
.c-tooltip--top-left {
|
|
@@ -11047,10 +10816,7 @@ a, a:hover {
|
|
|
11047
10816
|
width: 100%;
|
|
11048
10817
|
max-width: var(--atomix-upload-width);
|
|
11049
10818
|
padding: var(--atomix-upload-padding-y) var(--atomix-upload-padding-x);
|
|
11050
|
-
background
|
|
11051
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11052
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11053
|
-
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);
|
|
10819
|
+
background-color: var(--atomix-upload-bg);
|
|
11054
10820
|
border-radius: var(--atomix-upload-border-radius);
|
|
11055
10821
|
transition-property: all;
|
|
11056
10822
|
transition-duration: 0.2s;
|
|
@@ -11058,10 +10824,7 @@ a, a:hover {
|
|
|
11058
10824
|
transition-delay: 0s;
|
|
11059
10825
|
}
|
|
11060
10826
|
.c-upload:hover {
|
|
11061
|
-
background
|
|
11062
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11063
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11064
|
-
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);
|
|
10827
|
+
background-color: var(--atomix-upload-hover-bg);
|
|
11065
10828
|
}
|
|
11066
10829
|
.c-upload__inner {
|
|
11067
10830
|
display: flex;
|
|
@@ -11074,10 +10837,7 @@ a, a:hover {
|
|
|
11074
10837
|
.c-upload__icon {
|
|
11075
10838
|
font-size: var(--atomix-upload-icon-size);
|
|
11076
10839
|
padding: var(--atomix-upload-icon-padding);
|
|
11077
|
-
background
|
|
11078
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11079
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11080
|
-
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);
|
|
10840
|
+
background-color: var(--atomix-upload-icon-bg);
|
|
11081
10841
|
border-radius: 50rem;
|
|
11082
10842
|
}
|
|
11083
10843
|
.c-upload__title {
|
|
@@ -11215,37 +10975,34 @@ a, a:hover {
|
|
|
11215
10975
|
pointer-events: none;
|
|
11216
10976
|
}
|
|
11217
10977
|
.c-video-player {
|
|
11218
|
-
--atomix
|
|
11219
|
-
--atomix
|
|
11220
|
-
--atomix
|
|
11221
|
-
--atomix
|
|
11222
|
-
--atomix
|
|
11223
|
-
--atomix
|
|
11224
|
-
--atomix
|
|
11225
|
-
--atomix
|
|
11226
|
-
--atomix
|
|
11227
|
-
--atomix
|
|
11228
|
-
--atomix
|
|
11229
|
-
--atomix
|
|
11230
|
-
--atomix
|
|
11231
|
-
--atomix
|
|
11232
|
-
--atomix
|
|
11233
|
-
--atomix
|
|
11234
|
-
--atomix
|
|
11235
|
-
--atomix
|
|
11236
|
-
--atomix
|
|
11237
|
-
--atomix
|
|
11238
|
-
--atomix
|
|
11239
|
-
--atomix
|
|
11240
|
-
--atomix
|
|
11241
|
-
--atomix
|
|
11242
|
-
--atomix
|
|
10978
|
+
--atomix--video-player-bg: #000;
|
|
10979
|
+
--atomix--video-player-border-radius: 8px;
|
|
10980
|
+
--atomix--video-player-controls-padding: 20px 16px 16px;
|
|
10981
|
+
--atomix--video-player-progress-height: 4px;
|
|
10982
|
+
--atomix--video-player-button-size: 40px;
|
|
10983
|
+
--atomix--video-player-font-size: 14px;
|
|
10984
|
+
--atomix--video-player-transition: all 0.3s ease;
|
|
10985
|
+
--atomix--video-player-volume-width: 80px;
|
|
10986
|
+
--atomix--video-player-volume-width-mobile: 60px;
|
|
10987
|
+
--atomix--video-player-volume-height: 4px;
|
|
10988
|
+
--atomix--video-player-volume-height-hover: 6px;
|
|
10989
|
+
--atomix--video-player-volume-thumb-size: 12px;
|
|
10990
|
+
--atomix--video-player-volume-bg: rgba(255, 255, 255, 0.3);
|
|
10991
|
+
--atomix--video-player-volume-bg-hover: rgba(255, 255, 255, 0.5);
|
|
10992
|
+
--atomix--video-player-volume-fill: var(--atomix-color-primary);
|
|
10993
|
+
--atomix--video-player-volume-fill-hover: var(--atomix-color-primary-light);
|
|
10994
|
+
--atomix--video-player-volume-fill-active: var(--atomix-color-primary-dark);
|
|
10995
|
+
--atomix--video-player-subtitle-bg: rgba(0, 0, 0, 0.85);
|
|
10996
|
+
--atomix--video-player-subtitle-color: #ffffff;
|
|
10997
|
+
--atomix--video-player-subtitle-font-size: 18px;
|
|
10998
|
+
--atomix--video-player-subtitle-font-weight: 500;
|
|
10999
|
+
--atomix--video-player-subtitle-line-height: 1.5;
|
|
11000
|
+
--atomix--video-player-subtitle-border-radius: 6px;
|
|
11001
|
+
--atomix--video-player-subtitle-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
|
11002
|
+
--atomix--video-player-subtitle-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
11243
11003
|
position: relative;
|
|
11244
11004
|
width: 100%;
|
|
11245
|
-
background
|
|
11246
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11247
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11248
|
-
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);
|
|
11005
|
+
background-color: var(--atomix--video-player-bg, #000);
|
|
11249
11006
|
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
11250
11007
|
overflow: hidden;
|
|
11251
11008
|
font-family: var(--atomix--font-family-base);
|
|
@@ -11315,10 +11072,7 @@ a, a:hover {
|
|
|
11315
11072
|
bottom: 0;
|
|
11316
11073
|
left: 0;
|
|
11317
11074
|
right: 0;
|
|
11318
|
-
background: linear-gradient(
|
|
11319
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11320
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11321
|
-
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);
|
|
11075
|
+
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
|
|
11322
11076
|
padding: 1.25rem 1rem 1rem;
|
|
11323
11077
|
opacity: 0;
|
|
11324
11078
|
visibility: hidden;
|
|
@@ -11502,10 +11256,7 @@ a, a:hover {
|
|
|
11502
11256
|
bottom: 3.125rem;
|
|
11503
11257
|
right: 0;
|
|
11504
11258
|
min-width: 12.5rem;
|
|
11505
|
-
background
|
|
11506
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11507
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11508
|
-
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);
|
|
11259
|
+
background-color: rgba(var(--atomix-primary-rgb), 0.7);
|
|
11509
11260
|
border-radius: 0.5rem;
|
|
11510
11261
|
padding: 0.5rem;
|
|
11511
11262
|
-webkit-backdrop-filter: blur(10px);
|
|
@@ -11701,6 +11452,24 @@ a, a:hover {
|
|
|
11701
11452
|
.c-video-player--ambient .c-video-player__ambient-canvas {
|
|
11702
11453
|
display: block;
|
|
11703
11454
|
}
|
|
11455
|
+
.c-video-player--glass {
|
|
11456
|
+
position: relative;
|
|
11457
|
+
}
|
|
11458
|
+
.c-video-player__glass-overlay {
|
|
11459
|
+
overflow: hidden;
|
|
11460
|
+
position: absolute;
|
|
11461
|
+
top: 0;
|
|
11462
|
+
left: 0;
|
|
11463
|
+
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
11464
|
+
}
|
|
11465
|
+
.c-video-player__glass-content {
|
|
11466
|
+
position: absolute;
|
|
11467
|
+
top: 0;
|
|
11468
|
+
left: 0;
|
|
11469
|
+
right: 0;
|
|
11470
|
+
bottom: 0;
|
|
11471
|
+
pointer-events: auto;
|
|
11472
|
+
}
|
|
11704
11473
|
.c-video-player__subtitles {
|
|
11705
11474
|
position: absolute;
|
|
11706
11475
|
bottom: 5rem;
|
|
@@ -11755,10 +11524,7 @@ a, a:hover {
|
|
|
11755
11524
|
transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11756
11525
|
}
|
|
11757
11526
|
.c-photo-viewer__container {
|
|
11758
|
-
background
|
|
11759
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11760
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11761
|
-
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);
|
|
11527
|
+
background-color: var(--atomix-body-bg);
|
|
11762
11528
|
border: 1px solid var(--atomix-primary-border-subtle);
|
|
11763
11529
|
border-radius: 0.625rem;
|
|
11764
11530
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
|
|
@@ -11812,10 +11578,7 @@ a, a:hover {
|
|
|
11812
11578
|
border: 2px solid transparent;
|
|
11813
11579
|
border-radius: 8px;
|
|
11814
11580
|
padding: 0;
|
|
11815
|
-
background
|
|
11816
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11817
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11818
|
-
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);
|
|
11581
|
+
background-color: transparent;
|
|
11819
11582
|
cursor: pointer;
|
|
11820
11583
|
overflow: hidden;
|
|
11821
11584
|
position: relative;
|
|
@@ -11873,10 +11636,7 @@ body.is-open-photoviewer {
|
|
|
11873
11636
|
width: 100vw;
|
|
11874
11637
|
height: 100vh;
|
|
11875
11638
|
z-index: 1000;
|
|
11876
|
-
background
|
|
11877
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11878
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11879
|
-
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);
|
|
11639
|
+
background-color: transparent;
|
|
11880
11640
|
opacity: 1;
|
|
11881
11641
|
transition-property: opacity;
|
|
11882
11642
|
}
|