@shohojdhara/atomix 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/atomix.css +292 -529
- package/dist/atomix.min.css +5 -5
- package/dist/index.d.ts +623 -121
- package/dist/index.esm.js +11475 -6047
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4698 -2755
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/themes/boomdevs.css +291 -528
- package/dist/themes/boomdevs.min.css +6 -6
- package/dist/themes/esrar.css +292 -529
- package/dist/themes/esrar.min.css +6 -6
- package/dist/themes/mashroom.css +286 -526
- package/dist/themes/mashroom.min.css +6 -6
- package/dist/themes/shaj-default.css +286 -526
- package/dist/themes/shaj-default.min.css +6 -6
- package/package.json +66 -15
- package/src/components/Accordion/Accordion.stories.tsx +137 -0
- package/src/components/Accordion/Accordion.tsx +33 -3
- package/src/components/AtomixGlass/AtomixGlass.stories.tsx +3011 -0
- package/src/components/AtomixGlass/AtomixGlass.test.tsx +199 -0
- package/src/components/AtomixGlass/AtomixGlass.tsx +1281 -0
- package/src/components/AtomixGlass/AtomixGlassComprehensivePreview.stories.tsx +1369 -0
- package/src/components/AtomixGlass/README.md +134 -0
- package/src/components/AtomixGlass/index.ts +10 -0
- package/src/components/AtomixGlass/shader-utils.ts +140 -0
- package/src/components/AtomixGlass/utils.ts +8 -0
- package/src/components/Badge/Badge.stories.tsx +169 -0
- package/src/components/Badge/Badge.tsx +27 -2
- package/src/components/Button/Button.stories.tsx +345 -0
- package/src/components/Button/Button.tsx +35 -3
- package/src/components/Button/README.md +216 -0
- package/src/components/Callout/Callout.stories.tsx +813 -78
- package/src/components/Callout/Callout.test.tsx +368 -0
- package/src/components/Callout/Callout.tsx +26 -7
- package/src/components/Callout/README.md +409 -0
- package/src/components/Card/Card.stories.tsx +140 -0
- package/src/components/Card/Card.tsx +19 -3
- package/src/components/DatePicker/DatePicker copy.tsx +551 -0
- package/src/components/DatePicker/DatePicker.stories.tsx +188 -0
- package/src/components/DatePicker/DatePicker.tsx +379 -332
- package/src/components/DatePicker/readme.md +110 -1
- package/src/components/DatePicker/types.ts +8 -0
- package/src/components/Dropdown/Dropdown.stories.tsx +145 -0
- package/src/components/Dropdown/Dropdown.tsx +34 -5
- package/src/components/Form/Checkbox.stories.tsx +101 -0
- package/src/components/Form/Checkbox.tsx +26 -2
- package/src/components/Form/Input.stories.tsx +124 -0
- package/src/components/Form/Input.tsx +36 -7
- package/src/components/Form/Radio.stories.tsx +139 -0
- package/src/components/Form/Radio.tsx +26 -2
- package/src/components/Form/Select.stories.tsx +110 -0
- package/src/components/Form/Select.tsx +26 -2
- package/src/components/Form/Textarea.stories.tsx +104 -0
- package/src/components/Form/Textarea.tsx +36 -7
- package/src/components/Hero/Hero.stories.tsx +54 -1
- package/src/components/Hero/Hero.tsx +70 -11
- package/src/components/Modal/Modal.stories.tsx +235 -0
- package/src/components/Modal/Modal.tsx +64 -35
- package/src/components/Pagination/Pagination.stories.tsx +101 -0
- package/src/components/Pagination/Pagination.tsx +25 -1
- package/src/components/Popover/Popover.stories.tsx +94 -0
- package/src/components/Popover/Popover.tsx +30 -4
- package/src/components/Rating/Rating.stories.tsx +112 -0
- package/src/components/Rating/Rating.tsx +25 -1
- package/src/components/Steps/Steps.stories.tsx +119 -0
- package/src/components/Steps/Steps.tsx +32 -1
- package/src/components/Tab/Tab.stories.tsx +88 -0
- package/src/components/Tab/Tab.tsx +32 -1
- package/src/components/Toggle/Toggle.stories.tsx +92 -0
- package/src/components/Toggle/Toggle.tsx +32 -1
- package/src/components/Tooltip/Tooltip.stories.tsx +131 -0
- package/src/components/Tooltip/Tooltip.tsx +43 -7
- package/src/components/VideoPlayer/VideoPlayer.stories.tsx +1002 -196
- package/src/components/VideoPlayer/VideoPlayer.tsx +161 -4
- package/src/components/index.ts +1 -0
- package/src/lib/composables/index.ts +4 -0
- package/src/lib/composables/useAtomixGlass.ts +71 -0
- package/src/lib/composables/useButton.ts +3 -1
- package/src/lib/composables/useCallout.ts +4 -1
- package/src/lib/composables/useGlassContainer.ts +168 -0
- package/src/lib/constants/components.ts +88 -0
- package/src/lib/types/components.ts +352 -0
- package/src/lib/utils/displacement-generator.ts +86 -0
- package/src/styles/01-settings/_settings.background.scss +8 -7
- package/src/styles/01-settings/_settings.callout.scss +7 -7
- package/src/styles/02-tools/_tools.animations.scss +19 -0
- package/src/styles/02-tools/_tools.background.scss +19 -17
- package/src/styles/02-tools/_tools.glass.scss +1 -0
- package/src/styles/03-generic/_generic.root.scss +3 -2
- package/src/styles/04-elements/_elements.body.scss +0 -18
- package/src/styles/06-components/_components.accordion.scss +16 -0
- package/src/styles/06-components/_components.atomix-glass.scss +0 -0
- package/src/styles/06-components/_components.badge.scss +34 -0
- package/src/styles/06-components/_components.button.scss +10 -0
- package/src/styles/06-components/_components.callout.scss +41 -2
- package/src/styles/06-components/_components.card.scss +17 -0
- package/src/styles/06-components/_components.chart.scss +1 -1
- package/src/styles/06-components/_components.datepicker.scss +18 -0
- package/src/styles/06-components/_components.dropdown.scss +7 -1
- package/src/styles/06-components/_components.hero.scss +1 -2
- package/src/styles/06-components/_components.input.scss +31 -1
- package/src/styles/06-components/_components.video-player.scss +48 -26
- package/src/styles/06-components/_index.scss +1 -0
- package/src/styles/99-utilities/_utilities.glass-fixes.scss +48 -0
- package/dist/themes/yabai.css +0 -15207
- package/dist/themes/yabai.min.css +0 -189
package/dist/themes/mashroom.css
CHANGED
|
@@ -39,6 +39,23 @@
|
|
|
39
39
|
background-position: 0 50%;
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
|
+
@keyframes backgroundMoving {
|
|
43
|
+
0% {
|
|
44
|
+
background-position: 0 0%;
|
|
45
|
+
}
|
|
46
|
+
250% {
|
|
47
|
+
background-position: 100% 100%;
|
|
48
|
+
}
|
|
49
|
+
50% {
|
|
50
|
+
background-position: 100% 0%;
|
|
51
|
+
}
|
|
52
|
+
75% {
|
|
53
|
+
background-position: 0% 100%;
|
|
54
|
+
}
|
|
55
|
+
100% {
|
|
56
|
+
background-position: 100% 100%;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
42
59
|
@keyframes component-spin {
|
|
43
60
|
0% {
|
|
44
61
|
transform: rotate(0deg);
|
|
@@ -622,25 +639,10 @@ body {
|
|
|
622
639
|
font-weight: 400;
|
|
623
640
|
font-size: 1rem;
|
|
624
641
|
line-height: 1.6;
|
|
625
|
-
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");
|
|
626
|
-
background-size: cover;
|
|
627
|
-
background-repeat: no-repeat;
|
|
628
|
-
background-attachment: fixed;
|
|
629
642
|
}
|
|
630
643
|
body.is-blocked, body.is-modal-open {
|
|
631
644
|
overflow: hidden;
|
|
632
645
|
}
|
|
633
|
-
body::after {
|
|
634
|
-
content: "";
|
|
635
|
-
position: fixed;
|
|
636
|
-
top: 0;
|
|
637
|
-
left: 0;
|
|
638
|
-
width: 100%;
|
|
639
|
-
height: 100%;
|
|
640
|
-
opacity: 0.7;
|
|
641
|
-
z-index: -1;
|
|
642
|
-
background: var(--atomix-gradient);
|
|
643
|
-
}
|
|
644
646
|
h1,
|
|
645
647
|
.h1 {
|
|
646
648
|
font-size: 2.75rem;
|
|
@@ -16029,10 +16031,7 @@ a, a:hover {
|
|
|
16029
16031
|
transition-duration: 0.2s;
|
|
16030
16032
|
transition-timing-function: ease-in-out;
|
|
16031
16033
|
transition-delay: 0s;
|
|
16032
|
-
background
|
|
16033
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
16034
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
16035
|
-
box-shadow: var(--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);
|
|
16034
|
+
background-color: var(--atomix-accordion-header-bg);
|
|
16036
16035
|
}
|
|
16037
16036
|
.c-accordion__header--icon-left {
|
|
16038
16037
|
flex-direction: row-reverse;
|
|
@@ -16067,10 +16066,7 @@ a, a:hover {
|
|
|
16067
16066
|
color: var(--atomix-accordion-body-color);
|
|
16068
16067
|
padding: var(--atomix-accordion-body-padding-y) var(--atomix-accordion-body-padding-x);
|
|
16069
16068
|
border-radius: 0 0 var(--atomix-accordion-border-radius) var(--atomix-accordion-border-radius);
|
|
16070
|
-
background
|
|
16071
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
16072
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
16073
|
-
box-shadow: var(--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);
|
|
16069
|
+
background-color: var(--atomix-accordion-body-bg);
|
|
16074
16070
|
}
|
|
16075
16071
|
.c-accordion:focus, .c-accordion.is-focused {
|
|
16076
16072
|
--atomix-accordion-border-color: var(--atomix-focus-border-color);
|
|
@@ -16087,6 +16083,15 @@ a, a:hover {
|
|
|
16087
16083
|
--atomix-accordion-body-color: var(--atomix-accordion-disable-color);
|
|
16088
16084
|
--atomix-accordion-icon-color: var(--atomix-accordion-disable-color);
|
|
16089
16085
|
}
|
|
16086
|
+
.c-accordion--glass {
|
|
16087
|
+
border-color: transparent;
|
|
16088
|
+
}
|
|
16089
|
+
.c-accordion--glass .c-accordion__header {
|
|
16090
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
|
|
16091
|
+
}
|
|
16092
|
+
.c-accordion--glass .c-accordion__body {
|
|
16093
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
|
|
16094
|
+
}
|
|
16090
16095
|
.c-avatar {
|
|
16091
16096
|
--atomix-avatar-fit: cover;
|
|
16092
16097
|
--atomix-avatar-size: 2.75rem;
|
|
@@ -16108,10 +16113,7 @@ a, a:hover {
|
|
|
16108
16113
|
width: var(--atomix-avatar-size);
|
|
16109
16114
|
height: var(--atomix-avatar-size);
|
|
16110
16115
|
border-radius: var(--atomix-avatar-border-radius);
|
|
16111
|
-
background
|
|
16112
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
16113
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
16114
|
-
box-shadow: var(--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);
|
|
16116
|
+
background-color: var(--atomix-avatar-bg);
|
|
16115
16117
|
color: var(--atomix-avatar-color);
|
|
16116
16118
|
border: var(--atomix-avatar-border-width) solid var(--atomix-avatar-border-color);
|
|
16117
16119
|
overflow: hidden;
|
|
@@ -16213,10 +16215,7 @@ a, a:hover {
|
|
|
16213
16215
|
color: var(--atomix-avatar-group-more-color);
|
|
16214
16216
|
font-size: var(--atomix-avatar-group-more-font-size);
|
|
16215
16217
|
font-weight: var(--atomix-avatar-group-more-font-weight);
|
|
16216
|
-
background
|
|
16217
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
16218
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
16219
|
-
box-shadow: var(--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);
|
|
16218
|
+
background-color: var(--atomix-avatar-group-more-bg);
|
|
16220
16219
|
border: var(--atomix-avatar-group-more-border-width) solid var(--atomix-avatar-group-more-border-color);
|
|
16221
16220
|
width: var(--atomix-avatar-size);
|
|
16222
16221
|
height: var(--atomix-avatar-size);
|
|
@@ -16289,10 +16288,7 @@ a, a:hover {
|
|
|
16289
16288
|
line-height: 1;
|
|
16290
16289
|
padding: var(--atomix-tag-padding-y) var(--atomix-tag-padding-x);
|
|
16291
16290
|
border-radius: var(--atomix-tag-border-radius);
|
|
16292
|
-
background
|
|
16293
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
16294
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
16295
|
-
box-shadow: var(--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);
|
|
16291
|
+
background-color: var(--atomix-tag-bg-color);
|
|
16296
16292
|
-webkit-user-select: none;
|
|
16297
16293
|
-moz-user-select: none;
|
|
16298
16294
|
user-select: none;
|
|
@@ -16308,6 +16304,10 @@ a, a:hover {
|
|
|
16308
16304
|
.c-badge--lg {
|
|
16309
16305
|
--atomix-tag-padding-y: 8px;
|
|
16310
16306
|
}
|
|
16307
|
+
.c-badge--glass {
|
|
16308
|
+
background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 80%, transparent);
|
|
16309
|
+
border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 20%, transparent);
|
|
16310
|
+
}
|
|
16311
16311
|
.c-badge--primary {
|
|
16312
16312
|
--atomix-tag-bg-color: var(--atomix-brand-bg-subtle);
|
|
16313
16313
|
--atomix-tag-color: var(--atomix-brand-text-emphasis);
|
|
@@ -16335,10 +16335,16 @@ a, a:hover {
|
|
|
16335
16335
|
.c-badge--light {
|
|
16336
16336
|
--atomix-tag-bg-color: var(--atomix-light);
|
|
16337
16337
|
--atomix-tag-color: var(--atomix-dark);
|
|
16338
|
+
border: 1px solid var(--atomix-light);
|
|
16338
16339
|
}
|
|
16339
16340
|
.c-badge--dark {
|
|
16340
16341
|
--atomix-tag-bg-color: var(--atomix-dark);
|
|
16341
16342
|
--atomix-tag-color: var(--atomix-light);
|
|
16343
|
+
border: 1px solid var(--atomix-dark);
|
|
16344
|
+
}
|
|
16345
|
+
.c-badge-glass {
|
|
16346
|
+
box-shadow: inset 1px 2px 3px rgba(255, 255, 255, 0.1), inset 0 -2px 2px rgba(0, 0, 0, 0.3);
|
|
16347
|
+
border-radius: 999px;
|
|
16342
16348
|
}
|
|
16343
16349
|
.c-breadcrumb {
|
|
16344
16350
|
--atomix-breadcrumb-font-size: 0.875rem;
|
|
@@ -16360,10 +16366,7 @@ a, a:hover {
|
|
|
16360
16366
|
list-style: none;
|
|
16361
16367
|
padding-left: 0px;
|
|
16362
16368
|
margin-bottom: var(--atomix-breadcrumb-margin-bottom);
|
|
16363
|
-
background
|
|
16364
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
16365
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
16366
|
-
box-shadow: var(--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);
|
|
16369
|
+
background-color: var(--atomix-breadcrumb-bg);
|
|
16367
16370
|
}
|
|
16368
16371
|
.c-breadcrumb__item {
|
|
16369
16372
|
display: flex;
|
|
@@ -16458,10 +16461,7 @@ a, a:hover {
|
|
|
16458
16461
|
text-align: center;
|
|
16459
16462
|
white-space: nowrap;
|
|
16460
16463
|
vertical-align: middle;
|
|
16461
|
-
background
|
|
16462
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
16463
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
16464
|
-
box-shadow: var(--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);
|
|
16464
|
+
background-color: var(--atomix-btn-bg);
|
|
16465
16465
|
cursor: pointer;
|
|
16466
16466
|
-webkit-user-select: none;
|
|
16467
16467
|
-moz-user-select: none;
|
|
@@ -16475,10 +16475,7 @@ a, a:hover {
|
|
|
16475
16475
|
}
|
|
16476
16476
|
.c-btn:hover {
|
|
16477
16477
|
color: var(--atomix-btn-hover-color);
|
|
16478
|
-
background
|
|
16479
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
16480
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
16481
|
-
box-shadow: var(--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);
|
|
16478
|
+
background-color: var(--atomix-btn-hover-bg);
|
|
16482
16479
|
border-color: var(--atomix-btn-hover-border-color);
|
|
16483
16480
|
}
|
|
16484
16481
|
.c-btn--primary {
|
|
@@ -16742,13 +16739,16 @@ a, a:hover {
|
|
|
16742
16739
|
.c-btn:disabled, .c-btn--disabled, fieldset:disabled .c-btn {
|
|
16743
16740
|
color: var(--atomix-btn-disabled-color);
|
|
16744
16741
|
pointer-events: none;
|
|
16745
|
-
background
|
|
16746
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
16747
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
16748
|
-
box-shadow: var(--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);
|
|
16742
|
+
background-color: var(--atomix-btn-disabled-bg);
|
|
16749
16743
|
border-color: var(--atomix-btn-disabled-border-color);
|
|
16750
16744
|
opacity: var(--atomix-btn-disabled-opacity);
|
|
16751
16745
|
}
|
|
16746
|
+
.c-btn--glass {
|
|
16747
|
+
background-color: color-mix(in srgb, var(--atomix-btn-bg) 50%, transparent);
|
|
16748
|
+
}
|
|
16749
|
+
.c-btn--glass:hover {
|
|
16750
|
+
background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 50%, transparent);
|
|
16751
|
+
}
|
|
16752
16752
|
.c-datepicker {
|
|
16753
16753
|
--atomix-datepicker-width: 22rem;
|
|
16754
16754
|
--atomix-datepicker-padding-x: 0.75rem;
|
|
@@ -16827,10 +16827,7 @@ a, a:hover {
|
|
|
16827
16827
|
z-index: 5;
|
|
16828
16828
|
width: var(--atomix-datepicker-width);
|
|
16829
16829
|
padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
|
|
16830
|
-
background
|
|
16831
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
16832
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
16833
|
-
box-shadow: var(--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);
|
|
16830
|
+
background-color: var(--atomix-datepicker-bg);
|
|
16834
16831
|
border-radius: var(--atomix-datepicker-border-radius);
|
|
16835
16832
|
box-shadow: var(--atomix-datepicker-box-shadow);
|
|
16836
16833
|
margin-top: 0.25rem;
|
|
@@ -16874,6 +16871,24 @@ a, a:hover {
|
|
|
16874
16871
|
.c-datepicker__calendar--right-end {
|
|
16875
16872
|
bottom: 0;
|
|
16876
16873
|
}
|
|
16874
|
+
.c-datepicker__calendar--glass {
|
|
16875
|
+
z-index: auto;
|
|
16876
|
+
z-index: initial;
|
|
16877
|
+
box-shadow: none;
|
|
16878
|
+
border: none;
|
|
16879
|
+
border-radius: 0;
|
|
16880
|
+
padding: 0;
|
|
16881
|
+
background: transparent;
|
|
16882
|
+
}
|
|
16883
|
+
.c-datepicker__glass-content {
|
|
16884
|
+
z-index: auto;
|
|
16885
|
+
z-index: initial;
|
|
16886
|
+
box-shadow: none;
|
|
16887
|
+
border: none;
|
|
16888
|
+
border-radius: var(--atomix-datepicker-border-radius);
|
|
16889
|
+
padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
|
|
16890
|
+
background: color-mix(in srgb, var(--atomix-datepicker-bg) 50%, transparent 0%);
|
|
16891
|
+
}
|
|
16877
16892
|
.c-datepicker--inline {
|
|
16878
16893
|
--atomix-datepicker-width: calc(
|
|
16879
16894
|
var(--atomix-datepicker-width) + var(--atomix-datepicker-week-width)
|
|
@@ -17195,10 +17210,7 @@ a, a:hover {
|
|
|
17195
17210
|
transition-duration: 0.2s;
|
|
17196
17211
|
transition-timing-function: ease-in-out;
|
|
17197
17212
|
transition-delay: 0s;
|
|
17198
|
-
background
|
|
17199
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
17200
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
17201
|
-
box-shadow: var(--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);
|
|
17213
|
+
background-color: var(--atomix-card-bg);
|
|
17202
17214
|
}
|
|
17203
17215
|
.c-card__header {
|
|
17204
17216
|
margin-bottom: var(--atomix-card-header-spacer-y);
|
|
@@ -17239,10 +17251,7 @@ a, a:hover {
|
|
|
17239
17251
|
border-radius: 50rem;
|
|
17240
17252
|
}
|
|
17241
17253
|
.c-card:hover {
|
|
17242
|
-
background
|
|
17243
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
17244
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
17245
|
-
box-shadow: var(--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);
|
|
17254
|
+
background-color: var(--atomix-card-bg-hover);
|
|
17246
17255
|
}
|
|
17247
17256
|
.c-card:focus, .c-card.is-active {
|
|
17248
17257
|
--atomix-card-border-color: var(--atomix-brand-border-subtle);
|
|
@@ -17282,6 +17291,21 @@ a, a:hover {
|
|
|
17282
17291
|
padding: var(--atomix-card-row-spacer-y) var(--atomix-card-row-spacer-x);
|
|
17283
17292
|
padding-top: 0;
|
|
17284
17293
|
}
|
|
17294
|
+
.c-card--glass {
|
|
17295
|
+
background-color: transparent;
|
|
17296
|
+
padding: 0;
|
|
17297
|
+
border: none;
|
|
17298
|
+
display: block;
|
|
17299
|
+
border-radius: 0;
|
|
17300
|
+
}
|
|
17301
|
+
.c-card--glass .c-card__glass-content {
|
|
17302
|
+
padding: var(--atomix-card-spacer-y) var(--atomix-card-spacer-x);
|
|
17303
|
+
max-width: var(--atomix-card-width);
|
|
17304
|
+
border-radius: var(--atomix-card-border-radius);
|
|
17305
|
+
width: 100%;
|
|
17306
|
+
background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
|
|
17307
|
+
background-blend-mode: overlay;
|
|
17308
|
+
}
|
|
17285
17309
|
.is-elevated .c-card {
|
|
17286
17310
|
box-shadow: var(--atomix-box-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.175));
|
|
17287
17311
|
z-index: 1;
|
|
@@ -17307,19 +17331,12 @@ a, a:hover {
|
|
|
17307
17331
|
min-height: var(--atomix-chart-min-height);
|
|
17308
17332
|
width: 100%;
|
|
17309
17333
|
max-width: 100%;
|
|
17310
|
-
background
|
|
17311
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
17312
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
17334
|
+
background-color: var(--atomix-chart-bg);
|
|
17313
17335
|
transition-property: all;
|
|
17314
17336
|
transition-duration: 0.2s;
|
|
17315
17337
|
transition-timing-function: ease-in-out;
|
|
17316
17338
|
transition-delay: 0s;
|
|
17317
17339
|
}
|
|
17318
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
17319
|
-
.c-chart {
|
|
17320
|
-
box-shadow: var(--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);
|
|
17321
|
-
}
|
|
17322
|
-
}
|
|
17323
17340
|
.c-chart::after {
|
|
17324
17341
|
content: "";
|
|
17325
17342
|
position: absolute;
|
|
@@ -19023,7 +19040,7 @@ a, a:hover {
|
|
|
19023
19040
|
animation: none;
|
|
19024
19041
|
}
|
|
19025
19042
|
}
|
|
19026
|
-
.c-chart:focus-
|
|
19043
|
+
.c-chart:focus-within .c-chart__data-point:focus {
|
|
19027
19044
|
outline: 2px solid var(--atomix-primary-6);
|
|
19028
19045
|
outline-offset: 2px;
|
|
19029
19046
|
z-index: 10;
|
|
@@ -19125,10 +19142,7 @@ a, a:hover {
|
|
|
19125
19142
|
-webkit-appearance: none;
|
|
19126
19143
|
-moz-appearance: none;
|
|
19127
19144
|
appearance: none;
|
|
19128
|
-
background
|
|
19129
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19130
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19131
|
-
box-shadow: var(--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);
|
|
19145
|
+
background-color: var(--atomix-checkbox-bg);
|
|
19132
19146
|
width: var(--atomix-checkbox-width);
|
|
19133
19147
|
height: var(--atomix-checkbox-height);
|
|
19134
19148
|
color: currentColor;
|
|
@@ -19217,10 +19231,7 @@ a, a:hover {
|
|
|
19217
19231
|
color: var(--atomix-body-color);
|
|
19218
19232
|
}
|
|
19219
19233
|
.c-color-mode-toggle:hover {
|
|
19220
|
-
background
|
|
19221
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19222
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19223
|
-
box-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);
|
|
19234
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
19224
19235
|
}
|
|
19225
19236
|
.c-color-mode-toggle:focus {
|
|
19226
19237
|
outline: none;
|
|
@@ -19231,10 +19242,7 @@ a, a:hover {
|
|
|
19231
19242
|
height: 1.5rem;
|
|
19232
19243
|
}
|
|
19233
19244
|
[data-atomix-theme=dark] .c-color-mode-toggle:hover {
|
|
19234
|
-
background
|
|
19235
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19236
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19237
|
-
box-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);
|
|
19245
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
19238
19246
|
}
|
|
19239
19247
|
.c-countdown {
|
|
19240
19248
|
--atomix-countdown-color: var(--atomix-body-color);
|
|
@@ -19272,10 +19280,7 @@ a, a:hover {
|
|
|
19272
19280
|
align-items: center;
|
|
19273
19281
|
padding: var(--atomix-countdown-item-padding-y) var(--atomix-countdown-item-padding-x);
|
|
19274
19282
|
border-radius: var(--atomix-countdown-focused-border-radius);
|
|
19275
|
-
background
|
|
19276
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19277
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19278
|
-
box-shadow: var(--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);
|
|
19283
|
+
background-color: var(--atomix-countdown-focused-bg);
|
|
19279
19284
|
}
|
|
19280
19285
|
.c-countdown--focused .c-countdown__time-label {
|
|
19281
19286
|
font-size: var(--atomix-countdown-focused-label-font-size);
|
|
@@ -19302,17 +19307,11 @@ a, a:hover {
|
|
|
19302
19307
|
width: 100%;
|
|
19303
19308
|
margin-bottom: 0;
|
|
19304
19309
|
color: var(--atomix-data-table-color);
|
|
19305
|
-
background
|
|
19306
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19307
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19308
|
-
box-shadow: var(--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);
|
|
19310
|
+
background-color: var(--atomix-data-table-bg);
|
|
19309
19311
|
border-collapse: collapse;
|
|
19310
19312
|
}
|
|
19311
19313
|
.c-data-table__header {
|
|
19312
|
-
background
|
|
19313
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19314
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19315
|
-
box-shadow: var(--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);
|
|
19314
|
+
background-color: var(--atomix-data-table-header-bg);
|
|
19316
19315
|
}
|
|
19317
19316
|
.c-data-table__header-cell {
|
|
19318
19317
|
padding: 1rem 1.25rem;
|
|
@@ -19329,10 +19328,7 @@ a, a:hover {
|
|
|
19329
19328
|
user-select: none;
|
|
19330
19329
|
}
|
|
19331
19330
|
.c-data-table__header-cell--sortable:hover {
|
|
19332
|
-
background
|
|
19333
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19334
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19335
|
-
box-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);
|
|
19331
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
19336
19332
|
}
|
|
19337
19333
|
.c-data-table__header-content {
|
|
19338
19334
|
display: flex;
|
|
@@ -19353,16 +19349,10 @@ a, a:hover {
|
|
|
19353
19349
|
vertical-align: middle;
|
|
19354
19350
|
}
|
|
19355
19351
|
.c-data-table__row {
|
|
19356
|
-
background
|
|
19357
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19358
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19359
|
-
box-shadow: var(--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);
|
|
19352
|
+
background-color: var(--atomix-data-table-bg);
|
|
19360
19353
|
}
|
|
19361
19354
|
.c-data-table__row:hover {
|
|
19362
|
-
background
|
|
19363
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19364
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19365
|
-
box-shadow: var(--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);
|
|
19355
|
+
background-color: var(--atomix-data-table-hover-bg);
|
|
19366
19356
|
}
|
|
19367
19357
|
.c-data-table__row[role=button] {
|
|
19368
19358
|
cursor: pointer;
|
|
@@ -19380,10 +19370,7 @@ a, a:hover {
|
|
|
19380
19370
|
color: var(--atomix-gray-500);
|
|
19381
19371
|
}
|
|
19382
19372
|
.c-data-table--striped tbody tr:nth-of-type(odd) {
|
|
19383
|
-
background
|
|
19384
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19385
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19386
|
-
box-shadow: var(--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);
|
|
19373
|
+
background-color: var(--atomix-data-table-striped-bg);
|
|
19387
19374
|
}
|
|
19388
19375
|
.c-data-table--bordered {
|
|
19389
19376
|
border: var(--atomix-border-width) var(--atomix-border-style) var(--atomix-data-table-border-color);
|
|
@@ -19493,7 +19480,6 @@ a, a:hover {
|
|
|
19493
19480
|
.c-dropdown__menu-wrapper {
|
|
19494
19481
|
position: absolute;
|
|
19495
19482
|
left: 0;
|
|
19496
|
-
z-index: 99;
|
|
19497
19483
|
display: flex;
|
|
19498
19484
|
opacity: 0;
|
|
19499
19485
|
visibility: hidden;
|
|
@@ -19575,14 +19561,16 @@ a, a:hover {
|
|
|
19575
19561
|
padding: var(--atomix-dropdown-padding-y) var(--atomix-dropdown-padding-x);
|
|
19576
19562
|
list-style: none;
|
|
19577
19563
|
margin-bottom: 0rem;
|
|
19578
|
-
|
|
19579
|
-
|
|
19580
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19581
|
-
box-shadow: var(--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);
|
|
19564
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
19565
|
+
background-color: var(--atomix-dropdown-bg);
|
|
19582
19566
|
border-radius: var(--atomix-dropdown-border-radius);
|
|
19583
19567
|
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
19584
19568
|
overflow: hidden;
|
|
19585
19569
|
}
|
|
19570
|
+
.c-dropdown__menu--glass {
|
|
19571
|
+
background-color: color-mix(in srgb, var(--atomix-dropdown-bg) 50%, transparent);
|
|
19572
|
+
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
19573
|
+
}
|
|
19586
19574
|
.c-dropdown__menu-item {
|
|
19587
19575
|
display: block;
|
|
19588
19576
|
width: 100%;
|
|
@@ -19599,19 +19587,13 @@ a, a:hover {
|
|
|
19599
19587
|
}
|
|
19600
19588
|
.c-dropdown__menu-item:hover, .c-dropdown__menu-item:focus {
|
|
19601
19589
|
color: var(--atomix-dropdown-link-hover-color);
|
|
19602
|
-
background
|
|
19603
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19604
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19605
|
-
box-shadow: var(--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);
|
|
19590
|
+
background-color: var(--atomix-dropdown-link-hover-bg);
|
|
19606
19591
|
outline: none;
|
|
19607
19592
|
padding-left: calc(var(--atomix-dropdown-item-padding-x) + 3px);
|
|
19608
19593
|
}
|
|
19609
19594
|
.c-dropdown__menu-item.is-active {
|
|
19610
19595
|
color: var(--atomix-dropdown-active-color);
|
|
19611
|
-
background
|
|
19612
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19613
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19614
|
-
box-shadow: var(--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);
|
|
19596
|
+
background-color: var(--atomix-dropdown-active-bg);
|
|
19615
19597
|
}
|
|
19616
19598
|
.c-dropdown__menu-item.is-disabled {
|
|
19617
19599
|
color: var(--atomix-dropdown-color);
|
|
@@ -19708,10 +19690,7 @@ a, a:hover {
|
|
|
19708
19690
|
.c-edge-panel__backdrop {
|
|
19709
19691
|
position: absolute;
|
|
19710
19692
|
inset: 0;
|
|
19711
|
-
background
|
|
19712
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19713
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19714
|
-
box-shadow: var(--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);
|
|
19693
|
+
background-color: var(--atomix-edge-panel-backdrop-bg);
|
|
19715
19694
|
-webkit-backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
|
|
19716
19695
|
backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
|
|
19717
19696
|
opacity: 0;
|
|
@@ -19730,10 +19709,7 @@ a, a:hover {
|
|
|
19730
19709
|
color: var(--atomix-edge-panel-color);
|
|
19731
19710
|
width: var(--atomix-edge-panel-width);
|
|
19732
19711
|
height: 100%;
|
|
19733
|
-
background
|
|
19734
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19735
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19736
|
-
box-shadow: var(--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);
|
|
19712
|
+
background-color: var(--atomix-edge-panel-bg);
|
|
19737
19713
|
box-shadow: var(--atomix-edge-panel-shadow);
|
|
19738
19714
|
z-index: 2;
|
|
19739
19715
|
overflow: hidden;
|
|
@@ -19768,10 +19744,7 @@ a, a:hover {
|
|
|
19768
19744
|
transition: background-color 0.2s ease;
|
|
19769
19745
|
}
|
|
19770
19746
|
.c-edge-panel__close:hover {
|
|
19771
|
-
background
|
|
19772
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19773
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19774
|
-
box-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);
|
|
19747
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
19775
19748
|
}
|
|
19776
19749
|
.c-edge-panel__close:focus-visible {
|
|
19777
19750
|
outline: 2px solid var(--atomix-primary);
|
|
@@ -19971,10 +19944,7 @@ a, a:hover {
|
|
|
19971
19944
|
--atomix-footer-newsletter-padding: 1.5rem;
|
|
19972
19945
|
--atomix-footer-bottom-padding-top: 1.5rem;
|
|
19973
19946
|
--atomix-footer-bottom-margin-top: 2rem;
|
|
19974
|
-
background
|
|
19975
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
19976
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
19977
|
-
box-shadow: var(--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);
|
|
19947
|
+
background-color: var(--atomix-footer-bg);
|
|
19978
19948
|
color: var(--atomix-footer-color);
|
|
19979
19949
|
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
19980
19950
|
padding: var(--atomix-footer-padding-y) 0;
|
|
@@ -20186,10 +20156,7 @@ a, a:hover {
|
|
|
20186
20156
|
justify-content: center;
|
|
20187
20157
|
width: 2.5rem;
|
|
20188
20158
|
height: 2.5rem;
|
|
20189
|
-
background
|
|
20190
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
20191
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
20192
|
-
box-shadow: var(--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);
|
|
20159
|
+
background-color: var(--atomix-surface-variant);
|
|
20193
20160
|
color: var(--atomix-text);
|
|
20194
20161
|
border-radius: 50%;
|
|
20195
20162
|
text-decoration: none;
|
|
@@ -20206,10 +20173,7 @@ a, a:hover {
|
|
|
20206
20173
|
transition: transform 0.6s ease;
|
|
20207
20174
|
}
|
|
20208
20175
|
.c-footer__social-link:hover, .c-footer__social-link:focus {
|
|
20209
|
-
background
|
|
20210
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
20211
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
20212
|
-
box-shadow: var(--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);
|
|
20176
|
+
background-color: var(--atomix-primary);
|
|
20213
20177
|
color: var(--atomix-primary-contrast);
|
|
20214
20178
|
transform: translateY(-3px) scale(1.05);
|
|
20215
20179
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
@@ -20277,10 +20241,7 @@ a, a:hover {
|
|
|
20277
20241
|
background: linear-gradient(135deg, #25d366, #66bb6a);
|
|
20278
20242
|
}
|
|
20279
20243
|
.c-footer__newsletter {
|
|
20280
|
-
background
|
|
20281
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
20282
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
20283
|
-
box-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);
|
|
20244
|
+
background-color: linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8));
|
|
20284
20245
|
padding: 1.5rem;
|
|
20285
20246
|
border-radius: 0.5rem;
|
|
20286
20247
|
border: 1px solid var(--atomix-border-subtle);
|
|
@@ -20336,10 +20297,7 @@ a, a:hover {
|
|
|
20336
20297
|
flex: 1 1;
|
|
20337
20298
|
padding: 0.75rem 1rem;
|
|
20338
20299
|
font-size: 0.875rem;
|
|
20339
|
-
background
|
|
20340
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
20341
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
20342
|
-
box-shadow: var(--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);
|
|
20300
|
+
background-color: var(--atomix-surface);
|
|
20343
20301
|
color: var(--atomix-text);
|
|
20344
20302
|
border: 1px solid var(--atomix-border);
|
|
20345
20303
|
border-radius: 0.375rem;
|
|
@@ -20368,10 +20326,7 @@ a, a:hover {
|
|
|
20368
20326
|
}
|
|
20369
20327
|
.c-footer__newsletter-button {
|
|
20370
20328
|
padding: 0.75rem 1.5rem;
|
|
20371
|
-
background
|
|
20372
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
20373
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
20374
|
-
box-shadow: var(--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);
|
|
20329
|
+
background-color: var(--atomix-primary);
|
|
20375
20330
|
color: var(--atomix-primary-contrast);
|
|
20376
20331
|
border: none;
|
|
20377
20332
|
border-radius: 0.375rem;
|
|
@@ -20391,10 +20346,7 @@ a, a:hover {
|
|
|
20391
20346
|
transition: transform 0.6s ease;
|
|
20392
20347
|
}
|
|
20393
20348
|
.c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
|
|
20394
|
-
background
|
|
20395
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
20396
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
20397
|
-
box-shadow: var(--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);
|
|
20349
|
+
background-color: var(--atomix-primary-hover);
|
|
20398
20350
|
transform: translateY(-2px);
|
|
20399
20351
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
20400
20352
|
}
|
|
@@ -20439,10 +20391,7 @@ a, a:hover {
|
|
|
20439
20391
|
align-items: center;
|
|
20440
20392
|
gap: 0.5rem;
|
|
20441
20393
|
padding: 0.75rem 1.25rem;
|
|
20442
|
-
background
|
|
20443
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
20444
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
20445
|
-
box-shadow: var(--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);
|
|
20394
|
+
background-color: var(--atomix-surface-variant);
|
|
20446
20395
|
border: 1px solid var(--atomix-border-subtle);
|
|
20447
20396
|
color: var(--atomix-text);
|
|
20448
20397
|
font-size: 0.875rem;
|
|
@@ -20463,10 +20412,7 @@ a, a:hover {
|
|
|
20463
20412
|
}
|
|
20464
20413
|
.c-footer__back-to-top:hover, .c-footer__back-to-top:focus {
|
|
20465
20414
|
color: var(--atomix-primary);
|
|
20466
|
-
background
|
|
20467
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
20468
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
20469
|
-
box-shadow: var(--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);
|
|
20415
|
+
background-color: var(--atomix-primary);
|
|
20470
20416
|
border-color: var(--atomix-primary);
|
|
20471
20417
|
transform: translateY(-2px);
|
|
20472
20418
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
@@ -21011,10 +20957,7 @@ a, a:hover {
|
|
|
21011
20957
|
display: grid;
|
|
21012
20958
|
place-items: center;
|
|
21013
20959
|
padding: var(--atomix-hero-padding-y) var(--atomix-hero-padding-x);
|
|
21014
|
-
background
|
|
21015
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21016
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21017
|
-
box-shadow: var(--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);
|
|
20960
|
+
background-color: var(--atomix-hero-bg);
|
|
21018
20961
|
overflow: hidden;
|
|
21019
20962
|
}
|
|
21020
20963
|
.c-hero__bg {
|
|
@@ -21037,16 +20980,12 @@ a, a:hover {
|
|
|
21037
20980
|
.c-hero__overlay {
|
|
21038
20981
|
position: absolute;
|
|
21039
20982
|
inset: 0;
|
|
21040
|
-
background
|
|
21041
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21042
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21043
|
-
box-shadow: var(--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);
|
|
20983
|
+
background-color: var(--atomix-hero-overlay);
|
|
21044
20984
|
opacity: var(--atomix-hero-overlay-opacity);
|
|
21045
|
-
z-index:
|
|
20985
|
+
z-index: 0;
|
|
21046
20986
|
}
|
|
21047
20987
|
.c-hero__container {
|
|
21048
20988
|
position: relative;
|
|
21049
|
-
z-index: 2;
|
|
21050
20989
|
}
|
|
21051
20990
|
.c-hero__grid {
|
|
21052
20991
|
--atomix-gutter-x: var(--atomix-hero-grid-gutter);
|
|
@@ -21174,10 +21113,7 @@ a, a:hover {
|
|
|
21174
21113
|
border: var(--atomix-input-border-width) solid var(--atomix-input-border-color);
|
|
21175
21114
|
border-radius: var(--atomix-input-border-radius);
|
|
21176
21115
|
outline: none;
|
|
21177
|
-
background
|
|
21178
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21179
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21180
|
-
box-shadow: var(--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);
|
|
21116
|
+
background-color: var(--atomix-input-bg);
|
|
21181
21117
|
transition-property: all;
|
|
21182
21118
|
transition-duration: 0.2s;
|
|
21183
21119
|
transition-timing-function: ease-in-out;
|
|
@@ -21249,6 +21185,21 @@ a, a:hover {
|
|
|
21249
21185
|
--atomix-input-bg: var(--atomix-secondary-bg-subtle);
|
|
21250
21186
|
pointer-events: none;
|
|
21251
21187
|
}
|
|
21188
|
+
.c-input--glass {
|
|
21189
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
21190
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
21191
|
+
}
|
|
21192
|
+
.c-input--glass:focus, .c-input--glass:hover {
|
|
21193
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
21194
|
+
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);
|
|
21195
|
+
}
|
|
21196
|
+
.c-input--glass.c-input--textarea {
|
|
21197
|
+
resize: vertical;
|
|
21198
|
+
}
|
|
21199
|
+
.c-input--glass:disabled, .c-input--glass.is-disabled {
|
|
21200
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
21201
|
+
opacity: 0.6;
|
|
21202
|
+
}
|
|
21252
21203
|
.c-list-group {
|
|
21253
21204
|
--atomix-list-group-width: 100%;
|
|
21254
21205
|
--atomix-list-group-bg: ;
|
|
@@ -21267,20 +21218,14 @@ a, a:hover {
|
|
|
21267
21218
|
list-style: none;
|
|
21268
21219
|
width: 100%;
|
|
21269
21220
|
max-width: var(--atomix-list-group-width);
|
|
21270
|
-
background
|
|
21271
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21272
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21273
|
-
box-shadow: var(--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);
|
|
21221
|
+
background-color: var(--atomix-list-group-bg);
|
|
21274
21222
|
}
|
|
21275
21223
|
.c-list-group__item {
|
|
21276
21224
|
padding: var(--atomix-list-group-item-padding-y) var(--atomix-list-group-item-padding-x);
|
|
21277
21225
|
font-size: var(--atomix-list-group-item-font-size);
|
|
21278
21226
|
color: var(--atomix-list-group-item-color);
|
|
21279
21227
|
border-bottom: var(--atomix-list-group-item-border-width) solid var(--atomix-list-group-item-border-color);
|
|
21280
|
-
background
|
|
21281
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21282
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21283
|
-
box-shadow: var(--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);
|
|
21228
|
+
background-color: var(--atomix-list-group-item-bg);
|
|
21284
21229
|
}
|
|
21285
21230
|
.c-list-group__item--primary {
|
|
21286
21231
|
--atomix-list-group-item-bg: var(--atomix-brand-bg-subtle);
|
|
@@ -21345,10 +21290,7 @@ a, a:hover {
|
|
|
21345
21290
|
left: 0;
|
|
21346
21291
|
width: var(--atomix-list-item-dash-width);
|
|
21347
21292
|
height: var(--atomix-list-item-dash-height);
|
|
21348
|
-
background
|
|
21349
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21350
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21351
|
-
box-shadow: var(--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);
|
|
21293
|
+
background-color: var(--atomix-list-color);
|
|
21352
21294
|
transform: translateY(-50%);
|
|
21353
21295
|
}
|
|
21354
21296
|
.c-list--number {
|
|
@@ -21388,10 +21330,7 @@ a, a:hover {
|
|
|
21388
21330
|
display: inline-block;
|
|
21389
21331
|
min-width: var(--atomix-menu-min-width);
|
|
21390
21332
|
padding: var(--atomix-menu-item-padding-y) var(--atomix-menu-item-padding-x);
|
|
21391
|
-
background
|
|
21392
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21393
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21394
|
-
box-shadow: var(--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);
|
|
21333
|
+
background-color: var(--atomix-menu-bg);
|
|
21395
21334
|
border-radius: var(--atomix-menu-border-radius);
|
|
21396
21335
|
box-shadow: var(--atomix-menu-box-shadow);
|
|
21397
21336
|
z-index: 5;
|
|
@@ -21437,10 +21376,7 @@ a, a:hover {
|
|
|
21437
21376
|
color: var(--atomix-menu-item-color);
|
|
21438
21377
|
font-size: var(--atomix-menu-item-font-size);
|
|
21439
21378
|
font-weight: var(--atomix-menu-item-font-weight);
|
|
21440
|
-
background
|
|
21441
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21442
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21443
|
-
box-shadow: var(--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);
|
|
21379
|
+
background-color: var(--atomix-menu-item-bg);
|
|
21444
21380
|
border-radius: var(--atomix-menu-border-radius);
|
|
21445
21381
|
cursor: pointer;
|
|
21446
21382
|
transition-property: all;
|
|
@@ -21450,16 +21386,10 @@ a, a:hover {
|
|
|
21450
21386
|
}
|
|
21451
21387
|
.c-menu__link:hover {
|
|
21452
21388
|
color: var(--atomix-menu-item-color);
|
|
21453
|
-
background
|
|
21454
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21455
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21456
|
-
box-shadow: var(--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);
|
|
21389
|
+
background-color: var(--atomix-menu-item-bg-hover);
|
|
21457
21390
|
}
|
|
21458
21391
|
.c-menu__link:focus, .c-menu__link:active, .c-menu__link.is-active {
|
|
21459
|
-
background
|
|
21460
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21461
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21462
|
-
box-shadow: var(--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);
|
|
21392
|
+
background-color: var(--atomix-menu-item-bg-active);
|
|
21463
21393
|
}
|
|
21464
21394
|
.c-menu__icon {
|
|
21465
21395
|
font-size: var(--atomix-menu-item-icon-size);
|
|
@@ -21629,10 +21559,7 @@ a, a:hover {
|
|
|
21629
21559
|
padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
|
|
21630
21560
|
border-radius: var(--atomix-messages-border-radius);
|
|
21631
21561
|
border: var(--atomix-messages-border-width) solid var(--atomix-messages-border-color);
|
|
21632
|
-
background
|
|
21633
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21634
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21635
|
-
box-shadow: var(--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);
|
|
21562
|
+
background-color: var(--atomix-messages-bg);
|
|
21636
21563
|
}
|
|
21637
21564
|
.c-messages__body {
|
|
21638
21565
|
max-height: var(--atomix-messages-body-height);
|
|
@@ -21682,10 +21609,7 @@ a, a:hover {
|
|
|
21682
21609
|
color: var(--atomix-messages-text-color);
|
|
21683
21610
|
font-size: var(--atomix-messages-text-font-size);
|
|
21684
21611
|
padding: var(--atomix-messages-text-padding-y) var(--atomix-messages-text-padding-x);
|
|
21685
|
-
background
|
|
21686
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21687
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21688
|
-
box-shadow: var(--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);
|
|
21612
|
+
background-color: var(--atomix-messages-text-bg);
|
|
21689
21613
|
border-radius: 0.25rem var(--atomix-messages-text-border-radius) var(--atomix-messages-text-border-radius) 0.25rem;
|
|
21690
21614
|
}
|
|
21691
21615
|
.c-messages__file {
|
|
@@ -21693,10 +21617,7 @@ a, a:hover {
|
|
|
21693
21617
|
flex-wrap: wrap;
|
|
21694
21618
|
padding: var(--atomix-messages-file-padding-y) var(--atomix-messages-file-padding-x);
|
|
21695
21619
|
border-radius: 0.25rem var(--atomix-messages-file-border-radius) var(--atomix-messages-file-border-radius) 0.25rem;
|
|
21696
|
-
background
|
|
21697
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21698
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21699
|
-
box-shadow: var(--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);
|
|
21620
|
+
background-color: var(--atomix-messages-file-bg);
|
|
21700
21621
|
}
|
|
21701
21622
|
.c-messages__file-icon {
|
|
21702
21623
|
display: grid !important;
|
|
@@ -21706,10 +21627,7 @@ a, a:hover {
|
|
|
21706
21627
|
height: var(--atomix-messages-file-icon-size);
|
|
21707
21628
|
color: var(--atomix-tertiary-text-emphasis);
|
|
21708
21629
|
margin-right: var(--atomix-messages-file-icon-margin-right);
|
|
21709
|
-
background
|
|
21710
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21711
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21712
|
-
box-shadow: var(--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);
|
|
21630
|
+
background-color: var(--atomix-body-bg);
|
|
21713
21631
|
border-radius: 50rem;
|
|
21714
21632
|
}
|
|
21715
21633
|
.c-messages__file-name {
|
|
@@ -21765,10 +21683,7 @@ a, a:hover {
|
|
|
21765
21683
|
}
|
|
21766
21684
|
.c-messages__content--self .c-messages__file-icon {
|
|
21767
21685
|
color: var(--atomix-invert-text-emphasis);
|
|
21768
|
-
background
|
|
21769
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21770
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21771
|
-
box-shadow: var(--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);
|
|
21686
|
+
background-color: var(--atomix-messages-file-icon-bg);
|
|
21772
21687
|
}
|
|
21773
21688
|
.c-messages__content--self .c-messages__file-icon [data-atomix-color-mode=dark] {
|
|
21774
21689
|
--atomix-messages-file-icon-bg: var(--atomix-primary-7);
|
|
@@ -21812,10 +21727,7 @@ a, a:hover {
|
|
|
21812
21727
|
font-size: var(--atomix-messages-input-font-size);
|
|
21813
21728
|
border: var(--atomix-messages-input-border-width) solid var(--atomix-messages-input-border-color);
|
|
21814
21729
|
border-radius: var(--atomix-messages-input-border-radius);
|
|
21815
|
-
background
|
|
21816
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21817
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21818
|
-
box-shadow: var(--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);
|
|
21730
|
+
background-color: var(--atomix-messages-bg);
|
|
21819
21731
|
resize: none;
|
|
21820
21732
|
}
|
|
21821
21733
|
.c-messages__input::-moz-placeholder {
|
|
@@ -21835,10 +21747,7 @@ a, a:hover {
|
|
|
21835
21747
|
place-items: center;
|
|
21836
21748
|
align-self: flex-end;
|
|
21837
21749
|
padding: 0.625rem;
|
|
21838
|
-
background
|
|
21839
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21840
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21841
|
-
box-shadow: var(--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);
|
|
21750
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
21842
21751
|
color: var(--atomix-invert-text-emphasis);
|
|
21843
21752
|
border-radius: 50rem;
|
|
21844
21753
|
cursor: pointer;
|
|
@@ -21887,10 +21796,7 @@ a, a:hover {
|
|
|
21887
21796
|
.c-modal__backdrop {
|
|
21888
21797
|
position: absolute;
|
|
21889
21798
|
inset: 0;
|
|
21890
|
-
background
|
|
21891
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21892
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21893
|
-
box-shadow: var(--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);
|
|
21799
|
+
background-color: var(--atomix-modal-backdrop-bg);
|
|
21894
21800
|
opacity: 0;
|
|
21895
21801
|
transition: 0.3s;
|
|
21896
21802
|
}
|
|
@@ -21915,10 +21821,7 @@ a, a:hover {
|
|
|
21915
21821
|
width: 100%;
|
|
21916
21822
|
max-height: 100%;
|
|
21917
21823
|
padding: var(--atomix-modal-inner-padding);
|
|
21918
|
-
background
|
|
21919
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
21920
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
21921
|
-
box-shadow: var(--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);
|
|
21824
|
+
background-color: var(--atomix-modal-content-bg);
|
|
21922
21825
|
box-shadow: var(--atomix-modal-content-box-shadow);
|
|
21923
21826
|
border-radius: var(--atomix-modal-content-border-radius);
|
|
21924
21827
|
overflow: hidden;
|
|
@@ -22029,20 +21932,14 @@ a, a:hover {
|
|
|
22029
21932
|
color: var(--atomix-nav-link-color);
|
|
22030
21933
|
}
|
|
22031
21934
|
.c-nav__link:hover, .c-nav__link:active, .c-nav__link:focus, .c-nav__link:focus-visible {
|
|
22032
|
-
background
|
|
22033
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
22034
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
22035
|
-
box-shadow: var(--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);
|
|
21935
|
+
background-color: var(--atomix-nav-link-hover-bg);
|
|
22036
21936
|
}
|
|
22037
21937
|
.c-nav__link--disabled {
|
|
22038
21938
|
color: var(--atomix-disabled-text-emphasis);
|
|
22039
21939
|
pointer-events: none;
|
|
22040
21940
|
}
|
|
22041
21941
|
.c-nav__link:focus, .c-nav__link:active, .c-nav__link.is-active {
|
|
22042
|
-
background
|
|
22043
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
22044
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
22045
|
-
box-shadow: var(--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);
|
|
21942
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
22046
21943
|
}
|
|
22047
21944
|
.c-nav__icon {
|
|
22048
21945
|
font-size: var(--atomix-nav-icon-size);
|
|
@@ -22096,24 +21993,14 @@ a, a:hover {
|
|
|
22096
21993
|
left: 50%;
|
|
22097
21994
|
transform: translateX(-50%);
|
|
22098
21995
|
z-index: 1000;
|
|
22099
|
-
background
|
|
22100
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
22101
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
22102
|
-
box-shadow: var(--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);
|
|
21996
|
+
background-color: var(--atomix-body-bg);
|
|
22103
21997
|
border: 1px solid var(--atomix-border-color);
|
|
22104
21998
|
border-radius: 50rem;
|
|
22105
21999
|
box-shadow: var(--atomix-box-shadow-lg);
|
|
22106
22000
|
padding: 0.5rem 1rem;
|
|
22107
22001
|
-webkit-backdrop-filter: blur(10px);
|
|
22108
22002
|
backdrop-filter: blur(10px);
|
|
22109
|
-
|
|
22110
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
22111
|
-
}
|
|
22112
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
22113
|
-
.c-nav--float-top-center, .c-nav--float-bottom-center {
|
|
22114
|
-
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%);
|
|
22115
|
-
box-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);
|
|
22116
|
-
}
|
|
22003
|
+
background-color: rgba(var(--atomix-body-bg-rgb), 0.95);
|
|
22117
22004
|
}
|
|
22118
22005
|
.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 {
|
|
22119
22006
|
margin-left: 0.25rem;
|
|
@@ -22123,10 +22010,7 @@ a, a:hover {
|
|
|
22123
22010
|
border-radius: 0.625rem;
|
|
22124
22011
|
}
|
|
22125
22012
|
.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 {
|
|
22126
|
-
background
|
|
22127
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
22128
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
22129
|
-
box-shadow: var(--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);
|
|
22013
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
22130
22014
|
}
|
|
22131
22015
|
.c-nav--float-top-center {
|
|
22132
22016
|
top: 1.25rem;
|
|
@@ -22160,10 +22044,7 @@ a, a:hover {
|
|
|
22160
22044
|
position: relative;
|
|
22161
22045
|
padding: var(--atomix-navbar-padding-y) 0;
|
|
22162
22046
|
border-bottom: var(--atomix-navbar-border-width) solid var(--atomix-navbar-border-color);
|
|
22163
|
-
background
|
|
22164
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
22165
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
22166
|
-
box-shadow: var(--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);
|
|
22047
|
+
background-color: var(--atomix-navbar-bg);
|
|
22167
22048
|
z-index: var(--atomix-navbar-z-index);
|
|
22168
22049
|
}
|
|
22169
22050
|
.c-navbar__container {
|
|
@@ -22198,10 +22079,7 @@ a, a:hover {
|
|
|
22198
22079
|
width: var(--atomix-navbar-toggler-size);
|
|
22199
22080
|
height: var(--atomix-navbar-toggler-size);
|
|
22200
22081
|
padding: 0;
|
|
22201
|
-
background
|
|
22202
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
22203
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
22204
|
-
box-shadow: var(--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);
|
|
22082
|
+
background-color: var(--atomix-navbar-toggler-bg);
|
|
22205
22083
|
border: var(--atomix-navbar-toggler-border);
|
|
22206
22084
|
border-radius: var(--atomix-navbar-toggler-border-radius);
|
|
22207
22085
|
cursor: pointer;
|
|
@@ -22254,10 +22132,7 @@ a, a:hover {
|
|
|
22254
22132
|
left: 0;
|
|
22255
22133
|
width: 100%;
|
|
22256
22134
|
height: 100%;
|
|
22257
|
-
background
|
|
22258
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
22259
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
22260
|
-
box-shadow: var(--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);
|
|
22135
|
+
background-color: var(--atomix-navbar-backdrop-bg);
|
|
22261
22136
|
z-index: var(--atomix-navbar-backdrop-z-index);
|
|
22262
22137
|
opacity: 0;
|
|
22263
22138
|
visibility: hidden;
|
|
@@ -22533,10 +22408,7 @@ a, a:hover {
|
|
|
22533
22408
|
max-width: var(--atomix-callout-width);
|
|
22534
22409
|
gap: var(--atomix-callout-actions-spacer);
|
|
22535
22410
|
padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
|
|
22536
|
-
background
|
|
22537
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
22538
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
22539
|
-
box-shadow: var(--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);
|
|
22411
|
+
background-color: var(--atomix-callout-bg);
|
|
22540
22412
|
border-radius: var(--atomix-callout-border-radius);
|
|
22541
22413
|
border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
|
|
22542
22414
|
transition: opacity var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing), transform var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing);
|
|
@@ -22575,9 +22447,9 @@ a, a:hover {
|
|
|
22575
22447
|
.c-callout__actions {
|
|
22576
22448
|
display: flex;
|
|
22577
22449
|
align-items: center;
|
|
22578
|
-
flex-wrap: wrap;
|
|
22579
22450
|
gap: var(--atomix-callout-actions-spacer);
|
|
22580
22451
|
margin-left: auto;
|
|
22452
|
+
margin-right: 10px;
|
|
22581
22453
|
}
|
|
22582
22454
|
.c-callout__close-btn {
|
|
22583
22455
|
display: inline-flex;
|
|
@@ -22617,10 +22489,7 @@ a, a:hover {
|
|
|
22617
22489
|
align-items: flex-start;
|
|
22618
22490
|
justify-content: flex-start;
|
|
22619
22491
|
border: none;
|
|
22620
|
-
background
|
|
22621
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
22622
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
22623
|
-
box-shadow: var(--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);
|
|
22492
|
+
background-color: var(--atomix-callout-toast-bg);
|
|
22624
22493
|
box-shadow: var(--atomix-callout-box-shadow);
|
|
22625
22494
|
animation: calloutToastIn 0.3s var(--atomix-callout-transition-timing) forwards;
|
|
22626
22495
|
}
|
|
@@ -22682,9 +22551,35 @@ a, a:hover {
|
|
|
22682
22551
|
--atomix-callout-title-color: var(--atomix-light);
|
|
22683
22552
|
--atomix-callout-text-color: #d1d5db;
|
|
22684
22553
|
--atomix-callout-bg: var(--atomix-dark);
|
|
22685
|
-
--atomix-callout-border-color: var(--atomix-
|
|
22554
|
+
--atomix-callout-border-color: var(--atomix-dark-border-subtle);
|
|
22686
22555
|
--atomix-callout-icon-color: var(--atomix-light);
|
|
22687
22556
|
}
|
|
22557
|
+
.c-callout--glass {
|
|
22558
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
|
|
22559
|
+
padding: 0;
|
|
22560
|
+
border: none;
|
|
22561
|
+
display: block;
|
|
22562
|
+
}
|
|
22563
|
+
.c-callout--glass .c-callout__glass-content {
|
|
22564
|
+
display: flex;
|
|
22565
|
+
justify-content: center;
|
|
22566
|
+
align-items: center;
|
|
22567
|
+
padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
|
|
22568
|
+
border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
|
|
22569
|
+
max-width: var(--atomix-callout-width);
|
|
22570
|
+
border-radius: var(--atomix-callout-border-radius);
|
|
22571
|
+
width: 100%;
|
|
22572
|
+
}
|
|
22573
|
+
.c-callout--glass .c-callout__title {
|
|
22574
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
22575
|
+
}
|
|
22576
|
+
.c-callout--glass .c-callout__text {
|
|
22577
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
22578
|
+
}
|
|
22579
|
+
.c-callout--glass.c-callout--toast {
|
|
22580
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
|
|
22581
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
22582
|
+
}
|
|
22688
22583
|
.c-callout.is-hide {
|
|
22689
22584
|
opacity: 0;
|
|
22690
22585
|
transform: translateY(-10px);
|
|
@@ -22825,10 +22720,7 @@ a, a:hover {
|
|
|
22825
22720
|
color: var(--atomix-pagination-color);
|
|
22826
22721
|
font-size: var(--atomix-pagination-font-size);
|
|
22827
22722
|
padding: var(--atomix-pagination-padding-y) var(--atomix-pagination-padding-x);
|
|
22828
|
-
background
|
|
22829
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
22830
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
22831
|
-
box-shadow: var(--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);
|
|
22723
|
+
background-color: var(--atomix-pagination-bg);
|
|
22832
22724
|
border-radius: var(--atomix-pagination-border-radius);
|
|
22833
22725
|
border: none;
|
|
22834
22726
|
cursor: pointer;
|
|
@@ -22912,10 +22804,7 @@ a, a:hover {
|
|
|
22912
22804
|
flex-direction: column;
|
|
22913
22805
|
gap: var(--atomix-popover-inner-gap-y) var(--atomix-popover-inner-gap-x);
|
|
22914
22806
|
padding: var(--atomix-popover-padding-y) var(--atomix-popover-padding-x);
|
|
22915
|
-
background
|
|
22916
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
22917
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
22918
|
-
box-shadow: var(--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);
|
|
22807
|
+
background-color: var(--atomix-popover-bg);
|
|
22919
22808
|
border-radius: var(--atomix-popover-border-radius);
|
|
22920
22809
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
22921
22810
|
}
|
|
@@ -22923,10 +22812,7 @@ a, a:hover {
|
|
|
22923
22812
|
position: absolute;
|
|
22924
22813
|
width: var(--atomix-popover-arrow-size);
|
|
22925
22814
|
height: var(--atomix-popover-arrow-size);
|
|
22926
|
-
background
|
|
22927
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
22928
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
22929
|
-
box-shadow: var(--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);
|
|
22815
|
+
background-color: var(--atomix-popover-bg);
|
|
22930
22816
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
22931
22817
|
z-index: 1;
|
|
22932
22818
|
transform-origin: center;
|
|
@@ -22968,10 +22854,7 @@ a, a:hover {
|
|
|
22968
22854
|
--atomix-product-review-label-color: var(--atomix-text-muted);
|
|
22969
22855
|
padding: var(--atomix-product-review-padding);
|
|
22970
22856
|
border-radius: var(--atomix-product-review-border-radius);
|
|
22971
|
-
background
|
|
22972
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
22973
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
22974
|
-
box-shadow: var(--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);
|
|
22857
|
+
background-color: var(--atomix-product-review-bg);
|
|
22975
22858
|
border: 1px solid var(--atomix-product-review-border-color);
|
|
22976
22859
|
width: 100%;
|
|
22977
22860
|
max-width: 37.5rem;
|
|
@@ -23031,10 +22914,7 @@ a, a:hover {
|
|
|
23031
22914
|
padding: 0.75rem;
|
|
23032
22915
|
border: 1px solid var(--atomix-product-review-border-color);
|
|
23033
22916
|
border-radius: var(--atomix-border-radius);
|
|
23034
|
-
background
|
|
23035
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23036
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23037
|
-
box-shadow: var(--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);
|
|
22917
|
+
background-color: var(--atomix-body-bg);
|
|
23038
22918
|
color: var(--atomix-body-color);
|
|
23039
22919
|
font-family: inherit;
|
|
23040
22920
|
resize: vertical;
|
|
@@ -23082,10 +22962,7 @@ a, a:hover {
|
|
|
23082
22962
|
width: 100%;
|
|
23083
22963
|
max-width: var(--atomix-progress-width);
|
|
23084
22964
|
height: var(--atomix-progress-bar-height);
|
|
23085
|
-
background
|
|
23086
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23087
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23088
|
-
box-shadow: var(--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);
|
|
22965
|
+
background-color: var(--atomix-progress-bg);
|
|
23089
22966
|
border-radius: var(--atomix-progress-border-radius);
|
|
23090
22967
|
overflow: hidden;
|
|
23091
22968
|
}
|
|
@@ -23093,10 +22970,7 @@ a, a:hover {
|
|
|
23093
22970
|
width: var(--atomix-progress-bar-width);
|
|
23094
22971
|
height: var(--atomix-progress-bar-height);
|
|
23095
22972
|
color: var(--atomix-progress-bar-color);
|
|
23096
|
-
background
|
|
23097
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23098
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23099
|
-
box-shadow: var(--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);
|
|
22973
|
+
background-color: var(--atomix-progress-bar-bg);
|
|
23100
22974
|
border-radius: var(--atomix-progress-border-radius);
|
|
23101
22975
|
transition: var(--atomix-progress-bar-transition) var(--atomix-progress-bar-easing);
|
|
23102
22976
|
}
|
|
@@ -23303,10 +23177,7 @@ a, a:hover {
|
|
|
23303
23177
|
max-width: var(--atomix-river-width);
|
|
23304
23178
|
padding: var(--atomix-river-padding-y) var(--atomix-river-padding-x);
|
|
23305
23179
|
border-radius: var(--atomix-river-border-radius);
|
|
23306
|
-
background
|
|
23307
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23308
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23309
|
-
box-shadow: var(--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);
|
|
23180
|
+
background-color: var(--atomix-river-bg);
|
|
23310
23181
|
}
|
|
23311
23182
|
.c-river__bg {
|
|
23312
23183
|
position: absolute;
|
|
@@ -23326,10 +23197,7 @@ a, a:hover {
|
|
|
23326
23197
|
.c-river__overlay {
|
|
23327
23198
|
position: absolute;
|
|
23328
23199
|
inset: 0;
|
|
23329
|
-
background
|
|
23330
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23331
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23332
|
-
box-shadow: var(--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);
|
|
23200
|
+
background-color: var(--atomix-river-overlay);
|
|
23333
23201
|
opacity: var(--atomix-river-overlay-opacity);
|
|
23334
23202
|
border-radius: var(--atomix-river-border-radius);
|
|
23335
23203
|
}
|
|
@@ -23553,10 +23421,7 @@ a, a:hover {
|
|
|
23553
23421
|
left: 0;
|
|
23554
23422
|
width: 100%;
|
|
23555
23423
|
height: 100%;
|
|
23556
|
-
background
|
|
23557
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23558
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23559
|
-
box-shadow: var(--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);
|
|
23424
|
+
background-color: var(--atomix-sectionintro-overlay-bg-color);
|
|
23560
23425
|
opacity: var(--atomix-sectionintro-overlay-opacity);
|
|
23561
23426
|
}
|
|
23562
23427
|
.c-sectionintro--has-bg {
|
|
@@ -23636,10 +23501,7 @@ a, a:hover {
|
|
|
23636
23501
|
padding: var(--atomix-select-padding-x) var(--atomix-select-padding-y);
|
|
23637
23502
|
color: var(--atomix-select-placeholder-color);
|
|
23638
23503
|
font-size: var(--atomix-select-font-size);
|
|
23639
|
-
background
|
|
23640
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23641
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23642
|
-
box-shadow: var(--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);
|
|
23504
|
+
background-color: var(--atomix-select-bg);
|
|
23643
23505
|
border: 1px solid var(--atomix-select-border-color);
|
|
23644
23506
|
border-radius: var(--atomix-select-border-radius);
|
|
23645
23507
|
cursor: pointer;
|
|
@@ -23669,10 +23531,7 @@ a, a:hover {
|
|
|
23669
23531
|
height: 0px;
|
|
23670
23532
|
top: calc(100% + var(--atomix-select-panel-spacer-y));
|
|
23671
23533
|
left: 0;
|
|
23672
|
-
background
|
|
23673
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23674
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23675
|
-
box-shadow: var(--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);
|
|
23534
|
+
background-color: var(--atomix-select-panel-bg);
|
|
23676
23535
|
border-radius: var(--atomix-select-panel-border-radius);
|
|
23677
23536
|
box-shadow: var(--atomix-select-panel-box-shadow);
|
|
23678
23537
|
overflow: hidden;
|
|
@@ -23693,10 +23552,7 @@ a, a:hover {
|
|
|
23693
23552
|
.c-select__item {
|
|
23694
23553
|
padding: var(--atomix-select-item-padding-x) var(--atomix-select-item-padding-y);
|
|
23695
23554
|
color: var(--atomix-select-item-color);
|
|
23696
|
-
background
|
|
23697
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23698
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23699
|
-
box-shadow: var(--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);
|
|
23555
|
+
background-color: var(--atomix-select-item-bg);
|
|
23700
23556
|
border-radius: var(--atomix-select-item-border-radius);
|
|
23701
23557
|
transition-property: all;
|
|
23702
23558
|
transition-duration: 0.2s;
|
|
@@ -23707,10 +23563,7 @@ a, a:hover {
|
|
|
23707
23563
|
cursor: pointer;
|
|
23708
23564
|
}
|
|
23709
23565
|
.c-select__item:hover {
|
|
23710
|
-
background
|
|
23711
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23712
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23713
|
-
box-shadow: var(--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);
|
|
23566
|
+
background-color: var(--atomix-select-item-bg-hover);
|
|
23714
23567
|
}
|
|
23715
23568
|
.c-select--lg {
|
|
23716
23569
|
--atomix-select-font-size: var(--atomix-select-font-size-lg);
|
|
@@ -23760,10 +23613,7 @@ a, a:hover {
|
|
|
23760
23613
|
--atomix-side-menu-inner-padding-top: 1.5rem;
|
|
23761
23614
|
width: 100%;
|
|
23762
23615
|
padding: var(--atomix-side-menu-padding-y) var(--atomix-side-menu-padding-x);
|
|
23763
|
-
background
|
|
23764
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23765
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23766
|
-
box-shadow: var(--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);
|
|
23616
|
+
background-color: var(--atomix-side-menu-bg);
|
|
23767
23617
|
border-radius: var(--atomix-side-menu-border-radius);
|
|
23768
23618
|
border: var(--atomix-side-menu-border-width) solid var(--atomix-side-menu-border-color);
|
|
23769
23619
|
box-shadow: var(--atomix-side-menu-box-shadow);
|
|
@@ -23801,10 +23651,7 @@ a, a:hover {
|
|
|
23801
23651
|
justify-content: space-between;
|
|
23802
23652
|
width: 100%;
|
|
23803
23653
|
padding: var(--atomix-side-menu-toggler-padding-y) var(--atomix-side-menu-toggler-padding-x);
|
|
23804
|
-
background
|
|
23805
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23806
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23807
|
-
box-shadow: var(--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);
|
|
23654
|
+
background-color: var(--atomix-side-menu-toggler-bg);
|
|
23808
23655
|
border: none;
|
|
23809
23656
|
border-radius: var(--atomix-side-menu-toggler-border-radius);
|
|
23810
23657
|
cursor: pointer;
|
|
@@ -23820,10 +23667,7 @@ a, a:hover {
|
|
|
23820
23667
|
}
|
|
23821
23668
|
}
|
|
23822
23669
|
.c-side-menu__toggler:hover {
|
|
23823
|
-
background
|
|
23824
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23825
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23826
|
-
box-shadow: var(--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);
|
|
23670
|
+
background-color: var(--atomix-side-menu-toggler-hover-bg);
|
|
23827
23671
|
}
|
|
23828
23672
|
.c-side-menu__toggler:focus {
|
|
23829
23673
|
outline: 2px solid var(--atomix-focus-ring-color);
|
|
@@ -23861,10 +23705,7 @@ a, a:hover {
|
|
|
23861
23705
|
color: var(--atomix-side-menu-item-color);
|
|
23862
23706
|
font-size: var(--atomix-side-menu-item-font-size);
|
|
23863
23707
|
font-weight: var(--atomix-side-menu-item-font-weight);
|
|
23864
|
-
background
|
|
23865
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23866
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23867
|
-
box-shadow: var(--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);
|
|
23708
|
+
background-color: var(--atomix-side-menu-item-bg);
|
|
23868
23709
|
border: none;
|
|
23869
23710
|
border-radius: var(--atomix-side-menu-item-border-radius);
|
|
23870
23711
|
text-decoration: none;
|
|
@@ -23873,10 +23714,7 @@ a, a:hover {
|
|
|
23873
23714
|
}
|
|
23874
23715
|
.c-side-menu__link:hover {
|
|
23875
23716
|
color: var(--atomix-side-menu-item-hover-color);
|
|
23876
|
-
background
|
|
23877
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23878
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23879
|
-
box-shadow: var(--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);
|
|
23717
|
+
background-color: var(--atomix-side-menu-item-hover-bg);
|
|
23880
23718
|
text-decoration: none;
|
|
23881
23719
|
}
|
|
23882
23720
|
.c-side-menu__link:focus {
|
|
@@ -23888,18 +23726,12 @@ a, a:hover {
|
|
|
23888
23726
|
}
|
|
23889
23727
|
.c-side-menu__link.is-active {
|
|
23890
23728
|
color: var(--atomix-side-menu-item-active-color);
|
|
23891
|
-
background
|
|
23892
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23893
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23894
|
-
box-shadow: var(--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);
|
|
23729
|
+
background-color: var(--atomix-side-menu-item-active-bg);
|
|
23895
23730
|
font-weight: 500;
|
|
23896
23731
|
}
|
|
23897
23732
|
.c-side-menu__link.is-disabled, .c-side-menu__link[aria-disabled=true] {
|
|
23898
23733
|
color: var(--atomix-side-menu-item-disabled-color);
|
|
23899
|
-
background
|
|
23900
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23901
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23902
|
-
box-shadow: var(--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);
|
|
23734
|
+
background-color: var(--atomix-side-menu-item-disabled-bg);
|
|
23903
23735
|
cursor: not-allowed;
|
|
23904
23736
|
pointer-events: none;
|
|
23905
23737
|
opacity: 0.6;
|
|
@@ -23943,10 +23775,7 @@ a, a:hover {
|
|
|
23943
23775
|
display: inline-block;
|
|
23944
23776
|
width: var(--atomix-skeleton-width);
|
|
23945
23777
|
min-height: var(--atomix-skeleton-height);
|
|
23946
|
-
background
|
|
23947
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
23948
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
23949
|
-
box-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);
|
|
23778
|
+
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%);
|
|
23950
23779
|
background-size: 400% 100%;
|
|
23951
23780
|
border-radius: var(--atomix-skeleton-border-radius);
|
|
23952
23781
|
animation-name: atomix--skeleton-loading;
|
|
@@ -24042,10 +23871,7 @@ a, a:hover {
|
|
|
24042
23871
|
display: flex;
|
|
24043
23872
|
align-items: center;
|
|
24044
23873
|
justify-content: center;
|
|
24045
|
-
background
|
|
24046
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24047
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24048
|
-
box-shadow: var(--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);
|
|
23874
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
24049
23875
|
border: 2px dashed var(--atomix-primary-border-subtle);
|
|
24050
23876
|
border-radius: 0.25rem;
|
|
24051
23877
|
}
|
|
@@ -24085,10 +23911,7 @@ a, a:hover {
|
|
|
24085
23911
|
height: var(--atomix-slider-nav-size);
|
|
24086
23912
|
border: none;
|
|
24087
23913
|
border-radius: 50rem;
|
|
24088
|
-
background
|
|
24089
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24090
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24091
|
-
box-shadow: var(--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);
|
|
23914
|
+
background-color: var(--atomix-primary-bg-subtle);
|
|
24092
23915
|
color: var(--atomix-primary-text);
|
|
24093
23916
|
cursor: pointer;
|
|
24094
23917
|
pointer-events: auto;
|
|
@@ -24101,10 +23924,7 @@ a, a:hover {
|
|
|
24101
23924
|
}
|
|
24102
23925
|
.c-slider__navigation-prev:hover,
|
|
24103
23926
|
.c-slider__navigation-next:hover {
|
|
24104
|
-
background
|
|
24105
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24106
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24107
|
-
box-shadow: var(--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);
|
|
23927
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
24108
23928
|
transform: translateY(-50%) scale(1.05);
|
|
24109
23929
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
24110
23930
|
}
|
|
@@ -24156,29 +23976,20 @@ a, a:hover {
|
|
|
24156
23976
|
height: 0.5rem;
|
|
24157
23977
|
border-radius: 50rem;
|
|
24158
23978
|
border: none;
|
|
24159
|
-
background
|
|
24160
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24161
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24162
|
-
box-shadow: var(--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);
|
|
23979
|
+
background-color: var(--atomix-tertiary-bg-subtle);
|
|
24163
23980
|
cursor: pointer;
|
|
24164
23981
|
pointer-events: auto;
|
|
24165
23982
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
24166
23983
|
}
|
|
24167
23984
|
.c-slider__pagination-bullet:hover {
|
|
24168
|
-
background
|
|
24169
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24170
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24171
|
-
box-shadow: var(--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);
|
|
23985
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
24172
23986
|
transform: scale(1.2);
|
|
24173
23987
|
}
|
|
24174
23988
|
.c-slider__pagination-bullet:active {
|
|
24175
23989
|
transform: scale(1.1);
|
|
24176
23990
|
}
|
|
24177
23991
|
.c-slider__pagination-bullet--active {
|
|
24178
|
-
background
|
|
24179
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24180
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24181
|
-
box-shadow: var(--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);
|
|
23992
|
+
background-color: var(--atomix-primary);
|
|
24182
23993
|
transform: scale(1.2);
|
|
24183
23994
|
}
|
|
24184
23995
|
.c-slider__empty-message {
|
|
@@ -24335,10 +24146,7 @@ a, a:hover {
|
|
|
24335
24146
|
.c-steps__line {
|
|
24336
24147
|
width: var(--atomix-steps-line-width);
|
|
24337
24148
|
height: var(--atomix-steps-line-height);
|
|
24338
|
-
background
|
|
24339
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24340
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24341
|
-
box-shadow: var(--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);
|
|
24149
|
+
background-color: var(--atomix-steps-item-bg);
|
|
24342
24150
|
transition: 1s;
|
|
24343
24151
|
}
|
|
24344
24152
|
.c-steps__content {
|
|
@@ -24354,10 +24162,7 @@ a, a:hover {
|
|
|
24354
24162
|
height: var(--atomix-steps-item-number-size);
|
|
24355
24163
|
color: var(--atomix-steps-item-number-color);
|
|
24356
24164
|
font-size: var(--atomix-steps-item-number-font-size);
|
|
24357
|
-
background
|
|
24358
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24359
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24360
|
-
box-shadow: var(--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);
|
|
24165
|
+
background-color: var(--atomix-steps-item-number-bg);
|
|
24361
24166
|
border-radius: var(--atomix-steps-item-number-border-radius);
|
|
24362
24167
|
}
|
|
24363
24168
|
.c-steps__text {
|
|
@@ -24434,10 +24239,7 @@ a, a:hover {
|
|
|
24434
24239
|
border-radius: var(--atomix-tabs-nav-btn-border-radius);
|
|
24435
24240
|
border: var(--atomix-tabs-nav-btn-border-width) solid transparent;
|
|
24436
24241
|
border-bottom: var(--atomix-tabs-nav-btn-border-width) solid var(--atomix-tabs-nav-btn-border-color);
|
|
24437
|
-
background
|
|
24438
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24439
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24440
|
-
box-shadow: var(--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);
|
|
24242
|
+
background-color: var(--atomix-tabs-nav-btn-bg);
|
|
24441
24243
|
transition-property: all;
|
|
24442
24244
|
transition-duration: 0.2s;
|
|
24443
24245
|
transition-timing-function: ease-in-out;
|
|
@@ -24448,20 +24250,14 @@ a, a:hover {
|
|
|
24448
24250
|
border-color: transparent transparent var(--atomix-tabs-nav-btn-border-active-color) transparent;
|
|
24449
24251
|
}
|
|
24450
24252
|
.c-tabs__nav-btn:hover {
|
|
24451
|
-
background
|
|
24452
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24453
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24454
|
-
box-shadow: var(--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);
|
|
24253
|
+
background-color: var(--atomix-tabs-nav-btn-bg-hover);
|
|
24455
24254
|
}
|
|
24456
24255
|
.c-tabs__nav-btn:disabled, .c-tabs__nav-btn.is-disabled {
|
|
24457
24256
|
--atomix-tabs-nav-btn-border-active-color: var(
|
|
24458
24257
|
--atomix-tabs-nav-btn-border-disabled-color
|
|
24459
24258
|
);
|
|
24460
24259
|
color: var(--atomix-tabs-nav-btn-border-disabled-color);
|
|
24461
|
-
background
|
|
24462
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24463
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24464
|
-
box-shadow: var(--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);
|
|
24260
|
+
background-color: var(--atomix-tabs-nav-btn-bg-disabled);
|
|
24465
24261
|
pointer-events: none;
|
|
24466
24262
|
}
|
|
24467
24263
|
.c-tabs__nav-btn:focus-visible {
|
|
@@ -24506,10 +24302,7 @@ a, a:hover {
|
|
|
24506
24302
|
width: 100%;
|
|
24507
24303
|
max-width: var(--atomix-testimonial-width);
|
|
24508
24304
|
padding: var(--atomix-testimonial-padding-y) var(--atomix-testimonial-padding-x);
|
|
24509
|
-
background
|
|
24510
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24511
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24512
|
-
box-shadow: var(--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);
|
|
24305
|
+
background-color: var(--atomix-testimonial-bg);
|
|
24513
24306
|
}
|
|
24514
24307
|
.c-testimonial__quote {
|
|
24515
24308
|
color: var(--atomix-testimonial-quote-color);
|
|
@@ -24553,10 +24346,7 @@ a, a:hover {
|
|
|
24553
24346
|
margin-bottom: 1.5rem;
|
|
24554
24347
|
border: 1px solid var(--atomix-todo-border-color);
|
|
24555
24348
|
border-radius: var(--atomix-todo-border-radius);
|
|
24556
|
-
background
|
|
24557
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24558
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24559
|
-
box-shadow: var(--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);
|
|
24349
|
+
background-color: var(--atomix-todo-bg);
|
|
24560
24350
|
color: var(--atomix-todo-color);
|
|
24561
24351
|
padding: 1.25rem;
|
|
24562
24352
|
}
|
|
@@ -24598,10 +24388,7 @@ a, a:hover {
|
|
|
24598
24388
|
transition: background-color 0.2s ease;
|
|
24599
24389
|
}
|
|
24600
24390
|
.c-todo__item:hover {
|
|
24601
|
-
background
|
|
24602
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24603
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24604
|
-
box-shadow: var(--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);
|
|
24391
|
+
background-color: var(--atomix-todo-item-hover-bg);
|
|
24605
24392
|
}
|
|
24606
24393
|
.c-todo__item--completed .c-todo__item-text {
|
|
24607
24394
|
color: var(--atomix-todo-completed-color);
|
|
@@ -24689,10 +24476,7 @@ a, a:hover {
|
|
|
24689
24476
|
flex: 0 0 var(--atomix-toggle-switch-width);
|
|
24690
24477
|
width: var(--atomix-toggle-switch-width);
|
|
24691
24478
|
height: var(--atomix-toggle-switch-height);
|
|
24692
|
-
background
|
|
24693
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24694
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24695
|
-
box-shadow: var(--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);
|
|
24479
|
+
background-color: var(--atomix-toggle-switch-bg);
|
|
24696
24480
|
border-radius: var(--atomix-toggle-switch-border-radius);
|
|
24697
24481
|
-webkit-user-select: none;
|
|
24698
24482
|
-moz-user-select: none;
|
|
@@ -24709,10 +24493,7 @@ a, a:hover {
|
|
|
24709
24493
|
width: var(--atomix-toggle-switch-handle-width);
|
|
24710
24494
|
height: var(--atomix-toggle-switch-handle-height);
|
|
24711
24495
|
margin: var(--atomix-toggle-switch-handle-margin);
|
|
24712
|
-
background
|
|
24713
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24714
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24715
|
-
box-shadow: var(--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);
|
|
24496
|
+
background-color: var(--atomix-toggle-switch-handle-bg);
|
|
24716
24497
|
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
24717
24498
|
transition-property: all;
|
|
24718
24499
|
transition-duration: 0.2s;
|
|
@@ -24733,10 +24514,7 @@ a, a:hover {
|
|
|
24733
24514
|
pointer-events: none;
|
|
24734
24515
|
}
|
|
24735
24516
|
.c-toggle.is-disabled:not(.is-on) .c-toggle__switch {
|
|
24736
|
-
background
|
|
24737
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24738
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24739
|
-
box-shadow: var(--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);
|
|
24517
|
+
background-color: var(--atomix-toggle-switch-disabled-bg);
|
|
24740
24518
|
}
|
|
24741
24519
|
.c-toggle.is-disabled.is-on {
|
|
24742
24520
|
pointer-events: none;
|
|
@@ -24745,10 +24523,7 @@ a, a:hover {
|
|
|
24745
24523
|
content: "";
|
|
24746
24524
|
position: absolute;
|
|
24747
24525
|
inset: 0;
|
|
24748
|
-
background
|
|
24749
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24750
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24751
|
-
box-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);
|
|
24526
|
+
background-color: rgba(107, 114, 128, 0.6);
|
|
24752
24527
|
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
24753
24528
|
}
|
|
24754
24529
|
.c-tooltip {
|
|
@@ -24782,10 +24557,7 @@ a, a:hover {
|
|
|
24782
24557
|
font-size: var(--atomix-tooltip-font-size);
|
|
24783
24558
|
font-weight: var(--atomix-tooltip-font-weight);
|
|
24784
24559
|
padding: var(--atomix-tooltip-padding-y) var(--atomix-tooltip-padding-x);
|
|
24785
|
-
background
|
|
24786
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24787
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24788
|
-
box-shadow: var(--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);
|
|
24560
|
+
background-color: var(--atomix-tooltip-bg);
|
|
24789
24561
|
border-radius: var(--atomix-tooltip-border-radius);
|
|
24790
24562
|
z-index: 2;
|
|
24791
24563
|
opacity: 0;
|
|
@@ -24803,10 +24575,7 @@ a, a:hover {
|
|
|
24803
24575
|
transform: translateX(-50%) rotate(45deg);
|
|
24804
24576
|
width: var(--atomix-tooltip-arrow-size);
|
|
24805
24577
|
height: var(--atomix-tooltip-arrow-size);
|
|
24806
|
-
background
|
|
24807
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24808
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24809
|
-
box-shadow: var(--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);
|
|
24578
|
+
background-color: var(--atomix-tooltip-bg);
|
|
24810
24579
|
z-index: 1;
|
|
24811
24580
|
}
|
|
24812
24581
|
.c-tooltip--top-left {
|
|
@@ -24919,10 +24688,7 @@ a, a:hover {
|
|
|
24919
24688
|
width: 100%;
|
|
24920
24689
|
max-width: var(--atomix-upload-width);
|
|
24921
24690
|
padding: var(--atomix-upload-padding-y) var(--atomix-upload-padding-x);
|
|
24922
|
-
background
|
|
24923
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24924
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24925
|
-
box-shadow: var(--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);
|
|
24691
|
+
background-color: var(--atomix-upload-bg);
|
|
24926
24692
|
border-radius: var(--atomix-upload-border-radius);
|
|
24927
24693
|
transition-property: all;
|
|
24928
24694
|
transition-duration: 0.2s;
|
|
@@ -24930,10 +24696,7 @@ a, a:hover {
|
|
|
24930
24696
|
transition-delay: 0s;
|
|
24931
24697
|
}
|
|
24932
24698
|
.c-upload:hover {
|
|
24933
|
-
background
|
|
24934
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24935
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24936
|
-
box-shadow: var(--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);
|
|
24699
|
+
background-color: var(--atomix-upload-hover-bg);
|
|
24937
24700
|
}
|
|
24938
24701
|
.c-upload__inner {
|
|
24939
24702
|
display: flex;
|
|
@@ -24946,10 +24709,7 @@ a, a:hover {
|
|
|
24946
24709
|
.c-upload__icon {
|
|
24947
24710
|
font-size: var(--atomix-upload-icon-size);
|
|
24948
24711
|
padding: var(--atomix-upload-icon-padding);
|
|
24949
|
-
background
|
|
24950
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
24951
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
24952
|
-
box-shadow: var(--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);
|
|
24712
|
+
background-color: var(--atomix-upload-icon-bg);
|
|
24953
24713
|
border-radius: 50rem;
|
|
24954
24714
|
}
|
|
24955
24715
|
.c-upload__title {
|
|
@@ -25087,37 +24847,34 @@ a, a:hover {
|
|
|
25087
24847
|
pointer-events: none;
|
|
25088
24848
|
}
|
|
25089
24849
|
.c-video-player {
|
|
25090
|
-
--atomix
|
|
25091
|
-
--atomix
|
|
25092
|
-
--atomix
|
|
25093
|
-
--atomix
|
|
25094
|
-
--atomix
|
|
25095
|
-
--atomix
|
|
25096
|
-
--atomix
|
|
25097
|
-
--atomix
|
|
25098
|
-
--atomix
|
|
25099
|
-
--atomix
|
|
25100
|
-
--atomix
|
|
25101
|
-
--atomix
|
|
25102
|
-
--atomix
|
|
25103
|
-
--atomix
|
|
25104
|
-
--atomix
|
|
25105
|
-
--atomix
|
|
25106
|
-
--atomix
|
|
25107
|
-
--atomix
|
|
25108
|
-
--atomix
|
|
25109
|
-
--atomix
|
|
25110
|
-
--atomix
|
|
25111
|
-
--atomix
|
|
25112
|
-
--atomix
|
|
25113
|
-
--atomix
|
|
25114
|
-
--atomix
|
|
24850
|
+
--atomix--video-player-bg: #000;
|
|
24851
|
+
--atomix--video-player-border-radius: 8px;
|
|
24852
|
+
--atomix--video-player-controls-padding: 20px 16px 16px;
|
|
24853
|
+
--atomix--video-player-progress-height: 4px;
|
|
24854
|
+
--atomix--video-player-button-size: 40px;
|
|
24855
|
+
--atomix--video-player-font-size: 14px;
|
|
24856
|
+
--atomix--video-player-transition: all 0.3s ease;
|
|
24857
|
+
--atomix--video-player-volume-width: 80px;
|
|
24858
|
+
--atomix--video-player-volume-width-mobile: 60px;
|
|
24859
|
+
--atomix--video-player-volume-height: 4px;
|
|
24860
|
+
--atomix--video-player-volume-height-hover: 6px;
|
|
24861
|
+
--atomix--video-player-volume-thumb-size: 12px;
|
|
24862
|
+
--atomix--video-player-volume-bg: rgba(255, 255, 255, 0.3);
|
|
24863
|
+
--atomix--video-player-volume-bg-hover: rgba(255, 255, 255, 0.5);
|
|
24864
|
+
--atomix--video-player-volume-fill: var(--atomix-color-primary);
|
|
24865
|
+
--atomix--video-player-volume-fill-hover: var(--atomix-color-primary-light);
|
|
24866
|
+
--atomix--video-player-volume-fill-active: var(--atomix-color-primary-dark);
|
|
24867
|
+
--atomix--video-player-subtitle-bg: rgba(0, 0, 0, 0.85);
|
|
24868
|
+
--atomix--video-player-subtitle-color: #ffffff;
|
|
24869
|
+
--atomix--video-player-subtitle-font-size: 18px;
|
|
24870
|
+
--atomix--video-player-subtitle-font-weight: 500;
|
|
24871
|
+
--atomix--video-player-subtitle-line-height: 1.5;
|
|
24872
|
+
--atomix--video-player-subtitle-border-radius: 6px;
|
|
24873
|
+
--atomix--video-player-subtitle-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
|
24874
|
+
--atomix--video-player-subtitle-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
25115
24875
|
position: relative;
|
|
25116
24876
|
width: 100%;
|
|
25117
|
-
background
|
|
25118
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
25119
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
25120
|
-
box-shadow: var(--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);
|
|
24877
|
+
background-color: var(--atomix--video-player-bg, #000);
|
|
25121
24878
|
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
25122
24879
|
overflow: hidden;
|
|
25123
24880
|
font-family: var(--atomix--font-family-base);
|
|
@@ -25187,10 +24944,7 @@ a, a:hover {
|
|
|
25187
24944
|
bottom: 0;
|
|
25188
24945
|
left: 0;
|
|
25189
24946
|
right: 0;
|
|
25190
|
-
background: linear-gradient(
|
|
25191
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
25192
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
25193
|
-
box-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);
|
|
24947
|
+
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
|
|
25194
24948
|
padding: 1.25rem 1rem 1rem;
|
|
25195
24949
|
opacity: 0;
|
|
25196
24950
|
visibility: hidden;
|
|
@@ -25374,10 +25128,7 @@ a, a:hover {
|
|
|
25374
25128
|
bottom: 3.125rem;
|
|
25375
25129
|
right: 0;
|
|
25376
25130
|
min-width: 12.5rem;
|
|
25377
|
-
background
|
|
25378
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
25379
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
25380
|
-
box-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);
|
|
25131
|
+
background-color: rgba(var(--atomix-primary-rgb), 0.7);
|
|
25381
25132
|
border-radius: 0.5rem;
|
|
25382
25133
|
padding: 0.5rem;
|
|
25383
25134
|
-webkit-backdrop-filter: blur(10px);
|
|
@@ -25573,6 +25324,24 @@ a, a:hover {
|
|
|
25573
25324
|
.c-video-player--ambient .c-video-player__ambient-canvas {
|
|
25574
25325
|
display: block;
|
|
25575
25326
|
}
|
|
25327
|
+
.c-video-player--glass {
|
|
25328
|
+
position: relative;
|
|
25329
|
+
}
|
|
25330
|
+
.c-video-player__glass-overlay {
|
|
25331
|
+
overflow: hidden;
|
|
25332
|
+
position: absolute;
|
|
25333
|
+
top: 0;
|
|
25334
|
+
left: 0;
|
|
25335
|
+
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
25336
|
+
}
|
|
25337
|
+
.c-video-player__glass-content {
|
|
25338
|
+
position: absolute;
|
|
25339
|
+
top: 0;
|
|
25340
|
+
left: 0;
|
|
25341
|
+
right: 0;
|
|
25342
|
+
bottom: 0;
|
|
25343
|
+
pointer-events: auto;
|
|
25344
|
+
}
|
|
25576
25345
|
.c-video-player__subtitles {
|
|
25577
25346
|
position: absolute;
|
|
25578
25347
|
bottom: 5rem;
|
|
@@ -25627,10 +25396,7 @@ a, a:hover {
|
|
|
25627
25396
|
transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
|
|
25628
25397
|
}
|
|
25629
25398
|
.c-photo-viewer__container {
|
|
25630
|
-
background
|
|
25631
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
25632
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
25633
|
-
box-shadow: var(--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);
|
|
25399
|
+
background-color: var(--atomix-body-bg);
|
|
25634
25400
|
border: 1px solid var(--atomix-primary-border-subtle);
|
|
25635
25401
|
border-radius: 0.625rem;
|
|
25636
25402
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
|
|
@@ -25684,10 +25450,7 @@ a, a:hover {
|
|
|
25684
25450
|
border: 2px solid transparent;
|
|
25685
25451
|
border-radius: 8px;
|
|
25686
25452
|
padding: 0;
|
|
25687
|
-
background
|
|
25688
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
25689
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
25690
|
-
box-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);
|
|
25453
|
+
background-color: transparent;
|
|
25691
25454
|
cursor: pointer;
|
|
25692
25455
|
overflow: hidden;
|
|
25693
25456
|
position: relative;
|
|
@@ -25745,10 +25508,7 @@ body.is-open-photoviewer {
|
|
|
25745
25508
|
width: 100vw;
|
|
25746
25509
|
height: 100vh;
|
|
25747
25510
|
z-index: 1000;
|
|
25748
|
-
background
|
|
25749
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
25750
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
25751
|
-
box-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);
|
|
25511
|
+
background-color: transparent;
|
|
25752
25512
|
opacity: 1;
|
|
25753
25513
|
transition-property: opacity;
|
|
25754
25514
|
}
|