@shohojdhara/atomix 0.5.4 → 0.5.6
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/README.md +43 -21
- package/dist/atomix.css +2489 -183
- package/dist/atomix.css.map +1 -1
- package/dist/atomix.min.css +5 -5
- package/dist/atomix.min.css.map +1 -1
- package/dist/config.js +2 -5
- package/dist/config.js.map +1 -1
- package/dist/core.d.ts +100 -8
- package/dist/core.js +89 -79
- package/dist/core.js.map +1 -1
- package/dist/forms.js +1 -7
- package/dist/forms.js.map +1 -1
- package/dist/heavy.js +7 -3
- package/dist/heavy.js.map +1 -1
- package/dist/index.d.ts +179 -54
- package/dist/index.esm.js +123 -105
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +128 -106
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/theme.js +0 -4
- package/dist/theme.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Accordion/Accordion.tsx +40 -25
- package/src/components/Breadcrumb/Breadcrumb.tsx +22 -13
- package/src/components/Button/Button.tsx +4 -5
- package/src/components/Callout/Callout.tsx +98 -96
- package/src/components/Card/Card.tsx +117 -103
- package/src/components/Card/index.ts +7 -5
- package/src/components/Dropdown/Dropdown.tsx +27 -8
- package/src/components/EdgePanel/EdgePanel.tsx +7 -2
- package/src/components/Modal/Modal.tsx +27 -8
- package/src/components/Spinner/Spinner.tsx +60 -43
- package/src/components/Tabs/Tabs.tsx +163 -149
- package/src/lib/composables/useInput.ts +11 -9
- package/src/lib/config/loader.ts +5 -2
- package/src/lib/types/components.ts +84 -0
- package/src/styles/01-settings/_settings.background.scss +35 -5
- package/src/styles/02-tools/_tools.background.scss +145 -61
- package/src/styles/06-components/_components.accordion.scss +2 -2
- package/src/styles/06-components/_components.badge.scss +1 -1
- package/src/styles/06-components/_components.button.scss +2 -2
- package/src/styles/06-components/_components.callout.scss +2 -2
- package/src/styles/06-components/_components.card.scss +3 -3
- package/src/styles/06-components/_components.dropdown.scss +1 -1
- package/src/styles/06-components/_components.dynamic-background.scss +69 -0
- package/src/styles/06-components/_components.edge-panel.scss +2 -2
- package/src/styles/06-components/_components.input.scss +3 -3
- package/src/styles/06-components/_components.messages.scss +6 -6
- package/src/styles/06-components/_components.modal.scss +1 -1
- package/src/styles/06-components/_components.navbar.scss +1 -1
- package/src/styles/06-components/_components.popover.scss +1 -1
- package/src/styles/06-components/_components.toggle.scss +1 -1
- package/src/styles/06-components/_components.tooltip.scss +3 -3
- package/src/styles/06-components/_index.scss +1 -0
- package/src/styles/99-utilities/_utilities.link.scss +4 -5
package/dist/atomix.css
CHANGED
|
@@ -737,6 +737,19 @@ img {
|
|
|
737
737
|
.docs-story {
|
|
738
738
|
background: var(--atomix-body-bg) !important;
|
|
739
739
|
}
|
|
740
|
+
/* Background utility simplification
|
|
741
|
+
* - Consolidates duplicated glass, mesh, shadow, border, and noise patterns into private helpers.
|
|
742
|
+
* - Replaces magic values with local token aliases backed by existing background settings.
|
|
743
|
+
* - Flattens variant and interaction branching, keeps public mixin signatures intact, and removes old backdrop prefixes.
|
|
744
|
+
*/
|
|
745
|
+
@keyframes shimmer {
|
|
746
|
+
from {
|
|
747
|
+
transform: translateX(-100%);
|
|
748
|
+
}
|
|
749
|
+
to {
|
|
750
|
+
transform: translateX(200%);
|
|
751
|
+
}
|
|
752
|
+
}
|
|
740
753
|
body {
|
|
741
754
|
-webkit-font-smoothing: antialiased;
|
|
742
755
|
-moz-osx-font-smoothing: grayscale;
|
|
@@ -1758,7 +1771,22 @@ a, a:hover {
|
|
|
1758
1771
|
transition-duration: 0.2s;
|
|
1759
1772
|
transition-timing-function: ease-in-out;
|
|
1760
1773
|
transition-delay: 0s;
|
|
1761
|
-
|
|
1774
|
+
position: relative;
|
|
1775
|
+
isolation: isolate;
|
|
1776
|
+
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-accordion-header-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-header-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-header-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-header-bg) 26%, transparent) 0%, transparent 60%);
|
|
1777
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
1778
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
1779
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-accordion-header-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
1780
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1781
|
+
}
|
|
1782
|
+
@media (hover: hover) {
|
|
1783
|
+
.c-accordion__header:hover {
|
|
1784
|
+
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-accordion-header-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-header-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-header-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-header-bg) 40%, transparent) 0%, transparent 60%);
|
|
1785
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-accordion-header-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
1786
|
+
}
|
|
1787
|
+
}
|
|
1788
|
+
.c-accordion__header:active {
|
|
1789
|
+
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-accordion-header-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-accordion-header-bg) 81%, transparent) 100%);
|
|
1762
1790
|
}
|
|
1763
1791
|
.c-accordion__header--icon-left {
|
|
1764
1792
|
flex-direction: row-reverse;
|
|
@@ -1799,7 +1827,22 @@ a, a:hover {
|
|
|
1799
1827
|
color: var(--atomix-accordion-body-color);
|
|
1800
1828
|
padding: var(--atomix-accordion-body-padding-y) var(--atomix-accordion-body-padding-x);
|
|
1801
1829
|
border-radius: 0 0 var(--atomix-accordion-border-radius) var(--atomix-accordion-border-radius);
|
|
1802
|
-
|
|
1830
|
+
position: relative;
|
|
1831
|
+
isolation: isolate;
|
|
1832
|
+
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-accordion-body-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-body-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-body-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-body-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-body-bg) 26%, transparent) 0%, transparent 60%);
|
|
1833
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
1834
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
1835
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-accordion-body-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-accordion-body-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-body-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
1836
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1837
|
+
}
|
|
1838
|
+
@media (hover: hover) {
|
|
1839
|
+
.c-accordion__body:hover {
|
|
1840
|
+
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-accordion-body-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-body-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-body-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-body-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-body-bg) 40%, transparent) 0%, transparent 60%);
|
|
1841
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-accordion-body-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-body-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-accordion-body-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
1842
|
+
}
|
|
1843
|
+
}
|
|
1844
|
+
.c-accordion__body:active {
|
|
1845
|
+
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-accordion-body-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-body-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-accordion-body-bg) 81%, transparent) 100%);
|
|
1803
1846
|
}
|
|
1804
1847
|
.c-accordion:focus, .c-accordion.is-focused {
|
|
1805
1848
|
--atomix-accordion-border-color: var(--atomix-focus-border-color);
|
|
@@ -1824,10 +1867,40 @@ a, a:hover {
|
|
|
1824
1867
|
border-color: transparent;
|
|
1825
1868
|
}
|
|
1826
1869
|
.c-accordion--glass .c-accordion__header {
|
|
1827
|
-
|
|
1870
|
+
position: relative;
|
|
1871
|
+
isolation: isolate;
|
|
1872
|
+
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-accordion-header-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-header-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-header-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-header-bg) 26%, transparent) 0%, transparent 60%);
|
|
1873
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
1874
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
1875
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-accordion-header-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
1876
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1877
|
+
}
|
|
1878
|
+
@media (hover: hover) {
|
|
1879
|
+
.c-accordion--glass .c-accordion__header:hover {
|
|
1880
|
+
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-accordion-header-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-header-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-header-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-header-bg) 40%, transparent) 0%, transparent 60%);
|
|
1881
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-accordion-header-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
1882
|
+
}
|
|
1883
|
+
}
|
|
1884
|
+
.c-accordion--glass .c-accordion__header:active {
|
|
1885
|
+
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-accordion-header-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-accordion-header-bg) 81%, transparent) 100%);
|
|
1828
1886
|
}
|
|
1829
1887
|
.c-accordion--glass .c-accordion__body {
|
|
1830
|
-
|
|
1888
|
+
position: relative;
|
|
1889
|
+
isolation: isolate;
|
|
1890
|
+
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-accordion-header-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-header-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-header-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-header-bg) 26%, transparent) 0%, transparent 60%);
|
|
1891
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
1892
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
1893
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-accordion-header-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
1894
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1895
|
+
}
|
|
1896
|
+
@media (hover: hover) {
|
|
1897
|
+
.c-accordion--glass .c-accordion__body:hover {
|
|
1898
|
+
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-accordion-header-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-header-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-header-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-header-bg) 40%, transparent) 0%, transparent 60%);
|
|
1899
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-accordion-header-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
1900
|
+
}
|
|
1901
|
+
}
|
|
1902
|
+
.c-accordion--glass .c-accordion__body:active {
|
|
1903
|
+
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-accordion-header-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-accordion-header-bg) 81%, transparent) 100%);
|
|
1831
1904
|
}
|
|
1832
1905
|
@media (prefers-reduced-motion: reduce) {
|
|
1833
1906
|
.c-accordion {
|
|
@@ -1860,7 +1933,13 @@ a, a:hover {
|
|
|
1860
1933
|
width: var(--atomix-avatar-size);
|
|
1861
1934
|
height: var(--atomix-avatar-size);
|
|
1862
1935
|
border-radius: var(--atomix-avatar-border-radius);
|
|
1863
|
-
|
|
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);
|
|
1864
1943
|
color: var(--atomix-avatar-color);
|
|
1865
1944
|
border: var(--atomix-avatar-border-width) solid var(--atomix-avatar-border-color);
|
|
1866
1945
|
overflow: hidden;
|
|
@@ -1872,6 +1951,15 @@ a, a:hover {
|
|
|
1872
1951
|
transition-timing-function: ease-in-out;
|
|
1873
1952
|
transition-delay: 0s;
|
|
1874
1953
|
}
|
|
1954
|
+
@media (hover: hover) {
|
|
1955
|
+
.c-avatar:hover {
|
|
1956
|
+
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-avatar-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-avatar-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-avatar-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-avatar-bg) 40%, transparent) 0%, transparent 60%);
|
|
1957
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-avatar-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-avatar-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-avatar-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
1958
|
+
}
|
|
1959
|
+
}
|
|
1960
|
+
.c-avatar:active {
|
|
1961
|
+
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-avatar-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-avatar-bg) 81%, transparent) 100%);
|
|
1962
|
+
}
|
|
1875
1963
|
.c-avatar--xs {
|
|
1876
1964
|
--atomix-avatar-size: 1.5rem;
|
|
1877
1965
|
--atomix-avatar-border-radius: 0.25rem;
|
|
@@ -1962,12 +2050,27 @@ a, a:hover {
|
|
|
1962
2050
|
color: var(--atomix-avatar-group-more-color);
|
|
1963
2051
|
font-size: var(--atomix-avatar-group-more-font-size);
|
|
1964
2052
|
font-weight: var(--atomix-avatar-group-more-font-weight);
|
|
1965
|
-
|
|
2053
|
+
position: relative;
|
|
2054
|
+
isolation: isolate;
|
|
2055
|
+
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%);
|
|
2056
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
2057
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
2058
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1966
2060
|
border: var(--atomix-avatar-group-more-border-width) solid var(--atomix-avatar-group-more-border-color);
|
|
1967
2061
|
width: var(--atomix-avatar-size);
|
|
1968
2062
|
height: var(--atomix-avatar-size);
|
|
1969
2063
|
border-radius: var(--atomix-avatar-border-radius);
|
|
1970
2064
|
}
|
|
2065
|
+
@media (hover: hover) {
|
|
2066
|
+
.c-avatar-group__more:hover {
|
|
2067
|
+
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-avatar-group-more-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 40%, transparent) 0%, transparent 60%);
|
|
2068
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-avatar-group-more-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-avatar-group-more-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-avatar-group-more-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
2069
|
+
}
|
|
2070
|
+
}
|
|
2071
|
+
.c-avatar-group__more:active {
|
|
2072
|
+
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-avatar-group-more-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 81%, transparent) 100%);
|
|
2073
|
+
}
|
|
1971
2074
|
.c-avatar-group--stacked {
|
|
1972
2075
|
gap: 0;
|
|
1973
2076
|
}
|
|
@@ -2286,11 +2389,26 @@ a, a:hover {
|
|
|
2286
2389
|
line-height: 1;
|
|
2287
2390
|
padding: var(--atomix-tag-padding-y) var(--atomix-tag-padding-x);
|
|
2288
2391
|
border-radius: var(--atomix-tag-border-radius);
|
|
2289
|
-
|
|
2392
|
+
position: relative;
|
|
2393
|
+
isolation: isolate;
|
|
2394
|
+
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%);
|
|
2395
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
2396
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
2397
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2290
2399
|
-webkit-user-select: none;
|
|
2291
2400
|
-moz-user-select: none;
|
|
2292
2401
|
user-select: none;
|
|
2293
2402
|
}
|
|
2403
|
+
@media (hover: hover) {
|
|
2404
|
+
.c-badge:hover {
|
|
2405
|
+
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-tag-bg-color) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tag-bg-color) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tag-bg-color) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tag-bg-color) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tag-bg-color) 40%, transparent) 0%, transparent 60%);
|
|
2406
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tag-bg-color) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
2407
|
+
}
|
|
2408
|
+
}
|
|
2409
|
+
.c-badge:active {
|
|
2410
|
+
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-tag-bg-color) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tag-bg-color) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tag-bg-color) 81%, transparent) 100%);
|
|
2411
|
+
}
|
|
2294
2412
|
.c-badge__icon {
|
|
2295
2413
|
font-size: var(--atomix-tag-icon-size);
|
|
2296
2414
|
color: var(--atomix-tag-color);
|
|
@@ -2303,9 +2421,24 @@ a, a:hover {
|
|
|
2303
2421
|
--atomix-tag-padding-y: 0.5rem;
|
|
2304
2422
|
}
|
|
2305
2423
|
.c-badge--glass {
|
|
2306
|
-
|
|
2424
|
+
position: relative;
|
|
2425
|
+
isolation: isolate;
|
|
2426
|
+
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%);
|
|
2427
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
2428
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
2429
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2307
2431
|
border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 50%, transparent);
|
|
2308
2432
|
}
|
|
2433
|
+
@media (hover: hover) {
|
|
2434
|
+
.c-badge--glass:hover {
|
|
2435
|
+
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-tag-bg-color) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tag-bg-color) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tag-bg-color) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tag-bg-color) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tag-bg-color) 40%, transparent) 0%, transparent 60%);
|
|
2436
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tag-bg-color) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
2437
|
+
}
|
|
2438
|
+
}
|
|
2439
|
+
.c-badge--glass:active {
|
|
2440
|
+
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-tag-bg-color) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tag-bg-color) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tag-bg-color) 81%, transparent) 100%);
|
|
2441
|
+
}
|
|
2309
2442
|
.c-badge--primary {
|
|
2310
2443
|
--atomix-tag-bg-color: var(--atomix-brand-bg-subtle);
|
|
2311
2444
|
--atomix-tag-color: var(--atomix-brand-text-emphasis);
|
|
@@ -2360,7 +2493,22 @@ a, a:hover {
|
|
|
2360
2493
|
list-style: none;
|
|
2361
2494
|
padding-left: 0px;
|
|
2362
2495
|
margin-bottom: var(--atomix-breadcrumb-margin-bottom);
|
|
2363
|
-
|
|
2496
|
+
position: relative;
|
|
2497
|
+
isolation: isolate;
|
|
2498
|
+
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-breadcrumb-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 26%, transparent) 0%, transparent 60%);
|
|
2499
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
2500
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
2501
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-breadcrumb-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-breadcrumb-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-breadcrumb-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
2502
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2503
|
+
}
|
|
2504
|
+
@media (hover: hover) {
|
|
2505
|
+
.c-breadcrumb:hover {
|
|
2506
|
+
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-breadcrumb-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 40%, transparent) 0%, transparent 60%);
|
|
2507
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-breadcrumb-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-breadcrumb-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-breadcrumb-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
2508
|
+
}
|
|
2509
|
+
}
|
|
2510
|
+
.c-breadcrumb:active {
|
|
2511
|
+
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-breadcrumb-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 81%, transparent) 100%);
|
|
2364
2512
|
}
|
|
2365
2513
|
.c-breadcrumb__item {
|
|
2366
2514
|
display: flex;
|
|
@@ -2455,7 +2603,13 @@ a, a:hover {
|
|
|
2455
2603
|
text-align: center;
|
|
2456
2604
|
white-space: nowrap;
|
|
2457
2605
|
vertical-align: middle;
|
|
2458
|
-
|
|
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);
|
|
2459
2613
|
cursor: pointer;
|
|
2460
2614
|
-webkit-user-select: none;
|
|
2461
2615
|
-moz-user-select: none;
|
|
@@ -2464,14 +2618,38 @@ a, a:hover {
|
|
|
2464
2618
|
border-radius: var(--atomix-btn-border-radius);
|
|
2465
2619
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease-in-out;
|
|
2466
2620
|
}
|
|
2621
|
+
@media (hover: hover) {
|
|
2622
|
+
.c-btn:hover {
|
|
2623
|
+
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-btn-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-bg) 40%, transparent) 0%, transparent 60%);
|
|
2624
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-btn-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-btn-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
2625
|
+
}
|
|
2626
|
+
}
|
|
2627
|
+
.c-btn:active {
|
|
2628
|
+
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-btn-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-btn-bg) 81%, transparent) 100%);
|
|
2629
|
+
}
|
|
2467
2630
|
.c-btn__icon {
|
|
2468
2631
|
font-size: var(--atomix-btn-icon-size);
|
|
2469
2632
|
}
|
|
2470
2633
|
.c-btn:hover {
|
|
2471
2634
|
color: var(--atomix-btn-hover-color);
|
|
2472
|
-
|
|
2635
|
+
position: relative;
|
|
2636
|
+
isolation: isolate;
|
|
2637
|
+
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%);
|
|
2638
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
2639
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
2640
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2473
2642
|
border-color: var(--atomix-btn-hover-border-color);
|
|
2474
2643
|
}
|
|
2644
|
+
@media (hover: hover) {
|
|
2645
|
+
.c-btn:hover:hover {
|
|
2646
|
+
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-btn-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
2647
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-btn-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
2648
|
+
}
|
|
2649
|
+
}
|
|
2650
|
+
.c-btn:hover:active {
|
|
2651
|
+
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-btn-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-btn-hover-bg) 81%, transparent) 100%);
|
|
2652
|
+
}
|
|
2475
2653
|
.c-btn--primary {
|
|
2476
2654
|
--atomix-btn-color: var(--atomix-white, #ffffff);
|
|
2477
2655
|
--atomix-btn-bg: var(--atomix-primary, #8b5cf6);
|
|
@@ -2901,19 +3079,64 @@ a, a:hover {
|
|
|
2901
3079
|
.c-btn:disabled, .c-btn--disabled, fieldset:disabled .c-btn {
|
|
2902
3080
|
color: var(--atomix-btn-disabled-color);
|
|
2903
3081
|
pointer-events: none;
|
|
2904
|
-
|
|
3082
|
+
position: relative;
|
|
3083
|
+
isolation: isolate;
|
|
3084
|
+
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%);
|
|
3085
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3086
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
3087
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2905
3089
|
border-color: var(--atomix-btn-disabled-border-color);
|
|
2906
3090
|
opacity: var(--atomix-btn-disabled-opacity);
|
|
2907
3091
|
cursor: not-allowed;
|
|
2908
3092
|
}
|
|
3093
|
+
@media (hover: hover) {
|
|
3094
|
+
.c-btn:disabled:hover, .c-btn--disabled:hover, fieldset:disabled .c-btn:hover {
|
|
3095
|
+
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-btn-disabled-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 40%, transparent) 0%, transparent 60%);
|
|
3096
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-btn-disabled-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-disabled-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-btn-disabled-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
3097
|
+
}
|
|
3098
|
+
}
|
|
3099
|
+
.c-btn:disabled:active, .c-btn--disabled:active, fieldset:disabled .c-btn:active {
|
|
3100
|
+
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-btn-disabled-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 81%, transparent) 100%);
|
|
3101
|
+
}
|
|
2909
3102
|
.c-btn:disabled:focus-visible, .c-btn--disabled:focus-visible, fieldset:disabled .c-btn:focus-visible {
|
|
2910
3103
|
outline: none;
|
|
2911
3104
|
}
|
|
2912
3105
|
.c-btn--glass {
|
|
2913
|
-
|
|
3106
|
+
position: relative;
|
|
3107
|
+
isolation: isolate;
|
|
3108
|
+
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%);
|
|
3109
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3110
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
3111
|
+
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);
|
|
3112
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3113
|
+
}
|
|
3114
|
+
@media (hover: hover) {
|
|
3115
|
+
.c-btn--glass:hover {
|
|
3116
|
+
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-btn-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-bg) 40%, transparent) 0%, transparent 60%);
|
|
3117
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-btn-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-btn-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
3118
|
+
}
|
|
3119
|
+
}
|
|
3120
|
+
.c-btn--glass:active {
|
|
3121
|
+
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-btn-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-btn-bg) 81%, transparent) 100%);
|
|
2914
3122
|
}
|
|
2915
3123
|
.c-btn--glass:hover {
|
|
2916
|
-
|
|
3124
|
+
position: relative;
|
|
3125
|
+
isolation: isolate;
|
|
3126
|
+
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%);
|
|
3127
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3128
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
3129
|
+
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);
|
|
3130
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3131
|
+
}
|
|
3132
|
+
@media (hover: hover) {
|
|
3133
|
+
.c-btn--glass:hover:hover {
|
|
3134
|
+
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-btn-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
3135
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-btn-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
3136
|
+
}
|
|
3137
|
+
}
|
|
3138
|
+
.c-btn--glass:hover:active {
|
|
3139
|
+
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-btn-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-btn-hover-bg) 81%, transparent) 100%);
|
|
2917
3140
|
}
|
|
2918
3141
|
@media (prefers-reduced-motion: reduce) {
|
|
2919
3142
|
.c-btn {
|
|
@@ -3009,11 +3232,26 @@ a, a:hover {
|
|
|
3009
3232
|
z-index: 5;
|
|
3010
3233
|
width: var(--atomix-datepicker-width);
|
|
3011
3234
|
padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
|
|
3012
|
-
|
|
3235
|
+
position: relative;
|
|
3236
|
+
isolation: isolate;
|
|
3237
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3239
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3013
3242
|
border-radius: var(--atomix-datepicker-border-radius);
|
|
3014
3243
|
box-shadow: var(--atomix-datepicker-box-shadow);
|
|
3015
3244
|
margin-top: 0.25rem;
|
|
3016
3245
|
}
|
|
3246
|
+
@media (hover: hover) {
|
|
3247
|
+
.c-datepicker__calendar:hover {
|
|
3248
|
+
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-datepicker-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-datepicker-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-datepicker-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-datepicker-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-datepicker-bg) 40%, transparent) 0%, transparent 60%);
|
|
3249
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-datepicker-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-datepicker-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-datepicker-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
3250
|
+
}
|
|
3251
|
+
}
|
|
3252
|
+
.c-datepicker__calendar:active {
|
|
3253
|
+
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-datepicker-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-datepicker-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-datepicker-bg) 81%, transparent) 100%);
|
|
3254
|
+
}
|
|
3017
3255
|
.c-datepicker__calendar--top-start, .c-datepicker__calendar--top-end {
|
|
3018
3256
|
bottom: 100%;
|
|
3019
3257
|
margin-bottom: 0.25rem;
|
|
@@ -3392,11 +3630,26 @@ a, a:hover {
|
|
|
3392
3630
|
transition-duration: 0.2s;
|
|
3393
3631
|
transition-timing-function: ease-in-out;
|
|
3394
3632
|
transition-delay: 0s;
|
|
3395
|
-
|
|
3633
|
+
position: relative;
|
|
3634
|
+
isolation: isolate;
|
|
3635
|
+
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-card-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-card-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-card-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-card-bg) 26%, transparent) 0%, transparent 60%);
|
|
3636
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3637
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
3638
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3396
3640
|
display: block;
|
|
3397
3641
|
text-decoration: none;
|
|
3398
3642
|
color: inherit;
|
|
3399
3643
|
}
|
|
3644
|
+
@media (hover: hover) {
|
|
3645
|
+
.c-card:hover {
|
|
3646
|
+
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-card-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-card-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-card-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-card-bg) 40%, transparent) 0%, transparent 60%);
|
|
3647
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-card-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-card-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-card-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
3648
|
+
}
|
|
3649
|
+
}
|
|
3650
|
+
.c-card:active {
|
|
3651
|
+
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-card-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-card-bg) 81%, transparent) 100%);
|
|
3652
|
+
}
|
|
3400
3653
|
.c-card[href] {
|
|
3401
3654
|
display: block;
|
|
3402
3655
|
text-decoration: none !important;
|
|
@@ -3525,11 +3778,41 @@ a, a:hover {
|
|
|
3525
3778
|
--atomix-card-text-font-size: var(--atomix-font-size-base);
|
|
3526
3779
|
}
|
|
3527
3780
|
.c-card--filled {
|
|
3528
|
-
|
|
3781
|
+
position: relative;
|
|
3782
|
+
isolation: isolate;
|
|
3783
|
+
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-card-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-card-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-card-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-card-bg) 26%, transparent) 0%, transparent 60%);
|
|
3784
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3785
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
3786
|
+
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);
|
|
3787
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3788
|
+
}
|
|
3789
|
+
@media (hover: hover) {
|
|
3790
|
+
.c-card--filled:hover {
|
|
3791
|
+
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-card-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-card-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-card-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-card-bg) 40%, transparent) 0%, transparent 60%);
|
|
3792
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-card-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-card-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-card-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
3793
|
+
}
|
|
3794
|
+
}
|
|
3795
|
+
.c-card--filled:active {
|
|
3796
|
+
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-card-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-card-bg) 81%, transparent) 100%);
|
|
3529
3797
|
}
|
|
3530
3798
|
.c-card--glass {
|
|
3531
3799
|
max-width: none;
|
|
3532
|
-
|
|
3800
|
+
position: relative;
|
|
3801
|
+
isolation: isolate;
|
|
3802
|
+
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-card-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-card-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-card-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-card-bg) 26%, transparent) 0%, transparent 60%);
|
|
3803
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3804
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
3805
|
+
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);
|
|
3806
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3807
|
+
}
|
|
3808
|
+
@media (hover: hover) {
|
|
3809
|
+
.c-card--glass:hover {
|
|
3810
|
+
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-card-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-card-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-card-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-card-bg) 40%, transparent) 0%, transparent 60%);
|
|
3811
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-card-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-card-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-card-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
3812
|
+
}
|
|
3813
|
+
}
|
|
3814
|
+
.c-card--glass:active {
|
|
3815
|
+
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-card-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-card-bg) 81%, transparent) 100%);
|
|
3533
3816
|
}
|
|
3534
3817
|
.c-card--outlined {
|
|
3535
3818
|
background-color: transparent;
|
|
@@ -3600,7 +3883,7 @@ a, a:hover {
|
|
|
3600
3883
|
box-shadow: var(--atomix-box-shadow-lg);
|
|
3601
3884
|
}
|
|
3602
3885
|
.c-card--interactive:active:not(.c-card--interactive--disabled) {
|
|
3603
|
-
transform: translateY(
|
|
3886
|
+
transform: translateY(-2px);
|
|
3604
3887
|
}
|
|
3605
3888
|
.c-card--hoverable {
|
|
3606
3889
|
cursor: pointer;
|
|
@@ -3610,7 +3893,7 @@ a, a:hover {
|
|
|
3610
3893
|
transform: translateY(-2px);
|
|
3611
3894
|
}
|
|
3612
3895
|
.c-card--hoverable:active:not(.c-card--hoverable--disabled) {
|
|
3613
|
-
transform: translateY(
|
|
3896
|
+
transform: translateY(-2px);
|
|
3614
3897
|
}
|
|
3615
3898
|
.c-card--hoverable--hover-elevation-none:hover:not(.c-card--hoverable--disabled) {
|
|
3616
3899
|
box-shadow: none;
|
|
@@ -5158,7 +5441,13 @@ a, a:hover {
|
|
|
5158
5441
|
-webkit-appearance: none;
|
|
5159
5442
|
-moz-appearance: none;
|
|
5160
5443
|
appearance: none;
|
|
5161
|
-
|
|
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);
|
|
5162
5451
|
width: var(--atomix-checkbox-width);
|
|
5163
5452
|
height: var(--atomix-checkbox-height);
|
|
5164
5453
|
color: currentColor;
|
|
@@ -5170,6 +5459,15 @@ a, a:hover {
|
|
|
5170
5459
|
transition-timing-function: ease-in-out;
|
|
5171
5460
|
transition-delay: 0s;
|
|
5172
5461
|
}
|
|
5462
|
+
@media (hover: hover) {
|
|
5463
|
+
.c-checkbox__input:hover {
|
|
5464
|
+
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-checkbox-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-checkbox-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-checkbox-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-checkbox-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-checkbox-bg) 40%, transparent) 0%, transparent 60%);
|
|
5465
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-checkbox-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-checkbox-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-checkbox-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5466
|
+
}
|
|
5467
|
+
}
|
|
5468
|
+
.c-checkbox__input:active {
|
|
5469
|
+
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-checkbox-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-checkbox-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-checkbox-bg) 81%, transparent) 100%);
|
|
5470
|
+
}
|
|
5173
5471
|
.c-checkbox__input[type=radio] {
|
|
5174
5472
|
border-radius: 50rem;
|
|
5175
5473
|
}
|
|
@@ -5253,7 +5551,22 @@ a, a:hover {
|
|
|
5253
5551
|
color: var(--atomix-body-color);
|
|
5254
5552
|
}
|
|
5255
5553
|
.c-color-mode-toggle:hover:not(:disabled) {
|
|
5256
|
-
|
|
5554
|
+
position: relative;
|
|
5555
|
+
isolation: isolate;
|
|
5556
|
+
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(0, 0, 0, 0.05) 78%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent) 40%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 55%, transparent) 70%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 26%, transparent) 0%, transparent 60%);
|
|
5557
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5558
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
5559
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5560
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5561
|
+
}
|
|
5562
|
+
@media (hover: hover) {
|
|
5563
|
+
.c-color-mode-toggle:hover:not(:disabled):hover {
|
|
5564
|
+
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(0, 0, 0, 0.05) 96%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 80%, transparent) 40%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 68%, transparent) 70%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 40%, transparent) 0%, transparent 60%);
|
|
5565
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(0, 0, 0, 0.05) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5566
|
+
}
|
|
5567
|
+
}
|
|
5568
|
+
.c-color-mode-toggle:hover:not(:disabled):active {
|
|
5569
|
+
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, rgba(0, 0, 0, 0.05) 108%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 90%, transparent) 50%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 81%, transparent) 100%);
|
|
5257
5570
|
}
|
|
5258
5571
|
.c-color-mode-toggle:focus-visible {
|
|
5259
5572
|
outline: none;
|
|
@@ -5280,7 +5593,22 @@ a, a:hover {
|
|
|
5280
5593
|
opacity: 0.5;
|
|
5281
5594
|
}
|
|
5282
5595
|
[data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled) {
|
|
5283
|
-
|
|
5596
|
+
position: relative;
|
|
5597
|
+
isolation: isolate;
|
|
5598
|
+
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(255, 255, 255, 0.1) 78%, transparent) 0%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 65%, transparent) 40%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 55%, transparent) 70%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 26%, transparent) 0%, transparent 60%);
|
|
5599
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5600
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
5601
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(255, 255, 255, 0.1) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(255, 255, 255, 0.1) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(255, 255, 255, 0.1) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5602
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5603
|
+
}
|
|
5604
|
+
@media (hover: hover) {
|
|
5605
|
+
[data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled):hover {
|
|
5606
|
+
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(255, 255, 255, 0.1) 96%, transparent) 0%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 80%, transparent) 40%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 68%, transparent) 70%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 40%, transparent) 0%, transparent 60%);
|
|
5607
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(255, 255, 255, 0.1) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(255, 255, 255, 0.1) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(255, 255, 255, 0.1) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5608
|
+
}
|
|
5609
|
+
}
|
|
5610
|
+
[data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled):active {
|
|
5611
|
+
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, rgba(255, 255, 255, 0.1) 108%, transparent) 0%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 90%, transparent) 50%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 81%, transparent) 100%);
|
|
5284
5612
|
}
|
|
5285
5613
|
@media (prefers-reduced-motion: reduce) {
|
|
5286
5614
|
.c-color-mode-toggle {
|
|
@@ -5329,7 +5657,22 @@ a, a:hover {
|
|
|
5329
5657
|
align-items: center;
|
|
5330
5658
|
padding: var(--atomix-countdown-item-padding-y) var(--atomix-countdown-item-padding-x);
|
|
5331
5659
|
border-radius: var(--atomix-countdown-focused-border-radius);
|
|
5332
|
-
|
|
5660
|
+
position: relative;
|
|
5661
|
+
isolation: isolate;
|
|
5662
|
+
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-countdown-focused-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 26%, transparent) 0%, transparent 60%);
|
|
5663
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5664
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
5665
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-countdown-focused-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-countdown-focused-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-countdown-focused-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5666
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5667
|
+
}
|
|
5668
|
+
@media (hover: hover) {
|
|
5669
|
+
.c-countdown--focused .c-countdown__time:hover {
|
|
5670
|
+
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-countdown-focused-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 40%, transparent) 0%, transparent 60%);
|
|
5671
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-countdown-focused-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-countdown-focused-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-countdown-focused-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5672
|
+
}
|
|
5673
|
+
}
|
|
5674
|
+
.c-countdown--focused .c-countdown__time:active {
|
|
5675
|
+
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-countdown-focused-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 81%, transparent) 100%);
|
|
5333
5676
|
}
|
|
5334
5677
|
.c-countdown--focused .c-countdown__time-label {
|
|
5335
5678
|
font-size: var(--atomix-countdown-focused-label-font-size);
|
|
@@ -5356,11 +5699,41 @@ a, a:hover {
|
|
|
5356
5699
|
width: 100%;
|
|
5357
5700
|
margin-bottom: 0;
|
|
5358
5701
|
color: var(--atomix-data-table-color);
|
|
5359
|
-
|
|
5702
|
+
position: relative;
|
|
5703
|
+
isolation: isolate;
|
|
5704
|
+
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%);
|
|
5705
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5706
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
5707
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5360
5709
|
border-collapse: collapse;
|
|
5361
5710
|
}
|
|
5711
|
+
@media (hover: hover) {
|
|
5712
|
+
.c-data-table:hover {
|
|
5713
|
+
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-data-table-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-bg) 40%, transparent) 0%, transparent 60%);
|
|
5714
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-data-table-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-data-table-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5715
|
+
}
|
|
5716
|
+
}
|
|
5717
|
+
.c-data-table:active {
|
|
5718
|
+
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-data-table-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-data-table-bg) 81%, transparent) 100%);
|
|
5719
|
+
}
|
|
5362
5720
|
.c-data-table__header {
|
|
5363
|
-
|
|
5721
|
+
position: relative;
|
|
5722
|
+
isolation: isolate;
|
|
5723
|
+
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-header-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-header-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-header-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-header-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-header-bg) 26%, transparent) 0%, transparent 60%);
|
|
5724
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5725
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
5726
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-data-table-header-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5727
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5728
|
+
}
|
|
5729
|
+
@media (hover: hover) {
|
|
5730
|
+
.c-data-table__header:hover {
|
|
5731
|
+
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-data-table-header-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-header-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-header-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-header-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-header-bg) 40%, transparent) 0%, transparent 60%);
|
|
5732
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-data-table-header-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5733
|
+
}
|
|
5734
|
+
}
|
|
5735
|
+
.c-data-table__header:active {
|
|
5736
|
+
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-data-table-header-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-header-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-data-table-header-bg) 81%, transparent) 100%);
|
|
5364
5737
|
}
|
|
5365
5738
|
.c-data-table__header-cell {
|
|
5366
5739
|
padding: 0.75rem 1rem;
|
|
@@ -5377,7 +5750,22 @@ a, a:hover {
|
|
|
5377
5750
|
user-select: none;
|
|
5378
5751
|
}
|
|
5379
5752
|
.c-data-table__header-cell--sortable:hover {
|
|
5380
|
-
|
|
5753
|
+
position: relative;
|
|
5754
|
+
isolation: isolate;
|
|
5755
|
+
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(0, 0, 0, 0.05) 78%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent) 40%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 55%, transparent) 70%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 26%, transparent) 0%, transparent 60%);
|
|
5756
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5757
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
5758
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5759
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5760
|
+
}
|
|
5761
|
+
@media (hover: hover) {
|
|
5762
|
+
.c-data-table__header-cell--sortable:hover:hover {
|
|
5763
|
+
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(0, 0, 0, 0.05) 96%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 80%, transparent) 40%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 68%, transparent) 70%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 40%, transparent) 0%, transparent 60%);
|
|
5764
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(0, 0, 0, 0.05) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5765
|
+
}
|
|
5766
|
+
}
|
|
5767
|
+
.c-data-table__header-cell--sortable:hover:active {
|
|
5768
|
+
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, rgba(0, 0, 0, 0.05) 108%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 90%, transparent) 50%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 81%, transparent) 100%);
|
|
5381
5769
|
}
|
|
5382
5770
|
.c-data-table__header-content {
|
|
5383
5771
|
display: flex;
|
|
@@ -5445,16 +5833,61 @@ a, a:hover {
|
|
|
5445
5833
|
vertical-align: middle;
|
|
5446
5834
|
}
|
|
5447
5835
|
.c-data-table__row {
|
|
5448
|
-
|
|
5836
|
+
position: relative;
|
|
5837
|
+
isolation: isolate;
|
|
5838
|
+
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%);
|
|
5839
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5840
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
5841
|
+
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);
|
|
5842
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5843
|
+
}
|
|
5844
|
+
@media (hover: hover) {
|
|
5845
|
+
.c-data-table__row:hover {
|
|
5846
|
+
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-data-table-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-bg) 40%, transparent) 0%, transparent 60%);
|
|
5847
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-data-table-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-data-table-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5848
|
+
}
|
|
5849
|
+
}
|
|
5850
|
+
.c-data-table__row:active {
|
|
5851
|
+
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-data-table-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-data-table-bg) 81%, transparent) 100%);
|
|
5449
5852
|
}
|
|
5450
5853
|
.c-data-table__row:hover {
|
|
5451
|
-
|
|
5854
|
+
position: relative;
|
|
5855
|
+
isolation: isolate;
|
|
5856
|
+
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-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
5857
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5858
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
5859
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-data-table-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-data-table-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5860
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5861
|
+
}
|
|
5862
|
+
@media (hover: hover) {
|
|
5863
|
+
.c-data-table__row:hover:hover {
|
|
5864
|
+
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-data-table-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
5865
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-data-table-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-data-table-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5866
|
+
}
|
|
5867
|
+
}
|
|
5868
|
+
.c-data-table__row:hover:active {
|
|
5869
|
+
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-data-table-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 81%, transparent) 100%);
|
|
5452
5870
|
}
|
|
5453
5871
|
.c-data-table__row[role=button] {
|
|
5454
5872
|
cursor: pointer;
|
|
5455
5873
|
}
|
|
5456
5874
|
.c-data-table__row--selected {
|
|
5457
|
-
|
|
5875
|
+
position: relative;
|
|
5876
|
+
isolation: isolate;
|
|
5877
|
+
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.1) 78%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 65%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 55%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 26%, transparent) 0%, transparent 60%);
|
|
5878
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5879
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
5880
|
+
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.1) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5881
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5882
|
+
}
|
|
5883
|
+
@media (hover: hover) {
|
|
5884
|
+
.c-data-table__row--selected:hover {
|
|
5885
|
+
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-primary-rgb), 0.1) 96%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 80%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 68%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 40%, transparent) 0%, transparent 60%);
|
|
5886
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5887
|
+
}
|
|
5888
|
+
}
|
|
5889
|
+
.c-data-table__row--selected:active {
|
|
5890
|
+
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, rgba(var(--atomix-primary-rgb), 0.1) 108%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 90%, transparent) 50%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 81%, transparent) 100%);
|
|
5458
5891
|
}
|
|
5459
5892
|
.c-data-table__cell--selection {
|
|
5460
5893
|
width: 48px;
|
|
@@ -5477,7 +5910,22 @@ a, a:hover {
|
|
|
5477
5910
|
color: var(--atomix-gray-500);
|
|
5478
5911
|
}
|
|
5479
5912
|
.c-data-table--striped tbody tr:nth-of-type(odd) {
|
|
5480
|
-
|
|
5913
|
+
position: relative;
|
|
5914
|
+
isolation: isolate;
|
|
5915
|
+
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-striped-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 26%, transparent) 0%, transparent 60%);
|
|
5916
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5917
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
5918
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-data-table-striped-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-data-table-striped-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-striped-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5919
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5920
|
+
}
|
|
5921
|
+
@media (hover: hover) {
|
|
5922
|
+
.c-data-table--striped tbody tr:nth-of-type(odd):hover {
|
|
5923
|
+
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-data-table-striped-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 40%, transparent) 0%, transparent 60%);
|
|
5924
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-data-table-striped-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-striped-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-data-table-striped-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5925
|
+
}
|
|
5926
|
+
}
|
|
5927
|
+
.c-data-table--striped tbody tr:nth-of-type(odd):active {
|
|
5928
|
+
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-data-table-striped-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 81%, transparent) 100%);
|
|
5481
5929
|
}
|
|
5482
5930
|
.c-data-table--bordered {
|
|
5483
5931
|
border: var(--atomix-border-width) var(--atomix-border-style) var(--atomix-data-table-border-color);
|
|
@@ -5498,7 +5946,22 @@ a, a:hover {
|
|
|
5498
5946
|
position: sticky;
|
|
5499
5947
|
top: var(--sticky-header-offset, 0);
|
|
5500
5948
|
z-index: 10;
|
|
5501
|
-
|
|
5949
|
+
position: relative;
|
|
5950
|
+
isolation: isolate;
|
|
5951
|
+
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-header-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-header-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-header-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-header-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-header-bg) 26%, transparent) 0%, transparent 60%);
|
|
5952
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5953
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
5954
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-data-table-header-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5955
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5956
|
+
}
|
|
5957
|
+
@media (hover: hover) {
|
|
5958
|
+
.c-data-table--sticky-header thead:hover {
|
|
5959
|
+
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-data-table-header-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-header-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-header-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-header-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-header-bg) 40%, transparent) 0%, transparent 60%);
|
|
5960
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-data-table-header-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5961
|
+
}
|
|
5962
|
+
}
|
|
5963
|
+
.c-data-table--sticky-header thead:active {
|
|
5964
|
+
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-data-table-header-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-header-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-data-table-header-bg) 81%, transparent) 100%);
|
|
5502
5965
|
}
|
|
5503
5966
|
.c-data-table-toolbar {
|
|
5504
5967
|
display: flex;
|
|
@@ -5694,15 +6157,45 @@ a, a:hover {
|
|
|
5694
6157
|
list-style: none;
|
|
5695
6158
|
margin-bottom: 0rem;
|
|
5696
6159
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
5697
|
-
|
|
6160
|
+
position: relative;
|
|
6161
|
+
isolation: isolate;
|
|
6162
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6164
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5698
6167
|
border-radius: var(--atomix-dropdown-border-radius);
|
|
5699
6168
|
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
5700
6169
|
overflow: hidden;
|
|
5701
6170
|
}
|
|
6171
|
+
@media (hover: hover) {
|
|
6172
|
+
.c-dropdown__menu:hover {
|
|
6173
|
+
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-dropdown-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-bg) 40%, transparent) 0%, transparent 60%);
|
|
6174
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-dropdown-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6175
|
+
}
|
|
6176
|
+
}
|
|
6177
|
+
.c-dropdown__menu:active {
|
|
6178
|
+
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
|
+
}
|
|
5702
6180
|
.c-dropdown__menu--glass {
|
|
5703
|
-
|
|
6181
|
+
position: relative;
|
|
6182
|
+
isolation: isolate;
|
|
6183
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6185
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5704
6188
|
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
5705
6189
|
}
|
|
6190
|
+
@media (hover: hover) {
|
|
6191
|
+
.c-dropdown__menu--glass:hover {
|
|
6192
|
+
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-dropdown-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-bg) 40%, transparent) 0%, transparent 60%);
|
|
6193
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-dropdown-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6194
|
+
}
|
|
6195
|
+
}
|
|
6196
|
+
.c-dropdown__menu--glass:active {
|
|
6197
|
+
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%);
|
|
6198
|
+
}
|
|
5706
6199
|
.c-dropdown__menu-item {
|
|
5707
6200
|
display: block;
|
|
5708
6201
|
width: 100%;
|
|
@@ -5719,13 +6212,43 @@ a, a:hover {
|
|
|
5719
6212
|
}
|
|
5720
6213
|
.c-dropdown__menu-item:hover, .c-dropdown__menu-item:focus {
|
|
5721
6214
|
color: var(--atomix-dropdown-link-hover-color);
|
|
5722
|
-
|
|
6215
|
+
position: relative;
|
|
6216
|
+
isolation: isolate;
|
|
6217
|
+
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%);
|
|
6218
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6219
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
6220
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5723
6222
|
outline: none;
|
|
5724
6223
|
padding-left: calc(var(--atomix-dropdown-item-padding-x) + 3px);
|
|
5725
6224
|
}
|
|
6225
|
+
@media (hover: hover) {
|
|
6226
|
+
.c-dropdown__menu-item:hover:hover, .c-dropdown__menu-item:focus:hover {
|
|
6227
|
+
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-dropdown-link-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
6228
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6229
|
+
}
|
|
6230
|
+
}
|
|
6231
|
+
.c-dropdown__menu-item:hover:active, .c-dropdown__menu-item:focus:active {
|
|
6232
|
+
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-link-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 81%, transparent) 100%);
|
|
6233
|
+
}
|
|
5726
6234
|
.c-dropdown__menu-item.is-active {
|
|
5727
6235
|
color: var(--atomix-dropdown-active-color);
|
|
5728
|
-
|
|
6236
|
+
position: relative;
|
|
6237
|
+
isolation: isolate;
|
|
6238
|
+
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-active-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 26%, transparent) 0%, transparent 60%);
|
|
6239
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6240
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
6241
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-dropdown-active-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-dropdown-active-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-active-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6242
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6243
|
+
}
|
|
6244
|
+
@media (hover: hover) {
|
|
6245
|
+
.c-dropdown__menu-item.is-active:hover {
|
|
6246
|
+
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-dropdown-active-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 40%, transparent) 0%, transparent 60%);
|
|
6247
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-dropdown-active-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-active-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-dropdown-active-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6248
|
+
}
|
|
6249
|
+
}
|
|
6250
|
+
.c-dropdown__menu-item.is-active:active {
|
|
6251
|
+
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-active-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 81%, transparent) 100%);
|
|
5729
6252
|
}
|
|
5730
6253
|
.c-dropdown__menu-item.is-disabled {
|
|
5731
6254
|
color: var(--atomix-dropdown-color);
|
|
@@ -5802,6 +6325,91 @@ a, a:hover {
|
|
|
5802
6325
|
.c-dropdown.is-open .c-dropdown__toggle-icon {
|
|
5803
6326
|
transform: rotate(-180deg);
|
|
5804
6327
|
}
|
|
6328
|
+
.c-dynamic-background {
|
|
6329
|
+
min-height: 200px;
|
|
6330
|
+
border-radius: 16px;
|
|
6331
|
+
}
|
|
6332
|
+
.c-dynamic-background--glass {
|
|
6333
|
+
position: relative;
|
|
6334
|
+
isolation: isolate;
|
|
6335
|
+
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, #8b5cf6 78%, transparent) 0%, color-mix(in srgb, #8b5cf6 65%, transparent) 40%, color-mix(in srgb, #8b5cf6 55%, transparent) 70%, color-mix(in srgb, #8b5cf6 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, #8b5cf6 26%, transparent) 0%, transparent 60%);
|
|
6336
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6337
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
6338
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, #8b5cf6 20%, transparent), 0 16px 32px 0 color-mix(in srgb, #8b5cf6 10%, transparent), 0 24px 48px 0 color-mix(in srgb, #8b5cf6 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6339
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6340
|
+
}
|
|
6341
|
+
@media (hover: hover) {
|
|
6342
|
+
.c-dynamic-background--glass:hover {
|
|
6343
|
+
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, #8b5cf6 96%, transparent) 0%, color-mix(in srgb, #8b5cf6 80%, transparent) 40%, color-mix(in srgb, #8b5cf6 68%, transparent) 70%, color-mix(in srgb, #8b5cf6 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, #8b5cf6 40%, transparent) 0%, transparent 60%);
|
|
6344
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, #8b5cf6 30%, transparent), 0 24px 48px 0 color-mix(in srgb, #8b5cf6 15%, transparent), 0 36px 72px 0 color-mix(in srgb, #8b5cf6 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6345
|
+
}
|
|
6346
|
+
}
|
|
6347
|
+
.c-dynamic-background--glass:active {
|
|
6348
|
+
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, #8b5cf6 108%, transparent) 0%, color-mix(in srgb, #8b5cf6 90%, transparent) 50%, color-mix(in srgb, #8b5cf6 81%, transparent) 100%);
|
|
6349
|
+
}
|
|
6350
|
+
.c-dynamic-background--solid {
|
|
6351
|
+
position: relative;
|
|
6352
|
+
isolation: isolate;
|
|
6353
|
+
background: linear-gradient(135deg, rgb(156.1976744186, 116.1656976744, 247.3343023256) 0%, #8b5cf6 50%, rgb(121.8023255814, 67.8343023256, 244.6656976744) 100%);
|
|
6354
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6355
|
+
}
|
|
6356
|
+
.c-dynamic-background--mesh {
|
|
6357
|
+
position: relative;
|
|
6358
|
+
isolation: isolate;
|
|
6359
|
+
background: radial-gradient(circle at 20% 30%, color-mix(in srgb, #8b5cf6 40%, transparent) 0%, transparent 50%), radial-gradient(circle at 80% 70%, color-mix(in srgb, #8b5cf6 35%, transparent) 0%, transparent 50%), radial-gradient(circle at 50% 50%, color-mix(in srgb, #8b5cf6 65%, transparent) 0%, color-mix(in srgb, #8b5cf6 39%, transparent) 100%);
|
|
6360
|
+
-webkit-backdrop-filter: blur(16px);
|
|
6361
|
+
backdrop-filter: blur(16px);
|
|
6362
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, #8b5cf6 20%, transparent), 0 16px 32px 0 color-mix(in srgb, #8b5cf6 10%, transparent), 0 24px 48px 0 color-mix(in srgb, #8b5cf6 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6363
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6364
|
+
}
|
|
6365
|
+
@media (hover: hover) {
|
|
6366
|
+
.c-dynamic-background--mesh:hover {
|
|
6367
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, #8b5cf6 30%, transparent), 0 24px 48px 0 color-mix(in srgb, #8b5cf6 15%, transparent), 0 36px 72px 0 color-mix(in srgb, #8b5cf6 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6368
|
+
}
|
|
6369
|
+
}
|
|
6370
|
+
.c-dynamic-background--shimmer {
|
|
6371
|
+
position: relative;
|
|
6372
|
+
isolation: isolate;
|
|
6373
|
+
background: color-mix(in srgb, #8b5cf6 75%, transparent);
|
|
6374
|
+
overflow: hidden;
|
|
6375
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6376
|
+
}
|
|
6377
|
+
.c-dynamic-background--shimmer::before {
|
|
6378
|
+
content: "";
|
|
6379
|
+
position: absolute;
|
|
6380
|
+
inset: 0;
|
|
6381
|
+
border-radius: inherit;
|
|
6382
|
+
pointer-events: none;
|
|
6383
|
+
z-index: 1;
|
|
6384
|
+
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
|
|
6385
|
+
transform: translateX(-100%);
|
|
6386
|
+
animation: shimmer 3s infinite;
|
|
6387
|
+
}
|
|
6388
|
+
.c-dynamic-background--with-border::before {
|
|
6389
|
+
content: "";
|
|
6390
|
+
position: absolute;
|
|
6391
|
+
inset: 0;
|
|
6392
|
+
border-radius: inherit;
|
|
6393
|
+
padding: 1px;
|
|
6394
|
+
background: linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06) 100%);
|
|
6395
|
+
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
6396
|
+
-webkit-mask-composite: xor;
|
|
6397
|
+
mask-composite: exclude;
|
|
6398
|
+
pointer-events: none;
|
|
6399
|
+
z-index: 1;
|
|
6400
|
+
}
|
|
6401
|
+
.c-dynamic-background--with-noise::after {
|
|
6402
|
+
content: "";
|
|
6403
|
+
position: absolute;
|
|
6404
|
+
inset: 0;
|
|
6405
|
+
border-radius: inherit;
|
|
6406
|
+
opacity: 0.03;
|
|
6407
|
+
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' /%3E%3C/svg%3E");
|
|
6408
|
+
background-size: 200px;
|
|
6409
|
+
pointer-events: none;
|
|
6410
|
+
mix-blend-mode: overlay;
|
|
6411
|
+
z-index: 2;
|
|
6412
|
+
}
|
|
5805
6413
|
.c-edge-panel {
|
|
5806
6414
|
--atomix-edge-panel-zindex: 5;
|
|
5807
6415
|
--atomix-edge-panel-width: 15rem;
|
|
@@ -5825,11 +6433,26 @@ a, a:hover {
|
|
|
5825
6433
|
.c-edge-panel__backdrop {
|
|
5826
6434
|
position: absolute;
|
|
5827
6435
|
inset: 0;
|
|
5828
|
-
|
|
6436
|
+
position: relative;
|
|
6437
|
+
isolation: isolate;
|
|
6438
|
+
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%);
|
|
6439
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6440
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
6441
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5829
6443
|
opacity: 0;
|
|
5830
6444
|
z-index: 1;
|
|
5831
6445
|
transition: opacity var(--atomix-edge-panel-animation-duration) ease;
|
|
5832
6446
|
}
|
|
6447
|
+
@media (hover: hover) {
|
|
6448
|
+
.c-edge-panel__backdrop:hover {
|
|
6449
|
+
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-edge-panel-backdrop-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 40%, transparent) 0%, transparent 60%);
|
|
6450
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6451
|
+
}
|
|
6452
|
+
}
|
|
6453
|
+
.c-edge-panel__backdrop:active {
|
|
6454
|
+
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-edge-panel-backdrop-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 81%, transparent) 100%);
|
|
6455
|
+
}
|
|
5833
6456
|
.c-edge-panel__backdrop.is-animating {
|
|
5834
6457
|
animation: fadeIn 0.3s ease forwards;
|
|
5835
6458
|
}
|
|
@@ -5841,13 +6464,28 @@ a, a:hover {
|
|
|
5841
6464
|
color: var(--atomix-edge-panel-color);
|
|
5842
6465
|
width: var(--atomix-edge-panel-width);
|
|
5843
6466
|
height: 100%;
|
|
5844
|
-
|
|
6467
|
+
position: relative;
|
|
6468
|
+
isolation: isolate;
|
|
6469
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6471
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5845
6474
|
box-shadow: var(--atomix-edge-panel-shadow);
|
|
5846
6475
|
z-index: 2;
|
|
5847
6476
|
overflow: hidden;
|
|
5848
6477
|
display: flex;
|
|
5849
6478
|
flex-direction: column;
|
|
5850
6479
|
}
|
|
6480
|
+
@media (hover: hover) {
|
|
6481
|
+
.c-edge-panel__container:hover {
|
|
6482
|
+
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-edge-panel-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-bg) 40%, transparent) 0%, transparent 60%);
|
|
6483
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-edge-panel-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6484
|
+
}
|
|
6485
|
+
}
|
|
6486
|
+
.c-edge-panel__container:active {
|
|
6487
|
+
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-edge-panel-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-edge-panel-bg) 81%, transparent) 100%);
|
|
6488
|
+
}
|
|
5851
6489
|
.c-edge-panel__container.is-animating {
|
|
5852
6490
|
animation: slideIn var(--atomix-edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
5853
6491
|
}
|
|
@@ -5875,7 +6513,22 @@ a, a:hover {
|
|
|
5875
6513
|
transition: background-color 0.2s ease;
|
|
5876
6514
|
}
|
|
5877
6515
|
.c-edge-panel__close:hover {
|
|
5878
|
-
|
|
6516
|
+
position: relative;
|
|
6517
|
+
isolation: isolate;
|
|
6518
|
+
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(0, 0, 0, 0.05) 78%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent) 40%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 55%, transparent) 70%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 26%, transparent) 0%, transparent 60%);
|
|
6519
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6520
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
6521
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6522
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6523
|
+
}
|
|
6524
|
+
@media (hover: hover) {
|
|
6525
|
+
.c-edge-panel__close:hover:hover {
|
|
6526
|
+
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(0, 0, 0, 0.05) 96%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 80%, transparent) 40%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 68%, transparent) 70%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 40%, transparent) 0%, transparent 60%);
|
|
6527
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(0, 0, 0, 0.05) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6528
|
+
}
|
|
6529
|
+
}
|
|
6530
|
+
.c-edge-panel__close:hover:active {
|
|
6531
|
+
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, rgba(0, 0, 0, 0.05) 108%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 90%, transparent) 50%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 81%, transparent) 100%);
|
|
5879
6532
|
}
|
|
5880
6533
|
.c-edge-panel__close:focus-visible {
|
|
5881
6534
|
outline: 2px solid var(--atomix-primary);
|
|
@@ -6082,7 +6735,22 @@ a, a:hover {
|
|
|
6082
6735
|
padding: 0;
|
|
6083
6736
|
border-radius: inherit;
|
|
6084
6737
|
transition: opacity 0.3s ease;
|
|
6085
|
-
|
|
6738
|
+
position: relative;
|
|
6739
|
+
isolation: isolate;
|
|
6740
|
+
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%);
|
|
6741
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6742
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
6743
|
+
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);
|
|
6744
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6745
|
+
}
|
|
6746
|
+
@media (hover: hover) {
|
|
6747
|
+
.c-edge-panel--glass .c-edge-panel__glass-content:hover {
|
|
6748
|
+
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-edge-panel-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-bg) 40%, transparent) 0%, transparent 60%);
|
|
6749
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-edge-panel-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6750
|
+
}
|
|
6751
|
+
}
|
|
6752
|
+
.c-edge-panel--glass .c-edge-panel__glass-content:active {
|
|
6753
|
+
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-edge-panel-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-edge-panel-bg) 81%, transparent) 100%);
|
|
6086
6754
|
}
|
|
6087
6755
|
.c-edge-panel--glass .c-edge-panel__header {
|
|
6088
6756
|
background: transparent;
|
|
@@ -6106,10 +6774,25 @@ a, a:hover {
|
|
|
6106
6774
|
outline-color: rgba(255, 255, 255, 0.5);
|
|
6107
6775
|
}
|
|
6108
6776
|
.c-edge-panel--glass .c-edge-panel__backdrop {
|
|
6109
|
-
|
|
6777
|
+
position: relative;
|
|
6778
|
+
isolation: isolate;
|
|
6779
|
+
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%);
|
|
6780
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6781
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
6782
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6110
6784
|
animation: fadeIn 0.3s ease forwards;
|
|
6111
6785
|
z-index: 1;
|
|
6112
6786
|
}
|
|
6787
|
+
@media (hover: hover) {
|
|
6788
|
+
.c-edge-panel--glass .c-edge-panel__backdrop:hover {
|
|
6789
|
+
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-edge-panel-backdrop-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 40%, transparent) 0%, transparent 60%);
|
|
6790
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6791
|
+
}
|
|
6792
|
+
}
|
|
6793
|
+
.c-edge-panel--glass .c-edge-panel__backdrop:active {
|
|
6794
|
+
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-edge-panel-backdrop-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 81%, transparent) 100%);
|
|
6795
|
+
}
|
|
6113
6796
|
.c-edge-panel--glass .c-edge-panel__backdrop.is-animating-out {
|
|
6114
6797
|
animation: fadeOut 0.3s ease forwards;
|
|
6115
6798
|
}
|
|
@@ -6159,12 +6842,27 @@ a, a:hover {
|
|
|
6159
6842
|
--atomix-footer-section-toggle-padding: 0.75rem 0;
|
|
6160
6843
|
--atomix-footer-bg-rgb: var(--atomix-primary-bg);
|
|
6161
6844
|
--atomix-disabled-opacity: 0.6;
|
|
6162
|
-
|
|
6845
|
+
position: relative;
|
|
6846
|
+
isolation: isolate;
|
|
6847
|
+
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%);
|
|
6848
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6849
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
6850
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6163
6852
|
color: var(--atomix-footer-color);
|
|
6164
6853
|
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
6165
6854
|
padding: var(--atomix-footer-padding-y) 0;
|
|
6166
6855
|
position: relative;
|
|
6167
6856
|
}
|
|
6857
|
+
@media (hover: hover) {
|
|
6858
|
+
.c-footer:hover {
|
|
6859
|
+
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-footer-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-footer-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-footer-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-footer-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-footer-bg) 40%, transparent) 0%, transparent 60%);
|
|
6860
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-footer-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-footer-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-footer-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6861
|
+
}
|
|
6862
|
+
}
|
|
6863
|
+
.c-footer:active {
|
|
6864
|
+
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-footer-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-footer-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-footer-bg) 81%, transparent) 100%);
|
|
6865
|
+
}
|
|
6168
6866
|
.c-footer--glass {
|
|
6169
6867
|
padding: 0;
|
|
6170
6868
|
margin: 0;
|
|
@@ -6173,11 +6871,26 @@ a, a:hover {
|
|
|
6173
6871
|
background: transparent;
|
|
6174
6872
|
}
|
|
6175
6873
|
.c-footer--glass .c-footer__glass {
|
|
6176
|
-
|
|
6874
|
+
position: relative;
|
|
6875
|
+
isolation: isolate;
|
|
6876
|
+
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%);
|
|
6877
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6878
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
6879
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6177
6881
|
color: var(--atomix-footer-color);
|
|
6178
6882
|
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
6179
6883
|
padding: var(--atomix-footer-padding-y) 0;
|
|
6180
6884
|
}
|
|
6885
|
+
@media (hover: hover) {
|
|
6886
|
+
.c-footer--glass .c-footer__glass:hover {
|
|
6887
|
+
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-footer-bg-rgb), 0.5, true) 96%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 80%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 68%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 40%, transparent) 0%, transparent 60%);
|
|
6888
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6889
|
+
}
|
|
6890
|
+
}
|
|
6891
|
+
.c-footer--glass .c-footer__glass:active {
|
|
6892
|
+
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, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 108%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 90%, transparent) 50%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 81%, transparent) 100%);
|
|
6893
|
+
}
|
|
6181
6894
|
.c-footer__container {
|
|
6182
6895
|
display: flex;
|
|
6183
6896
|
flex-direction: column;
|
|
@@ -6404,7 +7117,13 @@ a, a:hover {
|
|
|
6404
7117
|
justify-content: center;
|
|
6405
7118
|
width: 2.5rem;
|
|
6406
7119
|
height: 2.5rem;
|
|
6407
|
-
|
|
7120
|
+
position: relative;
|
|
7121
|
+
isolation: isolate;
|
|
7122
|
+
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%);
|
|
7123
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7124
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
7125
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6408
7127
|
color: var(--atomix-primary-text-emphasis);
|
|
6409
7128
|
border-radius: 50%;
|
|
6410
7129
|
text-decoration: none;
|
|
@@ -6412,6 +7131,15 @@ a, a:hover {
|
|
|
6412
7131
|
position: relative;
|
|
6413
7132
|
overflow: hidden;
|
|
6414
7133
|
}
|
|
7134
|
+
@media (hover: hover) {
|
|
7135
|
+
.c-footer__social-link:hover {
|
|
7136
|
+
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-secondary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
7137
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7138
|
+
}
|
|
7139
|
+
}
|
|
7140
|
+
.c-footer__social-link:active {
|
|
7141
|
+
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-secondary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 81%, transparent) 100%);
|
|
7142
|
+
}
|
|
6415
7143
|
.c-footer__social-link::before {
|
|
6416
7144
|
content: "";
|
|
6417
7145
|
position: absolute;
|
|
@@ -6421,11 +7149,26 @@ a, a:hover {
|
|
|
6421
7149
|
transition: transform 0.6s ease;
|
|
6422
7150
|
}
|
|
6423
7151
|
.c-footer__social-link:hover, .c-footer__social-link:focus {
|
|
6424
|
-
|
|
7152
|
+
position: relative;
|
|
7153
|
+
isolation: isolate;
|
|
7154
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7156
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6425
7159
|
color: var(--atomix-component-active-color);
|
|
6426
7160
|
transform: translateY(-3px) scale(1.05);
|
|
6427
7161
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
6428
7162
|
}
|
|
7163
|
+
@media (hover: hover) {
|
|
7164
|
+
.c-footer__social-link:hover:hover, .c-footer__social-link:focus:hover {
|
|
7165
|
+
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-primary) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-primary) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-primary) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary) 40%, transparent) 0%, transparent 60%);
|
|
7166
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-primary) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7167
|
+
}
|
|
7168
|
+
}
|
|
7169
|
+
.c-footer__social-link:hover:active, .c-footer__social-link:focus:active {
|
|
7170
|
+
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-primary) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-primary) 81%, transparent) 100%);
|
|
7171
|
+
}
|
|
6429
7172
|
.c-footer__social-link:hover::before, .c-footer__social-link:focus::before {
|
|
6430
7173
|
transform: translateX(100%);
|
|
6431
7174
|
}
|
|
@@ -6489,13 +7232,28 @@ a, a:hover {
|
|
|
6489
7232
|
background: linear-gradient(135deg, #25d366, #66bb6a);
|
|
6490
7233
|
}
|
|
6491
7234
|
.c-footer__newsletter {
|
|
6492
|
-
|
|
7235
|
+
position: relative;
|
|
7236
|
+
isolation: isolate;
|
|
7237
|
+
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%);
|
|
7238
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7239
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
7240
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6493
7242
|
padding: 1.5rem;
|
|
6494
7243
|
border-radius: 0.5rem;
|
|
6495
7244
|
border: 1px solid var(--atomix-border-subtle);
|
|
6496
7245
|
position: relative;
|
|
6497
7246
|
overflow: hidden;
|
|
6498
7247
|
}
|
|
7248
|
+
@media (hover: hover) {
|
|
7249
|
+
.c-footer__newsletter:hover {
|
|
7250
|
+
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, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 96%, transparent) 0%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 80%, transparent) 40%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 68%, transparent) 70%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 84%, 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)) 40%, transparent) 0%, transparent 60%);
|
|
7251
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 30%, 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)) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7252
|
+
}
|
|
7253
|
+
}
|
|
7254
|
+
.c-footer__newsletter:active {
|
|
7255
|
+
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, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 108%, transparent) 0%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 90%, transparent) 50%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 81%, transparent) 100%);
|
|
7256
|
+
}
|
|
6499
7257
|
.c-footer__newsletter::before {
|
|
6500
7258
|
content: "";
|
|
6501
7259
|
position: absolute;
|
|
@@ -6549,7 +7307,13 @@ a, a:hover {
|
|
|
6549
7307
|
flex: 1 1;
|
|
6550
7308
|
padding: 0.75rem 1rem;
|
|
6551
7309
|
font-size: 0.875rem;
|
|
6552
|
-
|
|
7310
|
+
position: relative;
|
|
7311
|
+
isolation: isolate;
|
|
7312
|
+
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%);
|
|
7313
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7314
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
7315
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6553
7317
|
color: var(--atomix-primary-text-emphasis);
|
|
6554
7318
|
border: 1px solid var(--atomix-primary-border);
|
|
6555
7319
|
border-radius: 0.375rem;
|
|
@@ -6557,6 +7321,15 @@ a, a:hover {
|
|
|
6557
7321
|
transition: all 0.3s ease;
|
|
6558
7322
|
box-sizing: border-box;
|
|
6559
7323
|
}
|
|
7324
|
+
@media (hover: hover) {
|
|
7325
|
+
.c-footer__newsletter-input:hover {
|
|
7326
|
+
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-primary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
7327
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-primary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7328
|
+
}
|
|
7329
|
+
}
|
|
7330
|
+
.c-footer__newsletter-input:active {
|
|
7331
|
+
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-primary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 81%, transparent) 100%);
|
|
7332
|
+
}
|
|
6560
7333
|
.c-footer__newsletter-input:focus {
|
|
6561
7334
|
border-color: var(--atomix-primary);
|
|
6562
7335
|
box-shadow: 0 0 0 0.125rem rgba(var(--atomix-primary-rgb), 0.25);
|
|
@@ -6579,7 +7352,13 @@ a, a:hover {
|
|
|
6579
7352
|
}
|
|
6580
7353
|
.c-footer__newsletter-button {
|
|
6581
7354
|
padding: 0.75rem 1.5rem;
|
|
6582
|
-
|
|
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);
|
|
6583
7362
|
color: var(--atomix-brand-text-emphasis);
|
|
6584
7363
|
border: none;
|
|
6585
7364
|
border-radius: 0.375rem;
|
|
@@ -6590,6 +7369,15 @@ a, a:hover {
|
|
|
6590
7369
|
position: relative;
|
|
6591
7370
|
overflow: hidden;
|
|
6592
7371
|
}
|
|
7372
|
+
@media (hover: hover) {
|
|
7373
|
+
.c-footer__newsletter-button:hover {
|
|
7374
|
+
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-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
7375
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7376
|
+
}
|
|
7377
|
+
}
|
|
7378
|
+
.c-footer__newsletter-button:active {
|
|
7379
|
+
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%);
|
|
7380
|
+
}
|
|
6593
7381
|
.c-footer__newsletter-button::before {
|
|
6594
7382
|
content: "";
|
|
6595
7383
|
position: absolute;
|
|
@@ -6599,10 +7387,25 @@ a, a:hover {
|
|
|
6599
7387
|
transition: transform 0.6s ease;
|
|
6600
7388
|
}
|
|
6601
7389
|
.c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
|
|
6602
|
-
|
|
7390
|
+
position: relative;
|
|
7391
|
+
isolation: isolate;
|
|
7392
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7394
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6603
7397
|
transform: translateY(-2px);
|
|
6604
7398
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
6605
7399
|
}
|
|
7400
|
+
@media (hover: hover) {
|
|
7401
|
+
.c-footer__newsletter-button:hover:hover, .c-footer__newsletter-button:focus:hover {
|
|
7402
|
+
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-secondary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
7403
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7404
|
+
}
|
|
7405
|
+
}
|
|
7406
|
+
.c-footer__newsletter-button:hover:active, .c-footer__newsletter-button:focus:active {
|
|
7407
|
+
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-secondary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 81%, transparent) 100%);
|
|
7408
|
+
}
|
|
6606
7409
|
.c-footer__newsletter-button:hover::before, .c-footer__newsletter-button:focus::before {
|
|
6607
7410
|
transform: translateX(100%);
|
|
6608
7411
|
}
|
|
@@ -6644,7 +7447,13 @@ a, a:hover {
|
|
|
6644
7447
|
align-items: center;
|
|
6645
7448
|
gap: 0.5rem;
|
|
6646
7449
|
padding: 0.75rem 1.25rem;
|
|
6647
|
-
|
|
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);
|
|
6648
7457
|
border: 1px solid var(--atomix-border-subtle);
|
|
6649
7458
|
color: var(--atomix-primary-text-emphasis);
|
|
6650
7459
|
font-size: 0.875rem;
|
|
@@ -6657,6 +7466,15 @@ a, a:hover {
|
|
|
6657
7466
|
text-decoration: none;
|
|
6658
7467
|
outline: none;
|
|
6659
7468
|
}
|
|
7469
|
+
@media (hover: hover) {
|
|
7470
|
+
.c-footer__back-to-top:hover {
|
|
7471
|
+
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-secondary-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg) 40%, transparent) 0%, transparent 60%);
|
|
7472
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-secondary-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-secondary-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7473
|
+
}
|
|
7474
|
+
}
|
|
7475
|
+
.c-footer__back-to-top:active {
|
|
7476
|
+
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-secondary-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-secondary-bg) 81%, transparent) 100%);
|
|
7477
|
+
}
|
|
6660
7478
|
.c-footer__back-to-top::before {
|
|
6661
7479
|
content: "";
|
|
6662
7480
|
position: absolute;
|
|
@@ -6667,11 +7485,26 @@ a, a:hover {
|
|
|
6667
7485
|
}
|
|
6668
7486
|
.c-footer__back-to-top:hover, .c-footer__back-to-top:focus {
|
|
6669
7487
|
color: var(--atomix-secondary-text-emphasis);
|
|
6670
|
-
|
|
7488
|
+
position: relative;
|
|
7489
|
+
isolation: isolate;
|
|
7490
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7492
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6671
7495
|
border-color: var(--atomix-primary);
|
|
6672
7496
|
transform: translateY(-3px);
|
|
6673
7497
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
|
6674
7498
|
}
|
|
7499
|
+
@media (hover: hover) {
|
|
7500
|
+
.c-footer__back-to-top:hover:hover, .c-footer__back-to-top:focus:hover {
|
|
7501
|
+
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-primary) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-primary) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-primary) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary) 40%, transparent) 0%, transparent 60%);
|
|
7502
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-primary) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7503
|
+
}
|
|
7504
|
+
}
|
|
7505
|
+
.c-footer__back-to-top:hover:active, .c-footer__back-to-top:focus:active {
|
|
7506
|
+
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-primary) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-primary) 81%, transparent) 100%);
|
|
7507
|
+
}
|
|
6675
7508
|
.c-footer__back-to-top:hover::before, .c-footer__back-to-top:focus::before {
|
|
6676
7509
|
transform: translateX(100%);
|
|
6677
7510
|
}
|
|
@@ -7188,9 +8021,24 @@ a, a:hover {
|
|
|
7188
8021
|
display: grid;
|
|
7189
8022
|
place-items: center;
|
|
7190
8023
|
padding: var(--atomix-hero-padding-y) var(--atomix-hero-padding-x);
|
|
7191
|
-
|
|
8024
|
+
position: relative;
|
|
8025
|
+
isolation: isolate;
|
|
8026
|
+
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%);
|
|
8027
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8028
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8029
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7192
8031
|
overflow: hidden;
|
|
7193
8032
|
}
|
|
8033
|
+
@media (hover: hover) {
|
|
8034
|
+
.c-hero:hover {
|
|
8035
|
+
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-hero-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-hero-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-hero-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-hero-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-hero-bg) 40%, transparent) 0%, transparent 60%);
|
|
8036
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-hero-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-hero-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-hero-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8037
|
+
}
|
|
8038
|
+
}
|
|
8039
|
+
.c-hero:active {
|
|
8040
|
+
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-hero-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-hero-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-hero-bg) 81%, transparent) 100%);
|
|
8041
|
+
}
|
|
7194
8042
|
.c-hero__bg {
|
|
7195
8043
|
position: absolute;
|
|
7196
8044
|
inset: 0;
|
|
@@ -7211,10 +8059,25 @@ a, a:hover {
|
|
|
7211
8059
|
.c-hero__overlay {
|
|
7212
8060
|
position: absolute;
|
|
7213
8061
|
inset: 0;
|
|
7214
|
-
|
|
8062
|
+
position: relative;
|
|
8063
|
+
isolation: isolate;
|
|
8064
|
+
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%);
|
|
8065
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8066
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8067
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7215
8069
|
opacity: var(--atomix-hero-overlay-opacity);
|
|
7216
8070
|
z-index: 1;
|
|
7217
8071
|
}
|
|
8072
|
+
@media (hover: hover) {
|
|
8073
|
+
.c-hero__overlay:hover {
|
|
8074
|
+
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-hero-overlay) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-hero-overlay) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-hero-overlay) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-hero-overlay) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-hero-overlay) 40%, transparent) 0%, transparent 60%);
|
|
8075
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-hero-overlay) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-hero-overlay) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-hero-overlay) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8076
|
+
}
|
|
8077
|
+
}
|
|
8078
|
+
.c-hero__overlay:active {
|
|
8079
|
+
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-hero-overlay) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-hero-overlay) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-hero-overlay) 81%, transparent) 100%);
|
|
8080
|
+
}
|
|
7218
8081
|
.c-hero__container {
|
|
7219
8082
|
position: relative;
|
|
7220
8083
|
}
|
|
@@ -7384,12 +8247,27 @@ a, a:hover {
|
|
|
7384
8247
|
border: var(--atomix-input-border-width) solid var(--atomix-input-border-color);
|
|
7385
8248
|
border-radius: var(--atomix-input-border-radius);
|
|
7386
8249
|
outline: none;
|
|
7387
|
-
|
|
8250
|
+
position: relative;
|
|
8251
|
+
isolation: isolate;
|
|
8252
|
+
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%);
|
|
8253
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8254
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8255
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7388
8257
|
transition-property: all;
|
|
7389
8258
|
transition-duration: 0.2s;
|
|
7390
8259
|
transition-timing-function: ease-in-out;
|
|
7391
8260
|
transition-delay: 0s;
|
|
7392
8261
|
}
|
|
8262
|
+
@media (hover: hover) {
|
|
8263
|
+
.c-input:hover {
|
|
8264
|
+
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-input-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 40%, transparent) 0%, transparent 60%);
|
|
8265
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-input-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8266
|
+
}
|
|
8267
|
+
}
|
|
8268
|
+
.c-input:active {
|
|
8269
|
+
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-input-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-input-bg) 81%, transparent) 100%);
|
|
8270
|
+
}
|
|
7393
8271
|
.c-input:focus, .c-input:hover {
|
|
7394
8272
|
--atomix-input-border-color: var(--atomix-primary-border-subtle);
|
|
7395
8273
|
}
|
|
@@ -7457,20 +8335,65 @@ a, a:hover {
|
|
|
7457
8335
|
pointer-events: none;
|
|
7458
8336
|
}
|
|
7459
8337
|
.c-input--glass {
|
|
7460
|
-
|
|
8338
|
+
position: relative;
|
|
8339
|
+
isolation: isolate;
|
|
8340
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8342
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7461
8345
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
7462
8346
|
border-color: color-mix(in srgb, var(--atomix-input-border-color) 50%, transparent);
|
|
7463
8347
|
}
|
|
8348
|
+
@media (hover: hover) {
|
|
8349
|
+
.c-input--glass:hover {
|
|
8350
|
+
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-input-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 40%, transparent) 0%, transparent 60%);
|
|
8351
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-input-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8352
|
+
}
|
|
8353
|
+
}
|
|
8354
|
+
.c-input--glass:active {
|
|
8355
|
+
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-input-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-input-bg) 81%, transparent) 100%);
|
|
8356
|
+
}
|
|
7464
8357
|
.c-input--glass:focus, .c-input--glass:hover {
|
|
7465
|
-
|
|
8358
|
+
position: relative;
|
|
8359
|
+
isolation: isolate;
|
|
8360
|
+
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) 103%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 90%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 80%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 93%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 36%, transparent) 0%, transparent 60%);
|
|
8361
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8362
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8363
|
+
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);
|
|
8364
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8365
|
+
}
|
|
8366
|
+
@media (hover: hover) {
|
|
8367
|
+
.c-input--glass:focus:hover, .c-input--glass:hover:hover {
|
|
8368
|
+
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-input-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 40%, transparent) 0%, transparent 60%);
|
|
8369
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-input-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8370
|
+
}
|
|
8371
|
+
}
|
|
8372
|
+
.c-input--glass:focus:active, .c-input--glass:hover:active {
|
|
8373
|
+
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-input-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-input-bg) 81%, transparent) 100%);
|
|
7466
8374
|
}
|
|
7467
8375
|
.c-input--glass.c-input--textarea {
|
|
7468
8376
|
resize: vertical;
|
|
7469
8377
|
}
|
|
7470
8378
|
.c-input--glass:disabled, .c-input--glass.is-disabled {
|
|
7471
|
-
|
|
8379
|
+
position: relative;
|
|
8380
|
+
isolation: isolate;
|
|
8381
|
+
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%);
|
|
8382
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8383
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8384
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7472
8386
|
opacity: 0.6;
|
|
7473
8387
|
}
|
|
8388
|
+
@media (hover: hover) {
|
|
8389
|
+
.c-input--glass:disabled:hover, .c-input--glass.is-disabled:hover {
|
|
8390
|
+
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-input-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 40%, transparent) 0%, transparent 60%);
|
|
8391
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-input-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8392
|
+
}
|
|
8393
|
+
}
|
|
8394
|
+
.c-input--glass:disabled:active, .c-input--glass.is-disabled:active {
|
|
8395
|
+
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-input-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-input-bg) 81%, transparent) 100%);
|
|
8396
|
+
}
|
|
7474
8397
|
.c-list-group {
|
|
7475
8398
|
--atomix-list-group-width: 100%;
|
|
7476
8399
|
--atomix-list-group-bg: ;
|
|
@@ -7489,14 +8412,44 @@ a, a:hover {
|
|
|
7489
8412
|
list-style: none;
|
|
7490
8413
|
width: 100%;
|
|
7491
8414
|
max-width: var(--atomix-list-group-width);
|
|
7492
|
-
|
|
8415
|
+
position: relative;
|
|
8416
|
+
isolation: isolate;
|
|
8417
|
+
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-group-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-list-group-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-list-group-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-list-group-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-list-group-bg) 26%, transparent) 0%, transparent 60%);
|
|
8418
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8419
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8420
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-list-group-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-list-group-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-list-group-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8421
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8422
|
+
}
|
|
8423
|
+
@media (hover: hover) {
|
|
8424
|
+
.c-list-group:hover {
|
|
8425
|
+
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-list-group-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-list-group-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-list-group-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-list-group-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-list-group-bg) 40%, transparent) 0%, transparent 60%);
|
|
8426
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-list-group-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-list-group-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-list-group-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8427
|
+
}
|
|
8428
|
+
}
|
|
8429
|
+
.c-list-group:active {
|
|
8430
|
+
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-list-group-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-list-group-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-list-group-bg) 81%, transparent) 100%);
|
|
7493
8431
|
}
|
|
7494
8432
|
.c-list-group__item {
|
|
7495
8433
|
padding: var(--atomix-list-group-item-padding-y) var(--atomix-list-group-item-padding-x);
|
|
7496
8434
|
font-size: var(--atomix-list-group-item-font-size);
|
|
7497
8435
|
color: var(--atomix-list-group-item-color);
|
|
7498
8436
|
border-bottom: var(--atomix-list-group-item-border-width) solid var(--atomix-list-group-item-border-color);
|
|
7499
|
-
|
|
8437
|
+
position: relative;
|
|
8438
|
+
isolation: isolate;
|
|
8439
|
+
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-group-item-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-list-group-item-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-list-group-item-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-list-group-item-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-list-group-item-bg) 26%, transparent) 0%, transparent 60%);
|
|
8440
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8441
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8442
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-list-group-item-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-list-group-item-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-list-group-item-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8443
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8444
|
+
}
|
|
8445
|
+
@media (hover: hover) {
|
|
8446
|
+
.c-list-group__item:hover {
|
|
8447
|
+
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-list-group-item-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-list-group-item-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-list-group-item-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-list-group-item-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-list-group-item-bg) 40%, transparent) 0%, transparent 60%);
|
|
8448
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-list-group-item-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-list-group-item-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-list-group-item-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8449
|
+
}
|
|
8450
|
+
}
|
|
8451
|
+
.c-list-group__item:active {
|
|
8452
|
+
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-list-group-item-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-list-group-item-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-list-group-item-bg) 81%, transparent) 100%);
|
|
7500
8453
|
}
|
|
7501
8454
|
.c-list-group__item--primary {
|
|
7502
8455
|
--atomix-list-group-item-bg: var(--atomix-brand-bg-subtle);
|
|
@@ -7562,9 +8515,24 @@ a, a:hover {
|
|
|
7562
8515
|
left: 0;
|
|
7563
8516
|
width: var(--atomix-list-item-dash-width);
|
|
7564
8517
|
height: var(--atomix-list-item-dash-height);
|
|
7565
|
-
|
|
8518
|
+
position: relative;
|
|
8519
|
+
isolation: isolate;
|
|
8520
|
+
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%);
|
|
8521
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8522
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8523
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7566
8525
|
transform: translateY(-50%);
|
|
7567
8526
|
}
|
|
8527
|
+
@media (hover: hover) {
|
|
8528
|
+
.c-list--dash .c-list__item::before:hover {
|
|
8529
|
+
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-list-color) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-list-color) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-list-color) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-list-color) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-list-color) 40%, transparent) 0%, transparent 60%);
|
|
8530
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-list-color) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-list-color) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-list-color) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8531
|
+
}
|
|
8532
|
+
}
|
|
8533
|
+
.c-list--dash .c-list__item::before:active {
|
|
8534
|
+
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-list-color) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-list-color) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-list-color) 81%, transparent) 100%);
|
|
8535
|
+
}
|
|
7568
8536
|
.c-list--number {
|
|
7569
8537
|
list-style-type: decimal;
|
|
7570
8538
|
}
|
|
@@ -7602,11 +8570,26 @@ a, a:hover {
|
|
|
7602
8570
|
display: inline-block;
|
|
7603
8571
|
min-width: var(--atomix-menu-min-width);
|
|
7604
8572
|
padding: var(--atomix-menu-item-padding-y) var(--atomix-menu-item-padding-x);
|
|
7605
|
-
|
|
8573
|
+
position: relative;
|
|
8574
|
+
isolation: isolate;
|
|
8575
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8577
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7606
8580
|
border-radius: var(--atomix-menu-border-radius);
|
|
7607
8581
|
box-shadow: var(--atomix-menu-box-shadow);
|
|
7608
8582
|
z-index: 5;
|
|
7609
8583
|
}
|
|
8584
|
+
@media (hover: hover) {
|
|
8585
|
+
.c-menu:hover {
|
|
8586
|
+
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-menu-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-bg) 40%, transparent) 0%, transparent 60%);
|
|
8587
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-menu-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-menu-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8588
|
+
}
|
|
8589
|
+
}
|
|
8590
|
+
.c-menu:active {
|
|
8591
|
+
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-menu-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-menu-bg) 81%, transparent) 100%);
|
|
8592
|
+
}
|
|
7610
8593
|
.c-menu__container {
|
|
7611
8594
|
width: 100%;
|
|
7612
8595
|
max-width: var(--atomix-menu-container-width);
|
|
@@ -7648,7 +8631,13 @@ a, a:hover {
|
|
|
7648
8631
|
color: var(--atomix-menu-item-color);
|
|
7649
8632
|
font-size: var(--atomix-menu-item-font-size);
|
|
7650
8633
|
font-weight: var(--atomix-menu-item-font-weight);
|
|
7651
|
-
|
|
8634
|
+
position: relative;
|
|
8635
|
+
isolation: isolate;
|
|
8636
|
+
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%);
|
|
8637
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8638
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8639
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7652
8641
|
border-radius: var(--atomix-menu-border-radius);
|
|
7653
8642
|
cursor: pointer;
|
|
7654
8643
|
transition-property: all;
|
|
@@ -7656,12 +8645,51 @@ a, a:hover {
|
|
|
7656
8645
|
transition-timing-function: ease-in-out;
|
|
7657
8646
|
transition-delay: 0s;
|
|
7658
8647
|
}
|
|
8648
|
+
@media (hover: hover) {
|
|
8649
|
+
.c-menu__link:hover {
|
|
8650
|
+
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-menu-item-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-item-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-item-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-item-bg) 40%, transparent) 0%, transparent 60%);
|
|
8651
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-menu-item-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-item-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-menu-item-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8652
|
+
}
|
|
8653
|
+
}
|
|
8654
|
+
.c-menu__link:active {
|
|
8655
|
+
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-menu-item-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-menu-item-bg) 81%, transparent) 100%);
|
|
8656
|
+
}
|
|
7659
8657
|
.c-menu__link:hover {
|
|
7660
8658
|
color: var(--atomix-menu-item-color);
|
|
7661
|
-
|
|
8659
|
+
position: relative;
|
|
8660
|
+
isolation: isolate;
|
|
8661
|
+
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-hover) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 26%, transparent) 0%, transparent 60%);
|
|
8662
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8663
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8664
|
+
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-hover) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-menu-item-bg-hover) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-item-bg-hover) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8665
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8666
|
+
}
|
|
8667
|
+
@media (hover: hover) {
|
|
8668
|
+
.c-menu__link:hover:hover {
|
|
8669
|
+
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-menu-item-bg-hover) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 40%, transparent) 0%, transparent 60%);
|
|
8670
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-menu-item-bg-hover) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-item-bg-hover) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-menu-item-bg-hover) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8671
|
+
}
|
|
8672
|
+
}
|
|
8673
|
+
.c-menu__link:hover:active {
|
|
8674
|
+
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-menu-item-bg-hover) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 81%, transparent) 100%);
|
|
7662
8675
|
}
|
|
7663
8676
|
.c-menu__link:focus, .c-menu__link:active, .c-menu__link.is-active {
|
|
7664
|
-
|
|
8677
|
+
position: relative;
|
|
8678
|
+
isolation: isolate;
|
|
8679
|
+
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-active) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 26%, transparent) 0%, transparent 60%);
|
|
8680
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8681
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8682
|
+
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-active) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-menu-item-bg-active) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-item-bg-active) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8683
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8684
|
+
}
|
|
8685
|
+
@media (hover: hover) {
|
|
8686
|
+
.c-menu__link:focus:hover, .c-menu__link:active:hover, .c-menu__link.is-active:hover {
|
|
8687
|
+
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-menu-item-bg-active) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 40%, transparent) 0%, transparent 60%);
|
|
8688
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-menu-item-bg-active) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-item-bg-active) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-menu-item-bg-active) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8689
|
+
}
|
|
8690
|
+
}
|
|
8691
|
+
.c-menu__link:focus:active, .c-menu__link:active:active, .c-menu__link.is-active:active {
|
|
8692
|
+
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-menu-item-bg-active) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 81%, transparent) 100%);
|
|
7665
8693
|
}
|
|
7666
8694
|
.c-menu__icon {
|
|
7667
8695
|
font-size: var(--atomix-menu-item-icon-size);
|
|
@@ -7831,7 +8859,22 @@ a, a:hover {
|
|
|
7831
8859
|
padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
|
|
7832
8860
|
border-radius: var(--atomix-messages-border-radius);
|
|
7833
8861
|
border: var(--atomix-messages-border-width) solid var(--atomix-messages-border-color);
|
|
7834
|
-
|
|
8862
|
+
position: relative;
|
|
8863
|
+
isolation: isolate;
|
|
8864
|
+
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%);
|
|
8865
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8866
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8867
|
+
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);
|
|
8868
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8869
|
+
}
|
|
8870
|
+
@media (hover: hover) {
|
|
8871
|
+
.c-messages:hover {
|
|
8872
|
+
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-messages-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-bg) 40%, transparent) 0%, transparent 60%);
|
|
8873
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-messages-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-messages-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8874
|
+
}
|
|
8875
|
+
}
|
|
8876
|
+
.c-messages:active {
|
|
8877
|
+
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-messages-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-messages-bg) 81%, transparent) 100%);
|
|
7835
8878
|
}
|
|
7836
8879
|
.c-messages__body {
|
|
7837
8880
|
max-height: var(--atomix-messages-body-height);
|
|
@@ -7881,15 +8924,45 @@ a, a:hover {
|
|
|
7881
8924
|
color: var(--atomix-messages-text-color);
|
|
7882
8925
|
font-size: var(--atomix-messages-text-font-size);
|
|
7883
8926
|
padding: var(--atomix-messages-text-padding-y) var(--atomix-messages-text-padding-x);
|
|
7884
|
-
|
|
8927
|
+
position: relative;
|
|
8928
|
+
isolation: isolate;
|
|
8929
|
+
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%);
|
|
8930
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8931
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8932
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7885
8934
|
border-radius: 0.25rem var(--atomix-messages-text-border-radius) var(--atomix-messages-text-border-radius) 0.25rem;
|
|
7886
8935
|
}
|
|
8936
|
+
@media (hover: hover) {
|
|
8937
|
+
.c-messages__text:hover {
|
|
8938
|
+
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-messages-text-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-text-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-text-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-text-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-text-bg) 40%, transparent) 0%, transparent 60%);
|
|
8939
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-messages-text-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-text-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-messages-text-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8940
|
+
}
|
|
8941
|
+
}
|
|
8942
|
+
.c-messages__text:active {
|
|
8943
|
+
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-messages-text-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-text-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-messages-text-bg) 81%, transparent) 100%);
|
|
8944
|
+
}
|
|
7887
8945
|
.c-messages__file {
|
|
7888
8946
|
display: flex;
|
|
7889
8947
|
flex-wrap: wrap;
|
|
7890
8948
|
padding: var(--atomix-messages-file-padding-y) var(--atomix-messages-file-padding-x);
|
|
7891
8949
|
border-radius: 0.25rem var(--atomix-messages-file-border-radius) var(--atomix-messages-file-border-radius) 0.25rem;
|
|
7892
|
-
|
|
8950
|
+
position: relative;
|
|
8951
|
+
isolation: isolate;
|
|
8952
|
+
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-file-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-file-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-file-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-file-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-file-bg) 26%, transparent) 0%, transparent 60%);
|
|
8953
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8954
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8955
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-messages-file-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-messages-file-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-file-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8956
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8957
|
+
}
|
|
8958
|
+
@media (hover: hover) {
|
|
8959
|
+
.c-messages__file:hover {
|
|
8960
|
+
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-messages-file-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-file-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-file-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-file-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-file-bg) 40%, transparent) 0%, transparent 60%);
|
|
8961
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-messages-file-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-file-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-messages-file-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8962
|
+
}
|
|
8963
|
+
}
|
|
8964
|
+
.c-messages__file:active {
|
|
8965
|
+
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-messages-file-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-file-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-messages-file-bg) 81%, transparent) 100%);
|
|
7893
8966
|
}
|
|
7894
8967
|
.c-messages__file-icon {
|
|
7895
8968
|
display: grid !important;
|
|
@@ -7899,9 +8972,24 @@ a, a:hover {
|
|
|
7899
8972
|
height: var(--atomix-messages-file-icon-size);
|
|
7900
8973
|
color: var(--atomix-tertiary-text-emphasis);
|
|
7901
8974
|
margin-right: var(--atomix-messages-file-icon-margin-right);
|
|
7902
|
-
|
|
8975
|
+
position: relative;
|
|
8976
|
+
isolation: isolate;
|
|
8977
|
+
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%);
|
|
8978
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8979
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
8980
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7903
8982
|
border-radius: 50rem;
|
|
7904
8983
|
}
|
|
8984
|
+
@media (hover: hover) {
|
|
8985
|
+
.c-messages__file-icon:hover {
|
|
8986
|
+
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%);
|
|
8987
|
+
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);
|
|
8988
|
+
}
|
|
8989
|
+
}
|
|
8990
|
+
.c-messages__file-icon:active {
|
|
8991
|
+
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%);
|
|
8992
|
+
}
|
|
7905
8993
|
.c-messages__file-name {
|
|
7906
8994
|
color: var(--atomix-messages-file-text-color);
|
|
7907
8995
|
font-size: var(--atomix-messages-file-text-font-size);
|
|
@@ -7955,7 +9043,22 @@ a, a:hover {
|
|
|
7955
9043
|
}
|
|
7956
9044
|
.c-messages__content--self .c-messages__file-icon {
|
|
7957
9045
|
color: var(--atomix-invert-text-emphasis);
|
|
7958
|
-
|
|
9046
|
+
position: relative;
|
|
9047
|
+
isolation: isolate;
|
|
9048
|
+
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-file-icon-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 26%, transparent) 0%, transparent 60%);
|
|
9049
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9050
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9051
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-messages-file-icon-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-messages-file-icon-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-file-icon-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9052
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9053
|
+
}
|
|
9054
|
+
@media (hover: hover) {
|
|
9055
|
+
.c-messages__content--self .c-messages__file-icon:hover {
|
|
9056
|
+
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-messages-file-icon-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 40%, transparent) 0%, transparent 60%);
|
|
9057
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-messages-file-icon-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-file-icon-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-messages-file-icon-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9058
|
+
}
|
|
9059
|
+
}
|
|
9060
|
+
.c-messages__content--self .c-messages__file-icon:active {
|
|
9061
|
+
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-messages-file-icon-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 81%, transparent) 100%);
|
|
7959
9062
|
}
|
|
7960
9063
|
.c-messages__content--self .c-messages__file-icon [data-atomix-color-mode=dark] {
|
|
7961
9064
|
--atomix-messages-file-icon-bg: #7c3aed;
|
|
@@ -7999,9 +9102,24 @@ a, a:hover {
|
|
|
7999
9102
|
font-size: var(--atomix-messages-input-font-size);
|
|
8000
9103
|
border: var(--atomix-messages-input-border-width) solid var(--atomix-messages-input-border-color);
|
|
8001
9104
|
border-radius: var(--atomix-messages-input-border-radius);
|
|
8002
|
-
|
|
9105
|
+
position: relative;
|
|
9106
|
+
isolation: isolate;
|
|
9107
|
+
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%);
|
|
9108
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9109
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9110
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8003
9112
|
resize: none;
|
|
8004
9113
|
}
|
|
9114
|
+
@media (hover: hover) {
|
|
9115
|
+
.c-messages__input:hover {
|
|
9116
|
+
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-messages-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-bg) 40%, transparent) 0%, transparent 60%);
|
|
9117
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-messages-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-messages-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9118
|
+
}
|
|
9119
|
+
}
|
|
9120
|
+
.c-messages__input:active {
|
|
9121
|
+
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-messages-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-messages-bg) 81%, transparent) 100%);
|
|
9122
|
+
}
|
|
8005
9123
|
.c-messages__input::-moz-placeholder {
|
|
8006
9124
|
color: var(--atomix-messages-input-placeholder-color);
|
|
8007
9125
|
font-size: var(--atomix-messages-input-font-size);
|
|
@@ -8019,7 +9137,13 @@ a, a:hover {
|
|
|
8019
9137
|
place-items: center;
|
|
8020
9138
|
align-self: flex-end;
|
|
8021
9139
|
padding: 0.625rem;
|
|
8022
|
-
|
|
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);
|
|
8023
9147
|
color: var(--atomix-invert-text-emphasis);
|
|
8024
9148
|
border-radius: 50rem;
|
|
8025
9149
|
cursor: pointer;
|
|
@@ -8028,6 +9152,15 @@ a, a:hover {
|
|
|
8028
9152
|
appearance: none;
|
|
8029
9153
|
border: 0;
|
|
8030
9154
|
}
|
|
9155
|
+
@media (hover: hover) {
|
|
9156
|
+
.c-messages__submit:hover {
|
|
9157
|
+
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-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
9158
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9159
|
+
}
|
|
9160
|
+
}
|
|
9161
|
+
.c-messages__submit:active {
|
|
9162
|
+
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%);
|
|
9163
|
+
}
|
|
8031
9164
|
.c-messages__submit .c-icon {
|
|
8032
9165
|
width: var(--atomix-messages-form-submit-icon-size);
|
|
8033
9166
|
height: var(--atomix-messages-form-submit-icon-size);
|
|
@@ -8048,41 +9181,131 @@ a, a:hover {
|
|
|
8048
9181
|
.c-messages--glass .c-messages__body {
|
|
8049
9182
|
border-radius: 0.25rem;
|
|
8050
9183
|
padding: 0.5rem;
|
|
8051
|
-
|
|
9184
|
+
position: relative;
|
|
9185
|
+
isolation: isolate;
|
|
9186
|
+
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) 28%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 15%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 5%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 18%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 6%, transparent) 0%, transparent 60%);
|
|
9187
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9188
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9189
|
+
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);
|
|
9190
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9191
|
+
}
|
|
9192
|
+
@media (hover: hover) {
|
|
9193
|
+
.c-messages--glass .c-messages__body:hover {
|
|
9194
|
+
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%);
|
|
9195
|
+
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);
|
|
9196
|
+
}
|
|
9197
|
+
}
|
|
9198
|
+
.c-messages--glass .c-messages__body:active {
|
|
9199
|
+
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%);
|
|
8052
9200
|
}
|
|
8053
9201
|
.c-messages--glass .c-messages__text {
|
|
8054
|
-
|
|
9202
|
+
position: relative;
|
|
9203
|
+
isolation: isolate;
|
|
9204
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9206
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8055
9209
|
-webkit-backdrop-filter: blur(8px);
|
|
8056
9210
|
backdrop-filter: blur(8px);
|
|
8057
9211
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
8058
9212
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
8059
9213
|
}
|
|
9214
|
+
@media (hover: hover) {
|
|
9215
|
+
.c-messages--glass .c-messages__text:hover {
|
|
9216
|
+
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%);
|
|
9217
|
+
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);
|
|
9218
|
+
}
|
|
9219
|
+
}
|
|
9220
|
+
.c-messages--glass .c-messages__text:active {
|
|
9221
|
+
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
|
+
}
|
|
8060
9223
|
.c-messages--glass .c-messages__content--self .c-messages__text {
|
|
8061
|
-
|
|
9224
|
+
position: relative;
|
|
9225
|
+
isolation: isolate;
|
|
9226
|
+
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%);
|
|
9227
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9228
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9229
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8062
9231
|
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
8063
9232
|
-webkit-backdrop-filter: blur(8px);
|
|
8064
9233
|
backdrop-filter: blur(8px);
|
|
8065
9234
|
}
|
|
9235
|
+
@media (hover: hover) {
|
|
9236
|
+
.c-messages--glass .c-messages__content--self .c-messages__text:hover {
|
|
9237
|
+
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-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
9238
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9239
|
+
}
|
|
9240
|
+
}
|
|
9241
|
+
.c-messages--glass .c-messages__content--self .c-messages__text:active {
|
|
9242
|
+
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
|
+
}
|
|
8066
9244
|
.c-messages--glass .c-messages__content--self .c-messages__file {
|
|
8067
|
-
|
|
9245
|
+
position: relative;
|
|
9246
|
+
isolation: isolate;
|
|
9247
|
+
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%);
|
|
9248
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9249
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9250
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8068
9252
|
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
8069
9253
|
-webkit-backdrop-filter: blur(8px);
|
|
8070
9254
|
backdrop-filter: blur(8px);
|
|
8071
9255
|
}
|
|
9256
|
+
@media (hover: hover) {
|
|
9257
|
+
.c-messages--glass .c-messages__content--self .c-messages__file:hover {
|
|
9258
|
+
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-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
9259
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9260
|
+
}
|
|
9261
|
+
}
|
|
9262
|
+
.c-messages--glass .c-messages__content--self .c-messages__file:active {
|
|
9263
|
+
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
|
+
}
|
|
8072
9265
|
.c-messages--glass .c-messages__file {
|
|
8073
|
-
|
|
9266
|
+
position: relative;
|
|
9267
|
+
isolation: isolate;
|
|
9268
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9270
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8074
9273
|
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
8075
9274
|
-webkit-backdrop-filter: blur(8px);
|
|
8076
9275
|
backdrop-filter: blur(8px);
|
|
8077
9276
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
8078
9277
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
8079
9278
|
}
|
|
9279
|
+
@media (hover: hover) {
|
|
9280
|
+
.c-messages--glass .c-messages__file:hover {
|
|
9281
|
+
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-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
9282
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9283
|
+
}
|
|
9284
|
+
}
|
|
9285
|
+
.c-messages--glass .c-messages__file:active {
|
|
9286
|
+
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
|
+
}
|
|
8080
9288
|
.c-messages--glass .c-messages__file-icon {
|
|
8081
|
-
|
|
9289
|
+
position: relative;
|
|
9290
|
+
isolation: isolate;
|
|
9291
|
+
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%);
|
|
9292
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9293
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9294
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8082
9296
|
-webkit-backdrop-filter: blur(8px);
|
|
8083
9297
|
backdrop-filter: blur(8px);
|
|
8084
9298
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
8085
9299
|
}
|
|
9300
|
+
@media (hover: hover) {
|
|
9301
|
+
.c-messages--glass .c-messages__file-icon:hover {
|
|
9302
|
+
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-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
9303
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9304
|
+
}
|
|
9305
|
+
}
|
|
9306
|
+
.c-messages--glass .c-messages__file-icon:active {
|
|
9307
|
+
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%);
|
|
9308
|
+
}
|
|
8086
9309
|
.c-messages--glass .c-messages__image {
|
|
8087
9310
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
8088
9311
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
@@ -8196,10 +9419,25 @@ a, a:hover {
|
|
|
8196
9419
|
.c-modal__backdrop {
|
|
8197
9420
|
position: absolute;
|
|
8198
9421
|
inset: 0;
|
|
8199
|
-
|
|
9422
|
+
position: relative;
|
|
9423
|
+
isolation: isolate;
|
|
9424
|
+
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%);
|
|
9425
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9426
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9427
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8200
9429
|
opacity: 0;
|
|
8201
9430
|
transition: 0.3s;
|
|
8202
9431
|
}
|
|
9432
|
+
@media (hover: hover) {
|
|
9433
|
+
.c-modal__backdrop:hover {
|
|
9434
|
+
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-modal-backdrop-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 40%, transparent) 0%, transparent 60%);
|
|
9435
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-modal-backdrop-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-modal-backdrop-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-modal-backdrop-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9436
|
+
}
|
|
9437
|
+
}
|
|
9438
|
+
.c-modal__backdrop:active {
|
|
9439
|
+
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-modal-backdrop-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 81%, transparent) 100%);
|
|
9440
|
+
}
|
|
8203
9441
|
.c-modal__dialog {
|
|
8204
9442
|
position: relative;
|
|
8205
9443
|
display: flex;
|
|
@@ -8219,12 +9457,27 @@ a, a:hover {
|
|
|
8219
9457
|
width: 100%;
|
|
8220
9458
|
max-height: 100%;
|
|
8221
9459
|
padding: var(--atomix-modal-inner-padding);
|
|
8222
|
-
|
|
9460
|
+
position: relative;
|
|
9461
|
+
isolation: isolate;
|
|
9462
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9464
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8223
9467
|
box-shadow: var(--atomix-modal-content-box-shadow);
|
|
8224
9468
|
border-radius: var(--atomix-modal-content-border-radius);
|
|
8225
9469
|
overflow: hidden;
|
|
8226
9470
|
pointer-events: auto;
|
|
8227
9471
|
}
|
|
9472
|
+
@media (hover: hover) {
|
|
9473
|
+
.c-modal__content:hover {
|
|
9474
|
+
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-modal-content-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-content-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-modal-content-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-modal-content-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-modal-content-bg) 40%, transparent) 0%, transparent 60%);
|
|
9475
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-modal-content-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9476
|
+
}
|
|
9477
|
+
}
|
|
9478
|
+
.c-modal__content:active {
|
|
9479
|
+
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-modal-content-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-content-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-modal-content-bg) 81%, transparent) 100%);
|
|
9480
|
+
}
|
|
8228
9481
|
.c-modal__header {
|
|
8229
9482
|
display: flex;
|
|
8230
9483
|
justify-content: space-between;
|
|
@@ -8276,12 +9529,27 @@ a, a:hover {
|
|
|
8276
9529
|
--atomix-modal-width: var(--atomix-modal-xl);
|
|
8277
9530
|
}
|
|
8278
9531
|
.c-modal--glass .c-modal__content {
|
|
8279
|
-
|
|
9532
|
+
position: relative;
|
|
9533
|
+
isolation: isolate;
|
|
9534
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9536
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8280
9539
|
box-shadow: none;
|
|
8281
9540
|
border-radius: inherit;
|
|
8282
9541
|
width: var(--atomix-modal-width);
|
|
8283
9542
|
height: 100%;
|
|
8284
9543
|
}
|
|
9544
|
+
@media (hover: hover) {
|
|
9545
|
+
.c-modal--glass .c-modal__content:hover {
|
|
9546
|
+
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-modal-content-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-content-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-modal-content-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-modal-content-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-modal-content-bg) 40%, transparent) 0%, transparent 60%);
|
|
9547
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-modal-content-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9548
|
+
}
|
|
9549
|
+
}
|
|
9550
|
+
.c-modal--glass .c-modal__content:active {
|
|
9551
|
+
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-modal-content-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-content-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-modal-content-bg) 81%, transparent) 100%);
|
|
9552
|
+
}
|
|
8285
9553
|
.c-modal.is-open .c-modal__backdrop {
|
|
8286
9554
|
opacity: var(--atomix-modal-backdrop-opacity);
|
|
8287
9555
|
}
|
|
@@ -8337,14 +9605,44 @@ a, a:hover {
|
|
|
8337
9605
|
color: var(--atomix-nav-link-color);
|
|
8338
9606
|
}
|
|
8339
9607
|
.c-nav__link:hover, .c-nav__link:active, .c-nav__link:focus, .c-nav__link:focus-visible {
|
|
8340
|
-
|
|
9608
|
+
position: relative;
|
|
9609
|
+
isolation: isolate;
|
|
9610
|
+
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-nav-link-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
9611
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9612
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9613
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-nav-link-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-nav-link-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-nav-link-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9614
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9615
|
+
}
|
|
9616
|
+
@media (hover: hover) {
|
|
9617
|
+
.c-nav__link:hover:hover, .c-nav__link:active:hover, .c-nav__link:focus:hover, .c-nav__link:focus-visible:hover {
|
|
9618
|
+
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-nav-link-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
9619
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-nav-link-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-nav-link-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-nav-link-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9620
|
+
}
|
|
9621
|
+
}
|
|
9622
|
+
.c-nav__link:hover:active, .c-nav__link:active:active, .c-nav__link:focus:active, .c-nav__link:focus-visible:active {
|
|
9623
|
+
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-nav-link-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 81%, transparent) 100%);
|
|
8341
9624
|
}
|
|
8342
9625
|
.c-nav__link--disabled {
|
|
8343
9626
|
color: var(--atomix-disabled-text-emphasis);
|
|
8344
9627
|
pointer-events: none;
|
|
8345
9628
|
}
|
|
8346
9629
|
.c-nav__link:focus, .c-nav__link:active, .c-nav__link.is-active {
|
|
8347
|
-
|
|
9630
|
+
position: relative;
|
|
9631
|
+
isolation: isolate;
|
|
9632
|
+
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%);
|
|
9633
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9634
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9635
|
+
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);
|
|
9636
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9637
|
+
}
|
|
9638
|
+
@media (hover: hover) {
|
|
9639
|
+
.c-nav__link:focus:hover, .c-nav__link:active:hover, .c-nav__link.is-active:hover {
|
|
9640
|
+
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-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
9641
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9642
|
+
}
|
|
9643
|
+
}
|
|
9644
|
+
.c-nav__link:focus:active, .c-nav__link:active:active, .c-nav__link.is-active:active {
|
|
9645
|
+
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%);
|
|
8348
9646
|
}
|
|
8349
9647
|
.c-nav__icon {
|
|
8350
9648
|
font-size: var(--atomix-nav-icon-size);
|
|
@@ -8401,14 +9699,47 @@ a, a:hover {
|
|
|
8401
9699
|
left: 50%;
|
|
8402
9700
|
transform: translateX(-50%);
|
|
8403
9701
|
z-index: 1000;
|
|
8404
|
-
|
|
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);
|
|
8405
9709
|
border: 1px solid var(--atomix-border-color);
|
|
8406
9710
|
border-radius: 50rem;
|
|
8407
9711
|
box-shadow: var(--atomix-box-shadow-lg);
|
|
8408
9712
|
padding: 0.5rem 1rem;
|
|
8409
9713
|
-webkit-backdrop-filter: blur(10px);
|
|
8410
9714
|
backdrop-filter: blur(10px);
|
|
8411
|
-
|
|
9715
|
+
position: relative;
|
|
9716
|
+
isolation: isolate;
|
|
9717
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9718
|
+
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
|
+
}
|
|
9720
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
9721
|
+
.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
|
+
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
|
+
}
|
|
9725
|
+
}
|
|
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
|
+
@media (hover: hover) {
|
|
9736
|
+
.c-nav--float-top-center:hover, .c-nav--float-bottom-center:hover {
|
|
9737
|
+
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%);
|
|
9738
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9739
|
+
}
|
|
9740
|
+
}
|
|
9741
|
+
.c-nav--float-top-center:active, .c-nav--float-bottom-center:active {
|
|
9742
|
+
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, rgba(var(--atomix-body-bg-rgb), 0.95) 108%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 90%, transparent) 50%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 81%, transparent) 100%);
|
|
8412
9743
|
}
|
|
8413
9744
|
.c-nav--float-top-center .c-nav__item + .c-nav--float-top-center .c-nav__item, .c-nav--float-top-center .c-nav__item + .c-nav--float-bottom-center .c-nav__item, .c-nav--float-bottom-center .c-nav__item + .c-nav--float-top-center .c-nav__item, .c-nav--float-bottom-center .c-nav__item + .c-nav--float-bottom-center .c-nav__item {
|
|
8414
9745
|
margin-left: 0.25rem;
|
|
@@ -8418,7 +9749,22 @@ a, a:hover {
|
|
|
8418
9749
|
border-radius: 0.625rem;
|
|
8419
9750
|
}
|
|
8420
9751
|
.c-nav--float-top-center .c-nav__link:hover, .c-nav--float-top-center .c-nav__link:focus, .c-nav--float-top-center .c-nav__link:active, .c-nav--float-top-center .c-nav__link.is-active, .c-nav--float-bottom-center .c-nav__link:hover, .c-nav--float-bottom-center .c-nav__link:focus, .c-nav--float-bottom-center .c-nav__link:active, .c-nav--float-bottom-center .c-nav__link.is-active {
|
|
8421
|
-
|
|
9752
|
+
position: relative;
|
|
9753
|
+
isolation: isolate;
|
|
9754
|
+
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%);
|
|
9755
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9756
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9757
|
+
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);
|
|
9758
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9759
|
+
}
|
|
9760
|
+
@media (hover: hover) {
|
|
9761
|
+
.c-nav--float-top-center .c-nav__link:hover:hover, .c-nav--float-top-center .c-nav__link:focus:hover, .c-nav--float-top-center .c-nav__link:active:hover, .c-nav--float-top-center .c-nav__link.is-active:hover, .c-nav--float-bottom-center .c-nav__link:hover:hover, .c-nav--float-bottom-center .c-nav__link:focus:hover, .c-nav--float-bottom-center .c-nav__link:active:hover, .c-nav--float-bottom-center .c-nav__link.is-active:hover {
|
|
9762
|
+
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-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
9763
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9764
|
+
}
|
|
9765
|
+
}
|
|
9766
|
+
.c-nav--float-top-center .c-nav__link:hover:active, .c-nav--float-top-center .c-nav__link:focus:active, .c-nav--float-top-center .c-nav__link:active:active, .c-nav--float-top-center .c-nav__link.is-active:active, .c-nav--float-bottom-center .c-nav__link:hover:active, .c-nav--float-bottom-center .c-nav__link:focus:active, .c-nav--float-bottom-center .c-nav__link:active:active, .c-nav--float-bottom-center .c-nav__link.is-active:active {
|
|
9767
|
+
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%);
|
|
8422
9768
|
}
|
|
8423
9769
|
.c-nav--float-top-center {
|
|
8424
9770
|
top: 1.25rem;
|
|
@@ -8452,9 +9798,24 @@ a, a:hover {
|
|
|
8452
9798
|
position: relative;
|
|
8453
9799
|
padding: var(--atomix-navbar-padding-y) 0;
|
|
8454
9800
|
border-bottom: var(--atomix-navbar-border-width) solid var(--atomix-navbar-border-color);
|
|
8455
|
-
|
|
9801
|
+
position: relative;
|
|
9802
|
+
isolation: isolate;
|
|
9803
|
+
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%);
|
|
9804
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9805
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9806
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8456
9808
|
z-index: var(--atomix-navbar-z-index);
|
|
8457
9809
|
}
|
|
9810
|
+
@media (hover: hover) {
|
|
9811
|
+
.c-navbar:hover {
|
|
9812
|
+
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-navbar-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-navbar-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-navbar-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-navbar-bg) 40%, transparent) 0%, transparent 60%);
|
|
9813
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-navbar-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-navbar-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9814
|
+
}
|
|
9815
|
+
}
|
|
9816
|
+
.c-navbar:active {
|
|
9817
|
+
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-navbar-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-navbar-bg) 81%, transparent) 100%);
|
|
9818
|
+
}
|
|
8458
9819
|
.c-navbar__container {
|
|
8459
9820
|
display: flex;
|
|
8460
9821
|
flex-wrap: wrap;
|
|
@@ -8488,12 +9849,27 @@ a, a:hover {
|
|
|
8488
9849
|
width: var(--atomix-navbar-toggler-size);
|
|
8489
9850
|
height: var(--atomix-navbar-toggler-size);
|
|
8490
9851
|
padding: 0;
|
|
8491
|
-
|
|
9852
|
+
position: relative;
|
|
9853
|
+
isolation: isolate;
|
|
9854
|
+
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%);
|
|
9855
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9856
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9857
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8492
9859
|
border: var(--atomix-navbar-toggler-border);
|
|
8493
9860
|
border-radius: var(--atomix-navbar-toggler-border-radius);
|
|
8494
9861
|
cursor: pointer;
|
|
8495
9862
|
transition: all 0.15s ease-in-out;
|
|
8496
9863
|
}
|
|
9864
|
+
@media (hover: hover) {
|
|
9865
|
+
.c-navbar__toggler:hover {
|
|
9866
|
+
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-navbar-toggler-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 40%, transparent) 0%, transparent 60%);
|
|
9867
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-navbar-toggler-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-toggler-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-navbar-toggler-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9868
|
+
}
|
|
9869
|
+
}
|
|
9870
|
+
.c-navbar__toggler:active {
|
|
9871
|
+
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-navbar-toggler-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 81%, transparent) 100%);
|
|
9872
|
+
}
|
|
8497
9873
|
.c-navbar__toggler:hover {
|
|
8498
9874
|
opacity: 0.8;
|
|
8499
9875
|
}
|
|
@@ -8537,12 +9913,27 @@ a, a:hover {
|
|
|
8537
9913
|
left: 0;
|
|
8538
9914
|
width: 100%;
|
|
8539
9915
|
height: 100%;
|
|
8540
|
-
|
|
9916
|
+
position: relative;
|
|
9917
|
+
isolation: isolate;
|
|
9918
|
+
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%);
|
|
9919
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9920
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
9921
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8541
9923
|
z-index: var(--atomix-navbar-backdrop-z-index);
|
|
8542
9924
|
opacity: 0;
|
|
8543
9925
|
visibility: hidden;
|
|
8544
9926
|
transition: all 0.3s ease-in-out;
|
|
8545
9927
|
}
|
|
9928
|
+
@media (hover: hover) {
|
|
9929
|
+
.c-navbar__backdrop:hover {
|
|
9930
|
+
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-navbar-backdrop-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 40%, transparent) 0%, transparent 60%);
|
|
9931
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9932
|
+
}
|
|
9933
|
+
}
|
|
9934
|
+
.c-navbar__backdrop:active {
|
|
9935
|
+
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-navbar-backdrop-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 81%, transparent) 100%);
|
|
9936
|
+
}
|
|
8546
9937
|
.c-navbar__backdrop.is-open {
|
|
8547
9938
|
opacity: 1;
|
|
8548
9939
|
visibility: visible;
|
|
@@ -8622,11 +10013,22 @@ a, a:hover {
|
|
|
8622
10013
|
.c-navbar--glass {
|
|
8623
10014
|
position: relative;
|
|
8624
10015
|
background-color: transparent;
|
|
10016
|
+
position: relative;
|
|
10017
|
+
isolation: isolate;
|
|
10018
|
+
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%);
|
|
10019
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10020
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
10021
|
+
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);
|
|
10022
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8625
10023
|
}
|
|
8626
|
-
@
|
|
8627
|
-
.c-navbar--glass {
|
|
8628
|
-
|
|
10024
|
+
@media (hover: hover) {
|
|
10025
|
+
.c-navbar--glass:hover {
|
|
10026
|
+
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-navbar-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-navbar-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-navbar-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-navbar-bg) 40%, transparent) 0%, transparent 60%);
|
|
10027
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-navbar-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-navbar-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10028
|
+
}
|
|
8629
10029
|
}
|
|
10030
|
+
.c-navbar--glass:active {
|
|
10031
|
+
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-navbar-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-navbar-bg) 81%, transparent) 100%);
|
|
8630
10032
|
}
|
|
8631
10033
|
.c-navbar--fixed-bottom {
|
|
8632
10034
|
bottom: 0;
|
|
@@ -8828,11 +10230,26 @@ a, a:hover {
|
|
|
8828
10230
|
max-width: var(--atomix-callout-width);
|
|
8829
10231
|
gap: var(--atomix-callout-actions-spacer);
|
|
8830
10232
|
padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
|
|
8831
|
-
|
|
10233
|
+
position: relative;
|
|
10234
|
+
isolation: isolate;
|
|
10235
|
+
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%);
|
|
10236
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10237
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
10238
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8832
10240
|
border-radius: var(--atomix-callout-border-radius);
|
|
8833
10241
|
border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
|
|
8834
10242
|
transition: opacity var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing), transform var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing);
|
|
8835
10243
|
}
|
|
10244
|
+
@media (hover: hover) {
|
|
10245
|
+
.c-callout:hover {
|
|
10246
|
+
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-callout-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-bg) 40%, transparent) 0%, transparent 60%);
|
|
10247
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-callout-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10248
|
+
}
|
|
10249
|
+
}
|
|
10250
|
+
.c-callout:active {
|
|
10251
|
+
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-callout-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-callout-bg) 81%, transparent) 100%);
|
|
10252
|
+
}
|
|
8836
10253
|
.c-callout__content {
|
|
8837
10254
|
width: 100%;
|
|
8838
10255
|
display: flex;
|
|
@@ -8909,10 +10326,25 @@ a, a:hover {
|
|
|
8909
10326
|
align-items: flex-start;
|
|
8910
10327
|
justify-content: flex-start;
|
|
8911
10328
|
border: none;
|
|
8912
|
-
|
|
10329
|
+
position: relative;
|
|
10330
|
+
isolation: isolate;
|
|
10331
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10333
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8913
10336
|
box-shadow: var(--atomix-callout-box-shadow);
|
|
8914
10337
|
animation: calloutToastIn 0.3s var(--atomix-callout-transition-timing) forwards;
|
|
8915
10338
|
}
|
|
10339
|
+
@media (hover: hover) {
|
|
10340
|
+
.c-callout--toast:hover {
|
|
10341
|
+
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-callout-toast-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-toast-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-toast-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-toast-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-toast-bg) 40%, transparent) 0%, transparent 60%);
|
|
10342
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-callout-toast-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-toast-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-callout-toast-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10343
|
+
}
|
|
10344
|
+
}
|
|
10345
|
+
.c-callout--toast:active {
|
|
10346
|
+
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-callout-toast-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-toast-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-callout-toast-bg) 81%, transparent) 100%);
|
|
10347
|
+
}
|
|
8916
10348
|
.c-callout--toast .c-callout__content {
|
|
8917
10349
|
align-items: flex-start;
|
|
8918
10350
|
width: 100%;
|
|
@@ -8989,7 +10421,22 @@ a, a:hover {
|
|
|
8989
10421
|
max-width: var(--atomix-callout-width);
|
|
8990
10422
|
border-radius: var(--atomix-callout-border-radius);
|
|
8991
10423
|
width: 100%;
|
|
8992
|
-
|
|
10424
|
+
position: relative;
|
|
10425
|
+
isolation: isolate;
|
|
10426
|
+
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%);
|
|
10427
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10428
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
10429
|
+
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);
|
|
10430
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10431
|
+
}
|
|
10432
|
+
@media (hover: hover) {
|
|
10433
|
+
.c-callout--glass .c-callout__glass-content:hover {
|
|
10434
|
+
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-callout-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-bg) 40%, transparent) 0%, transparent 60%);
|
|
10435
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-callout-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10436
|
+
}
|
|
10437
|
+
}
|
|
10438
|
+
.c-callout--glass .c-callout__glass-content:active {
|
|
10439
|
+
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-callout-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-callout-bg) 81%, transparent) 100%);
|
|
8993
10440
|
}
|
|
8994
10441
|
.c-callout--glass .c-callout__title {
|
|
8995
10442
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
@@ -8998,9 +10445,24 @@ a, a:hover {
|
|
|
8998
10445
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8999
10446
|
}
|
|
9000
10447
|
.c-callout--glass.c-callout--toast {
|
|
9001
|
-
|
|
10448
|
+
position: relative;
|
|
10449
|
+
isolation: isolate;
|
|
10450
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10452
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9002
10455
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
9003
10456
|
}
|
|
10457
|
+
@media (hover: hover) {
|
|
10458
|
+
.c-callout--glass.c-callout--toast:hover {
|
|
10459
|
+
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-callout-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-bg) 40%, transparent) 0%, transparent 60%);
|
|
10460
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-callout-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10461
|
+
}
|
|
10462
|
+
}
|
|
10463
|
+
.c-callout--glass.c-callout--toast:active {
|
|
10464
|
+
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-callout-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-callout-bg) 81%, transparent) 100%);
|
|
10465
|
+
}
|
|
9004
10466
|
.c-callout.is-hide {
|
|
9005
10467
|
opacity: 0;
|
|
9006
10468
|
transform: translateY(-10px);
|
|
@@ -9141,7 +10603,13 @@ a, a:hover {
|
|
|
9141
10603
|
color: var(--atomix-pagination-color);
|
|
9142
10604
|
font-size: var(--atomix-pagination-font-size);
|
|
9143
10605
|
padding: var(--atomix-pagination-padding-y) var(--atomix-pagination-padding-x);
|
|
9144
|
-
|
|
10606
|
+
position: relative;
|
|
10607
|
+
isolation: isolate;
|
|
10608
|
+
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%);
|
|
10609
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10610
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
10611
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9145
10613
|
border-radius: var(--atomix-pagination-border-radius);
|
|
9146
10614
|
border: none;
|
|
9147
10615
|
cursor: pointer;
|
|
@@ -9149,6 +10617,15 @@ a, a:hover {
|
|
|
9149
10617
|
-moz-user-select: none;
|
|
9150
10618
|
user-select: none;
|
|
9151
10619
|
}
|
|
10620
|
+
@media (hover: hover) {
|
|
10621
|
+
.c-pagination__link:hover {
|
|
10622
|
+
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-pagination-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-pagination-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-pagination-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-pagination-bg) 40%, transparent) 0%, transparent 60%);
|
|
10623
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-pagination-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-pagination-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10624
|
+
}
|
|
10625
|
+
}
|
|
10626
|
+
.c-pagination__link:active {
|
|
10627
|
+
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-pagination-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-pagination-bg) 81%, transparent) 100%);
|
|
10628
|
+
}
|
|
9152
10629
|
.c-pagination__link:hover {
|
|
9153
10630
|
--atomix-pagination-color: var(--atomix-pagination-hover-color);
|
|
9154
10631
|
--atomix-pagination-bg: var(--atomix-pagination-hover-bg);
|
|
@@ -9225,10 +10702,25 @@ a, a:hover {
|
|
|
9225
10702
|
text-align: center;
|
|
9226
10703
|
border: 1px solid var(--atomix-pagination-color);
|
|
9227
10704
|
border-radius: var(--atomix-pagination-border-radius);
|
|
9228
|
-
|
|
10705
|
+
position: relative;
|
|
10706
|
+
isolation: isolate;
|
|
10707
|
+
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%);
|
|
10708
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10709
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
10710
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9229
10712
|
color: var(--atomix-pagination-color);
|
|
9230
10713
|
transition: all 0.2s ease-in-out;
|
|
9231
10714
|
}
|
|
10715
|
+
@media (hover: hover) {
|
|
10716
|
+
.c-pagination__search-input:hover {
|
|
10717
|
+
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-pagination-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-pagination-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-pagination-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-pagination-bg) 40%, transparent) 0%, transparent 60%);
|
|
10718
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-pagination-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-pagination-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10719
|
+
}
|
|
10720
|
+
}
|
|
10721
|
+
.c-pagination__search-input:active {
|
|
10722
|
+
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-pagination-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-pagination-bg) 81%, transparent) 100%);
|
|
10723
|
+
}
|
|
9232
10724
|
.c-pagination__search-input:focus {
|
|
9233
10725
|
outline: none;
|
|
9234
10726
|
border-color: var(--atomix-pagination-focus-border-color);
|
|
@@ -9245,13 +10737,28 @@ a, a:hover {
|
|
|
9245
10737
|
width: var(--atomix-pagination-size);
|
|
9246
10738
|
height: var(--atomix-pagination-size);
|
|
9247
10739
|
padding: var(--atomix-pagination-padding-y) var(--atomix-pagination-padding-x);
|
|
9248
|
-
|
|
10740
|
+
position: relative;
|
|
10741
|
+
isolation: isolate;
|
|
10742
|
+
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%);
|
|
10743
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10744
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
10745
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9249
10747
|
border: 1px solid var(--atomix-pagination-color);
|
|
9250
10748
|
border-radius: var(--atomix-pagination-border-radius);
|
|
9251
10749
|
color: var(--atomix-pagination-color);
|
|
9252
10750
|
cursor: pointer;
|
|
9253
10751
|
transition: all 0.2s ease-in-out;
|
|
9254
10752
|
}
|
|
10753
|
+
@media (hover: hover) {
|
|
10754
|
+
.c-pagination__search-button:hover {
|
|
10755
|
+
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-pagination-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-pagination-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-pagination-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-pagination-bg) 40%, transparent) 0%, transparent 60%);
|
|
10756
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-pagination-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-pagination-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10757
|
+
}
|
|
10758
|
+
}
|
|
10759
|
+
.c-pagination__search-button:active {
|
|
10760
|
+
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-pagination-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-pagination-bg) 81%, transparent) 100%);
|
|
10761
|
+
}
|
|
9255
10762
|
.c-pagination__search-button:hover {
|
|
9256
10763
|
--atomix-pagination-color: var(--atomix-pagination-hover-color);
|
|
9257
10764
|
--atomix-pagination-bg: var(--atomix-pagination-hover-bg);
|
|
@@ -9299,19 +10806,49 @@ a, a:hover {
|
|
|
9299
10806
|
flex-direction: column;
|
|
9300
10807
|
gap: var(--atomix-popover-inner-gap-y) var(--atomix-popover-inner-gap-x);
|
|
9301
10808
|
padding: var(--atomix-popover-padding-y) var(--atomix-popover-padding-x);
|
|
9302
|
-
|
|
10809
|
+
position: relative;
|
|
10810
|
+
isolation: isolate;
|
|
10811
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10813
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9303
10816
|
border-radius: var(--atomix-popover-border-radius);
|
|
9304
10817
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
9305
10818
|
}
|
|
10819
|
+
@media (hover: hover) {
|
|
10820
|
+
.c-popover__content-inner:hover {
|
|
10821
|
+
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-popover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-popover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-popover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-popover-bg) 40%, transparent) 0%, transparent 60%);
|
|
10822
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-popover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10823
|
+
}
|
|
10824
|
+
}
|
|
10825
|
+
.c-popover__content-inner:active {
|
|
10826
|
+
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-popover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-popover-bg) 81%, transparent) 100%);
|
|
10827
|
+
}
|
|
9306
10828
|
.c-popover__arrow {
|
|
9307
10829
|
position: absolute;
|
|
9308
10830
|
width: var(--atomix-popover-arrow-size);
|
|
9309
10831
|
height: var(--atomix-popover-arrow-size);
|
|
9310
|
-
|
|
10832
|
+
position: relative;
|
|
10833
|
+
isolation: isolate;
|
|
10834
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10836
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9311
10839
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
9312
10840
|
z-index: 1;
|
|
9313
10841
|
transform-origin: center;
|
|
9314
10842
|
}
|
|
10843
|
+
@media (hover: hover) {
|
|
10844
|
+
.c-popover__arrow:hover {
|
|
10845
|
+
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-popover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-popover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-popover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-popover-bg) 40%, transparent) 0%, transparent 60%);
|
|
10846
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-popover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10847
|
+
}
|
|
10848
|
+
}
|
|
10849
|
+
.c-popover__arrow:active {
|
|
10850
|
+
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-popover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-popover-bg) 81%, transparent) 100%);
|
|
10851
|
+
}
|
|
9315
10852
|
.c-popover.is-open {
|
|
9316
10853
|
opacity: 1;
|
|
9317
10854
|
visibility: visible;
|
|
@@ -9338,9 +10875,24 @@ a, a:hover {
|
|
|
9338
10875
|
transform: translateY(-50%) rotate(45deg);
|
|
9339
10876
|
}
|
|
9340
10877
|
.c-popover--glass .c-popover__content-inner {
|
|
9341
|
-
|
|
10878
|
+
position: relative;
|
|
10879
|
+
isolation: isolate;
|
|
10880
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10882
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9342
10885
|
box-shadow: none;
|
|
9343
10886
|
}
|
|
10887
|
+
@media (hover: hover) {
|
|
10888
|
+
.c-popover--glass .c-popover__content-inner:hover {
|
|
10889
|
+
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-popover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-popover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-popover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-popover-bg) 40%, transparent) 0%, transparent 60%);
|
|
10890
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-popover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10891
|
+
}
|
|
10892
|
+
}
|
|
10893
|
+
.c-popover--glass .c-popover__content-inner:active {
|
|
10894
|
+
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-popover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-popover-bg) 81%, transparent) 100%);
|
|
10895
|
+
}
|
|
9344
10896
|
.c-product-review {
|
|
9345
10897
|
--atomix-product-review-padding: 1.5rem;
|
|
9346
10898
|
--atomix-product-review-border-radius: var(--atomix-border-radius);
|
|
@@ -9353,12 +10905,27 @@ a, a:hover {
|
|
|
9353
10905
|
--atomix-product-review-label-color: var(--atomix-text-muted);
|
|
9354
10906
|
padding: var(--atomix-product-review-padding);
|
|
9355
10907
|
border-radius: var(--atomix-product-review-border-radius);
|
|
9356
|
-
|
|
10908
|
+
position: relative;
|
|
10909
|
+
isolation: isolate;
|
|
10910
|
+
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%);
|
|
10911
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10912
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
10913
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9357
10915
|
border: 1px solid var(--atomix-product-review-border-color);
|
|
9358
10916
|
width: 100%;
|
|
9359
10917
|
max-width: 37.5rem;
|
|
9360
10918
|
margin: 0 auto;
|
|
9361
10919
|
}
|
|
10920
|
+
@media (hover: hover) {
|
|
10921
|
+
.c-product-review:hover {
|
|
10922
|
+
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-product-review-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-product-review-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-product-review-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-product-review-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-product-review-bg) 40%, transparent) 0%, transparent 60%);
|
|
10923
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-product-review-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-product-review-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-product-review-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10924
|
+
}
|
|
10925
|
+
}
|
|
10926
|
+
.c-product-review:active {
|
|
10927
|
+
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-product-review-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-product-review-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-product-review-bg) 81%, transparent) 100%);
|
|
10928
|
+
}
|
|
9362
10929
|
.c-product-review__header {
|
|
9363
10930
|
display: flex;
|
|
9364
10931
|
align-items: center;
|
|
@@ -9413,11 +10980,26 @@ a, a:hover {
|
|
|
9413
10980
|
padding: 0.75rem;
|
|
9414
10981
|
border: 1px solid var(--atomix-product-review-border-color);
|
|
9415
10982
|
border-radius: var(--atomix-border-radius);
|
|
9416
|
-
|
|
10983
|
+
position: relative;
|
|
10984
|
+
isolation: isolate;
|
|
10985
|
+
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%);
|
|
10986
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10987
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
10988
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9417
10990
|
color: var(--atomix-body-color);
|
|
9418
10991
|
font-family: inherit;
|
|
9419
10992
|
resize: vertical;
|
|
9420
10993
|
}
|
|
10994
|
+
@media (hover: hover) {
|
|
10995
|
+
.c-product-review__textarea:hover {
|
|
10996
|
+
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%);
|
|
10997
|
+
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);
|
|
10998
|
+
}
|
|
10999
|
+
}
|
|
11000
|
+
.c-product-review__textarea:active {
|
|
11001
|
+
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%);
|
|
11002
|
+
}
|
|
9421
11003
|
.c-product-review__textarea:focus {
|
|
9422
11004
|
outline: none;
|
|
9423
11005
|
border-color: var(--atomix-primary);
|
|
@@ -9461,18 +11043,48 @@ a, a:hover {
|
|
|
9461
11043
|
width: 100%;
|
|
9462
11044
|
max-width: var(--atomix-progress-width);
|
|
9463
11045
|
height: var(--atomix-progress-bar-height);
|
|
9464
|
-
|
|
11046
|
+
position: relative;
|
|
11047
|
+
isolation: isolate;
|
|
11048
|
+
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%);
|
|
11049
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11050
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
11051
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9465
11053
|
border-radius: var(--atomix-progress-border-radius);
|
|
9466
11054
|
overflow: hidden;
|
|
9467
11055
|
}
|
|
11056
|
+
@media (hover: hover) {
|
|
11057
|
+
.c-progress:hover {
|
|
11058
|
+
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-progress-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-progress-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-progress-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-progress-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-progress-bg) 40%, transparent) 0%, transparent 60%);
|
|
11059
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-progress-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-progress-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-progress-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11060
|
+
}
|
|
11061
|
+
}
|
|
11062
|
+
.c-progress:active {
|
|
11063
|
+
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-progress-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-progress-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-progress-bg) 81%, transparent) 100%);
|
|
11064
|
+
}
|
|
9468
11065
|
.c-progress__bar {
|
|
9469
11066
|
width: var(--atomix-progress-bar-width);
|
|
9470
11067
|
height: var(--atomix-progress-bar-height);
|
|
9471
11068
|
color: var(--atomix-progress-bar-color);
|
|
9472
|
-
|
|
11069
|
+
position: relative;
|
|
11070
|
+
isolation: isolate;
|
|
11071
|
+
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%);
|
|
11072
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11073
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
11074
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9473
11076
|
border-radius: var(--atomix-progress-border-radius);
|
|
9474
11077
|
transition: var(--atomix-progress-bar-transition) var(--atomix-progress-bar-easing);
|
|
9475
11078
|
}
|
|
11079
|
+
@media (hover: hover) {
|
|
11080
|
+
.c-progress__bar:hover {
|
|
11081
|
+
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-progress-bar-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-progress-bar-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-progress-bar-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-progress-bar-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-progress-bar-bg) 40%, transparent) 0%, transparent 60%);
|
|
11082
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-progress-bar-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-progress-bar-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-progress-bar-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11083
|
+
}
|
|
11084
|
+
}
|
|
11085
|
+
.c-progress__bar:active {
|
|
11086
|
+
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-progress-bar-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-progress-bar-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-progress-bar-bg) 81%, transparent) 100%);
|
|
11087
|
+
}
|
|
9476
11088
|
.c-progress--primary {
|
|
9477
11089
|
--atomix-progress-bar-bg: var(--atomix-primary);
|
|
9478
11090
|
}
|
|
@@ -9676,7 +11288,22 @@ a, a:hover {
|
|
|
9676
11288
|
max-width: var(--atomix-river-width);
|
|
9677
11289
|
padding: var(--atomix-river-padding-y) var(--atomix-river-padding-x);
|
|
9678
11290
|
border-radius: var(--atomix-river-border-radius);
|
|
9679
|
-
|
|
11291
|
+
position: relative;
|
|
11292
|
+
isolation: isolate;
|
|
11293
|
+
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-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-river-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-river-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-river-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-river-bg) 26%, transparent) 0%, transparent 60%);
|
|
11294
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11295
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
11296
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-river-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-river-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-river-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11297
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11298
|
+
}
|
|
11299
|
+
@media (hover: hover) {
|
|
11300
|
+
.c-river:hover {
|
|
11301
|
+
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-river-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-river-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-river-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-river-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-river-bg) 40%, transparent) 0%, transparent 60%);
|
|
11302
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-river-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-river-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-river-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11303
|
+
}
|
|
11304
|
+
}
|
|
11305
|
+
.c-river:active {
|
|
11306
|
+
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-river-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-river-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-river-bg) 81%, transparent) 100%);
|
|
9680
11307
|
}
|
|
9681
11308
|
.c-river__bg {
|
|
9682
11309
|
position: absolute;
|
|
@@ -9696,10 +11323,25 @@ a, a:hover {
|
|
|
9696
11323
|
.c-river__overlay {
|
|
9697
11324
|
position: absolute;
|
|
9698
11325
|
inset: 0;
|
|
9699
|
-
|
|
11326
|
+
position: relative;
|
|
11327
|
+
isolation: isolate;
|
|
11328
|
+
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%);
|
|
11329
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11330
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
11331
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9700
11333
|
opacity: var(--atomix-river-overlay-opacity);
|
|
9701
11334
|
border-radius: var(--atomix-river-border-radius);
|
|
9702
11335
|
}
|
|
11336
|
+
@media (hover: hover) {
|
|
11337
|
+
.c-river__overlay:hover {
|
|
11338
|
+
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-river-overlay) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-river-overlay) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-river-overlay) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-river-overlay) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-river-overlay) 40%, transparent) 0%, transparent 60%);
|
|
11339
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-river-overlay) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-river-overlay) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-river-overlay) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11340
|
+
}
|
|
11341
|
+
}
|
|
11342
|
+
.c-river__overlay:active {
|
|
11343
|
+
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-river-overlay) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-river-overlay) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-river-overlay) 81%, transparent) 100%);
|
|
11344
|
+
}
|
|
9703
11345
|
.c-river__container {
|
|
9704
11346
|
position: relative;
|
|
9705
11347
|
z-index: 1;
|
|
@@ -9919,9 +11561,24 @@ a, a:hover {
|
|
|
9919
11561
|
left: 0;
|
|
9920
11562
|
width: 100%;
|
|
9921
11563
|
height: 100%;
|
|
9922
|
-
|
|
11564
|
+
position: relative;
|
|
11565
|
+
isolation: isolate;
|
|
11566
|
+
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%);
|
|
11567
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11568
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
11569
|
+
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
|
+
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
11571
|
opacity: var(--atomix-sectionintro-overlay-opacity);
|
|
9924
11572
|
}
|
|
11573
|
+
@media (hover: hover) {
|
|
11574
|
+
.c-sectionintro__overlay:hover {
|
|
11575
|
+
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-sectionintro-overlay-bg-color) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 40%, transparent) 0%, transparent 60%);
|
|
11576
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11577
|
+
}
|
|
11578
|
+
}
|
|
11579
|
+
.c-sectionintro__overlay:active {
|
|
11580
|
+
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-sectionintro-overlay-bg-color) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 81%, transparent) 100%);
|
|
11581
|
+
}
|
|
9925
11582
|
.c-sectionintro--has-bg {
|
|
9926
11583
|
color: var(--atomix-color-white);
|
|
9927
11584
|
}
|
|
@@ -9999,7 +11656,13 @@ a, a:hover {
|
|
|
9999
11656
|
padding: var(--atomix-select-padding-x) var(--atomix-select-padding-y);
|
|
10000
11657
|
color: var(--atomix-select-placeholder-color);
|
|
10001
11658
|
font-size: var(--atomix-select-font-size);
|
|
10002
|
-
|
|
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);
|
|
10003
11666
|
border: 1px solid var(--atomix-select-border-color);
|
|
10004
11667
|
border-radius: var(--atomix-select-border-radius);
|
|
10005
11668
|
cursor: pointer;
|
|
@@ -10008,6 +11671,15 @@ a, a:hover {
|
|
|
10008
11671
|
transition-timing-function: ease-in-out;
|
|
10009
11672
|
transition-delay: 0s;
|
|
10010
11673
|
}
|
|
11674
|
+
@media (hover: hover) {
|
|
11675
|
+
.c-select__selected:hover {
|
|
11676
|
+
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-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-select-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-select-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-select-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-bg) 40%, transparent) 0%, transparent 60%);
|
|
11677
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-select-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-select-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11678
|
+
}
|
|
11679
|
+
}
|
|
11680
|
+
.c-select__selected:active {
|
|
11681
|
+
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-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-select-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-select-bg) 81%, transparent) 100%);
|
|
11682
|
+
}
|
|
10011
11683
|
.c-select__selected:hover {
|
|
10012
11684
|
border-color: var(--atomix-select-border-color-hover);
|
|
10013
11685
|
}
|
|
@@ -10029,7 +11701,13 @@ a, a:hover {
|
|
|
10029
11701
|
height: 0px;
|
|
10030
11702
|
top: calc(100% + var(--atomix-select-panel-spacer-y));
|
|
10031
11703
|
left: 0;
|
|
10032
|
-
|
|
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);
|
|
10033
11711
|
border-radius: var(--atomix-select-panel-border-radius);
|
|
10034
11712
|
box-shadow: var(--atomix-select-panel-box-shadow);
|
|
10035
11713
|
overflow: hidden;
|
|
@@ -10039,6 +11717,15 @@ a, a:hover {
|
|
|
10039
11717
|
transition-delay: 0s;
|
|
10040
11718
|
z-index: 99;
|
|
10041
11719
|
}
|
|
11720
|
+
@media (hover: hover) {
|
|
11721
|
+
.c-select__body:hover {
|
|
11722
|
+
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
|
+
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
|
+
}
|
|
11725
|
+
}
|
|
11726
|
+
.c-select__body:active {
|
|
11727
|
+
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
|
+
}
|
|
10042
11729
|
.c-select__panel {
|
|
10043
11730
|
padding: var(--atomix-select-panel-padding-x) var(--atomix-select-panel-padding-y);
|
|
10044
11731
|
}
|
|
@@ -10050,18 +11737,48 @@ a, a:hover {
|
|
|
10050
11737
|
.c-select__item {
|
|
10051
11738
|
padding: var(--atomix-select-item-padding-x) var(--atomix-select-item-padding-y);
|
|
10052
11739
|
color: var(--atomix-select-item-color);
|
|
10053
|
-
|
|
11740
|
+
position: relative;
|
|
11741
|
+
isolation: isolate;
|
|
11742
|
+
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%);
|
|
11743
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11744
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
11745
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10054
11747
|
border-radius: var(--atomix-select-item-border-radius);
|
|
10055
11748
|
transition-property: all;
|
|
10056
11749
|
transition-duration: 0.2s;
|
|
10057
11750
|
transition-timing-function: ease-in-out;
|
|
10058
11751
|
transition-delay: 0s;
|
|
10059
11752
|
}
|
|
11753
|
+
@media (hover: hover) {
|
|
11754
|
+
.c-select__item:hover {
|
|
11755
|
+
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-item-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-select-item-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-select-item-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-select-item-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-item-bg) 40%, transparent) 0%, transparent 60%);
|
|
11756
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-select-item-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-item-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-select-item-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11757
|
+
}
|
|
11758
|
+
}
|
|
11759
|
+
.c-select__item:active {
|
|
11760
|
+
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-item-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-select-item-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-select-item-bg) 81%, transparent) 100%);
|
|
11761
|
+
}
|
|
10060
11762
|
.c-select__item, .c-select__item > * {
|
|
10061
11763
|
cursor: pointer;
|
|
10062
11764
|
}
|
|
10063
11765
|
.c-select__item:hover {
|
|
10064
|
-
|
|
11766
|
+
position: relative;
|
|
11767
|
+
isolation: isolate;
|
|
11768
|
+
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-hover) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 26%, transparent) 0%, transparent 60%);
|
|
11769
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11770
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
11771
|
+
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-hover) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-select-item-bg-hover) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-item-bg-hover) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11772
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11773
|
+
}
|
|
11774
|
+
@media (hover: hover) {
|
|
11775
|
+
.c-select__item:hover:hover {
|
|
11776
|
+
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-item-bg-hover) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 40%, transparent) 0%, transparent 60%);
|
|
11777
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-select-item-bg-hover) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-item-bg-hover) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-select-item-bg-hover) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11778
|
+
}
|
|
11779
|
+
}
|
|
11780
|
+
.c-select__item:hover:active {
|
|
11781
|
+
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-item-bg-hover) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 81%, transparent) 100%);
|
|
10065
11782
|
}
|
|
10066
11783
|
.c-select--lg {
|
|
10067
11784
|
--atomix-select-font-size: var(--atomix-select-font-size-lg);
|
|
@@ -10111,11 +11828,26 @@ a, a:hover {
|
|
|
10111
11828
|
--atomix-side-menu-inner-padding-top: 1.25rem;
|
|
10112
11829
|
width: 100%;
|
|
10113
11830
|
padding: var(--atomix-side-menu-padding-y) var(--atomix-side-menu-padding-x);
|
|
10114
|
-
|
|
11831
|
+
position: relative;
|
|
11832
|
+
isolation: isolate;
|
|
11833
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11835
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10115
11838
|
border-radius: var(--atomix-side-menu-border-radius);
|
|
10116
11839
|
border: var(--atomix-side-menu-border-width) solid var(--atomix-side-menu-border-color);
|
|
10117
11840
|
box-shadow: var(--atomix-side-menu-box-shadow);
|
|
10118
11841
|
}
|
|
11842
|
+
@media (hover: hover) {
|
|
11843
|
+
.c-side-menu:hover {
|
|
11844
|
+
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-side-menu-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-bg) 40%, transparent) 0%, transparent 60%);
|
|
11845
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-side-menu-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-side-menu-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11846
|
+
}
|
|
11847
|
+
}
|
|
11848
|
+
.c-side-menu:active {
|
|
11849
|
+
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-side-menu-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-side-menu-bg) 81%, transparent) 100%);
|
|
11850
|
+
}
|
|
10119
11851
|
@media (max-width: 991.98px) {
|
|
10120
11852
|
.c-side-menu {
|
|
10121
11853
|
padding: 1rem 1rem;
|
|
@@ -10149,7 +11881,13 @@ a, a:hover {
|
|
|
10149
11881
|
justify-content: space-between;
|
|
10150
11882
|
width: 100%;
|
|
10151
11883
|
padding: var(--atomix-side-menu-toggler-padding-y) var(--atomix-side-menu-toggler-padding-x);
|
|
10152
|
-
|
|
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);
|
|
10153
11891
|
border: none;
|
|
10154
11892
|
border-radius: var(--atomix-side-menu-toggler-border-radius);
|
|
10155
11893
|
cursor: pointer;
|
|
@@ -10160,8 +11898,32 @@ a, a:hover {
|
|
|
10160
11898
|
text-align: left;
|
|
10161
11899
|
margin: 0;
|
|
10162
11900
|
}
|
|
11901
|
+
@media (hover: hover) {
|
|
11902
|
+
.c-side-menu__toggler:hover {
|
|
11903
|
+
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-side-menu-toggler-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 40%, transparent) 0%, transparent 60%);
|
|
11904
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11905
|
+
}
|
|
11906
|
+
}
|
|
11907
|
+
.c-side-menu__toggler:active {
|
|
11908
|
+
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-side-menu-toggler-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 81%, transparent) 100%);
|
|
11909
|
+
}
|
|
10163
11910
|
.c-side-menu__toggler:hover {
|
|
10164
|
-
|
|
11911
|
+
position: relative;
|
|
11912
|
+
isolation: isolate;
|
|
11913
|
+
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-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
11914
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11915
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
11916
|
+
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-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11917
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11918
|
+
}
|
|
11919
|
+
@media (hover: hover) {
|
|
11920
|
+
.c-side-menu__toggler:hover:hover {
|
|
11921
|
+
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-side-menu-toggler-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
11922
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11923
|
+
}
|
|
11924
|
+
}
|
|
11925
|
+
.c-side-menu__toggler:hover:active {
|
|
11926
|
+
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-side-menu-toggler-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 81%, transparent) 100%);
|
|
10165
11927
|
}
|
|
10166
11928
|
.c-side-menu__toggler:focus-visible {
|
|
10167
11929
|
outline: 2px solid var(--atomix-focus-ring-color);
|
|
@@ -10222,7 +11984,13 @@ a, a:hover {
|
|
|
10222
11984
|
color: var(--atomix-side-menu-item-color);
|
|
10223
11985
|
font-size: var(--atomix-side-menu-item-font-size);
|
|
10224
11986
|
font-weight: var(--atomix-side-menu-item-font-weight);
|
|
10225
|
-
|
|
11987
|
+
position: relative;
|
|
11988
|
+
isolation: isolate;
|
|
11989
|
+
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%);
|
|
11990
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11991
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
11992
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10226
11994
|
border: none;
|
|
10227
11995
|
border-radius: var(--atomix-side-menu-item-border-radius);
|
|
10228
11996
|
text-decoration: none;
|
|
@@ -10230,11 +11998,35 @@ a, a:hover {
|
|
|
10230
11998
|
transition: var(--atomix-side-menu-item-transition);
|
|
10231
11999
|
position: relative;
|
|
10232
12000
|
}
|
|
12001
|
+
@media (hover: hover) {
|
|
12002
|
+
.c-side-menu__link:hover {
|
|
12003
|
+
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-side-menu-item-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 40%, transparent) 0%, transparent 60%);
|
|
12004
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-side-menu-item-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-side-menu-item-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12005
|
+
}
|
|
12006
|
+
}
|
|
12007
|
+
.c-side-menu__link:active {
|
|
12008
|
+
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-side-menu-item-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 81%, transparent) 100%);
|
|
12009
|
+
}
|
|
10233
12010
|
.c-side-menu__link:hover {
|
|
10234
12011
|
color: var(--atomix-side-menu-item-hover-color);
|
|
10235
|
-
|
|
12012
|
+
position: relative;
|
|
12013
|
+
isolation: isolate;
|
|
12014
|
+
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%);
|
|
12015
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12016
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12017
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10236
12019
|
text-decoration: none;
|
|
10237
12020
|
}
|
|
12021
|
+
@media (hover: hover) {
|
|
12022
|
+
.c-side-menu__link:hover:hover {
|
|
12023
|
+
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-side-menu-item-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
12024
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12025
|
+
}
|
|
12026
|
+
}
|
|
12027
|
+
.c-side-menu__link:hover:active {
|
|
12028
|
+
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-side-menu-item-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 81%, transparent) 100%);
|
|
12029
|
+
}
|
|
10238
12030
|
.c-side-menu__link:focus-visible {
|
|
10239
12031
|
outline: 2px solid var(--atomix-focus-ring-color);
|
|
10240
12032
|
outline-offset: 2px;
|
|
@@ -10247,16 +12039,46 @@ a, a:hover {
|
|
|
10247
12039
|
}
|
|
10248
12040
|
.c-side-menu__link.is-active {
|
|
10249
12041
|
color: var(--atomix-side-menu-item-active-color);
|
|
10250
|
-
|
|
12042
|
+
position: relative;
|
|
12043
|
+
isolation: isolate;
|
|
12044
|
+
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%);
|
|
12045
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12046
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12047
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10251
12049
|
font-weight: 500;
|
|
10252
12050
|
}
|
|
12051
|
+
@media (hover: hover) {
|
|
12052
|
+
.c-side-menu__link.is-active:hover {
|
|
12053
|
+
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-side-menu-item-active-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 40%, transparent) 0%, transparent 60%);
|
|
12054
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12055
|
+
}
|
|
12056
|
+
}
|
|
12057
|
+
.c-side-menu__link.is-active:active {
|
|
12058
|
+
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-side-menu-item-active-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 81%, transparent) 100%);
|
|
12059
|
+
}
|
|
10253
12060
|
.c-side-menu__link.is-disabled, .c-side-menu__link[aria-disabled=true] {
|
|
10254
12061
|
color: var(--atomix-side-menu-item-disabled-color);
|
|
10255
|
-
|
|
12062
|
+
position: relative;
|
|
12063
|
+
isolation: isolate;
|
|
12064
|
+
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%);
|
|
12065
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12066
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12067
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10256
12069
|
cursor: not-allowed;
|
|
10257
12070
|
pointer-events: none;
|
|
10258
12071
|
opacity: 0.6;
|
|
10259
12072
|
}
|
|
12073
|
+
@media (hover: hover) {
|
|
12074
|
+
.c-side-menu__link.is-disabled:hover, .c-side-menu__link[aria-disabled=true]:hover {
|
|
12075
|
+
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-side-menu-item-disabled-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 40%, transparent) 0%, transparent 60%);
|
|
12076
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12077
|
+
}
|
|
12078
|
+
}
|
|
12079
|
+
.c-side-menu__link.is-disabled:active, .c-side-menu__link[aria-disabled=true]:active {
|
|
12080
|
+
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-side-menu-item-disabled-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 81%, transparent) 100%);
|
|
12081
|
+
}
|
|
10260
12082
|
.c-side-menu__link-icon {
|
|
10261
12083
|
flex-shrink: 0;
|
|
10262
12084
|
font-size: 1em;
|
|
@@ -10318,7 +12140,13 @@ a, a:hover {
|
|
|
10318
12140
|
display: inline-block;
|
|
10319
12141
|
width: var(--atomix-skeleton-width);
|
|
10320
12142
|
min-height: var(--atomix-skeleton-height);
|
|
10321
|
-
|
|
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);
|
|
10322
12150
|
background-size: 400% 100%;
|
|
10323
12151
|
border-radius: var(--atomix-skeleton-border-radius);
|
|
10324
12152
|
animation-name: atomix--skeleton-loading;
|
|
@@ -10329,6 +12157,15 @@ a, a:hover {
|
|
|
10329
12157
|
vertical-align: middle;
|
|
10330
12158
|
cursor: wait;
|
|
10331
12159
|
}
|
|
12160
|
+
@media (hover: hover) {
|
|
12161
|
+
.c-skeleton:hover {
|
|
12162
|
+
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, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 96%, 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%) 80%, 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%) 68%, 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%) 84%, 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%) 40%, transparent) 0%, transparent 60%);
|
|
12163
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 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%) 30%, 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%) 15%, transparent), 0 36px 72px 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 2px 4px rgba(0, 0, 0, 0.08);
|
|
12164
|
+
}
|
|
12165
|
+
}
|
|
12166
|
+
.c-skeleton:active {
|
|
12167
|
+
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, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 108%, 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%) 90%, transparent) 50%, 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%) 81%, transparent) 100%);
|
|
12168
|
+
}
|
|
10332
12169
|
.c-skeleton--rect {
|
|
10333
12170
|
width: calc(var(--atomix-skeleton-height) * 5.15);
|
|
10334
12171
|
min-height: calc(var(--atomix-skeleton-height) * 2.4);
|
|
@@ -10411,10 +12248,25 @@ a, a:hover {
|
|
|
10411
12248
|
display: flex;
|
|
10412
12249
|
align-items: center;
|
|
10413
12250
|
justify-content: center;
|
|
10414
|
-
|
|
12251
|
+
position: relative;
|
|
12252
|
+
isolation: isolate;
|
|
12253
|
+
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%);
|
|
12254
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12255
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12256
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10415
12258
|
border: 2px dashed var(--atomix-primary-border-subtle);
|
|
10416
12259
|
border-radius: 0.25rem;
|
|
10417
12260
|
}
|
|
12261
|
+
@media (hover: hover) {
|
|
12262
|
+
.c-slider--empty:hover {
|
|
12263
|
+
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-secondary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
12264
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12265
|
+
}
|
|
12266
|
+
}
|
|
12267
|
+
.c-slider--empty:active {
|
|
12268
|
+
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-secondary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 81%, transparent) 100%);
|
|
12269
|
+
}
|
|
10418
12270
|
.c-slider__wrapper {
|
|
10419
12271
|
position: relative;
|
|
10420
12272
|
z-index: 1;
|
|
@@ -10450,7 +12302,13 @@ a, a:hover {
|
|
|
10450
12302
|
height: var(--atomix-slider-nav-size);
|
|
10451
12303
|
border: none;
|
|
10452
12304
|
border-radius: 50rem;
|
|
10453
|
-
|
|
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);
|
|
10454
12312
|
color: var(--atomix-primary-text);
|
|
10455
12313
|
cursor: pointer;
|
|
10456
12314
|
pointer-events: auto;
|
|
@@ -10461,12 +12319,40 @@ a, a:hover {
|
|
|
10461
12319
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10462
12320
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
10463
12321
|
}
|
|
12322
|
+
@media (hover: hover) {
|
|
12323
|
+
.c-slider__navigation-prev:hover,
|
|
12324
|
+
.c-slider__navigation-next:hover {
|
|
12325
|
+
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-primary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
12326
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-primary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12327
|
+
}
|
|
12328
|
+
}
|
|
12329
|
+
.c-slider__navigation-prev:active,
|
|
12330
|
+
.c-slider__navigation-next:active {
|
|
12331
|
+
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-primary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 81%, transparent) 100%);
|
|
12332
|
+
}
|
|
10464
12333
|
.c-slider__navigation-prev:hover,
|
|
10465
12334
|
.c-slider__navigation-next:hover {
|
|
10466
|
-
|
|
12335
|
+
position: relative;
|
|
12336
|
+
isolation: isolate;
|
|
12337
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12339
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10467
12342
|
transform: translateY(-50%) scale(1.05);
|
|
10468
12343
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
10469
12344
|
}
|
|
12345
|
+
@media (hover: hover) {
|
|
12346
|
+
.c-slider__navigation-prev:hover:hover,
|
|
12347
|
+
.c-slider__navigation-next:hover:hover {
|
|
12348
|
+
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-secondary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
12349
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12350
|
+
}
|
|
12351
|
+
}
|
|
12352
|
+
.c-slider__navigation-prev:hover:active,
|
|
12353
|
+
.c-slider__navigation-next:hover:active {
|
|
12354
|
+
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-secondary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 81%, transparent) 100%);
|
|
12355
|
+
}
|
|
10470
12356
|
.c-slider__navigation-prev:active,
|
|
10471
12357
|
.c-slider__navigation-next:active {
|
|
10472
12358
|
transform: translateY(-50%) scale(0.95);
|
|
@@ -10515,22 +12401,67 @@ a, a:hover {
|
|
|
10515
12401
|
height: 0.5rem;
|
|
10516
12402
|
border-radius: 50rem;
|
|
10517
12403
|
border: none;
|
|
10518
|
-
|
|
12404
|
+
position: relative;
|
|
12405
|
+
isolation: isolate;
|
|
12406
|
+
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%);
|
|
12407
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12408
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12409
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10519
12411
|
cursor: pointer;
|
|
10520
12412
|
pointer-events: auto;
|
|
10521
12413
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10522
12414
|
}
|
|
12415
|
+
@media (hover: hover) {
|
|
12416
|
+
.c-slider__pagination-bullet:hover {
|
|
12417
|
+
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-tertiary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
12418
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12419
|
+
}
|
|
12420
|
+
}
|
|
12421
|
+
.c-slider__pagination-bullet:active {
|
|
12422
|
+
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
|
+
}
|
|
10523
12424
|
.c-slider__pagination-bullet:hover {
|
|
10524
|
-
|
|
12425
|
+
position: relative;
|
|
12426
|
+
isolation: isolate;
|
|
12427
|
+
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%);
|
|
12428
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12429
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12430
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10525
12432
|
transform: scale(1.2);
|
|
10526
12433
|
}
|
|
12434
|
+
@media (hover: hover) {
|
|
12435
|
+
.c-slider__pagination-bullet:hover:hover {
|
|
12436
|
+
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-secondary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
12437
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12438
|
+
}
|
|
12439
|
+
}
|
|
12440
|
+
.c-slider__pagination-bullet:hover:active {
|
|
12441
|
+
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-secondary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 81%, transparent) 100%);
|
|
12442
|
+
}
|
|
10527
12443
|
.c-slider__pagination-bullet:active {
|
|
10528
12444
|
transform: scale(1.1);
|
|
10529
12445
|
}
|
|
10530
12446
|
.c-slider__pagination-bullet--active {
|
|
10531
|
-
|
|
12447
|
+
position: relative;
|
|
12448
|
+
isolation: isolate;
|
|
12449
|
+
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%);
|
|
12450
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12451
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12452
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10532
12454
|
transform: scale(1.2);
|
|
10533
12455
|
}
|
|
12456
|
+
@media (hover: hover) {
|
|
12457
|
+
.c-slider__pagination-bullet--active:hover {
|
|
12458
|
+
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-primary) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-primary) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-primary) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary) 40%, transparent) 0%, transparent 60%);
|
|
12459
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-primary) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12460
|
+
}
|
|
12461
|
+
}
|
|
12462
|
+
.c-slider__pagination-bullet--active:active {
|
|
12463
|
+
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-primary) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-primary) 81%, transparent) 100%);
|
|
12464
|
+
}
|
|
10534
12465
|
.c-slider__empty-message {
|
|
10535
12466
|
color: var(--atomix-tertiary-text);
|
|
10536
12467
|
font-size: 1rem;
|
|
@@ -10685,9 +12616,24 @@ a, a:hover {
|
|
|
10685
12616
|
.c-steps__line {
|
|
10686
12617
|
width: var(--atomix-steps-line-width);
|
|
10687
12618
|
height: var(--atomix-steps-line-height);
|
|
10688
|
-
|
|
12619
|
+
position: relative;
|
|
12620
|
+
isolation: isolate;
|
|
12621
|
+
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%);
|
|
12622
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12623
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12624
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10689
12626
|
transition: 1s;
|
|
10690
12627
|
}
|
|
12628
|
+
@media (hover: hover) {
|
|
12629
|
+
.c-steps__line:hover {
|
|
12630
|
+
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-steps-item-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-steps-item-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-steps-item-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-steps-item-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-steps-item-bg) 40%, transparent) 0%, transparent 60%);
|
|
12631
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-steps-item-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-steps-item-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-steps-item-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12632
|
+
}
|
|
12633
|
+
}
|
|
12634
|
+
.c-steps__line:active {
|
|
12635
|
+
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-steps-item-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-steps-item-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-steps-item-bg) 81%, transparent) 100%);
|
|
12636
|
+
}
|
|
10691
12637
|
.c-steps__content {
|
|
10692
12638
|
display: flex;
|
|
10693
12639
|
flex-wrap: wrap;
|
|
@@ -10701,9 +12647,24 @@ a, a:hover {
|
|
|
10701
12647
|
height: var(--atomix-steps-item-number-size);
|
|
10702
12648
|
color: var(--atomix-steps-item-number-color);
|
|
10703
12649
|
font-size: var(--atomix-steps-item-number-font-size);
|
|
10704
|
-
|
|
12650
|
+
position: relative;
|
|
12651
|
+
isolation: isolate;
|
|
12652
|
+
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%);
|
|
12653
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12654
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12655
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10705
12657
|
border-radius: var(--atomix-steps-item-number-border-radius);
|
|
10706
12658
|
}
|
|
12659
|
+
@media (hover: hover) {
|
|
12660
|
+
.c-steps__number:hover {
|
|
12661
|
+
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-steps-item-number-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 40%, transparent) 0%, transparent 60%);
|
|
12662
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-steps-item-number-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-steps-item-number-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-steps-item-number-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12663
|
+
}
|
|
12664
|
+
}
|
|
12665
|
+
.c-steps__number:active {
|
|
12666
|
+
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-steps-item-number-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 81%, transparent) 100%);
|
|
12667
|
+
}
|
|
10707
12668
|
.c-steps__text {
|
|
10708
12669
|
color: var(--atomix-steps-item-color);
|
|
10709
12670
|
font-size: var(--atomix-steps-item-font-size);
|
|
@@ -10778,27 +12739,72 @@ a, a:hover {
|
|
|
10778
12739
|
border-radius: var(--atomix-tabs-nav-btn-border-radius);
|
|
10779
12740
|
border: var(--atomix-tabs-nav-btn-border-width) solid transparent;
|
|
10780
12741
|
border-bottom: var(--atomix-tabs-nav-btn-border-width) solid var(--atomix-tabs-nav-btn-border-color);
|
|
10781
|
-
|
|
12742
|
+
position: relative;
|
|
12743
|
+
isolation: isolate;
|
|
12744
|
+
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%);
|
|
12745
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12746
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12747
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10782
12749
|
transition-property: all;
|
|
10783
12750
|
transition-duration: 0.2s;
|
|
10784
12751
|
transition-timing-function: ease-in-out;
|
|
10785
12752
|
transition-delay: 0s;
|
|
10786
12753
|
}
|
|
12754
|
+
@media (hover: hover) {
|
|
12755
|
+
.c-tabs__nav-btn:hover {
|
|
12756
|
+
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-tabs-nav-btn-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 40%, transparent) 0%, transparent 60%);
|
|
12757
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12758
|
+
}
|
|
12759
|
+
}
|
|
12760
|
+
.c-tabs__nav-btn:active {
|
|
12761
|
+
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-tabs-nav-btn-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 81%, transparent) 100%);
|
|
12762
|
+
}
|
|
10787
12763
|
.c-tabs__nav-btn:active, .c-tabs__nav-btn.is-active {
|
|
10788
12764
|
color: var(--atomix-tabs-nav-btn-active-color);
|
|
10789
12765
|
border-color: transparent transparent var(--atomix-tabs-nav-btn-border-active-color) transparent;
|
|
10790
12766
|
}
|
|
10791
12767
|
.c-tabs__nav-btn:hover {
|
|
10792
|
-
|
|
12768
|
+
position: relative;
|
|
12769
|
+
isolation: isolate;
|
|
12770
|
+
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-hover) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 26%, transparent) 0%, transparent 60%);
|
|
12771
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12772
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12773
|
+
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-hover) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12774
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12775
|
+
}
|
|
12776
|
+
@media (hover: hover) {
|
|
12777
|
+
.c-tabs__nav-btn:hover:hover {
|
|
12778
|
+
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-tabs-nav-btn-bg-hover) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 40%, transparent) 0%, transparent 60%);
|
|
12779
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12780
|
+
}
|
|
12781
|
+
}
|
|
12782
|
+
.c-tabs__nav-btn:hover:active {
|
|
12783
|
+
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-tabs-nav-btn-bg-hover) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 81%, transparent) 100%);
|
|
10793
12784
|
}
|
|
10794
12785
|
.c-tabs__nav-btn:disabled, .c-tabs__nav-btn.is-disabled {
|
|
10795
12786
|
--atomix-tabs-nav-btn-border-active-color: var(
|
|
10796
12787
|
--atomix-tabs-nav-btn-border-disabled-color
|
|
10797
12788
|
);
|
|
10798
12789
|
color: var(--atomix-tabs-nav-btn-border-disabled-color);
|
|
10799
|
-
|
|
12790
|
+
position: relative;
|
|
12791
|
+
isolation: isolate;
|
|
12792
|
+
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%);
|
|
12793
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12794
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12795
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10800
12797
|
pointer-events: none;
|
|
10801
12798
|
}
|
|
12799
|
+
@media (hover: hover) {
|
|
12800
|
+
.c-tabs__nav-btn:disabled:hover, .c-tabs__nav-btn.is-disabled:hover {
|
|
12801
|
+
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-tabs-nav-btn-bg-disabled) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 40%, transparent) 0%, transparent 60%);
|
|
12802
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12803
|
+
}
|
|
12804
|
+
}
|
|
12805
|
+
.c-tabs__nav-btn:disabled:active, .c-tabs__nav-btn.is-disabled:active {
|
|
12806
|
+
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-tabs-nav-btn-bg-disabled) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 81%, transparent) 100%);
|
|
12807
|
+
}
|
|
10802
12808
|
.c-tabs__nav-btn:focus-visible {
|
|
10803
12809
|
outline: none;
|
|
10804
12810
|
border-color: var(--atomix-tabs-nav-btn-border-active-color);
|
|
@@ -10841,7 +12847,22 @@ a, a:hover {
|
|
|
10841
12847
|
width: 100%;
|
|
10842
12848
|
max-width: var(--atomix-testimonial-width);
|
|
10843
12849
|
padding: var(--atomix-testimonial-padding-y) var(--atomix-testimonial-padding-x);
|
|
10844
|
-
|
|
12850
|
+
position: relative;
|
|
12851
|
+
isolation: isolate;
|
|
12852
|
+
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-testimonial-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-testimonial-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-testimonial-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-testimonial-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-testimonial-bg) 26%, transparent) 0%, transparent 60%);
|
|
12853
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12854
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12855
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-testimonial-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-testimonial-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-testimonial-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12856
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12857
|
+
}
|
|
12858
|
+
@media (hover: hover) {
|
|
12859
|
+
.c-testimonial:hover {
|
|
12860
|
+
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-testimonial-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-testimonial-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-testimonial-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-testimonial-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-testimonial-bg) 40%, transparent) 0%, transparent 60%);
|
|
12861
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-testimonial-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-testimonial-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-testimonial-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12862
|
+
}
|
|
12863
|
+
}
|
|
12864
|
+
.c-testimonial:active {
|
|
12865
|
+
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-testimonial-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-testimonial-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-testimonial-bg) 81%, transparent) 100%);
|
|
10845
12866
|
}
|
|
10846
12867
|
.c-testimonial__quote {
|
|
10847
12868
|
color: var(--atomix-testimonial-quote-color);
|
|
@@ -10885,10 +12906,25 @@ a, a:hover {
|
|
|
10885
12906
|
margin-bottom: 1.5rem;
|
|
10886
12907
|
border: 1px solid var(--atomix-todo-border-color);
|
|
10887
12908
|
border-radius: var(--atomix-todo-border-radius);
|
|
10888
|
-
|
|
12909
|
+
position: relative;
|
|
12910
|
+
isolation: isolate;
|
|
12911
|
+
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%);
|
|
12912
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12913
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12914
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10889
12916
|
color: var(--atomix-todo-color);
|
|
10890
12917
|
padding: 1.25rem;
|
|
10891
12918
|
}
|
|
12919
|
+
@media (hover: hover) {
|
|
12920
|
+
.c-todo:hover {
|
|
12921
|
+
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-todo-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-todo-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-todo-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-todo-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-todo-bg) 40%, transparent) 0%, transparent 60%);
|
|
12922
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-todo-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-todo-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-todo-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12923
|
+
}
|
|
12924
|
+
}
|
|
12925
|
+
.c-todo:active {
|
|
12926
|
+
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-todo-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-todo-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-todo-bg) 81%, transparent) 100%);
|
|
12927
|
+
}
|
|
10892
12928
|
.c-todo__title {
|
|
10893
12929
|
font-size: 1.25rem;
|
|
10894
12930
|
font-weight: 700;
|
|
@@ -10927,7 +12963,22 @@ a, a:hover {
|
|
|
10927
12963
|
transition: background-color 0.2s ease;
|
|
10928
12964
|
}
|
|
10929
12965
|
.c-todo__item:hover {
|
|
10930
|
-
|
|
12966
|
+
position: relative;
|
|
12967
|
+
isolation: isolate;
|
|
12968
|
+
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-item-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
12969
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12970
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
12971
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-todo-item-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-todo-item-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-todo-item-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12972
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12973
|
+
}
|
|
12974
|
+
@media (hover: hover) {
|
|
12975
|
+
.c-todo__item:hover:hover {
|
|
12976
|
+
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-todo-item-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
12977
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-todo-item-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-todo-item-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-todo-item-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12978
|
+
}
|
|
12979
|
+
}
|
|
12980
|
+
.c-todo__item:hover:active {
|
|
12981
|
+
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-todo-item-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 81%, transparent) 100%);
|
|
10931
12982
|
}
|
|
10932
12983
|
.c-todo__item--completed .c-todo__item-text {
|
|
10933
12984
|
color: var(--atomix-todo-completed-color);
|
|
@@ -11015,7 +13066,13 @@ a, a:hover {
|
|
|
11015
13066
|
flex: 0 0 var(--atomix-toggle-switch-width);
|
|
11016
13067
|
width: var(--atomix-toggle-switch-width);
|
|
11017
13068
|
height: var(--atomix-toggle-switch-height);
|
|
11018
|
-
|
|
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);
|
|
11019
13076
|
border-radius: var(--atomix-toggle-switch-border-radius);
|
|
11020
13077
|
-webkit-user-select: none;
|
|
11021
13078
|
-moz-user-select: none;
|
|
@@ -11026,19 +13083,43 @@ a, a:hover {
|
|
|
11026
13083
|
transition-timing-function: ease-in-out;
|
|
11027
13084
|
transition-delay: 0s;
|
|
11028
13085
|
}
|
|
13086
|
+
@media (hover: hover) {
|
|
13087
|
+
.c-toggle__switch:hover {
|
|
13088
|
+
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-toggle-switch-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 40%, transparent) 0%, transparent 60%);
|
|
13089
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-toggle-switch-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13090
|
+
}
|
|
13091
|
+
}
|
|
13092
|
+
.c-toggle__switch:active {
|
|
13093
|
+
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-toggle-switch-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 81%, transparent) 100%);
|
|
13094
|
+
}
|
|
11029
13095
|
.c-toggle__switch::before {
|
|
11030
13096
|
content: "";
|
|
11031
13097
|
display: inline-block;
|
|
11032
13098
|
width: var(--atomix-toggle-switch-handle-width);
|
|
11033
13099
|
height: var(--atomix-toggle-switch-handle-height);
|
|
11034
13100
|
margin: var(--atomix-toggle-switch-handle-margin);
|
|
11035
|
-
|
|
13101
|
+
position: relative;
|
|
13102
|
+
isolation: isolate;
|
|
13103
|
+
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%);
|
|
13104
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13105
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
13106
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11036
13108
|
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
11037
13109
|
transition-property: all;
|
|
11038
13110
|
transition-duration: 0.2s;
|
|
11039
13111
|
transition-timing-function: ease-in-out;
|
|
11040
13112
|
transition-delay: 0s;
|
|
11041
13113
|
}
|
|
13114
|
+
@media (hover: hover) {
|
|
13115
|
+
.c-toggle__switch::before:hover {
|
|
13116
|
+
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-toggle-switch-handle-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 40%, transparent) 0%, transparent 60%);
|
|
13117
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13118
|
+
}
|
|
13119
|
+
}
|
|
13120
|
+
.c-toggle__switch::before:active {
|
|
13121
|
+
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-toggle-switch-handle-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 81%, transparent) 100%);
|
|
13122
|
+
}
|
|
11042
13123
|
.c-toggle__label {
|
|
11043
13124
|
font-size: var(--atomix-toggle-label-font-size);
|
|
11044
13125
|
color: var(--atomix-toggle-label-color);
|
|
@@ -11053,7 +13134,22 @@ a, a:hover {
|
|
|
11053
13134
|
pointer-events: none;
|
|
11054
13135
|
}
|
|
11055
13136
|
.c-toggle.is-disabled:not(.is-on) .c-toggle__switch {
|
|
11056
|
-
|
|
13137
|
+
position: relative;
|
|
13138
|
+
isolation: isolate;
|
|
13139
|
+
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-disabled-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 26%, transparent) 0%, transparent 60%);
|
|
13140
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13141
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
13142
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13143
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13144
|
+
}
|
|
13145
|
+
@media (hover: hover) {
|
|
13146
|
+
.c-toggle.is-disabled:not(.is-on) .c-toggle__switch:hover {
|
|
13147
|
+
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-toggle-switch-disabled-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 40%, transparent) 0%, transparent 60%);
|
|
13148
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13149
|
+
}
|
|
13150
|
+
}
|
|
13151
|
+
.c-toggle.is-disabled:not(.is-on) .c-toggle__switch:active {
|
|
13152
|
+
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-toggle-switch-disabled-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 81%, transparent) 100%);
|
|
11057
13153
|
}
|
|
11058
13154
|
.c-toggle.is-disabled.is-on {
|
|
11059
13155
|
pointer-events: none;
|
|
@@ -11062,14 +13158,44 @@ a, a:hover {
|
|
|
11062
13158
|
content: "";
|
|
11063
13159
|
position: absolute;
|
|
11064
13160
|
inset: 0;
|
|
11065
|
-
|
|
13161
|
+
position: relative;
|
|
13162
|
+
isolation: isolate;
|
|
13163
|
+
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%);
|
|
13164
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13165
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
13166
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11066
13168
|
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
11067
13169
|
}
|
|
13170
|
+
@media (hover: hover) {
|
|
13171
|
+
.c-toggle.is-disabled.is-on .c-toggle__switch::after:hover {
|
|
13172
|
+
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(107, 114, 128, 0.6) 96%, transparent) 0%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 80%, transparent) 40%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 68%, transparent) 70%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 40%, transparent) 0%, transparent 60%);
|
|
13173
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(107, 114, 128, 0.6) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(107, 114, 128, 0.6) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(107, 114, 128, 0.6) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13174
|
+
}
|
|
13175
|
+
}
|
|
13176
|
+
.c-toggle.is-disabled.is-on .c-toggle__switch::after:active {
|
|
13177
|
+
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, rgba(107, 114, 128, 0.6) 108%, transparent) 0%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 90%, transparent) 50%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 81%, transparent) 100%);
|
|
13178
|
+
}
|
|
11068
13179
|
.c-toggle--glass {
|
|
11069
13180
|
--atomix-toggle-switch-bg: transparent;
|
|
11070
13181
|
}
|
|
11071
13182
|
.c-toggle--glass .c-toggle__switch {
|
|
11072
|
-
|
|
13183
|
+
position: relative;
|
|
13184
|
+
isolation: isolate;
|
|
13185
|
+
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%);
|
|
13186
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13187
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
13188
|
+
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);
|
|
13189
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13190
|
+
}
|
|
13191
|
+
@media (hover: hover) {
|
|
13192
|
+
.c-toggle--glass .c-toggle__switch:hover {
|
|
13193
|
+
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-toggle-switch-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 40%, transparent) 0%, transparent 60%);
|
|
13194
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-toggle-switch-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13195
|
+
}
|
|
13196
|
+
}
|
|
13197
|
+
.c-toggle--glass .c-toggle__switch:active {
|
|
13198
|
+
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-toggle-switch-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 81%, transparent) 100%);
|
|
11073
13199
|
}
|
|
11074
13200
|
.c-toggle--glass .c-toggle__switch::before {
|
|
11075
13201
|
opacity: 0.5;
|
|
@@ -11106,7 +13232,13 @@ a, a:hover {
|
|
|
11106
13232
|
font-size: var(--atomix-tooltip-font-size);
|
|
11107
13233
|
font-weight: var(--atomix-tooltip-font-weight);
|
|
11108
13234
|
padding: var(--atomix-tooltip-padding-y) var(--atomix-tooltip-padding-x);
|
|
11109
|
-
|
|
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);
|
|
11110
13242
|
border-radius: var(--atomix-tooltip-border-radius);
|
|
11111
13243
|
box-shadow: var(--atomix-tooltip-box-shadow);
|
|
11112
13244
|
z-index: 2;
|
|
@@ -11115,6 +13247,15 @@ a, a:hover {
|
|
|
11115
13247
|
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11116
13248
|
transform: scale(0.95);
|
|
11117
13249
|
}
|
|
13250
|
+
@media (hover: hover) {
|
|
13251
|
+
.c-tooltip__content:hover {
|
|
13252
|
+
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-tooltip-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent) 0%, transparent 60%);
|
|
13253
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13254
|
+
}
|
|
13255
|
+
}
|
|
13256
|
+
.c-tooltip__content:active {
|
|
13257
|
+
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-tooltip-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tooltip-bg) 81%, transparent) 100%);
|
|
13258
|
+
}
|
|
11118
13259
|
.c-tooltip__content.is-active {
|
|
11119
13260
|
opacity: 1;
|
|
11120
13261
|
transform: scale(1);
|
|
@@ -11124,10 +13265,25 @@ a, a:hover {
|
|
|
11124
13265
|
width: var(--atomix-tooltip-arrow-size);
|
|
11125
13266
|
height: var(--atomix-tooltip-arrow-size);
|
|
11126
13267
|
border-radius: calc((var(--atomix-tooltip-arrow-size) - var(--atomix-tooltip-border-radius)) / 2);
|
|
11127
|
-
|
|
13268
|
+
position: relative;
|
|
13269
|
+
isolation: isolate;
|
|
13270
|
+
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%);
|
|
13271
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13272
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
13273
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11128
13275
|
z-index: 1;
|
|
11129
13276
|
transform: rotate(45deg);
|
|
11130
13277
|
}
|
|
13278
|
+
@media (hover: hover) {
|
|
13279
|
+
.c-tooltip__arrow:hover {
|
|
13280
|
+
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-tooltip-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent) 0%, transparent 60%);
|
|
13281
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13282
|
+
}
|
|
13283
|
+
}
|
|
13284
|
+
.c-tooltip__arrow:active {
|
|
13285
|
+
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-tooltip-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tooltip-bg) 81%, transparent) 100%);
|
|
13286
|
+
}
|
|
11131
13287
|
.c-tooltip--left .c-tooltip__arrow, .c-tooltip--right .c-tooltip__arrow {
|
|
11132
13288
|
transform: rotate(45deg);
|
|
11133
13289
|
}
|
|
@@ -11138,13 +13294,58 @@ a, a:hover {
|
|
|
11138
13294
|
transform: rotate(225deg);
|
|
11139
13295
|
}
|
|
11140
13296
|
.c-tooltip--glass .c-tooltip__content {
|
|
11141
|
-
|
|
13297
|
+
position: relative;
|
|
13298
|
+
isolation: isolate;
|
|
13299
|
+
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) 43%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 33%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 12%, transparent) 0%, transparent 60%);
|
|
13300
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13301
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
13302
|
+
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);
|
|
13303
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13304
|
+
}
|
|
13305
|
+
@media (hover: hover) {
|
|
13306
|
+
.c-tooltip--glass .c-tooltip__content:hover {
|
|
13307
|
+
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-tooltip-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent) 0%, transparent 60%);
|
|
13308
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13309
|
+
}
|
|
13310
|
+
}
|
|
13311
|
+
.c-tooltip--glass .c-tooltip__content:active {
|
|
13312
|
+
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-tooltip-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tooltip-bg) 81%, transparent) 100%);
|
|
11142
13313
|
}
|
|
11143
13314
|
.c-tooltip--glass .c-tooltip__arrow {
|
|
11144
|
-
|
|
13315
|
+
position: relative;
|
|
13316
|
+
isolation: isolate;
|
|
13317
|
+
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) 43%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 33%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 12%, transparent) 0%, transparent 60%);
|
|
13318
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13319
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
13320
|
+
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);
|
|
13321
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13322
|
+
}
|
|
13323
|
+
@media (hover: hover) {
|
|
13324
|
+
.c-tooltip--glass .c-tooltip__arrow:hover {
|
|
13325
|
+
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-tooltip-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent) 0%, transparent 60%);
|
|
13326
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13327
|
+
}
|
|
13328
|
+
}
|
|
13329
|
+
.c-tooltip--glass .c-tooltip__arrow:active {
|
|
13330
|
+
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-tooltip-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tooltip-bg) 81%, transparent) 100%);
|
|
11145
13331
|
}
|
|
11146
13332
|
.c-tooltip--glass .c-tooltip__arrow {
|
|
11147
|
-
|
|
13333
|
+
position: relative;
|
|
13334
|
+
isolation: isolate;
|
|
13335
|
+
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) 43%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 33%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 12%, transparent) 0%, transparent 60%);
|
|
13336
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13337
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
13338
|
+
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);
|
|
13339
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13340
|
+
}
|
|
13341
|
+
@media (hover: hover) {
|
|
13342
|
+
.c-tooltip--glass .c-tooltip__arrow:hover {
|
|
13343
|
+
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-tooltip-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent) 0%, transparent 60%);
|
|
13344
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13345
|
+
}
|
|
13346
|
+
}
|
|
13347
|
+
.c-tooltip--glass .c-tooltip__arrow:active {
|
|
13348
|
+
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-tooltip-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tooltip-bg) 81%, transparent) 100%);
|
|
11148
13349
|
}
|
|
11149
13350
|
.c-upload {
|
|
11150
13351
|
--atomix-upload-width: 31.25rem;
|
|
@@ -11201,15 +13402,45 @@ a, a:hover {
|
|
|
11201
13402
|
width: 100%;
|
|
11202
13403
|
max-width: var(--atomix-upload-width);
|
|
11203
13404
|
padding: var(--atomix-upload-padding-y) var(--atomix-upload-padding-x);
|
|
11204
|
-
|
|
13405
|
+
position: relative;
|
|
13406
|
+
isolation: isolate;
|
|
13407
|
+
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%);
|
|
13408
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13409
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
13410
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11205
13412
|
border-radius: var(--atomix-upload-border-radius);
|
|
11206
13413
|
transition-property: all;
|
|
11207
13414
|
transition-duration: 0.2s;
|
|
11208
13415
|
transition-timing-function: ease-in-out;
|
|
11209
13416
|
transition-delay: 0s;
|
|
11210
13417
|
}
|
|
13418
|
+
@media (hover: hover) {
|
|
13419
|
+
.c-upload:hover {
|
|
13420
|
+
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-upload-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-upload-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-upload-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-upload-bg) 40%, transparent) 0%, transparent 60%);
|
|
13421
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-upload-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-upload-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-upload-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13422
|
+
}
|
|
13423
|
+
}
|
|
13424
|
+
.c-upload:active {
|
|
13425
|
+
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-upload-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-upload-bg) 81%, transparent) 100%);
|
|
13426
|
+
}
|
|
11211
13427
|
.c-upload:hover {
|
|
11212
|
-
|
|
13428
|
+
position: relative;
|
|
13429
|
+
isolation: isolate;
|
|
13430
|
+
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-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-upload-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-upload-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-upload-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
13431
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13432
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
13433
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-upload-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-upload-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-upload-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13434
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13435
|
+
}
|
|
13436
|
+
@media (hover: hover) {
|
|
13437
|
+
.c-upload:hover:hover {
|
|
13438
|
+
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-upload-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-upload-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-upload-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-upload-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
13439
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-upload-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-upload-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-upload-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13440
|
+
}
|
|
13441
|
+
}
|
|
13442
|
+
.c-upload:hover:active {
|
|
13443
|
+
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-upload-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-upload-hover-bg) 81%, transparent) 100%);
|
|
11213
13444
|
}
|
|
11214
13445
|
.c-upload__inner {
|
|
11215
13446
|
display: flex;
|
|
@@ -11536,11 +13767,26 @@ a, a:hover {
|
|
|
11536
13767
|
--atomix--video-player-subtitle-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
11537
13768
|
position: relative;
|
|
11538
13769
|
width: 100%;
|
|
11539
|
-
|
|
13770
|
+
position: relative;
|
|
13771
|
+
isolation: isolate;
|
|
13772
|
+
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%);
|
|
13773
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13774
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
13775
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11540
13777
|
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
11541
13778
|
overflow: hidden;
|
|
11542
13779
|
font-family: var(--atomix--font-family-base);
|
|
11543
13780
|
}
|
|
13781
|
+
@media (hover: hover) {
|
|
13782
|
+
.c-video-player:hover {
|
|
13783
|
+
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--video-player-bg, #000) 96%, transparent) 0%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 80%, transparent) 40%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 68%, transparent) 70%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 40%, transparent) 0%, transparent 60%);
|
|
13784
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix--video-player-bg, #000) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix--video-player-bg, #000) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix--video-player-bg, #000) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13785
|
+
}
|
|
13786
|
+
}
|
|
13787
|
+
.c-video-player:active {
|
|
13788
|
+
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--video-player-bg, #000) 108%, transparent) 0%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 90%, transparent) 50%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 81%, transparent) 100%);
|
|
13789
|
+
}
|
|
11544
13790
|
.c-video-player__video {
|
|
11545
13791
|
width: 100%;
|
|
11546
13792
|
height: 100%;
|
|
@@ -11790,13 +14036,28 @@ a, a:hover {
|
|
|
11790
14036
|
bottom: 3.125rem;
|
|
11791
14037
|
right: 0;
|
|
11792
14038
|
min-width: 12.5rem;
|
|
11793
|
-
|
|
14039
|
+
position: relative;
|
|
14040
|
+
isolation: isolate;
|
|
14041
|
+
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%);
|
|
14042
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
14043
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
14044
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11794
14046
|
border-radius: 0.5rem;
|
|
11795
14047
|
padding: 0.5rem;
|
|
11796
14048
|
-webkit-backdrop-filter: blur(10px);
|
|
11797
14049
|
backdrop-filter: blur(10px);
|
|
11798
14050
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
11799
14051
|
}
|
|
14052
|
+
@media (hover: hover) {
|
|
14053
|
+
.c-video-player__settings-menu:hover {
|
|
14054
|
+
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-primary-rgb), 0.7) 96%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 80%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 68%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 40%, transparent) 0%, transparent 60%);
|
|
14055
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
14056
|
+
}
|
|
14057
|
+
}
|
|
14058
|
+
.c-video-player__settings-menu:active {
|
|
14059
|
+
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, rgba(var(--atomix-primary-rgb), 0.7) 108%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 90%, transparent) 50%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 81%, transparent) 100%);
|
|
14060
|
+
}
|
|
11800
14061
|
.c-video-player__settings-tabs {
|
|
11801
14062
|
display: flex;
|
|
11802
14063
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
@@ -12058,13 +14319,28 @@ a, a:hover {
|
|
|
12058
14319
|
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12059
14320
|
}
|
|
12060
14321
|
.c-photo-viewer__container {
|
|
12061
|
-
|
|
14322
|
+
position: relative;
|
|
14323
|
+
isolation: isolate;
|
|
14324
|
+
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
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
14326
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12062
14329
|
border: 1px solid var(--atomix-primary-border-subtle);
|
|
12063
14330
|
border-radius: 0.625rem;
|
|
12064
14331
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
|
|
12065
14332
|
-webkit-backdrop-filter: blur(8px);
|
|
12066
14333
|
backdrop-filter: blur(8px);
|
|
12067
14334
|
}
|
|
14335
|
+
@media (hover: hover) {
|
|
14336
|
+
.c-photo-viewer__container:hover {
|
|
14337
|
+
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%);
|
|
14338
|
+
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);
|
|
14339
|
+
}
|
|
14340
|
+
}
|
|
14341
|
+
.c-photo-viewer__container:active {
|
|
14342
|
+
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%);
|
|
14343
|
+
}
|
|
12068
14344
|
.c-photo-viewer__info-panel, .c-photo-viewer__thumbnails {
|
|
12069
14345
|
scrollbar-width: thin;
|
|
12070
14346
|
scrollbar-color: var(--atomix-tertiary-text-emphasis) transparent;
|
|
@@ -12111,12 +14387,27 @@ a, a:hover {
|
|
|
12111
14387
|
border: 2px solid transparent;
|
|
12112
14388
|
border-radius: 0.5rem;
|
|
12113
14389
|
padding: 0;
|
|
12114
|
-
|
|
14390
|
+
position: relative;
|
|
14391
|
+
isolation: isolate;
|
|
14392
|
+
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%);
|
|
14393
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
14394
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
14395
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12115
14397
|
cursor: pointer;
|
|
12116
14398
|
overflow: hidden;
|
|
12117
14399
|
position: relative;
|
|
12118
14400
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
|
|
12119
14401
|
}
|
|
14402
|
+
@media (hover: hover) {
|
|
14403
|
+
.c-photo-viewer__thumbnail:hover {
|
|
14404
|
+
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, transparent 96%, transparent) 0%, color-mix(in srgb, transparent 80%, transparent) 40%, color-mix(in srgb, transparent 68%, transparent) 70%, color-mix(in srgb, transparent 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, transparent 40%, transparent) 0%, transparent 60%);
|
|
14405
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, transparent 30%, transparent), 0 24px 48px 0 color-mix(in srgb, transparent 15%, transparent), 0 36px 72px 0 color-mix(in srgb, transparent 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
14406
|
+
}
|
|
14407
|
+
}
|
|
14408
|
+
.c-photo-viewer__thumbnail:active {
|
|
14409
|
+
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, transparent 108%, transparent) 0%, color-mix(in srgb, transparent 90%, transparent) 50%, color-mix(in srgb, transparent 81%, transparent) 100%);
|
|
14410
|
+
}
|
|
12120
14411
|
.c-photo-viewer__thumbnail:hover {
|
|
12121
14412
|
transform: translateY(-2px);
|
|
12122
14413
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
@@ -12169,10 +14460,25 @@ body.is-open-photoviewer {
|
|
|
12169
14460
|
width: 100vw;
|
|
12170
14461
|
height: 100vh;
|
|
12171
14462
|
z-index: 1000;
|
|
12172
|
-
|
|
14463
|
+
position: relative;
|
|
14464
|
+
isolation: isolate;
|
|
14465
|
+
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%);
|
|
14466
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
14467
|
+
backdrop-filter: blur(12px) saturate(1.4);
|
|
14468
|
+
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
|
+
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12173
14470
|
opacity: 1;
|
|
12174
14471
|
transition-property: opacity;
|
|
12175
14472
|
}
|
|
14473
|
+
@media (hover: hover) {
|
|
14474
|
+
.c-photo-viewer:hover {
|
|
14475
|
+
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, transparent 96%, transparent) 0%, color-mix(in srgb, transparent 80%, transparent) 40%, color-mix(in srgb, transparent 68%, transparent) 70%, color-mix(in srgb, transparent 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, transparent 40%, transparent) 0%, transparent 60%);
|
|
14476
|
+
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, transparent 30%, transparent), 0 24px 48px 0 color-mix(in srgb, transparent 15%, transparent), 0 36px 72px 0 color-mix(in srgb, transparent 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
14477
|
+
}
|
|
14478
|
+
}
|
|
14479
|
+
.c-photo-viewer:active {
|
|
14480
|
+
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, transparent 108%, transparent) 0%, color-mix(in srgb, transparent 90%, transparent) 50%, color-mix(in srgb, transparent 81%, transparent) 100%);
|
|
14481
|
+
}
|
|
12176
14482
|
.c-photo-viewer__backdrop {
|
|
12177
14483
|
position: absolute;
|
|
12178
14484
|
inset: 0;
|
|
@@ -12848,68 +15154,68 @@ body.is-open-photoviewer {
|
|
|
12848
15154
|
}
|
|
12849
15155
|
}
|
|
12850
15156
|
.u-link-primary {
|
|
12851
|
-
color:
|
|
12852
|
-
text-decoration-color:
|
|
15157
|
+
color: rgba(var(--atomix-primary-rgb), var(--atomix-u-link-opacity, 1)) !important;
|
|
15158
|
+
text-decoration-color: rgba(var(--atomix-primary-rgb), var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12853
15159
|
}
|
|
12854
15160
|
.u-link-primary:hover, .u-link-primary:focus {
|
|
12855
|
-
color:
|
|
12856
|
-
text-decoration-color:
|
|
15161
|
+
color: rgba(156.4, 116.45, 247.35, var(--atomix-u-link-opacity, 1)) !important;
|
|
15162
|
+
text-decoration-color: rgba(156.4, 116.45, 247.35, var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12857
15163
|
}
|
|
12858
15164
|
.u-link-secondary {
|
|
12859
|
-
color:
|
|
12860
|
-
text-decoration-color:
|
|
15165
|
+
color: rgba(var(--atomix-secondary-rgb), var(--atomix-u-link-opacity, 1)) !important;
|
|
15166
|
+
text-decoration-color: rgba(var(--atomix-secondary-rgb), var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12861
15167
|
}
|
|
12862
15168
|
.u-link-secondary:hover, .u-link-secondary:focus {
|
|
12863
|
-
color:
|
|
12864
|
-
text-decoration-color:
|
|
15169
|
+
color: rgba(244.8, 245.65, 247.35, var(--atomix-u-link-opacity, 1)) !important;
|
|
15170
|
+
text-decoration-color: rgba(244.8, 245.65, 247.35, var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12865
15171
|
}
|
|
12866
15172
|
.u-link-success {
|
|
12867
|
-
color:
|
|
12868
|
-
text-decoration-color:
|
|
15173
|
+
color: rgba(var(--atomix-success-rgb), var(--atomix-u-link-opacity, 1)) !important;
|
|
15174
|
+
text-decoration-color: rgba(var(--atomix-success-rgb), var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12869
15175
|
}
|
|
12870
15176
|
.u-link-success:hover, .u-link-success:focus {
|
|
12871
|
-
color:
|
|
12872
|
-
text-decoration-color:
|
|
15177
|
+
color: rgba(67.15, 205.7, 118.15, var(--atomix-u-link-opacity, 1)) !important;
|
|
15178
|
+
text-decoration-color: rgba(67.15, 205.7, 118.15, var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12873
15179
|
}
|
|
12874
15180
|
.u-link-info {
|
|
12875
|
-
color:
|
|
12876
|
-
text-decoration-color:
|
|
15181
|
+
color: rgba(var(--atomix-info-rgb), var(--atomix-u-link-opacity, 1)) !important;
|
|
15182
|
+
text-decoration-color: rgba(var(--atomix-info-rgb), var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12877
15183
|
}
|
|
12878
15184
|
.u-link-info:hover, .u-link-info:focus {
|
|
12879
|
-
color:
|
|
12880
|
-
text-decoration-color:
|
|
15185
|
+
color: rgba(88.4, 148.75, 247.35, var(--atomix-u-link-opacity, 1)) !important;
|
|
15186
|
+
text-decoration-color: rgba(88.4, 148.75, 247.35, var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12881
15187
|
}
|
|
12882
15188
|
.u-link-warning {
|
|
12883
|
-
color:
|
|
12884
|
-
text-decoration-color:
|
|
15189
|
+
color: rgba(var(--atomix-warning-rgb), var(--atomix-u-link-opacity, 1)) !important;
|
|
15190
|
+
text-decoration-color: rgba(var(--atomix-warning-rgb), var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12885
15191
|
}
|
|
12886
15192
|
.u-link-warning:hover, .u-link-warning:focus {
|
|
12887
|
-
color:
|
|
12888
|
-
text-decoration-color:
|
|
15193
|
+
color: rgba(237.15, 190.4, 45.05, var(--atomix-u-link-opacity, 1)) !important;
|
|
15194
|
+
text-decoration-color: rgba(237.15, 190.4, 45.05, var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12889
15195
|
}
|
|
12890
15196
|
.u-link-error {
|
|
12891
|
-
color:
|
|
12892
|
-
text-decoration-color:
|
|
15197
|
+
color: rgba(var(--atomix-error-rgb), var(--atomix-u-link-opacity, 1)) !important;
|
|
15198
|
+
text-decoration-color: rgba(var(--atomix-error-rgb), var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12893
15199
|
}
|
|
12894
15200
|
.u-link-error:hover, .u-link-error:focus {
|
|
12895
|
-
color:
|
|
12896
|
-
text-decoration-color:
|
|
15201
|
+
color: rgba(241.4, 96.05, 96.05, var(--atomix-u-link-opacity, 1)) !important;
|
|
15202
|
+
text-decoration-color: rgba(241.4, 96.05, 96.05, var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12897
15203
|
}
|
|
12898
15204
|
.u-link-light {
|
|
12899
|
-
color:
|
|
12900
|
-
text-decoration-color:
|
|
15205
|
+
color: rgba(var(--atomix-light-rgb), var(--atomix-u-link-opacity, 1)) !important;
|
|
15206
|
+
text-decoration-color: rgba(var(--atomix-light-rgb), var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12901
15207
|
}
|
|
12902
15208
|
.u-link-light:hover, .u-link-light:focus {
|
|
12903
|
-
color:
|
|
12904
|
-
text-decoration-color:
|
|
15209
|
+
color: rgba(249.9, 250.75, 251.6, var(--atomix-u-link-opacity, 1)) !important;
|
|
15210
|
+
text-decoration-color: rgba(249.9, 250.75, 251.6, var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12905
15211
|
}
|
|
12906
15212
|
.u-link-dark {
|
|
12907
|
-
color:
|
|
12908
|
-
text-decoration-color:
|
|
15213
|
+
color: rgba(var(--atomix-dark-rgb), var(--atomix-u-link-opacity, 1)) !important;
|
|
15214
|
+
text-decoration-color: rgba(var(--atomix-dark-rgb), var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12909
15215
|
}
|
|
12910
15216
|
.u-link-dark:hover, .u-link-dark:focus {
|
|
12911
|
-
color:
|
|
12912
|
-
text-decoration-color:
|
|
15217
|
+
color: rgba(64.6, 73.1, 85, var(--atomix-u-link-opacity, 1)) !important;
|
|
15218
|
+
text-decoration-color: rgba(64.6, 73.1, 85, var(--atomix-u-link-underline-opacity, 1)) !important;
|
|
12913
15219
|
}
|
|
12914
15220
|
.u-visually-hidden {
|
|
12915
15221
|
border: 0;
|