@shohojdhara/atomix 0.5.6 → 0.5.7
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 +452 -369
- package/dist/atomix.css.map +1 -1
- package/dist/atomix.min.css +5 -5
- package/dist/atomix.min.css.map +1 -1
- package/dist/core.d.ts +4 -3
- package/dist/index.d.ts +4 -3
- package/package.json +1 -1
- package/src/components/Breadcrumb/Breadcrumb.tsx +3 -3
- package/src/styles/06-components/_components.avatar-group.scss +1 -3
- package/src/styles/06-components/_components.avatar.scss +1 -1
- package/src/styles/06-components/_components.badge.scss +2 -2
- package/src/styles/06-components/_components.button.scss +3 -3
- package/src/styles/06-components/_components.callout.scss +5 -5
- package/src/styles/06-components/_components.card.scss +2 -5
- package/src/styles/06-components/_components.checkbox.scss +1 -1
- package/src/styles/06-components/_components.data-table.scss +1 -1
- package/src/styles/06-components/_components.datepicker.scss +1 -1
- package/src/styles/06-components/_components.dropdown.scss +3 -3
- package/src/styles/06-components/_components.edge-panel.scss +5 -9
- package/src/styles/06-components/_components.footer.scss +12 -13
- package/src/styles/06-components/_components.hero.scss +2 -2
- package/src/styles/06-components/_components.input.scss +3 -3
- package/src/styles/06-components/_components.list.scss +1 -1
- package/src/styles/06-components/_components.menu.scss +2 -2
- package/src/styles/06-components/_components.messages.scss +16 -18
- package/src/styles/06-components/_components.modal.scss +6 -6
- package/src/styles/06-components/_components.nav.scss +0 -3
- package/src/styles/06-components/_components.navbar.scss +3 -3
- package/src/styles/06-components/_components.pagination.scss +3 -3
- package/src/styles/06-components/_components.photoviewer.scss +3 -3
- package/src/styles/06-components/_components.popover.scss +3 -3
- package/src/styles/06-components/_components.product-review.scss +2 -2
- package/src/styles/06-components/_components.progress.scss +2 -2
- package/src/styles/06-components/_components.river.scss +1 -1
- package/src/styles/06-components/_components.sectionintro.scss +1 -1
- package/src/styles/06-components/_components.select.scss +5 -6
- package/src/styles/06-components/_components.side-menu.scss +6 -6
- package/src/styles/06-components/_components.skeleton.scss +8 -8
- package/src/styles/06-components/_components.slider.scss +6 -6
- package/src/styles/06-components/_components.steps.scss +2 -2
- package/src/styles/06-components/_components.tabs.scss +2 -2
- package/src/styles/06-components/_components.todo.scss +1 -1
- package/src/styles/06-components/_components.toggle.scss +3 -5
- package/src/styles/06-components/_components.tooltip.scss +2 -4
- package/src/styles/06-components/_components.upload.scss +1 -2
- package/src/styles/06-components/_components.video-player.scss +2 -2
package/dist/atomix.css
CHANGED
|
@@ -1933,13 +1933,6 @@ a, a:hover {
|
|
|
1933
1933
|
width: var(--atomix-avatar-size);
|
|
1934
1934
|
height: var(--atomix-avatar-size);
|
|
1935
1935
|
border-radius: var(--atomix-avatar-border-radius);
|
|
1936
|
-
position: relative;
|
|
1937
|
-
isolation: isolate;
|
|
1938
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-avatar-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-avatar-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-avatar-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-avatar-bg) 26%, transparent) 0%, transparent 60%);
|
|
1939
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
1940
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
1941
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-avatar-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-avatar-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-avatar-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
1942
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1943
1936
|
color: var(--atomix-avatar-color);
|
|
1944
1937
|
border: var(--atomix-avatar-border-width) solid var(--atomix-avatar-border-color);
|
|
1945
1938
|
overflow: hidden;
|
|
@@ -1950,6 +1943,13 @@ a, a:hover {
|
|
|
1950
1943
|
transition-duration: 0.2s;
|
|
1951
1944
|
transition-timing-function: ease-in-out;
|
|
1952
1945
|
transition-delay: 0s;
|
|
1946
|
+
position: relative;
|
|
1947
|
+
isolation: isolate;
|
|
1948
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-avatar-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-avatar-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-avatar-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-avatar-bg) 26%, transparent) 0%, transparent 60%);
|
|
1949
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
1950
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
1951
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-avatar-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-avatar-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-avatar-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
1952
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1953
1953
|
}
|
|
1954
1954
|
@media (hover: hover) {
|
|
1955
1955
|
.c-avatar:hover {
|
|
@@ -2050,6 +2050,10 @@ a, a:hover {
|
|
|
2050
2050
|
color: var(--atomix-avatar-group-more-color);
|
|
2051
2051
|
font-size: var(--atomix-avatar-group-more-font-size);
|
|
2052
2052
|
font-weight: var(--atomix-avatar-group-more-font-weight);
|
|
2053
|
+
border: var(--atomix-avatar-group-more-border-width) solid var(--atomix-avatar-group-more-border-color);
|
|
2054
|
+
width: var(--atomix-avatar-size);
|
|
2055
|
+
height: var(--atomix-avatar-size);
|
|
2056
|
+
border-radius: var(--atomix-avatar-border-radius);
|
|
2053
2057
|
position: relative;
|
|
2054
2058
|
isolation: isolate;
|
|
2055
2059
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -2057,10 +2061,6 @@ a, a:hover {
|
|
|
2057
2061
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
2058
2062
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-avatar-group-more-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-avatar-group-more-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-avatar-group-more-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
2059
2063
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2060
|
-
border: var(--atomix-avatar-group-more-border-width) solid var(--atomix-avatar-group-more-border-color);
|
|
2061
|
-
width: var(--atomix-avatar-size);
|
|
2062
|
-
height: var(--atomix-avatar-size);
|
|
2063
|
-
border-radius: var(--atomix-avatar-border-radius);
|
|
2064
2064
|
}
|
|
2065
2065
|
@media (hover: hover) {
|
|
2066
2066
|
.c-avatar-group__more:hover {
|
|
@@ -2389,6 +2389,9 @@ a, a:hover {
|
|
|
2389
2389
|
line-height: 1;
|
|
2390
2390
|
padding: var(--atomix-tag-padding-y) var(--atomix-tag-padding-x);
|
|
2391
2391
|
border-radius: var(--atomix-tag-border-radius);
|
|
2392
|
+
-webkit-user-select: none;
|
|
2393
|
+
-moz-user-select: none;
|
|
2394
|
+
user-select: none;
|
|
2392
2395
|
position: relative;
|
|
2393
2396
|
isolation: isolate;
|
|
2394
2397
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tag-bg-color) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tag-bg-color) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tag-bg-color) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tag-bg-color) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tag-bg-color) 26%, transparent) 0%, transparent 60%);
|
|
@@ -2396,9 +2399,6 @@ a, a:hover {
|
|
|
2396
2399
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
2397
2400
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
2398
2401
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2399
|
-
-webkit-user-select: none;
|
|
2400
|
-
-moz-user-select: none;
|
|
2401
|
-
user-select: none;
|
|
2402
2402
|
}
|
|
2403
2403
|
@media (hover: hover) {
|
|
2404
2404
|
.c-badge:hover {
|
|
@@ -2421,6 +2421,7 @@ a, a:hover {
|
|
|
2421
2421
|
--atomix-tag-padding-y: 0.5rem;
|
|
2422
2422
|
}
|
|
2423
2423
|
.c-badge--glass {
|
|
2424
|
+
border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 50%, transparent);
|
|
2424
2425
|
position: relative;
|
|
2425
2426
|
isolation: isolate;
|
|
2426
2427
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tag-bg-color) 33%, transparent) 0%, color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent) 40%, color-mix(in srgb, var(--atomix-tag-bg-color) 10%, transparent) 70%, color-mix(in srgb, var(--atomix-tag-bg-color) 23%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tag-bg-color) 8%, transparent) 0%, transparent 60%);
|
|
@@ -2428,7 +2429,6 @@ a, a:hover {
|
|
|
2428
2429
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
2429
2430
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
2430
2431
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2431
|
-
border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 50%, transparent);
|
|
2432
2432
|
}
|
|
2433
2433
|
@media (hover: hover) {
|
|
2434
2434
|
.c-badge--glass:hover {
|
|
@@ -2603,13 +2603,6 @@ a, a:hover {
|
|
|
2603
2603
|
text-align: center;
|
|
2604
2604
|
white-space: nowrap;
|
|
2605
2605
|
vertical-align: middle;
|
|
2606
|
-
position: relative;
|
|
2607
|
-
isolation: isolate;
|
|
2608
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-bg) 26%, transparent) 0%, transparent 60%);
|
|
2609
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
2610
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
2611
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-btn-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-btn-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
2612
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2613
2606
|
cursor: pointer;
|
|
2614
2607
|
-webkit-user-select: none;
|
|
2615
2608
|
-moz-user-select: none;
|
|
@@ -2617,6 +2610,13 @@ a, a:hover {
|
|
|
2617
2610
|
border: var(--atomix-btn-border-width) solid var(--atomix-btn-border-color);
|
|
2618
2611
|
border-radius: var(--atomix-btn-border-radius);
|
|
2619
2612
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease-in-out;
|
|
2613
|
+
position: relative;
|
|
2614
|
+
isolation: isolate;
|
|
2615
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-bg) 26%, transparent) 0%, transparent 60%);
|
|
2616
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
2617
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
2618
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-btn-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-btn-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
2619
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2620
2620
|
}
|
|
2621
2621
|
@media (hover: hover) {
|
|
2622
2622
|
.c-btn:hover {
|
|
@@ -2632,6 +2632,7 @@ a, a:hover {
|
|
|
2632
2632
|
}
|
|
2633
2633
|
.c-btn:hover {
|
|
2634
2634
|
color: var(--atomix-btn-hover-color);
|
|
2635
|
+
border-color: var(--atomix-btn-hover-border-color);
|
|
2635
2636
|
position: relative;
|
|
2636
2637
|
isolation: isolate;
|
|
2637
2638
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -2639,7 +2640,6 @@ a, a:hover {
|
|
|
2639
2640
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
2640
2641
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-btn-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
2641
2642
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2642
|
-
border-color: var(--atomix-btn-hover-border-color);
|
|
2643
2643
|
}
|
|
2644
2644
|
@media (hover: hover) {
|
|
2645
2645
|
.c-btn:hover:hover {
|
|
@@ -3079,6 +3079,9 @@ a, a:hover {
|
|
|
3079
3079
|
.c-btn:disabled, .c-btn--disabled, fieldset:disabled .c-btn {
|
|
3080
3080
|
color: var(--atomix-btn-disabled-color);
|
|
3081
3081
|
pointer-events: none;
|
|
3082
|
+
border-color: var(--atomix-btn-disabled-border-color);
|
|
3083
|
+
opacity: var(--atomix-btn-disabled-opacity);
|
|
3084
|
+
cursor: not-allowed;
|
|
3082
3085
|
position: relative;
|
|
3083
3086
|
isolation: isolate;
|
|
3084
3087
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-disabled-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -3086,9 +3089,6 @@ a, a:hover {
|
|
|
3086
3089
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
3087
3090
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-btn-disabled-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-btn-disabled-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-disabled-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
3088
3091
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3089
|
-
border-color: var(--atomix-btn-disabled-border-color);
|
|
3090
|
-
opacity: var(--atomix-btn-disabled-opacity);
|
|
3091
|
-
cursor: not-allowed;
|
|
3092
3092
|
}
|
|
3093
3093
|
@media (hover: hover) {
|
|
3094
3094
|
.c-btn:disabled:hover, .c-btn--disabled:hover, fieldset:disabled .c-btn:hover {
|
|
@@ -3232,16 +3232,20 @@ a, a:hover {
|
|
|
3232
3232
|
z-index: 5;
|
|
3233
3233
|
width: var(--atomix-datepicker-width);
|
|
3234
3234
|
padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
|
|
3235
|
+
border-radius: var(--atomix-datepicker-border-radius);
|
|
3236
|
+
box-shadow: var(--atomix-datepicker-box-shadow);
|
|
3237
|
+
margin-top: 0.25rem;
|
|
3235
3238
|
position: relative;
|
|
3236
3239
|
isolation: isolate;
|
|
3237
3240
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-datepicker-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-datepicker-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-datepicker-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-datepicker-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-datepicker-bg) 26%, transparent) 0%, transparent 60%);
|
|
3238
3241
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3239
3242
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
3240
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-datepicker-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-datepicker-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-datepicker-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
3241
3243
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
|
|
3244
|
+
}
|
|
3245
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
3246
|
+
.c-datepicker__calendar {
|
|
3247
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-datepicker-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-datepicker-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-datepicker-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
3248
|
+
}
|
|
3245
3249
|
}
|
|
3246
3250
|
@media (hover: hover) {
|
|
3247
3251
|
.c-datepicker__calendar:hover {
|
|
@@ -3626,6 +3630,9 @@ a, a:hover {
|
|
|
3626
3630
|
padding: var(--atomix-card-spacer-y) var(--atomix-card-spacer-x);
|
|
3627
3631
|
border: var(--atomix-card-border-width) solid var(--atomix-card-border-color);
|
|
3628
3632
|
border-radius: var(--atomix-card-border-radius);
|
|
3633
|
+
display: block;
|
|
3634
|
+
text-decoration: none;
|
|
3635
|
+
color: inherit;
|
|
3629
3636
|
transition-property: all;
|
|
3630
3637
|
transition-duration: 0.2s;
|
|
3631
3638
|
transition-timing-function: ease-in-out;
|
|
@@ -3637,9 +3644,6 @@ a, a:hover {
|
|
|
3637
3644
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
3638
3645
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-card-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-card-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-card-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
3639
3646
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3640
|
-
display: block;
|
|
3641
|
-
text-decoration: none;
|
|
3642
|
-
color: inherit;
|
|
3643
3647
|
}
|
|
3644
3648
|
@media (hover: hover) {
|
|
3645
3649
|
.c-card:hover {
|
|
@@ -5441,13 +5445,6 @@ a, a:hover {
|
|
|
5441
5445
|
-webkit-appearance: none;
|
|
5442
5446
|
-moz-appearance: none;
|
|
5443
5447
|
appearance: none;
|
|
5444
|
-
position: relative;
|
|
5445
|
-
isolation: isolate;
|
|
5446
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-checkbox-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-checkbox-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-checkbox-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-checkbox-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-checkbox-bg) 26%, transparent) 0%, transparent 60%);
|
|
5447
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5448
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
5449
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-checkbox-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-checkbox-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-checkbox-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5450
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5451
5448
|
width: var(--atomix-checkbox-width);
|
|
5452
5449
|
height: var(--atomix-checkbox-height);
|
|
5453
5450
|
color: currentColor;
|
|
@@ -5458,6 +5455,13 @@ a, a:hover {
|
|
|
5458
5455
|
transition-duration: 0.2s;
|
|
5459
5456
|
transition-timing-function: ease-in-out;
|
|
5460
5457
|
transition-delay: 0s;
|
|
5458
|
+
position: relative;
|
|
5459
|
+
isolation: isolate;
|
|
5460
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-checkbox-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-checkbox-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-checkbox-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-checkbox-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-checkbox-bg) 26%, transparent) 0%, transparent 60%);
|
|
5461
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5462
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
5463
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-checkbox-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-checkbox-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-checkbox-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5464
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5461
5465
|
}
|
|
5462
5466
|
@media (hover: hover) {
|
|
5463
5467
|
.c-checkbox__input:hover {
|
|
@@ -5699,6 +5703,7 @@ a, a:hover {
|
|
|
5699
5703
|
width: 100%;
|
|
5700
5704
|
margin-bottom: 0;
|
|
5701
5705
|
color: var(--atomix-data-table-color);
|
|
5706
|
+
border-collapse: collapse;
|
|
5702
5707
|
position: relative;
|
|
5703
5708
|
isolation: isolate;
|
|
5704
5709
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -5706,7 +5711,6 @@ a, a:hover {
|
|
|
5706
5711
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
5707
5712
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-data-table-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5708
5713
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5709
|
-
border-collapse: collapse;
|
|
5710
5714
|
}
|
|
5711
5715
|
@media (hover: hover) {
|
|
5712
5716
|
.c-data-table:hover {
|
|
@@ -6157,16 +6161,20 @@ a, a:hover {
|
|
|
6157
6161
|
list-style: none;
|
|
6158
6162
|
margin-bottom: 0rem;
|
|
6159
6163
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
6164
|
+
border-radius: var(--atomix-dropdown-border-radius);
|
|
6165
|
+
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
6166
|
+
overflow: hidden;
|
|
6160
6167
|
position: relative;
|
|
6161
6168
|
isolation: isolate;
|
|
6162
6169
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-bg) 26%, transparent) 0%, transparent 60%);
|
|
6163
6170
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6164
6171
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
6165
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-dropdown-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6166
6172
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6167
|
-
|
|
6168
|
-
|
|
6169
|
-
|
|
6173
|
+
}
|
|
6174
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
6175
|
+
.c-dropdown__menu {
|
|
6176
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-dropdown-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6177
|
+
}
|
|
6170
6178
|
}
|
|
6171
6179
|
@media (hover: hover) {
|
|
6172
6180
|
.c-dropdown__menu:hover {
|
|
@@ -6178,14 +6186,18 @@ a, a:hover {
|
|
|
6178
6186
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-dropdown-bg) 81%, transparent) 100%);
|
|
6179
6187
|
}
|
|
6180
6188
|
.c-dropdown__menu--glass {
|
|
6189
|
+
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
6181
6190
|
position: relative;
|
|
6182
6191
|
isolation: isolate;
|
|
6183
6192
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-bg) 26%, transparent) 0%, transparent 60%);
|
|
6184
6193
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6185
6194
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
6186
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-dropdown-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6187
6195
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6188
|
-
|
|
6196
|
+
}
|
|
6197
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
6198
|
+
.c-dropdown__menu--glass {
|
|
6199
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-dropdown-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6200
|
+
}
|
|
6189
6201
|
}
|
|
6190
6202
|
@media (hover: hover) {
|
|
6191
6203
|
.c-dropdown__menu--glass:hover {
|
|
@@ -6212,6 +6224,8 @@ a, a:hover {
|
|
|
6212
6224
|
}
|
|
6213
6225
|
.c-dropdown__menu-item:hover, .c-dropdown__menu-item:focus {
|
|
6214
6226
|
color: var(--atomix-dropdown-link-hover-color);
|
|
6227
|
+
outline: none;
|
|
6228
|
+
padding-left: calc(var(--atomix-dropdown-item-padding-x) + 3px);
|
|
6215
6229
|
position: relative;
|
|
6216
6230
|
isolation: isolate;
|
|
6217
6231
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -6219,8 +6233,6 @@ a, a:hover {
|
|
|
6219
6233
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
6220
6234
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6221
6235
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6222
|
-
outline: none;
|
|
6223
|
-
padding-left: calc(var(--atomix-dropdown-item-padding-x) + 3px);
|
|
6224
6236
|
}
|
|
6225
6237
|
@media (hover: hover) {
|
|
6226
6238
|
.c-dropdown__menu-item:hover:hover, .c-dropdown__menu-item:focus:hover {
|
|
@@ -6433,6 +6445,9 @@ a, a:hover {
|
|
|
6433
6445
|
.c-edge-panel__backdrop {
|
|
6434
6446
|
position: absolute;
|
|
6435
6447
|
inset: 0;
|
|
6448
|
+
opacity: 0;
|
|
6449
|
+
z-index: 1;
|
|
6450
|
+
transition: opacity var(--atomix-edge-panel-animation-duration) ease;
|
|
6436
6451
|
position: relative;
|
|
6437
6452
|
isolation: isolate;
|
|
6438
6453
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -6440,9 +6455,6 @@ a, a:hover {
|
|
|
6440
6455
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
6441
6456
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6442
6457
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6443
|
-
opacity: 0;
|
|
6444
|
-
z-index: 1;
|
|
6445
|
-
transition: opacity var(--atomix-edge-panel-animation-duration) ease;
|
|
6446
6458
|
}
|
|
6447
6459
|
@media (hover: hover) {
|
|
6448
6460
|
.c-edge-panel__backdrop:hover {
|
|
@@ -6464,18 +6476,22 @@ a, a:hover {
|
|
|
6464
6476
|
color: var(--atomix-edge-panel-color);
|
|
6465
6477
|
width: var(--atomix-edge-panel-width);
|
|
6466
6478
|
height: 100%;
|
|
6479
|
+
box-shadow: var(--atomix-edge-panel-shadow);
|
|
6480
|
+
z-index: 2;
|
|
6481
|
+
overflow: hidden;
|
|
6482
|
+
display: flex;
|
|
6483
|
+
flex-direction: column;
|
|
6467
6484
|
position: relative;
|
|
6468
6485
|
isolation: isolate;
|
|
6469
6486
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-bg) 26%, transparent) 0%, transparent 60%);
|
|
6470
6487
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6471
6488
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
6472
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-edge-panel-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6473
6489
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6474
|
-
|
|
6475
|
-
|
|
6476
|
-
|
|
6477
|
-
|
|
6478
|
-
|
|
6490
|
+
}
|
|
6491
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
6492
|
+
.c-edge-panel__container {
|
|
6493
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-edge-panel-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6494
|
+
}
|
|
6479
6495
|
}
|
|
6480
6496
|
@media (hover: hover) {
|
|
6481
6497
|
.c-edge-panel__container:hover {
|
|
@@ -6774,6 +6790,8 @@ a, a:hover {
|
|
|
6774
6790
|
outline-color: rgba(255, 255, 255, 0.5);
|
|
6775
6791
|
}
|
|
6776
6792
|
.c-edge-panel--glass .c-edge-panel__backdrop {
|
|
6793
|
+
animation: fadeIn 0.3s ease forwards;
|
|
6794
|
+
z-index: 1;
|
|
6777
6795
|
position: relative;
|
|
6778
6796
|
isolation: isolate;
|
|
6779
6797
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -6781,8 +6799,6 @@ a, a:hover {
|
|
|
6781
6799
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
6782
6800
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6783
6801
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6784
|
-
animation: fadeIn 0.3s ease forwards;
|
|
6785
|
-
z-index: 1;
|
|
6786
6802
|
}
|
|
6787
6803
|
@media (hover: hover) {
|
|
6788
6804
|
.c-edge-panel--glass .c-edge-panel__backdrop:hover {
|
|
@@ -6842,6 +6858,10 @@ a, a:hover {
|
|
|
6842
6858
|
--atomix-footer-section-toggle-padding: 0.75rem 0;
|
|
6843
6859
|
--atomix-footer-bg-rgb: var(--atomix-primary-bg);
|
|
6844
6860
|
--atomix-disabled-opacity: 0.6;
|
|
6861
|
+
color: var(--atomix-footer-color);
|
|
6862
|
+
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
6863
|
+
padding: var(--atomix-footer-padding-y) 0;
|
|
6864
|
+
position: relative;
|
|
6845
6865
|
position: relative;
|
|
6846
6866
|
isolation: isolate;
|
|
6847
6867
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-footer-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-footer-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-footer-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-footer-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-footer-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -6849,10 +6869,6 @@ a, a:hover {
|
|
|
6849
6869
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
6850
6870
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-footer-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-footer-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-footer-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6851
6871
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6852
|
-
color: var(--atomix-footer-color);
|
|
6853
|
-
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
6854
|
-
padding: var(--atomix-footer-padding-y) 0;
|
|
6855
|
-
position: relative;
|
|
6856
6872
|
}
|
|
6857
6873
|
@media (hover: hover) {
|
|
6858
6874
|
.c-footer:hover {
|
|
@@ -6871,6 +6887,9 @@ a, a:hover {
|
|
|
6871
6887
|
background: transparent;
|
|
6872
6888
|
}
|
|
6873
6889
|
.c-footer--glass .c-footer__glass {
|
|
6890
|
+
color: var(--atomix-footer-color);
|
|
6891
|
+
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
6892
|
+
padding: var(--atomix-footer-padding-y) 0;
|
|
6874
6893
|
position: relative;
|
|
6875
6894
|
isolation: isolate;
|
|
6876
6895
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 78%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 65%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 55%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 26%, transparent) 0%, transparent 60%);
|
|
@@ -6878,9 +6897,6 @@ a, a:hover {
|
|
|
6878
6897
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
6879
6898
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6880
6899
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6881
|
-
color: var(--atomix-footer-color);
|
|
6882
|
-
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
6883
|
-
padding: var(--atomix-footer-padding-y) 0;
|
|
6884
6900
|
}
|
|
6885
6901
|
@media (hover: hover) {
|
|
6886
6902
|
.c-footer--glass .c-footer__glass:hover {
|
|
@@ -7117,6 +7133,12 @@ a, a:hover {
|
|
|
7117
7133
|
justify-content: center;
|
|
7118
7134
|
width: 2.5rem;
|
|
7119
7135
|
height: 2.5rem;
|
|
7136
|
+
color: var(--atomix-primary-text-emphasis);
|
|
7137
|
+
border-radius: 50%;
|
|
7138
|
+
text-decoration: none;
|
|
7139
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7140
|
+
position: relative;
|
|
7141
|
+
overflow: hidden;
|
|
7120
7142
|
position: relative;
|
|
7121
7143
|
isolation: isolate;
|
|
7122
7144
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
@@ -7124,12 +7146,6 @@ a, a:hover {
|
|
|
7124
7146
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
7125
7147
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7126
7148
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7127
|
-
color: var(--atomix-primary-text-emphasis);
|
|
7128
|
-
border-radius: 50%;
|
|
7129
|
-
text-decoration: none;
|
|
7130
|
-
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7131
|
-
position: relative;
|
|
7132
|
-
overflow: hidden;
|
|
7133
7149
|
}
|
|
7134
7150
|
@media (hover: hover) {
|
|
7135
7151
|
.c-footer__social-link:hover {
|
|
@@ -7149,16 +7165,20 @@ a, a:hover {
|
|
|
7149
7165
|
transition: transform 0.6s ease;
|
|
7150
7166
|
}
|
|
7151
7167
|
.c-footer__social-link:hover, .c-footer__social-link:focus {
|
|
7168
|
+
color: var(--atomix-component-active-color);
|
|
7169
|
+
transform: translateY(-3px) scale(1.05);
|
|
7170
|
+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
7152
7171
|
position: relative;
|
|
7153
7172
|
isolation: isolate;
|
|
7154
7173
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-primary) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-primary) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary) 26%, transparent) 0%, transparent 60%);
|
|
7155
7174
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7156
7175
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
7157
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7158
7176
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7159
|
-
|
|
7160
|
-
|
|
7161
|
-
|
|
7177
|
+
}
|
|
7178
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
7179
|
+
.c-footer__social-link:hover, .c-footer__social-link:focus {
|
|
7180
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7181
|
+
}
|
|
7162
7182
|
}
|
|
7163
7183
|
@media (hover: hover) {
|
|
7164
7184
|
.c-footer__social-link:hover:hover, .c-footer__social-link:focus:hover {
|
|
@@ -7232,6 +7252,11 @@ a, a:hover {
|
|
|
7232
7252
|
background: linear-gradient(135deg, #25d366, #66bb6a);
|
|
7233
7253
|
}
|
|
7234
7254
|
.c-footer__newsletter {
|
|
7255
|
+
padding: 1.5rem;
|
|
7256
|
+
border-radius: 0.5rem;
|
|
7257
|
+
border: 1px solid var(--atomix-border-subtle);
|
|
7258
|
+
position: relative;
|
|
7259
|
+
overflow: hidden;
|
|
7235
7260
|
position: relative;
|
|
7236
7261
|
isolation: isolate;
|
|
7237
7262
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 78%, transparent) 0%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 65%, transparent) 40%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 55%, transparent) 70%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 26%, transparent) 0%, transparent 60%);
|
|
@@ -7239,11 +7264,6 @@ a, a:hover {
|
|
|
7239
7264
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
7240
7265
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7241
7266
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7242
|
-
padding: 1.5rem;
|
|
7243
|
-
border-radius: 0.5rem;
|
|
7244
|
-
border: 1px solid var(--atomix-border-subtle);
|
|
7245
|
-
position: relative;
|
|
7246
|
-
overflow: hidden;
|
|
7247
7267
|
}
|
|
7248
7268
|
@media (hover: hover) {
|
|
7249
7269
|
.c-footer__newsletter:hover {
|
|
@@ -7307,6 +7327,12 @@ a, a:hover {
|
|
|
7307
7327
|
flex: 1 1;
|
|
7308
7328
|
padding: 0.75rem 1rem;
|
|
7309
7329
|
font-size: 0.875rem;
|
|
7330
|
+
color: var(--atomix-primary-text-emphasis);
|
|
7331
|
+
border: 1px solid var(--atomix-primary-border);
|
|
7332
|
+
border-radius: 0.375rem;
|
|
7333
|
+
outline: none;
|
|
7334
|
+
transition: all 0.3s ease;
|
|
7335
|
+
box-sizing: border-box;
|
|
7310
7336
|
position: relative;
|
|
7311
7337
|
isolation: isolate;
|
|
7312
7338
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
@@ -7314,12 +7340,6 @@ a, a:hover {
|
|
|
7314
7340
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
7315
7341
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-primary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7316
7342
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7317
|
-
color: var(--atomix-primary-text-emphasis);
|
|
7318
|
-
border: 1px solid var(--atomix-primary-border);
|
|
7319
|
-
border-radius: 0.375rem;
|
|
7320
|
-
outline: none;
|
|
7321
|
-
transition: all 0.3s ease;
|
|
7322
|
-
box-sizing: border-box;
|
|
7323
7343
|
}
|
|
7324
7344
|
@media (hover: hover) {
|
|
7325
7345
|
.c-footer__newsletter-input:hover {
|
|
@@ -7352,13 +7372,6 @@ a, a:hover {
|
|
|
7352
7372
|
}
|
|
7353
7373
|
.c-footer__newsletter-button {
|
|
7354
7374
|
padding: 0.75rem 1.5rem;
|
|
7355
|
-
position: relative;
|
|
7356
|
-
isolation: isolate;
|
|
7357
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
7358
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7359
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
7360
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7361
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7362
7375
|
color: var(--atomix-brand-text-emphasis);
|
|
7363
7376
|
border: none;
|
|
7364
7377
|
border-radius: 0.375rem;
|
|
@@ -7368,6 +7381,13 @@ a, a:hover {
|
|
|
7368
7381
|
white-space: nowrap;
|
|
7369
7382
|
position: relative;
|
|
7370
7383
|
overflow: hidden;
|
|
7384
|
+
position: relative;
|
|
7385
|
+
isolation: isolate;
|
|
7386
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
7387
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7388
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
7389
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7390
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7371
7391
|
}
|
|
7372
7392
|
@media (hover: hover) {
|
|
7373
7393
|
.c-footer__newsletter-button:hover {
|
|
@@ -7387,15 +7407,19 @@ a, a:hover {
|
|
|
7387
7407
|
transition: transform 0.6s ease;
|
|
7388
7408
|
}
|
|
7389
7409
|
.c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
|
|
7410
|
+
transform: translateY(-2px);
|
|
7411
|
+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
7390
7412
|
position: relative;
|
|
7391
7413
|
isolation: isolate;
|
|
7392
7414
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
7393
7415
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7394
7416
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
7395
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7396
7417
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7397
|
-
|
|
7398
|
-
|
|
7418
|
+
}
|
|
7419
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
7420
|
+
.c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
|
|
7421
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7422
|
+
}
|
|
7399
7423
|
}
|
|
7400
7424
|
@media (hover: hover) {
|
|
7401
7425
|
.c-footer__newsletter-button:hover:hover, .c-footer__newsletter-button:focus:hover {
|
|
@@ -7447,13 +7471,6 @@ a, a:hover {
|
|
|
7447
7471
|
align-items: center;
|
|
7448
7472
|
gap: 0.5rem;
|
|
7449
7473
|
padding: 0.75rem 1.25rem;
|
|
7450
|
-
position: relative;
|
|
7451
|
-
isolation: isolate;
|
|
7452
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg) 26%, transparent) 0%, transparent 60%);
|
|
7453
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7454
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
7455
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7456
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7457
7474
|
border: 1px solid var(--atomix-border-subtle);
|
|
7458
7475
|
color: var(--atomix-primary-text-emphasis);
|
|
7459
7476
|
font-size: 0.875rem;
|
|
@@ -7465,6 +7482,13 @@ a, a:hover {
|
|
|
7465
7482
|
overflow: hidden;
|
|
7466
7483
|
text-decoration: none;
|
|
7467
7484
|
outline: none;
|
|
7485
|
+
position: relative;
|
|
7486
|
+
isolation: isolate;
|
|
7487
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg) 26%, transparent) 0%, transparent 60%);
|
|
7488
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7489
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
7490
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7491
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7468
7492
|
}
|
|
7469
7493
|
@media (hover: hover) {
|
|
7470
7494
|
.c-footer__back-to-top:hover {
|
|
@@ -7485,16 +7509,20 @@ a, a:hover {
|
|
|
7485
7509
|
}
|
|
7486
7510
|
.c-footer__back-to-top:hover, .c-footer__back-to-top:focus {
|
|
7487
7511
|
color: var(--atomix-secondary-text-emphasis);
|
|
7512
|
+
border-color: var(--atomix-primary);
|
|
7513
|
+
transform: translateY(-3px);
|
|
7514
|
+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
|
7488
7515
|
position: relative;
|
|
7489
7516
|
isolation: isolate;
|
|
7490
7517
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-primary) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-primary) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary) 26%, transparent) 0%, transparent 60%);
|
|
7491
7518
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7492
7519
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
7493
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7494
7520
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7495
|
-
|
|
7496
|
-
|
|
7497
|
-
|
|
7521
|
+
}
|
|
7522
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
7523
|
+
.c-footer__back-to-top:hover, .c-footer__back-to-top:focus {
|
|
7524
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7525
|
+
}
|
|
7498
7526
|
}
|
|
7499
7527
|
@media (hover: hover) {
|
|
7500
7528
|
.c-footer__back-to-top:hover:hover, .c-footer__back-to-top:focus:hover {
|
|
@@ -8021,6 +8049,7 @@ a, a:hover {
|
|
|
8021
8049
|
display: grid;
|
|
8022
8050
|
place-items: center;
|
|
8023
8051
|
padding: var(--atomix-hero-padding-y) var(--atomix-hero-padding-x);
|
|
8052
|
+
overflow: hidden;
|
|
8024
8053
|
position: relative;
|
|
8025
8054
|
isolation: isolate;
|
|
8026
8055
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-hero-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-hero-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-hero-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-hero-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-hero-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -8028,7 +8057,6 @@ a, a:hover {
|
|
|
8028
8057
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
8029
8058
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-hero-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-hero-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-hero-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8030
8059
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8031
|
-
overflow: hidden;
|
|
8032
8060
|
}
|
|
8033
8061
|
@media (hover: hover) {
|
|
8034
8062
|
.c-hero:hover {
|
|
@@ -8059,6 +8087,8 @@ a, a:hover {
|
|
|
8059
8087
|
.c-hero__overlay {
|
|
8060
8088
|
position: absolute;
|
|
8061
8089
|
inset: 0;
|
|
8090
|
+
opacity: var(--atomix-hero-overlay-opacity);
|
|
8091
|
+
z-index: 1;
|
|
8062
8092
|
position: relative;
|
|
8063
8093
|
isolation: isolate;
|
|
8064
8094
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-hero-overlay) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-hero-overlay) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-hero-overlay) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-hero-overlay) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-hero-overlay) 26%, transparent) 0%, transparent 60%);
|
|
@@ -8066,8 +8096,6 @@ a, a:hover {
|
|
|
8066
8096
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
8067
8097
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-hero-overlay) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-hero-overlay) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-hero-overlay) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8068
8098
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8069
|
-
opacity: var(--atomix-hero-overlay-opacity);
|
|
8070
|
-
z-index: 1;
|
|
8071
8099
|
}
|
|
8072
8100
|
@media (hover: hover) {
|
|
8073
8101
|
.c-hero__overlay:hover {
|
|
@@ -8247,6 +8275,10 @@ a, a:hover {
|
|
|
8247
8275
|
border: var(--atomix-input-border-width) solid var(--atomix-input-border-color);
|
|
8248
8276
|
border-radius: var(--atomix-input-border-radius);
|
|
8249
8277
|
outline: none;
|
|
8278
|
+
transition-property: all;
|
|
8279
|
+
transition-duration: 0.2s;
|
|
8280
|
+
transition-timing-function: ease-in-out;
|
|
8281
|
+
transition-delay: 0s;
|
|
8250
8282
|
position: relative;
|
|
8251
8283
|
isolation: isolate;
|
|
8252
8284
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -8254,10 +8286,6 @@ a, a:hover {
|
|
|
8254
8286
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
8255
8287
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-input-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8256
8288
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8257
|
-
transition-property: all;
|
|
8258
|
-
transition-duration: 0.2s;
|
|
8259
|
-
transition-timing-function: ease-in-out;
|
|
8260
|
-
transition-delay: 0s;
|
|
8261
8289
|
}
|
|
8262
8290
|
@media (hover: hover) {
|
|
8263
8291
|
.c-input:hover {
|
|
@@ -8335,15 +8363,19 @@ a, a:hover {
|
|
|
8335
8363
|
pointer-events: none;
|
|
8336
8364
|
}
|
|
8337
8365
|
.c-input--glass {
|
|
8366
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
8367
|
+
border-color: color-mix(in srgb, var(--atomix-input-border-color) 50%, transparent);
|
|
8338
8368
|
position: relative;
|
|
8339
8369
|
isolation: isolate;
|
|
8340
8370
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 26%, transparent) 0%, transparent 60%);
|
|
8341
8371
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8342
8372
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
8343
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-input-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8344
8373
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8345
|
-
|
|
8346
|
-
|
|
8374
|
+
}
|
|
8375
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
8376
|
+
.c-input--glass {
|
|
8377
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-input-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8378
|
+
}
|
|
8347
8379
|
}
|
|
8348
8380
|
@media (hover: hover) {
|
|
8349
8381
|
.c-input--glass:hover {
|
|
@@ -8376,6 +8408,7 @@ a, a:hover {
|
|
|
8376
8408
|
resize: vertical;
|
|
8377
8409
|
}
|
|
8378
8410
|
.c-input--glass:disabled, .c-input--glass.is-disabled {
|
|
8411
|
+
opacity: 0.6;
|
|
8379
8412
|
position: relative;
|
|
8380
8413
|
isolation: isolate;
|
|
8381
8414
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -8383,7 +8416,6 @@ a, a:hover {
|
|
|
8383
8416
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
8384
8417
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-input-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8385
8418
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8386
|
-
opacity: 0.6;
|
|
8387
8419
|
}
|
|
8388
8420
|
@media (hover: hover) {
|
|
8389
8421
|
.c-input--glass:disabled:hover, .c-input--glass.is-disabled:hover {
|
|
@@ -8515,6 +8547,7 @@ a, a:hover {
|
|
|
8515
8547
|
left: 0;
|
|
8516
8548
|
width: var(--atomix-list-item-dash-width);
|
|
8517
8549
|
height: var(--atomix-list-item-dash-height);
|
|
8550
|
+
transform: translateY(-50%);
|
|
8518
8551
|
position: relative;
|
|
8519
8552
|
isolation: isolate;
|
|
8520
8553
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-list-color) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-list-color) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-list-color) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-list-color) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-list-color) 26%, transparent) 0%, transparent 60%);
|
|
@@ -8522,7 +8555,6 @@ a, a:hover {
|
|
|
8522
8555
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
8523
8556
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-list-color) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-list-color) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-list-color) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8524
8557
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8525
|
-
transform: translateY(-50%);
|
|
8526
8558
|
}
|
|
8527
8559
|
@media (hover: hover) {
|
|
8528
8560
|
.c-list--dash .c-list__item::before:hover {
|
|
@@ -8570,16 +8602,20 @@ a, a:hover {
|
|
|
8570
8602
|
display: inline-block;
|
|
8571
8603
|
min-width: var(--atomix-menu-min-width);
|
|
8572
8604
|
padding: var(--atomix-menu-item-padding-y) var(--atomix-menu-item-padding-x);
|
|
8605
|
+
border-radius: var(--atomix-menu-border-radius);
|
|
8606
|
+
box-shadow: var(--atomix-menu-box-shadow);
|
|
8607
|
+
z-index: 5;
|
|
8573
8608
|
position: relative;
|
|
8574
8609
|
isolation: isolate;
|
|
8575
8610
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-menu-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-bg) 26%, transparent) 0%, transparent 60%);
|
|
8576
8611
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8577
8612
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
8578
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-menu-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-menu-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8579
8613
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8580
|
-
|
|
8581
|
-
|
|
8582
|
-
|
|
8614
|
+
}
|
|
8615
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
8616
|
+
.c-menu {
|
|
8617
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-menu-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-menu-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8618
|
+
}
|
|
8583
8619
|
}
|
|
8584
8620
|
@media (hover: hover) {
|
|
8585
8621
|
.c-menu:hover {
|
|
@@ -8631,6 +8667,12 @@ a, a:hover {
|
|
|
8631
8667
|
color: var(--atomix-menu-item-color);
|
|
8632
8668
|
font-size: var(--atomix-menu-item-font-size);
|
|
8633
8669
|
font-weight: var(--atomix-menu-item-font-weight);
|
|
8670
|
+
border-radius: var(--atomix-menu-border-radius);
|
|
8671
|
+
cursor: pointer;
|
|
8672
|
+
transition-property: all;
|
|
8673
|
+
transition-duration: 0.2s;
|
|
8674
|
+
transition-timing-function: ease-in-out;
|
|
8675
|
+
transition-delay: 0s;
|
|
8634
8676
|
position: relative;
|
|
8635
8677
|
isolation: isolate;
|
|
8636
8678
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-menu-item-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-item-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-item-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-item-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -8638,12 +8680,6 @@ a, a:hover {
|
|
|
8638
8680
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
8639
8681
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-menu-item-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-menu-item-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-item-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8640
8682
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8641
|
-
border-radius: var(--atomix-menu-border-radius);
|
|
8642
|
-
cursor: pointer;
|
|
8643
|
-
transition-property: all;
|
|
8644
|
-
transition-duration: 0.2s;
|
|
8645
|
-
transition-timing-function: ease-in-out;
|
|
8646
|
-
transition-delay: 0s;
|
|
8647
8683
|
}
|
|
8648
8684
|
@media (hover: hover) {
|
|
8649
8685
|
.c-menu__link:hover {
|
|
@@ -8924,6 +8960,7 @@ a, a:hover {
|
|
|
8924
8960
|
color: var(--atomix-messages-text-color);
|
|
8925
8961
|
font-size: var(--atomix-messages-text-font-size);
|
|
8926
8962
|
padding: var(--atomix-messages-text-padding-y) var(--atomix-messages-text-padding-x);
|
|
8963
|
+
border-radius: 0.25rem var(--atomix-messages-text-border-radius) var(--atomix-messages-text-border-radius) 0.25rem;
|
|
8927
8964
|
position: relative;
|
|
8928
8965
|
isolation: isolate;
|
|
8929
8966
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-text-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-text-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-text-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-text-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-text-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -8931,7 +8968,6 @@ a, a:hover {
|
|
|
8931
8968
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
8932
8969
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-messages-text-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-messages-text-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-text-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8933
8970
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8934
|
-
border-radius: 0.25rem var(--atomix-messages-text-border-radius) var(--atomix-messages-text-border-radius) 0.25rem;
|
|
8935
8971
|
}
|
|
8936
8972
|
@media (hover: hover) {
|
|
8937
8973
|
.c-messages__text:hover {
|
|
@@ -8972,6 +9008,7 @@ a, a:hover {
|
|
|
8972
9008
|
height: var(--atomix-messages-file-icon-size);
|
|
8973
9009
|
color: var(--atomix-tertiary-text-emphasis);
|
|
8974
9010
|
margin-right: var(--atomix-messages-file-icon-margin-right);
|
|
9011
|
+
border-radius: 50rem;
|
|
8975
9012
|
position: relative;
|
|
8976
9013
|
isolation: isolate;
|
|
8977
9014
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -8979,7 +9016,6 @@ a, a:hover {
|
|
|
8979
9016
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
8980
9017
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8981
9018
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8982
|
-
border-radius: 50rem;
|
|
8983
9019
|
}
|
|
8984
9020
|
@media (hover: hover) {
|
|
8985
9021
|
.c-messages__file-icon:hover {
|
|
@@ -9102,6 +9138,7 @@ a, a:hover {
|
|
|
9102
9138
|
font-size: var(--atomix-messages-input-font-size);
|
|
9103
9139
|
border: var(--atomix-messages-input-border-width) solid var(--atomix-messages-input-border-color);
|
|
9104
9140
|
border-radius: var(--atomix-messages-input-border-radius);
|
|
9141
|
+
resize: none;
|
|
9105
9142
|
position: relative;
|
|
9106
9143
|
isolation: isolate;
|
|
9107
9144
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -9109,7 +9146,6 @@ a, a:hover {
|
|
|
9109
9146
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
9110
9147
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-messages-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9111
9148
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9112
|
-
resize: none;
|
|
9113
9149
|
}
|
|
9114
9150
|
@media (hover: hover) {
|
|
9115
9151
|
.c-messages__input:hover {
|
|
@@ -9137,13 +9173,6 @@ a, a:hover {
|
|
|
9137
9173
|
place-items: center;
|
|
9138
9174
|
align-self: flex-end;
|
|
9139
9175
|
padding: 0.625rem;
|
|
9140
|
-
position: relative;
|
|
9141
|
-
isolation: isolate;
|
|
9142
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
9143
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9144
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9145
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9146
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9147
9176
|
color: var(--atomix-invert-text-emphasis);
|
|
9148
9177
|
border-radius: 50rem;
|
|
9149
9178
|
cursor: pointer;
|
|
@@ -9151,6 +9180,13 @@ a, a:hover {
|
|
|
9151
9180
|
-moz-appearance: none;
|
|
9152
9181
|
appearance: none;
|
|
9153
9182
|
border: 0;
|
|
9183
|
+
position: relative;
|
|
9184
|
+
isolation: isolate;
|
|
9185
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
9186
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9187
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9188
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9189
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9154
9190
|
}
|
|
9155
9191
|
@media (hover: hover) {
|
|
9156
9192
|
.c-messages__submit:hover {
|
|
@@ -9199,17 +9235,21 @@ a, a:hover {
|
|
|
9199
9235
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-body-bg) 81%, transparent) 100%);
|
|
9200
9236
|
}
|
|
9201
9237
|
.c-messages--glass .c-messages__text {
|
|
9238
|
+
-webkit-backdrop-filter: blur(8px);
|
|
9239
|
+
backdrop-filter: blur(8px);
|
|
9240
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
9241
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
9202
9242
|
position: relative;
|
|
9203
9243
|
isolation: isolate;
|
|
9204
9244
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 26%, transparent) 0%, transparent 60%);
|
|
9205
9245
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9206
9246
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
9207
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9208
9247
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9209
|
-
|
|
9210
|
-
|
|
9211
|
-
|
|
9212
|
-
box-shadow: 0 1px
|
|
9248
|
+
}
|
|
9249
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
9250
|
+
.c-messages--glass .c-messages__text {
|
|
9251
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9252
|
+
}
|
|
9213
9253
|
}
|
|
9214
9254
|
@media (hover: hover) {
|
|
9215
9255
|
.c-messages--glass .c-messages__text:hover {
|
|
@@ -9221,6 +9261,9 @@ a, a:hover {
|
|
|
9221
9261
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-body-bg) 81%, transparent) 100%);
|
|
9222
9262
|
}
|
|
9223
9263
|
.c-messages--glass .c-messages__content--self .c-messages__text {
|
|
9264
|
+
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
9265
|
+
-webkit-backdrop-filter: blur(8px);
|
|
9266
|
+
backdrop-filter: blur(8px);
|
|
9224
9267
|
position: relative;
|
|
9225
9268
|
isolation: isolate;
|
|
9226
9269
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
@@ -9228,9 +9271,6 @@ a, a:hover {
|
|
|
9228
9271
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
9229
9272
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9230
9273
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9231
|
-
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
9232
|
-
-webkit-backdrop-filter: blur(8px);
|
|
9233
|
-
backdrop-filter: blur(8px);
|
|
9234
9274
|
}
|
|
9235
9275
|
@media (hover: hover) {
|
|
9236
9276
|
.c-messages--glass .c-messages__content--self .c-messages__text:hover {
|
|
@@ -9242,6 +9282,9 @@ a, a:hover {
|
|
|
9242
9282
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 81%, transparent) 100%);
|
|
9243
9283
|
}
|
|
9244
9284
|
.c-messages--glass .c-messages__content--self .c-messages__file {
|
|
9285
|
+
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
9286
|
+
-webkit-backdrop-filter: blur(8px);
|
|
9287
|
+
backdrop-filter: blur(8px);
|
|
9245
9288
|
position: relative;
|
|
9246
9289
|
isolation: isolate;
|
|
9247
9290
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
@@ -9249,9 +9292,6 @@ a, a:hover {
|
|
|
9249
9292
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
9250
9293
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9251
9294
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9252
|
-
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
9253
|
-
-webkit-backdrop-filter: blur(8px);
|
|
9254
|
-
backdrop-filter: blur(8px);
|
|
9255
9295
|
}
|
|
9256
9296
|
@media (hover: hover) {
|
|
9257
9297
|
.c-messages--glass .c-messages__content--self .c-messages__file:hover {
|
|
@@ -9263,18 +9303,22 @@ a, a:hover {
|
|
|
9263
9303
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 81%, transparent) 100%);
|
|
9264
9304
|
}
|
|
9265
9305
|
.c-messages--glass .c-messages__file {
|
|
9306
|
+
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
9307
|
+
-webkit-backdrop-filter: blur(8px);
|
|
9308
|
+
backdrop-filter: blur(8px);
|
|
9309
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
9310
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
9266
9311
|
position: relative;
|
|
9267
9312
|
isolation: isolate;
|
|
9268
9313
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
9269
9314
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9270
9315
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
9271
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9272
9316
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9273
|
-
|
|
9274
|
-
|
|
9275
|
-
|
|
9276
|
-
|
|
9277
|
-
|
|
9317
|
+
}
|
|
9318
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
9319
|
+
.c-messages--glass .c-messages__file {
|
|
9320
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9321
|
+
}
|
|
9278
9322
|
}
|
|
9279
9323
|
@media (hover: hover) {
|
|
9280
9324
|
.c-messages--glass .c-messages__file:hover {
|
|
@@ -9286,6 +9330,9 @@ a, a:hover {
|
|
|
9286
9330
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 81%, transparent) 100%);
|
|
9287
9331
|
}
|
|
9288
9332
|
.c-messages--glass .c-messages__file-icon {
|
|
9333
|
+
-webkit-backdrop-filter: blur(8px);
|
|
9334
|
+
backdrop-filter: blur(8px);
|
|
9335
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
9289
9336
|
position: relative;
|
|
9290
9337
|
isolation: isolate;
|
|
9291
9338
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
@@ -9293,9 +9340,6 @@ a, a:hover {
|
|
|
9293
9340
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
9294
9341
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9295
9342
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9296
|
-
-webkit-backdrop-filter: blur(8px);
|
|
9297
|
-
backdrop-filter: blur(8px);
|
|
9298
|
-
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
9299
9343
|
}
|
|
9300
9344
|
@media (hover: hover) {
|
|
9301
9345
|
.c-messages--glass .c-messages__file-icon:hover {
|
|
@@ -9419,6 +9463,8 @@ a, a:hover {
|
|
|
9419
9463
|
.c-modal__backdrop {
|
|
9420
9464
|
position: absolute;
|
|
9421
9465
|
inset: 0;
|
|
9466
|
+
opacity: 0;
|
|
9467
|
+
transition: 0.3s;
|
|
9422
9468
|
position: relative;
|
|
9423
9469
|
isolation: isolate;
|
|
9424
9470
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -9426,8 +9472,6 @@ a, a:hover {
|
|
|
9426
9472
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
9427
9473
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-modal-backdrop-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-modal-backdrop-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-modal-backdrop-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9428
9474
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9429
|
-
opacity: 0;
|
|
9430
|
-
transition: 0.3s;
|
|
9431
9475
|
}
|
|
9432
9476
|
@media (hover: hover) {
|
|
9433
9477
|
.c-modal__backdrop:hover {
|
|
@@ -9457,17 +9501,21 @@ a, a:hover {
|
|
|
9457
9501
|
width: 100%;
|
|
9458
9502
|
max-height: 100%;
|
|
9459
9503
|
padding: var(--atomix-modal-inner-padding);
|
|
9504
|
+
box-shadow: var(--atomix-modal-content-box-shadow);
|
|
9505
|
+
border-radius: var(--atomix-modal-content-border-radius);
|
|
9506
|
+
overflow: hidden;
|
|
9507
|
+
pointer-events: auto;
|
|
9460
9508
|
position: relative;
|
|
9461
9509
|
isolation: isolate;
|
|
9462
9510
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-modal-content-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-content-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-modal-content-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-modal-content-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-modal-content-bg) 26%, transparent) 0%, transparent 60%);
|
|
9463
9511
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9464
9512
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
9465
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-modal-content-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9466
9513
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9467
|
-
|
|
9468
|
-
|
|
9469
|
-
|
|
9470
|
-
|
|
9514
|
+
}
|
|
9515
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
9516
|
+
.c-modal__content {
|
|
9517
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-modal-content-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9518
|
+
}
|
|
9471
9519
|
}
|
|
9472
9520
|
@media (hover: hover) {
|
|
9473
9521
|
.c-modal__content:hover {
|
|
@@ -9529,17 +9577,21 @@ a, a:hover {
|
|
|
9529
9577
|
--atomix-modal-width: var(--atomix-modal-xl);
|
|
9530
9578
|
}
|
|
9531
9579
|
.c-modal--glass .c-modal__content {
|
|
9580
|
+
box-shadow: none;
|
|
9581
|
+
border-radius: inherit;
|
|
9582
|
+
width: var(--atomix-modal-width);
|
|
9583
|
+
height: 100%;
|
|
9532
9584
|
position: relative;
|
|
9533
9585
|
isolation: isolate;
|
|
9534
9586
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-modal-content-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-content-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-modal-content-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-modal-content-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-modal-content-bg) 26%, transparent) 0%, transparent 60%);
|
|
9535
9587
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9536
9588
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
9537
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-modal-content-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9538
9589
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9539
|
-
|
|
9540
|
-
|
|
9541
|
-
|
|
9542
|
-
|
|
9590
|
+
}
|
|
9591
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
9592
|
+
.c-modal--glass .c-modal__content {
|
|
9593
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-modal-content-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9594
|
+
}
|
|
9543
9595
|
}
|
|
9544
9596
|
@media (hover: hover) {
|
|
9545
9597
|
.c-modal--glass .c-modal__content:hover {
|
|
@@ -9699,13 +9751,6 @@ a, a:hover {
|
|
|
9699
9751
|
left: 50%;
|
|
9700
9752
|
transform: translateX(-50%);
|
|
9701
9753
|
z-index: 1000;
|
|
9702
|
-
position: relative;
|
|
9703
|
-
isolation: isolate;
|
|
9704
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 26%, transparent) 0%, transparent 60%);
|
|
9705
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9706
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9707
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9708
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9709
9754
|
border: 1px solid var(--atomix-border-color);
|
|
9710
9755
|
border-radius: 50rem;
|
|
9711
9756
|
box-shadow: var(--atomix-box-shadow-lg);
|
|
@@ -9714,24 +9759,16 @@ a, a:hover {
|
|
|
9714
9759
|
backdrop-filter: blur(10px);
|
|
9715
9760
|
position: relative;
|
|
9716
9761
|
isolation: isolate;
|
|
9717
|
-
|
|
9762
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 78%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 65%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 55%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 26%, transparent) 0%, transparent 60%);
|
|
9763
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9764
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9718
9765
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9719
9766
|
}
|
|
9720
9767
|
@supports (color: color-mix(in lch, red, blue)){
|
|
9721
9768
|
.c-nav--float-top-center, .c-nav--float-bottom-center {
|
|
9722
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 78%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 65%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 55%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 26%, transparent) 0%, transparent 60%);
|
|
9723
9769
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9724
9770
|
}
|
|
9725
9771
|
}
|
|
9726
|
-
@media (hover: hover) {
|
|
9727
|
-
.c-nav--float-top-center:hover, .c-nav--float-bottom-center:hover {
|
|
9728
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 40%, transparent) 0%, transparent 60%);
|
|
9729
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-body-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9730
|
-
}
|
|
9731
|
-
}
|
|
9732
|
-
.c-nav--float-top-center:active, .c-nav--float-bottom-center:active {
|
|
9733
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-body-bg) 81%, transparent) 100%);
|
|
9734
|
-
}
|
|
9735
9772
|
@media (hover: hover) {
|
|
9736
9773
|
.c-nav--float-top-center:hover, .c-nav--float-bottom-center:hover {
|
|
9737
9774
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 96%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 80%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 68%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 40%, transparent) 0%, transparent 60%);
|
|
@@ -9798,6 +9835,7 @@ a, a:hover {
|
|
|
9798
9835
|
position: relative;
|
|
9799
9836
|
padding: var(--atomix-navbar-padding-y) 0;
|
|
9800
9837
|
border-bottom: var(--atomix-navbar-border-width) solid var(--atomix-navbar-border-color);
|
|
9838
|
+
z-index: var(--atomix-navbar-z-index);
|
|
9801
9839
|
position: relative;
|
|
9802
9840
|
isolation: isolate;
|
|
9803
9841
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-navbar-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-navbar-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-navbar-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-navbar-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -9805,7 +9843,6 @@ a, a:hover {
|
|
|
9805
9843
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
9806
9844
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-navbar-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-navbar-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9807
9845
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9808
|
-
z-index: var(--atomix-navbar-z-index);
|
|
9809
9846
|
}
|
|
9810
9847
|
@media (hover: hover) {
|
|
9811
9848
|
.c-navbar:hover {
|
|
@@ -9849,6 +9886,10 @@ a, a:hover {
|
|
|
9849
9886
|
width: var(--atomix-navbar-toggler-size);
|
|
9850
9887
|
height: var(--atomix-navbar-toggler-size);
|
|
9851
9888
|
padding: 0;
|
|
9889
|
+
border: var(--atomix-navbar-toggler-border);
|
|
9890
|
+
border-radius: var(--atomix-navbar-toggler-border-radius);
|
|
9891
|
+
cursor: pointer;
|
|
9892
|
+
transition: all 0.15s ease-in-out;
|
|
9852
9893
|
position: relative;
|
|
9853
9894
|
isolation: isolate;
|
|
9854
9895
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -9856,10 +9897,6 @@ a, a:hover {
|
|
|
9856
9897
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
9857
9898
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-navbar-toggler-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-navbar-toggler-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-toggler-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9858
9899
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9859
|
-
border: var(--atomix-navbar-toggler-border);
|
|
9860
|
-
border-radius: var(--atomix-navbar-toggler-border-radius);
|
|
9861
|
-
cursor: pointer;
|
|
9862
|
-
transition: all 0.15s ease-in-out;
|
|
9863
9900
|
}
|
|
9864
9901
|
@media (hover: hover) {
|
|
9865
9902
|
.c-navbar__toggler:hover {
|
|
@@ -9913,6 +9950,10 @@ a, a:hover {
|
|
|
9913
9950
|
left: 0;
|
|
9914
9951
|
width: 100%;
|
|
9915
9952
|
height: 100%;
|
|
9953
|
+
z-index: var(--atomix-navbar-backdrop-z-index);
|
|
9954
|
+
opacity: 0;
|
|
9955
|
+
visibility: hidden;
|
|
9956
|
+
transition: all 0.3s ease-in-out;
|
|
9916
9957
|
position: relative;
|
|
9917
9958
|
isolation: isolate;
|
|
9918
9959
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -9920,10 +9961,6 @@ a, a:hover {
|
|
|
9920
9961
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
9921
9962
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9922
9963
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9923
|
-
z-index: var(--atomix-navbar-backdrop-z-index);
|
|
9924
|
-
opacity: 0;
|
|
9925
|
-
visibility: hidden;
|
|
9926
|
-
transition: all 0.3s ease-in-out;
|
|
9927
9964
|
}
|
|
9928
9965
|
@media (hover: hover) {
|
|
9929
9966
|
.c-navbar__backdrop:hover {
|
|
@@ -10230,6 +10267,9 @@ a, a:hover {
|
|
|
10230
10267
|
max-width: var(--atomix-callout-width);
|
|
10231
10268
|
gap: var(--atomix-callout-actions-spacer);
|
|
10232
10269
|
padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
|
|
10270
|
+
border-radius: var(--atomix-callout-border-radius);
|
|
10271
|
+
border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
|
|
10272
|
+
transition: opacity var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing), transform var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing);
|
|
10233
10273
|
position: relative;
|
|
10234
10274
|
isolation: isolate;
|
|
10235
10275
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -10237,9 +10277,6 @@ a, a:hover {
|
|
|
10237
10277
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
10238
10278
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-callout-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10239
10279
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10240
|
-
border-radius: var(--atomix-callout-border-radius);
|
|
10241
|
-
border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
|
|
10242
|
-
transition: opacity var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing), transform var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing);
|
|
10243
10280
|
}
|
|
10244
10281
|
@media (hover: hover) {
|
|
10245
10282
|
.c-callout:hover {
|
|
@@ -10326,15 +10363,19 @@ a, a:hover {
|
|
|
10326
10363
|
align-items: flex-start;
|
|
10327
10364
|
justify-content: flex-start;
|
|
10328
10365
|
border: none;
|
|
10366
|
+
box-shadow: var(--atomix-callout-box-shadow);
|
|
10367
|
+
animation: calloutToastIn 0.3s var(--atomix-callout-transition-timing) forwards;
|
|
10329
10368
|
position: relative;
|
|
10330
10369
|
isolation: isolate;
|
|
10331
10370
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-toast-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-toast-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-toast-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-toast-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-toast-bg) 26%, transparent) 0%, transparent 60%);
|
|
10332
10371
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10333
10372
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
10334
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-callout-toast-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-callout-toast-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-toast-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10335
10373
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10336
|
-
|
|
10337
|
-
|
|
10374
|
+
}
|
|
10375
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
10376
|
+
.c-callout--toast {
|
|
10377
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-callout-toast-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-callout-toast-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-toast-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10378
|
+
}
|
|
10338
10379
|
}
|
|
10339
10380
|
@media (hover: hover) {
|
|
10340
10381
|
.c-callout--toast:hover {
|
|
@@ -10445,14 +10486,18 @@ a, a:hover {
|
|
|
10445
10486
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10446
10487
|
}
|
|
10447
10488
|
.c-callout--glass.c-callout--toast {
|
|
10489
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
10448
10490
|
position: relative;
|
|
10449
10491
|
isolation: isolate;
|
|
10450
10492
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-bg) 26%, transparent) 0%, transparent 60%);
|
|
10451
10493
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10452
10494
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
10453
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-callout-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10454
10495
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10455
|
-
|
|
10496
|
+
}
|
|
10497
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
10498
|
+
.c-callout--glass.c-callout--toast {
|
|
10499
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-callout-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10500
|
+
}
|
|
10456
10501
|
}
|
|
10457
10502
|
@media (hover: hover) {
|
|
10458
10503
|
.c-callout--glass.c-callout--toast:hover {
|
|
@@ -10603,6 +10648,12 @@ a, a:hover {
|
|
|
10603
10648
|
color: var(--atomix-pagination-color);
|
|
10604
10649
|
font-size: var(--atomix-pagination-font-size);
|
|
10605
10650
|
padding: var(--atomix-pagination-padding-y) var(--atomix-pagination-padding-x);
|
|
10651
|
+
border-radius: var(--atomix-pagination-border-radius);
|
|
10652
|
+
border: none;
|
|
10653
|
+
cursor: pointer;
|
|
10654
|
+
-webkit-user-select: none;
|
|
10655
|
+
-moz-user-select: none;
|
|
10656
|
+
user-select: none;
|
|
10606
10657
|
position: relative;
|
|
10607
10658
|
isolation: isolate;
|
|
10608
10659
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-pagination-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-pagination-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-pagination-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-pagination-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -10610,12 +10661,6 @@ a, a:hover {
|
|
|
10610
10661
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
10611
10662
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-pagination-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-pagination-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10612
10663
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10613
|
-
border-radius: var(--atomix-pagination-border-radius);
|
|
10614
|
-
border: none;
|
|
10615
|
-
cursor: pointer;
|
|
10616
|
-
-webkit-user-select: none;
|
|
10617
|
-
-moz-user-select: none;
|
|
10618
|
-
user-select: none;
|
|
10619
10664
|
}
|
|
10620
10665
|
@media (hover: hover) {
|
|
10621
10666
|
.c-pagination__link:hover {
|
|
@@ -10702,6 +10747,8 @@ a, a:hover {
|
|
|
10702
10747
|
text-align: center;
|
|
10703
10748
|
border: 1px solid var(--atomix-pagination-color);
|
|
10704
10749
|
border-radius: var(--atomix-pagination-border-radius);
|
|
10750
|
+
color: var(--atomix-pagination-color);
|
|
10751
|
+
transition: all 0.2s ease-in-out;
|
|
10705
10752
|
position: relative;
|
|
10706
10753
|
isolation: isolate;
|
|
10707
10754
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-pagination-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-pagination-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-pagination-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-pagination-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -10709,8 +10756,6 @@ a, a:hover {
|
|
|
10709
10756
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
10710
10757
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-pagination-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-pagination-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10711
10758
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10712
|
-
color: var(--atomix-pagination-color);
|
|
10713
|
-
transition: all 0.2s ease-in-out;
|
|
10714
10759
|
}
|
|
10715
10760
|
@media (hover: hover) {
|
|
10716
10761
|
.c-pagination__search-input:hover {
|
|
@@ -10737,6 +10782,11 @@ a, a:hover {
|
|
|
10737
10782
|
width: var(--atomix-pagination-size);
|
|
10738
10783
|
height: var(--atomix-pagination-size);
|
|
10739
10784
|
padding: var(--atomix-pagination-padding-y) var(--atomix-pagination-padding-x);
|
|
10785
|
+
border: 1px solid var(--atomix-pagination-color);
|
|
10786
|
+
border-radius: var(--atomix-pagination-border-radius);
|
|
10787
|
+
color: var(--atomix-pagination-color);
|
|
10788
|
+
cursor: pointer;
|
|
10789
|
+
transition: all 0.2s ease-in-out;
|
|
10740
10790
|
position: relative;
|
|
10741
10791
|
isolation: isolate;
|
|
10742
10792
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-pagination-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-pagination-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-pagination-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-pagination-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -10744,11 +10794,6 @@ a, a:hover {
|
|
|
10744
10794
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
10745
10795
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-pagination-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-pagination-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10746
10796
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10747
|
-
border: 1px solid var(--atomix-pagination-color);
|
|
10748
|
-
border-radius: var(--atomix-pagination-border-radius);
|
|
10749
|
-
color: var(--atomix-pagination-color);
|
|
10750
|
-
cursor: pointer;
|
|
10751
|
-
transition: all 0.2s ease-in-out;
|
|
10752
10797
|
}
|
|
10753
10798
|
@media (hover: hover) {
|
|
10754
10799
|
.c-pagination__search-button:hover {
|
|
@@ -10806,15 +10851,19 @@ a, a:hover {
|
|
|
10806
10851
|
flex-direction: column;
|
|
10807
10852
|
gap: var(--atomix-popover-inner-gap-y) var(--atomix-popover-inner-gap-x);
|
|
10808
10853
|
padding: var(--atomix-popover-padding-y) var(--atomix-popover-padding-x);
|
|
10854
|
+
border-radius: var(--atomix-popover-border-radius);
|
|
10855
|
+
box-shadow: var(--atomix-popover-box-shadow);
|
|
10809
10856
|
position: relative;
|
|
10810
10857
|
isolation: isolate;
|
|
10811
10858
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-popover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-popover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-popover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-popover-bg) 26%, transparent) 0%, transparent 60%);
|
|
10812
10859
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10813
10860
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
10814
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10815
10861
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10816
|
-
|
|
10817
|
-
|
|
10862
|
+
}
|
|
10863
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
10864
|
+
.c-popover__content-inner {
|
|
10865
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10866
|
+
}
|
|
10818
10867
|
}
|
|
10819
10868
|
@media (hover: hover) {
|
|
10820
10869
|
.c-popover__content-inner:hover {
|
|
@@ -10829,16 +10878,20 @@ a, a:hover {
|
|
|
10829
10878
|
position: absolute;
|
|
10830
10879
|
width: var(--atomix-popover-arrow-size);
|
|
10831
10880
|
height: var(--atomix-popover-arrow-size);
|
|
10881
|
+
box-shadow: var(--atomix-popover-box-shadow);
|
|
10882
|
+
z-index: 1;
|
|
10883
|
+
transform-origin: center;
|
|
10832
10884
|
position: relative;
|
|
10833
10885
|
isolation: isolate;
|
|
10834
10886
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-popover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-popover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-popover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-popover-bg) 26%, transparent) 0%, transparent 60%);
|
|
10835
10887
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10836
10888
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
10837
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10838
10889
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10839
|
-
|
|
10840
|
-
|
|
10841
|
-
|
|
10890
|
+
}
|
|
10891
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
10892
|
+
.c-popover__arrow {
|
|
10893
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10894
|
+
}
|
|
10842
10895
|
}
|
|
10843
10896
|
@media (hover: hover) {
|
|
10844
10897
|
.c-popover__arrow:hover {
|
|
@@ -10875,14 +10928,18 @@ a, a:hover {
|
|
|
10875
10928
|
transform: translateY(-50%) rotate(45deg);
|
|
10876
10929
|
}
|
|
10877
10930
|
.c-popover--glass .c-popover__content-inner {
|
|
10931
|
+
box-shadow: none;
|
|
10878
10932
|
position: relative;
|
|
10879
10933
|
isolation: isolate;
|
|
10880
10934
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-popover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-popover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-popover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-popover-bg) 26%, transparent) 0%, transparent 60%);
|
|
10881
10935
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10882
10936
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
10883
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10884
10937
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10885
|
-
|
|
10938
|
+
}
|
|
10939
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
10940
|
+
.c-popover--glass .c-popover__content-inner {
|
|
10941
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10942
|
+
}
|
|
10886
10943
|
}
|
|
10887
10944
|
@media (hover: hover) {
|
|
10888
10945
|
.c-popover--glass .c-popover__content-inner:hover {
|
|
@@ -10905,6 +10962,10 @@ a, a:hover {
|
|
|
10905
10962
|
--atomix-product-review-label-color: var(--atomix-text-muted);
|
|
10906
10963
|
padding: var(--atomix-product-review-padding);
|
|
10907
10964
|
border-radius: var(--atomix-product-review-border-radius);
|
|
10965
|
+
border: 1px solid var(--atomix-product-review-border-color);
|
|
10966
|
+
width: 100%;
|
|
10967
|
+
max-width: 37.5rem;
|
|
10968
|
+
margin: 0 auto;
|
|
10908
10969
|
position: relative;
|
|
10909
10970
|
isolation: isolate;
|
|
10910
10971
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-product-review-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-product-review-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-product-review-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-product-review-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-product-review-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -10912,10 +10973,6 @@ a, a:hover {
|
|
|
10912
10973
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
10913
10974
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-product-review-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-product-review-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-product-review-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10914
10975
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10915
|
-
border: 1px solid var(--atomix-product-review-border-color);
|
|
10916
|
-
width: 100%;
|
|
10917
|
-
max-width: 37.5rem;
|
|
10918
|
-
margin: 0 auto;
|
|
10919
10976
|
}
|
|
10920
10977
|
@media (hover: hover) {
|
|
10921
10978
|
.c-product-review:hover {
|
|
@@ -10980,6 +11037,9 @@ a, a:hover {
|
|
|
10980
11037
|
padding: 0.75rem;
|
|
10981
11038
|
border: 1px solid var(--atomix-product-review-border-color);
|
|
10982
11039
|
border-radius: var(--atomix-border-radius);
|
|
11040
|
+
color: var(--atomix-body-color);
|
|
11041
|
+
font-family: inherit;
|
|
11042
|
+
resize: vertical;
|
|
10983
11043
|
position: relative;
|
|
10984
11044
|
isolation: isolate;
|
|
10985
11045
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -10987,9 +11047,6 @@ a, a:hover {
|
|
|
10987
11047
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
10988
11048
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10989
11049
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10990
|
-
color: var(--atomix-body-color);
|
|
10991
|
-
font-family: inherit;
|
|
10992
|
-
resize: vertical;
|
|
10993
11050
|
}
|
|
10994
11051
|
@media (hover: hover) {
|
|
10995
11052
|
.c-product-review__textarea:hover {
|
|
@@ -11043,6 +11100,8 @@ a, a:hover {
|
|
|
11043
11100
|
width: 100%;
|
|
11044
11101
|
max-width: var(--atomix-progress-width);
|
|
11045
11102
|
height: var(--atomix-progress-bar-height);
|
|
11103
|
+
border-radius: var(--atomix-progress-border-radius);
|
|
11104
|
+
overflow: hidden;
|
|
11046
11105
|
position: relative;
|
|
11047
11106
|
isolation: isolate;
|
|
11048
11107
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-progress-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-progress-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-progress-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-progress-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-progress-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -11050,8 +11109,6 @@ a, a:hover {
|
|
|
11050
11109
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
11051
11110
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-progress-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-progress-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-progress-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11052
11111
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11053
|
-
border-radius: var(--atomix-progress-border-radius);
|
|
11054
|
-
overflow: hidden;
|
|
11055
11112
|
}
|
|
11056
11113
|
@media (hover: hover) {
|
|
11057
11114
|
.c-progress:hover {
|
|
@@ -11066,6 +11123,8 @@ a, a:hover {
|
|
|
11066
11123
|
width: var(--atomix-progress-bar-width);
|
|
11067
11124
|
height: var(--atomix-progress-bar-height);
|
|
11068
11125
|
color: var(--atomix-progress-bar-color);
|
|
11126
|
+
border-radius: var(--atomix-progress-border-radius);
|
|
11127
|
+
transition: var(--atomix-progress-bar-transition) var(--atomix-progress-bar-easing);
|
|
11069
11128
|
position: relative;
|
|
11070
11129
|
isolation: isolate;
|
|
11071
11130
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-progress-bar-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-progress-bar-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-progress-bar-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-progress-bar-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-progress-bar-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -11073,8 +11132,6 @@ a, a:hover {
|
|
|
11073
11132
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
11074
11133
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-progress-bar-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-progress-bar-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-progress-bar-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11075
11134
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11076
|
-
border-radius: var(--atomix-progress-border-radius);
|
|
11077
|
-
transition: var(--atomix-progress-bar-transition) var(--atomix-progress-bar-easing);
|
|
11078
11135
|
}
|
|
11079
11136
|
@media (hover: hover) {
|
|
11080
11137
|
.c-progress__bar:hover {
|
|
@@ -11323,6 +11380,8 @@ a, a:hover {
|
|
|
11323
11380
|
.c-river__overlay {
|
|
11324
11381
|
position: absolute;
|
|
11325
11382
|
inset: 0;
|
|
11383
|
+
opacity: var(--atomix-river-overlay-opacity);
|
|
11384
|
+
border-radius: var(--atomix-river-border-radius);
|
|
11326
11385
|
position: relative;
|
|
11327
11386
|
isolation: isolate;
|
|
11328
11387
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-river-overlay) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-river-overlay) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-river-overlay) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-river-overlay) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-river-overlay) 26%, transparent) 0%, transparent 60%);
|
|
@@ -11330,8 +11389,6 @@ a, a:hover {
|
|
|
11330
11389
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
11331
11390
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-river-overlay) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-river-overlay) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-river-overlay) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11332
11391
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11333
|
-
opacity: var(--atomix-river-overlay-opacity);
|
|
11334
|
-
border-radius: var(--atomix-river-border-radius);
|
|
11335
11392
|
}
|
|
11336
11393
|
@media (hover: hover) {
|
|
11337
11394
|
.c-river__overlay:hover {
|
|
@@ -11561,6 +11618,7 @@ a, a:hover {
|
|
|
11561
11618
|
left: 0;
|
|
11562
11619
|
width: 100%;
|
|
11563
11620
|
height: 100%;
|
|
11621
|
+
opacity: var(--atomix-sectionintro-overlay-opacity);
|
|
11564
11622
|
position: relative;
|
|
11565
11623
|
isolation: isolate;
|
|
11566
11624
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 26%, transparent) 0%, transparent 60%);
|
|
@@ -11568,7 +11626,6 @@ a, a:hover {
|
|
|
11568
11626
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
11569
11627
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11570
11628
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11571
|
-
opacity: var(--atomix-sectionintro-overlay-opacity);
|
|
11572
11629
|
}
|
|
11573
11630
|
@media (hover: hover) {
|
|
11574
11631
|
.c-sectionintro__overlay:hover {
|
|
@@ -11656,13 +11713,6 @@ a, a:hover {
|
|
|
11656
11713
|
padding: var(--atomix-select-padding-x) var(--atomix-select-padding-y);
|
|
11657
11714
|
color: var(--atomix-select-placeholder-color);
|
|
11658
11715
|
font-size: var(--atomix-select-font-size);
|
|
11659
|
-
position: relative;
|
|
11660
|
-
isolation: isolate;
|
|
11661
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-select-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-select-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-select-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-bg) 26%, transparent) 0%, transparent 60%);
|
|
11662
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11663
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11664
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-select-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-select-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11665
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11666
11716
|
border: 1px solid var(--atomix-select-border-color);
|
|
11667
11717
|
border-radius: var(--atomix-select-border-radius);
|
|
11668
11718
|
cursor: pointer;
|
|
@@ -11670,6 +11720,13 @@ a, a:hover {
|
|
|
11670
11720
|
transition-duration: 0.2s;
|
|
11671
11721
|
transition-timing-function: ease-in-out;
|
|
11672
11722
|
transition-delay: 0s;
|
|
11723
|
+
position: relative;
|
|
11724
|
+
isolation: isolate;
|
|
11725
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-select-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-select-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-select-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-bg) 26%, transparent) 0%, transparent 60%);
|
|
11726
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11727
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
11728
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-select-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-select-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11729
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11673
11730
|
}
|
|
11674
11731
|
@media (hover: hover) {
|
|
11675
11732
|
.c-select__selected:hover {
|
|
@@ -11695,35 +11752,39 @@ a, a:hover {
|
|
|
11695
11752
|
transition-timing-function: ease-in-out;
|
|
11696
11753
|
transition-delay: 0s;
|
|
11697
11754
|
}
|
|
11698
|
-
.c-
|
|
11755
|
+
.c-select__dropdown {
|
|
11699
11756
|
position: absolute;
|
|
11700
11757
|
width: 100%;
|
|
11701
11758
|
height: 0px;
|
|
11702
11759
|
top: calc(100% + var(--atomix-select-panel-spacer-y));
|
|
11703
11760
|
left: 0;
|
|
11704
|
-
position: relative;
|
|
11705
|
-
isolation: isolate;
|
|
11706
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-panel-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-select-panel-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-select-panel-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-select-panel-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-panel-bg) 26%, transparent) 0%, transparent 60%);
|
|
11707
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11708
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11709
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-select-panel-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-select-panel-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-panel-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11710
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11711
11761
|
border-radius: var(--atomix-select-panel-border-radius);
|
|
11712
11762
|
box-shadow: var(--atomix-select-panel-box-shadow);
|
|
11713
11763
|
overflow: hidden;
|
|
11764
|
+
z-index: 99;
|
|
11714
11765
|
transition-property: all;
|
|
11715
11766
|
transition-duration: 0.2s;
|
|
11716
11767
|
transition-timing-function: ease-in-out;
|
|
11717
11768
|
transition-delay: 0s;
|
|
11718
|
-
|
|
11769
|
+
position: relative;
|
|
11770
|
+
isolation: isolate;
|
|
11771
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-panel-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-select-panel-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-select-panel-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-select-panel-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-panel-bg) 26%, transparent) 0%, transparent 60%);
|
|
11772
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11773
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
11774
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11775
|
+
}
|
|
11776
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
11777
|
+
.c-select__dropdown {
|
|
11778
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-select-panel-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-select-panel-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-panel-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11779
|
+
}
|
|
11719
11780
|
}
|
|
11720
11781
|
@media (hover: hover) {
|
|
11721
|
-
.c-
|
|
11782
|
+
.c-select__dropdown:hover {
|
|
11722
11783
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-panel-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-select-panel-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-select-panel-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-select-panel-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-panel-bg) 40%, transparent) 0%, transparent 60%);
|
|
11723
11784
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-select-panel-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-panel-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-select-panel-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11724
11785
|
}
|
|
11725
11786
|
}
|
|
11726
|
-
.c-
|
|
11787
|
+
.c-select__dropdown:active {
|
|
11727
11788
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-panel-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-select-panel-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-select-panel-bg) 81%, transparent) 100%);
|
|
11728
11789
|
}
|
|
11729
11790
|
.c-select__panel {
|
|
@@ -11737,6 +11798,11 @@ a, a:hover {
|
|
|
11737
11798
|
.c-select__item {
|
|
11738
11799
|
padding: var(--atomix-select-item-padding-x) var(--atomix-select-item-padding-y);
|
|
11739
11800
|
color: var(--atomix-select-item-color);
|
|
11801
|
+
border-radius: var(--atomix-select-item-border-radius);
|
|
11802
|
+
transition-property: all;
|
|
11803
|
+
transition-duration: 0.2s;
|
|
11804
|
+
transition-timing-function: ease-in-out;
|
|
11805
|
+
transition-delay: 0s;
|
|
11740
11806
|
position: relative;
|
|
11741
11807
|
isolation: isolate;
|
|
11742
11808
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-item-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-select-item-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-select-item-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-select-item-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-item-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -11744,11 +11810,6 @@ a, a:hover {
|
|
|
11744
11810
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
11745
11811
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-select-item-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-select-item-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-item-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11746
11812
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11747
|
-
border-radius: var(--atomix-select-item-border-radius);
|
|
11748
|
-
transition-property: all;
|
|
11749
|
-
transition-duration: 0.2s;
|
|
11750
|
-
transition-timing-function: ease-in-out;
|
|
11751
|
-
transition-delay: 0s;
|
|
11752
11813
|
}
|
|
11753
11814
|
@media (hover: hover) {
|
|
11754
11815
|
.c-select__item:hover {
|
|
@@ -11828,16 +11889,20 @@ a, a:hover {
|
|
|
11828
11889
|
--atomix-side-menu-inner-padding-top: 1.25rem;
|
|
11829
11890
|
width: 100%;
|
|
11830
11891
|
padding: var(--atomix-side-menu-padding-y) var(--atomix-side-menu-padding-x);
|
|
11892
|
+
border-radius: var(--atomix-side-menu-border-radius);
|
|
11893
|
+
border: var(--atomix-side-menu-border-width) solid var(--atomix-side-menu-border-color);
|
|
11894
|
+
box-shadow: var(--atomix-side-menu-box-shadow);
|
|
11831
11895
|
position: relative;
|
|
11832
11896
|
isolation: isolate;
|
|
11833
11897
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-bg) 26%, transparent) 0%, transparent 60%);
|
|
11834
11898
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11835
11899
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
11836
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11837
11900
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11838
|
-
|
|
11839
|
-
|
|
11840
|
-
|
|
11901
|
+
}
|
|
11902
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
11903
|
+
.c-side-menu {
|
|
11904
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11905
|
+
}
|
|
11841
11906
|
}
|
|
11842
11907
|
@media (hover: hover) {
|
|
11843
11908
|
.c-side-menu:hover {
|
|
@@ -11881,13 +11946,6 @@ a, a:hover {
|
|
|
11881
11946
|
justify-content: space-between;
|
|
11882
11947
|
width: 100%;
|
|
11883
11948
|
padding: var(--atomix-side-menu-toggler-padding-y) var(--atomix-side-menu-toggler-padding-x);
|
|
11884
|
-
position: relative;
|
|
11885
|
-
isolation: isolate;
|
|
11886
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 26%, transparent) 0%, transparent 60%);
|
|
11887
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11888
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11889
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11890
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11891
11949
|
border: none;
|
|
11892
11950
|
border-radius: var(--atomix-side-menu-toggler-border-radius);
|
|
11893
11951
|
cursor: pointer;
|
|
@@ -11897,6 +11955,13 @@ a, a:hover {
|
|
|
11897
11955
|
transition: var(--atomix-side-menu-toggler-transition);
|
|
11898
11956
|
text-align: left;
|
|
11899
11957
|
margin: 0;
|
|
11958
|
+
position: relative;
|
|
11959
|
+
isolation: isolate;
|
|
11960
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 26%, transparent) 0%, transparent 60%);
|
|
11961
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11962
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
11963
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11964
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11900
11965
|
}
|
|
11901
11966
|
@media (hover: hover) {
|
|
11902
11967
|
.c-side-menu__toggler:hover {
|
|
@@ -11984,6 +12049,12 @@ a, a:hover {
|
|
|
11984
12049
|
color: var(--atomix-side-menu-item-color);
|
|
11985
12050
|
font-size: var(--atomix-side-menu-item-font-size);
|
|
11986
12051
|
font-weight: var(--atomix-side-menu-item-font-weight);
|
|
12052
|
+
border: none;
|
|
12053
|
+
border-radius: var(--atomix-side-menu-item-border-radius);
|
|
12054
|
+
text-decoration: none;
|
|
12055
|
+
cursor: pointer;
|
|
12056
|
+
transition: var(--atomix-side-menu-item-transition);
|
|
12057
|
+
position: relative;
|
|
11987
12058
|
position: relative;
|
|
11988
12059
|
isolation: isolate;
|
|
11989
12060
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -11991,12 +12062,6 @@ a, a:hover {
|
|
|
11991
12062
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
11992
12063
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-item-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-item-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11993
12064
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11994
|
-
border: none;
|
|
11995
|
-
border-radius: var(--atomix-side-menu-item-border-radius);
|
|
11996
|
-
text-decoration: none;
|
|
11997
|
-
cursor: pointer;
|
|
11998
|
-
transition: var(--atomix-side-menu-item-transition);
|
|
11999
|
-
position: relative;
|
|
12000
12065
|
}
|
|
12001
12066
|
@media (hover: hover) {
|
|
12002
12067
|
.c-side-menu__link:hover {
|
|
@@ -12009,6 +12074,7 @@ a, a:hover {
|
|
|
12009
12074
|
}
|
|
12010
12075
|
.c-side-menu__link:hover {
|
|
12011
12076
|
color: var(--atomix-side-menu-item-hover-color);
|
|
12077
|
+
text-decoration: none;
|
|
12012
12078
|
position: relative;
|
|
12013
12079
|
isolation: isolate;
|
|
12014
12080
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -12016,7 +12082,6 @@ a, a:hover {
|
|
|
12016
12082
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
12017
12083
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12018
12084
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12019
|
-
text-decoration: none;
|
|
12020
12085
|
}
|
|
12021
12086
|
@media (hover: hover) {
|
|
12022
12087
|
.c-side-menu__link:hover:hover {
|
|
@@ -12039,6 +12104,7 @@ a, a:hover {
|
|
|
12039
12104
|
}
|
|
12040
12105
|
.c-side-menu__link.is-active {
|
|
12041
12106
|
color: var(--atomix-side-menu-item-active-color);
|
|
12107
|
+
font-weight: 500;
|
|
12042
12108
|
position: relative;
|
|
12043
12109
|
isolation: isolate;
|
|
12044
12110
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -12046,7 +12112,6 @@ a, a:hover {
|
|
|
12046
12112
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
12047
12113
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12048
12114
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12049
|
-
font-weight: 500;
|
|
12050
12115
|
}
|
|
12051
12116
|
@media (hover: hover) {
|
|
12052
12117
|
.c-side-menu__link.is-active:hover {
|
|
@@ -12059,6 +12124,9 @@ a, a:hover {
|
|
|
12059
12124
|
}
|
|
12060
12125
|
.c-side-menu__link.is-disabled, .c-side-menu__link[aria-disabled=true] {
|
|
12061
12126
|
color: var(--atomix-side-menu-item-disabled-color);
|
|
12127
|
+
cursor: not-allowed;
|
|
12128
|
+
pointer-events: none;
|
|
12129
|
+
opacity: 0.6;
|
|
12062
12130
|
position: relative;
|
|
12063
12131
|
isolation: isolate;
|
|
12064
12132
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -12066,9 +12134,6 @@ a, a:hover {
|
|
|
12066
12134
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
12067
12135
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12068
12136
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12069
|
-
cursor: not-allowed;
|
|
12070
|
-
pointer-events: none;
|
|
12071
|
-
opacity: 0.6;
|
|
12072
12137
|
}
|
|
12073
12138
|
@media (hover: hover) {
|
|
12074
12139
|
.c-side-menu__link.is-disabled:hover, .c-side-menu__link[aria-disabled=true]:hover {
|
|
@@ -12140,13 +12205,6 @@ a, a:hover {
|
|
|
12140
12205
|
display: inline-block;
|
|
12141
12206
|
width: var(--atomix-skeleton-width);
|
|
12142
12207
|
min-height: var(--atomix-skeleton-height);
|
|
12143
|
-
position: relative;
|
|
12144
|
-
isolation: isolate;
|
|
12145
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, 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%) 78%, transparent) 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%) 65%, transparent) 40%, 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%) 55%, transparent) 70%, 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%) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, 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%) 26%, transparent) 0%, transparent 60%);
|
|
12146
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12147
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12148
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px 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 16px 32px 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), 0 24px 48px 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%) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12149
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12150
12208
|
background-size: 400% 100%;
|
|
12151
12209
|
border-radius: var(--atomix-skeleton-border-radius);
|
|
12152
12210
|
animation-name: atomix--skeleton-loading;
|
|
@@ -12156,6 +12214,13 @@ a, a:hover {
|
|
|
12156
12214
|
pointer-events: none;
|
|
12157
12215
|
vertical-align: middle;
|
|
12158
12216
|
cursor: wait;
|
|
12217
|
+
position: relative;
|
|
12218
|
+
isolation: isolate;
|
|
12219
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, 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%) 78%, transparent) 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%) 65%, transparent) 40%, 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%) 55%, transparent) 70%, 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%) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, 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%) 26%, transparent) 0%, transparent 60%);
|
|
12220
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12221
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12222
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px 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 16px 32px 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), 0 24px 48px 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%) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12223
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12159
12224
|
}
|
|
12160
12225
|
@media (hover: hover) {
|
|
12161
12226
|
.c-skeleton:hover {
|
|
@@ -12248,6 +12313,8 @@ a, a:hover {
|
|
|
12248
12313
|
display: flex;
|
|
12249
12314
|
align-items: center;
|
|
12250
12315
|
justify-content: center;
|
|
12316
|
+
border: 2px dashed var(--atomix-primary-border-subtle);
|
|
12317
|
+
border-radius: 0.25rem;
|
|
12251
12318
|
position: relative;
|
|
12252
12319
|
isolation: isolate;
|
|
12253
12320
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
@@ -12255,8 +12322,6 @@ a, a:hover {
|
|
|
12255
12322
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
12256
12323
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12257
12324
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12258
|
-
border: 2px dashed var(--atomix-primary-border-subtle);
|
|
12259
|
-
border-radius: 0.25rem;
|
|
12260
12325
|
}
|
|
12261
12326
|
@media (hover: hover) {
|
|
12262
12327
|
.c-slider--empty:hover {
|
|
@@ -12302,13 +12367,6 @@ a, a:hover {
|
|
|
12302
12367
|
height: var(--atomix-slider-nav-size);
|
|
12303
12368
|
border: none;
|
|
12304
12369
|
border-radius: 50rem;
|
|
12305
|
-
position: relative;
|
|
12306
|
-
isolation: isolate;
|
|
12307
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
12308
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12309
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12310
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-primary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12311
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12312
12370
|
color: var(--atomix-primary-text);
|
|
12313
12371
|
cursor: pointer;
|
|
12314
12372
|
pointer-events: auto;
|
|
@@ -12318,6 +12376,18 @@ a, a:hover {
|
|
|
12318
12376
|
justify-content: center;
|
|
12319
12377
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12320
12378
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
12379
|
+
position: relative;
|
|
12380
|
+
isolation: isolate;
|
|
12381
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
12382
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12383
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12384
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12385
|
+
}
|
|
12386
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
12387
|
+
.c-slider__navigation-prev,
|
|
12388
|
+
.c-slider__navigation-next {
|
|
12389
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-primary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12390
|
+
}
|
|
12321
12391
|
}
|
|
12322
12392
|
@media (hover: hover) {
|
|
12323
12393
|
.c-slider__navigation-prev:hover,
|
|
@@ -12332,15 +12402,20 @@ a, a:hover {
|
|
|
12332
12402
|
}
|
|
12333
12403
|
.c-slider__navigation-prev:hover,
|
|
12334
12404
|
.c-slider__navigation-next:hover {
|
|
12405
|
+
transform: translateY(-50%) scale(1.05);
|
|
12406
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
12335
12407
|
position: relative;
|
|
12336
12408
|
isolation: isolate;
|
|
12337
12409
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
12338
12410
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12339
12411
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
12340
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12341
12412
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12342
|
-
|
|
12343
|
-
|
|
12413
|
+
}
|
|
12414
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
12415
|
+
.c-slider__navigation-prev:hover,
|
|
12416
|
+
.c-slider__navigation-next:hover {
|
|
12417
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12418
|
+
}
|
|
12344
12419
|
}
|
|
12345
12420
|
@media (hover: hover) {
|
|
12346
12421
|
.c-slider__navigation-prev:hover:hover,
|
|
@@ -12401,6 +12476,9 @@ a, a:hover {
|
|
|
12401
12476
|
height: 0.5rem;
|
|
12402
12477
|
border-radius: 50rem;
|
|
12403
12478
|
border: none;
|
|
12479
|
+
cursor: pointer;
|
|
12480
|
+
pointer-events: auto;
|
|
12481
|
+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12404
12482
|
position: relative;
|
|
12405
12483
|
isolation: isolate;
|
|
12406
12484
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
@@ -12408,9 +12486,6 @@ a, a:hover {
|
|
|
12408
12486
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
12409
12487
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12410
12488
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12411
|
-
cursor: pointer;
|
|
12412
|
-
pointer-events: auto;
|
|
12413
|
-
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12414
12489
|
}
|
|
12415
12490
|
@media (hover: hover) {
|
|
12416
12491
|
.c-slider__pagination-bullet:hover {
|
|
@@ -12422,6 +12497,7 @@ a, a:hover {
|
|
|
12422
12497
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 81%, transparent) 100%);
|
|
12423
12498
|
}
|
|
12424
12499
|
.c-slider__pagination-bullet:hover {
|
|
12500
|
+
transform: scale(1.2);
|
|
12425
12501
|
position: relative;
|
|
12426
12502
|
isolation: isolate;
|
|
12427
12503
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
@@ -12429,7 +12505,6 @@ a, a:hover {
|
|
|
12429
12505
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
12430
12506
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12431
12507
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12432
|
-
transform: scale(1.2);
|
|
12433
12508
|
}
|
|
12434
12509
|
@media (hover: hover) {
|
|
12435
12510
|
.c-slider__pagination-bullet:hover:hover {
|
|
@@ -12444,6 +12519,7 @@ a, a:hover {
|
|
|
12444
12519
|
transform: scale(1.1);
|
|
12445
12520
|
}
|
|
12446
12521
|
.c-slider__pagination-bullet--active {
|
|
12522
|
+
transform: scale(1.2);
|
|
12447
12523
|
position: relative;
|
|
12448
12524
|
isolation: isolate;
|
|
12449
12525
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-primary) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-primary) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary) 26%, transparent) 0%, transparent 60%);
|
|
@@ -12451,7 +12527,6 @@ a, a:hover {
|
|
|
12451
12527
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
12452
12528
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12453
12529
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12454
|
-
transform: scale(1.2);
|
|
12455
12530
|
}
|
|
12456
12531
|
@media (hover: hover) {
|
|
12457
12532
|
.c-slider__pagination-bullet--active:hover {
|
|
@@ -12616,6 +12691,7 @@ a, a:hover {
|
|
|
12616
12691
|
.c-steps__line {
|
|
12617
12692
|
width: var(--atomix-steps-line-width);
|
|
12618
12693
|
height: var(--atomix-steps-line-height);
|
|
12694
|
+
transition: 1s;
|
|
12619
12695
|
position: relative;
|
|
12620
12696
|
isolation: isolate;
|
|
12621
12697
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-steps-item-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-steps-item-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-steps-item-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-steps-item-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-steps-item-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -12623,7 +12699,6 @@ a, a:hover {
|
|
|
12623
12699
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
12624
12700
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-steps-item-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-steps-item-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-steps-item-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12625
12701
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12626
|
-
transition: 1s;
|
|
12627
12702
|
}
|
|
12628
12703
|
@media (hover: hover) {
|
|
12629
12704
|
.c-steps__line:hover {
|
|
@@ -12647,6 +12722,7 @@ a, a:hover {
|
|
|
12647
12722
|
height: var(--atomix-steps-item-number-size);
|
|
12648
12723
|
color: var(--atomix-steps-item-number-color);
|
|
12649
12724
|
font-size: var(--atomix-steps-item-number-font-size);
|
|
12725
|
+
border-radius: var(--atomix-steps-item-number-border-radius);
|
|
12650
12726
|
position: relative;
|
|
12651
12727
|
isolation: isolate;
|
|
12652
12728
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-steps-item-number-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -12654,7 +12730,6 @@ a, a:hover {
|
|
|
12654
12730
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
12655
12731
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-steps-item-number-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-steps-item-number-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-steps-item-number-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12656
12732
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12657
|
-
border-radius: var(--atomix-steps-item-number-border-radius);
|
|
12658
12733
|
}
|
|
12659
12734
|
@media (hover: hover) {
|
|
12660
12735
|
.c-steps__number:hover {
|
|
@@ -12739,6 +12814,10 @@ a, a:hover {
|
|
|
12739
12814
|
border-radius: var(--atomix-tabs-nav-btn-border-radius);
|
|
12740
12815
|
border: var(--atomix-tabs-nav-btn-border-width) solid transparent;
|
|
12741
12816
|
border-bottom: var(--atomix-tabs-nav-btn-border-width) solid var(--atomix-tabs-nav-btn-border-color);
|
|
12817
|
+
transition-property: all;
|
|
12818
|
+
transition-duration: 0.2s;
|
|
12819
|
+
transition-timing-function: ease-in-out;
|
|
12820
|
+
transition-delay: 0s;
|
|
12742
12821
|
position: relative;
|
|
12743
12822
|
isolation: isolate;
|
|
12744
12823
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -12746,10 +12825,6 @@ a, a:hover {
|
|
|
12746
12825
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
12747
12826
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12748
12827
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12749
|
-
transition-property: all;
|
|
12750
|
-
transition-duration: 0.2s;
|
|
12751
|
-
transition-timing-function: ease-in-out;
|
|
12752
|
-
transition-delay: 0s;
|
|
12753
12828
|
}
|
|
12754
12829
|
@media (hover: hover) {
|
|
12755
12830
|
.c-tabs__nav-btn:hover {
|
|
@@ -12787,6 +12862,7 @@ a, a:hover {
|
|
|
12787
12862
|
--atomix-tabs-nav-btn-border-disabled-color
|
|
12788
12863
|
);
|
|
12789
12864
|
color: var(--atomix-tabs-nav-btn-border-disabled-color);
|
|
12865
|
+
pointer-events: none;
|
|
12790
12866
|
position: relative;
|
|
12791
12867
|
isolation: isolate;
|
|
12792
12868
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 26%, transparent) 0%, transparent 60%);
|
|
@@ -12794,7 +12870,6 @@ a, a:hover {
|
|
|
12794
12870
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
12795
12871
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12796
12872
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12797
|
-
pointer-events: none;
|
|
12798
12873
|
}
|
|
12799
12874
|
@media (hover: hover) {
|
|
12800
12875
|
.c-tabs__nav-btn:disabled:hover, .c-tabs__nav-btn.is-disabled:hover {
|
|
@@ -12906,6 +12981,8 @@ a, a:hover {
|
|
|
12906
12981
|
margin-bottom: 1.5rem;
|
|
12907
12982
|
border: 1px solid var(--atomix-todo-border-color);
|
|
12908
12983
|
border-radius: var(--atomix-todo-border-radius);
|
|
12984
|
+
color: var(--atomix-todo-color);
|
|
12985
|
+
padding: 1.25rem;
|
|
12909
12986
|
position: relative;
|
|
12910
12987
|
isolation: isolate;
|
|
12911
12988
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-todo-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-todo-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-todo-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-todo-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-todo-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -12913,8 +12990,6 @@ a, a:hover {
|
|
|
12913
12990
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
12914
12991
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-todo-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-todo-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-todo-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12915
12992
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12916
|
-
color: var(--atomix-todo-color);
|
|
12917
|
-
padding: 1.25rem;
|
|
12918
12993
|
}
|
|
12919
12994
|
@media (hover: hover) {
|
|
12920
12995
|
.c-todo:hover {
|
|
@@ -13066,13 +13141,6 @@ a, a:hover {
|
|
|
13066
13141
|
flex: 0 0 var(--atomix-toggle-switch-width);
|
|
13067
13142
|
width: var(--atomix-toggle-switch-width);
|
|
13068
13143
|
height: var(--atomix-toggle-switch-height);
|
|
13069
|
-
position: relative;
|
|
13070
|
-
isolation: isolate;
|
|
13071
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 26%, transparent) 0%, transparent 60%);
|
|
13072
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13073
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13074
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-toggle-switch-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13075
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13076
13144
|
border-radius: var(--atomix-toggle-switch-border-radius);
|
|
13077
13145
|
-webkit-user-select: none;
|
|
13078
13146
|
-moz-user-select: none;
|
|
@@ -13082,6 +13150,13 @@ a, a:hover {
|
|
|
13082
13150
|
transition-duration: 0.2s;
|
|
13083
13151
|
transition-timing-function: ease-in-out;
|
|
13084
13152
|
transition-delay: 0s;
|
|
13153
|
+
position: relative;
|
|
13154
|
+
isolation: isolate;
|
|
13155
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 26%, transparent) 0%, transparent 60%);
|
|
13156
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13157
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
13158
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-toggle-switch-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13159
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13085
13160
|
}
|
|
13086
13161
|
@media (hover: hover) {
|
|
13087
13162
|
.c-toggle__switch:hover {
|
|
@@ -13098,6 +13173,11 @@ a, a:hover {
|
|
|
13098
13173
|
width: var(--atomix-toggle-switch-handle-width);
|
|
13099
13174
|
height: var(--atomix-toggle-switch-handle-height);
|
|
13100
13175
|
margin: var(--atomix-toggle-switch-handle-margin);
|
|
13176
|
+
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
13177
|
+
transition-property: all;
|
|
13178
|
+
transition-duration: 0.2s;
|
|
13179
|
+
transition-timing-function: ease-in-out;
|
|
13180
|
+
transition-delay: 0s;
|
|
13101
13181
|
position: relative;
|
|
13102
13182
|
isolation: isolate;
|
|
13103
13183
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -13105,11 +13185,6 @@ a, a:hover {
|
|
|
13105
13185
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
13106
13186
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13107
13187
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13108
|
-
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
13109
|
-
transition-property: all;
|
|
13110
|
-
transition-duration: 0.2s;
|
|
13111
|
-
transition-timing-function: ease-in-out;
|
|
13112
|
-
transition-delay: 0s;
|
|
13113
13188
|
}
|
|
13114
13189
|
@media (hover: hover) {
|
|
13115
13190
|
.c-toggle__switch::before:hover {
|
|
@@ -13158,6 +13233,7 @@ a, a:hover {
|
|
|
13158
13233
|
content: "";
|
|
13159
13234
|
position: absolute;
|
|
13160
13235
|
inset: 0;
|
|
13236
|
+
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
13161
13237
|
position: relative;
|
|
13162
13238
|
isolation: isolate;
|
|
13163
13239
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(107, 114, 128, 0.6) 78%, transparent) 0%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 65%, transparent) 40%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 55%, transparent) 70%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 26%, transparent) 0%, transparent 60%);
|
|
@@ -13165,7 +13241,6 @@ a, a:hover {
|
|
|
13165
13241
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
13166
13242
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(107, 114, 128, 0.6) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(107, 114, 128, 0.6) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(107, 114, 128, 0.6) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13167
13243
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13168
|
-
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
13169
13244
|
}
|
|
13170
13245
|
@media (hover: hover) {
|
|
13171
13246
|
.c-toggle.is-disabled.is-on .c-toggle__switch::after:hover {
|
|
@@ -13232,13 +13307,6 @@ a, a:hover {
|
|
|
13232
13307
|
font-size: var(--atomix-tooltip-font-size);
|
|
13233
13308
|
font-weight: var(--atomix-tooltip-font-weight);
|
|
13234
13309
|
padding: var(--atomix-tooltip-padding-y) var(--atomix-tooltip-padding-x);
|
|
13235
|
-
position: relative;
|
|
13236
|
-
isolation: isolate;
|
|
13237
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 26%, transparent) 0%, transparent 60%);
|
|
13238
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13239
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13240
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13241
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13242
13310
|
border-radius: var(--atomix-tooltip-border-radius);
|
|
13243
13311
|
box-shadow: var(--atomix-tooltip-box-shadow);
|
|
13244
13312
|
z-index: 2;
|
|
@@ -13246,6 +13314,17 @@ a, a:hover {
|
|
|
13246
13314
|
pointer-events: auto;
|
|
13247
13315
|
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13248
13316
|
transform: scale(0.95);
|
|
13317
|
+
position: relative;
|
|
13318
|
+
isolation: isolate;
|
|
13319
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 26%, transparent) 0%, transparent 60%);
|
|
13320
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13321
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
13322
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13323
|
+
}
|
|
13324
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
13325
|
+
.c-tooltip__content {
|
|
13326
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13327
|
+
}
|
|
13249
13328
|
}
|
|
13250
13329
|
@media (hover: hover) {
|
|
13251
13330
|
.c-tooltip__content:hover {
|
|
@@ -13265,6 +13344,8 @@ a, a:hover {
|
|
|
13265
13344
|
width: var(--atomix-tooltip-arrow-size);
|
|
13266
13345
|
height: var(--atomix-tooltip-arrow-size);
|
|
13267
13346
|
border-radius: calc((var(--atomix-tooltip-arrow-size) - var(--atomix-tooltip-border-radius)) / 2);
|
|
13347
|
+
z-index: 1;
|
|
13348
|
+
transform: rotate(45deg);
|
|
13268
13349
|
position: relative;
|
|
13269
13350
|
isolation: isolate;
|
|
13270
13351
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -13272,8 +13353,6 @@ a, a:hover {
|
|
|
13272
13353
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
13273
13354
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13274
13355
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13275
|
-
z-index: 1;
|
|
13276
|
-
transform: rotate(45deg);
|
|
13277
13356
|
}
|
|
13278
13357
|
@media (hover: hover) {
|
|
13279
13358
|
.c-tooltip__arrow:hover {
|
|
@@ -13402,6 +13481,11 @@ a, a:hover {
|
|
|
13402
13481
|
width: 100%;
|
|
13403
13482
|
max-width: var(--atomix-upload-width);
|
|
13404
13483
|
padding: var(--atomix-upload-padding-y) var(--atomix-upload-padding-x);
|
|
13484
|
+
border-radius: var(--atomix-upload-border-radius);
|
|
13485
|
+
transition-property: all;
|
|
13486
|
+
transition-duration: 0.2s;
|
|
13487
|
+
transition-timing-function: ease-in-out;
|
|
13488
|
+
transition-delay: 0s;
|
|
13405
13489
|
position: relative;
|
|
13406
13490
|
isolation: isolate;
|
|
13407
13491
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-upload-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-upload-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-upload-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-upload-bg) 26%, transparent) 0%, transparent 60%);
|
|
@@ -13409,11 +13493,6 @@ a, a:hover {
|
|
|
13409
13493
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
13410
13494
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-upload-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-upload-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-upload-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13411
13495
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13412
|
-
border-radius: var(--atomix-upload-border-radius);
|
|
13413
|
-
transition-property: all;
|
|
13414
|
-
transition-duration: 0.2s;
|
|
13415
|
-
transition-timing-function: ease-in-out;
|
|
13416
|
-
transition-delay: 0s;
|
|
13417
13496
|
}
|
|
13418
13497
|
@media (hover: hover) {
|
|
13419
13498
|
.c-upload:hover {
|
|
@@ -13767,6 +13846,9 @@ a, a:hover {
|
|
|
13767
13846
|
--atomix--video-player-subtitle-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
13768
13847
|
position: relative;
|
|
13769
13848
|
width: 100%;
|
|
13849
|
+
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
13850
|
+
overflow: hidden;
|
|
13851
|
+
font-family: var(--atomix--font-family-base);
|
|
13770
13852
|
position: relative;
|
|
13771
13853
|
isolation: isolate;
|
|
13772
13854
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix--video-player-bg, #000) 78%, transparent) 0%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 65%, transparent) 40%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 55%, transparent) 70%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 26%, transparent) 0%, transparent 60%);
|
|
@@ -13774,9 +13856,6 @@ a, a:hover {
|
|
|
13774
13856
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
13775
13857
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix--video-player-bg, #000) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix--video-player-bg, #000) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix--video-player-bg, #000) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13776
13858
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13777
|
-
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
13778
|
-
overflow: hidden;
|
|
13779
|
-
font-family: var(--atomix--font-family-base);
|
|
13780
13859
|
}
|
|
13781
13860
|
@media (hover: hover) {
|
|
13782
13861
|
.c-video-player:hover {
|
|
@@ -14036,6 +14115,11 @@ a, a:hover {
|
|
|
14036
14115
|
bottom: 3.125rem;
|
|
14037
14116
|
right: 0;
|
|
14038
14117
|
min-width: 12.5rem;
|
|
14118
|
+
border-radius: 0.5rem;
|
|
14119
|
+
padding: 0.5rem;
|
|
14120
|
+
-webkit-backdrop-filter: blur(10px);
|
|
14121
|
+
backdrop-filter: blur(10px);
|
|
14122
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
14039
14123
|
position: relative;
|
|
14040
14124
|
isolation: isolate;
|
|
14041
14125
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 78%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 65%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 55%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 26%, transparent) 0%, transparent 60%);
|
|
@@ -14043,11 +14127,6 @@ a, a:hover {
|
|
|
14043
14127
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
14044
14128
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
14045
14129
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
14046
|
-
border-radius: 0.5rem;
|
|
14047
|
-
padding: 0.5rem;
|
|
14048
|
-
-webkit-backdrop-filter: blur(10px);
|
|
14049
|
-
backdrop-filter: blur(10px);
|
|
14050
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
14051
14130
|
}
|
|
14052
14131
|
@media (hover: hover) {
|
|
14053
14132
|
.c-video-player__settings-menu:hover {
|
|
@@ -14319,18 +14398,22 @@ a, a:hover {
|
|
|
14319
14398
|
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
14320
14399
|
}
|
|
14321
14400
|
.c-photo-viewer__container {
|
|
14401
|
+
border: 1px solid var(--atomix-primary-border-subtle);
|
|
14402
|
+
border-radius: 0.625rem;
|
|
14403
|
+
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
|
|
14404
|
+
-webkit-backdrop-filter: blur(8px);
|
|
14405
|
+
backdrop-filter: blur(8px);
|
|
14322
14406
|
position: relative;
|
|
14323
14407
|
isolation: isolate;
|
|
14324
14408
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 26%, transparent) 0%, transparent 60%);
|
|
14325
14409
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
14326
14410
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
14327
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
14328
14411
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
14329
|
-
|
|
14330
|
-
|
|
14331
|
-
|
|
14332
|
-
-
|
|
14333
|
-
|
|
14412
|
+
}
|
|
14413
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
14414
|
+
.c-photo-viewer__container {
|
|
14415
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
14416
|
+
}
|
|
14334
14417
|
}
|
|
14335
14418
|
@media (hover: hover) {
|
|
14336
14419
|
.c-photo-viewer__container:hover {
|
|
@@ -14387,6 +14470,10 @@ a, a:hover {
|
|
|
14387
14470
|
border: 2px solid transparent;
|
|
14388
14471
|
border-radius: 0.5rem;
|
|
14389
14472
|
padding: 0;
|
|
14473
|
+
cursor: pointer;
|
|
14474
|
+
overflow: hidden;
|
|
14475
|
+
position: relative;
|
|
14476
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
|
|
14390
14477
|
position: relative;
|
|
14391
14478
|
isolation: isolate;
|
|
14392
14479
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, transparent 78%, transparent) 0%, color-mix(in srgb, transparent 65%, transparent) 40%, color-mix(in srgb, transparent 55%, transparent) 70%, color-mix(in srgb, transparent 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, transparent 26%, transparent) 0%, transparent 60%);
|
|
@@ -14394,10 +14481,6 @@ a, a:hover {
|
|
|
14394
14481
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
14395
14482
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, transparent 20%, transparent), 0 16px 32px 0 color-mix(in srgb, transparent 10%, transparent), 0 24px 48px 0 color-mix(in srgb, transparent 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
14396
14483
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
14397
|
-
cursor: pointer;
|
|
14398
|
-
overflow: hidden;
|
|
14399
|
-
position: relative;
|
|
14400
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
|
|
14401
14484
|
}
|
|
14402
14485
|
@media (hover: hover) {
|
|
14403
14486
|
.c-photo-viewer__thumbnail:hover {
|
|
@@ -14460,6 +14543,8 @@ body.is-open-photoviewer {
|
|
|
14460
14543
|
width: 100vw;
|
|
14461
14544
|
height: 100vh;
|
|
14462
14545
|
z-index: 1000;
|
|
14546
|
+
opacity: 1;
|
|
14547
|
+
transition-property: opacity;
|
|
14463
14548
|
position: relative;
|
|
14464
14549
|
isolation: isolate;
|
|
14465
14550
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, transparent 78%, transparent) 0%, color-mix(in srgb, transparent 65%, transparent) 40%, color-mix(in srgb, transparent 55%, transparent) 70%, color-mix(in srgb, transparent 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, transparent 26%, transparent) 0%, transparent 60%);
|
|
@@ -14467,8 +14552,6 @@ body.is-open-photoviewer {
|
|
|
14467
14552
|
backdrop-filter: blur(12px) saturate(1.4);
|
|
14468
14553
|
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, transparent 20%, transparent), 0 16px 32px 0 color-mix(in srgb, transparent 10%, transparent), 0 24px 48px 0 color-mix(in srgb, transparent 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
14469
14554
|
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
14470
|
-
opacity: 1;
|
|
14471
|
-
transition-property: opacity;
|
|
14472
14555
|
}
|
|
14473
14556
|
@media (hover: hover) {
|
|
14474
14557
|
.c-photo-viewer:hover {
|