@shohojdhara/atomix 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/atomix.css +292 -529
- package/dist/atomix.min.css +5 -5
- package/dist/index.d.ts +623 -121
- package/dist/index.esm.js +11475 -6047
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4698 -2755
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/themes/boomdevs.css +291 -528
- package/dist/themes/boomdevs.min.css +6 -6
- package/dist/themes/esrar.css +292 -529
- package/dist/themes/esrar.min.css +6 -6
- package/dist/themes/mashroom.css +286 -526
- package/dist/themes/mashroom.min.css +6 -6
- package/dist/themes/shaj-default.css +286 -526
- package/dist/themes/shaj-default.min.css +6 -6
- package/package.json +66 -15
- package/src/components/Accordion/Accordion.stories.tsx +137 -0
- package/src/components/Accordion/Accordion.tsx +33 -3
- package/src/components/AtomixGlass/AtomixGlass.stories.tsx +3011 -0
- package/src/components/AtomixGlass/AtomixGlass.test.tsx +199 -0
- package/src/components/AtomixGlass/AtomixGlass.tsx +1281 -0
- package/src/components/AtomixGlass/AtomixGlassComprehensivePreview.stories.tsx +1369 -0
- package/src/components/AtomixGlass/README.md +134 -0
- package/src/components/AtomixGlass/index.ts +10 -0
- package/src/components/AtomixGlass/shader-utils.ts +140 -0
- package/src/components/AtomixGlass/utils.ts +8 -0
- package/src/components/Badge/Badge.stories.tsx +169 -0
- package/src/components/Badge/Badge.tsx +27 -2
- package/src/components/Button/Button.stories.tsx +345 -0
- package/src/components/Button/Button.tsx +35 -3
- package/src/components/Button/README.md +216 -0
- package/src/components/Callout/Callout.stories.tsx +813 -78
- package/src/components/Callout/Callout.test.tsx +368 -0
- package/src/components/Callout/Callout.tsx +26 -7
- package/src/components/Callout/README.md +409 -0
- package/src/components/Card/Card.stories.tsx +140 -0
- package/src/components/Card/Card.tsx +19 -3
- package/src/components/DatePicker/DatePicker copy.tsx +551 -0
- package/src/components/DatePicker/DatePicker.stories.tsx +188 -0
- package/src/components/DatePicker/DatePicker.tsx +379 -332
- package/src/components/DatePicker/readme.md +110 -1
- package/src/components/DatePicker/types.ts +8 -0
- package/src/components/Dropdown/Dropdown.stories.tsx +145 -0
- package/src/components/Dropdown/Dropdown.tsx +34 -5
- package/src/components/Form/Checkbox.stories.tsx +101 -0
- package/src/components/Form/Checkbox.tsx +26 -2
- package/src/components/Form/Input.stories.tsx +124 -0
- package/src/components/Form/Input.tsx +36 -7
- package/src/components/Form/Radio.stories.tsx +139 -0
- package/src/components/Form/Radio.tsx +26 -2
- package/src/components/Form/Select.stories.tsx +110 -0
- package/src/components/Form/Select.tsx +26 -2
- package/src/components/Form/Textarea.stories.tsx +104 -0
- package/src/components/Form/Textarea.tsx +36 -7
- package/src/components/Hero/Hero.stories.tsx +54 -1
- package/src/components/Hero/Hero.tsx +70 -11
- package/src/components/Modal/Modal.stories.tsx +235 -0
- package/src/components/Modal/Modal.tsx +64 -35
- package/src/components/Pagination/Pagination.stories.tsx +101 -0
- package/src/components/Pagination/Pagination.tsx +25 -1
- package/src/components/Popover/Popover.stories.tsx +94 -0
- package/src/components/Popover/Popover.tsx +30 -4
- package/src/components/Rating/Rating.stories.tsx +112 -0
- package/src/components/Rating/Rating.tsx +25 -1
- package/src/components/Steps/Steps.stories.tsx +119 -0
- package/src/components/Steps/Steps.tsx +32 -1
- package/src/components/Tab/Tab.stories.tsx +88 -0
- package/src/components/Tab/Tab.tsx +32 -1
- package/src/components/Toggle/Toggle.stories.tsx +92 -0
- package/src/components/Toggle/Toggle.tsx +32 -1
- package/src/components/Tooltip/Tooltip.stories.tsx +131 -0
- package/src/components/Tooltip/Tooltip.tsx +43 -7
- package/src/components/VideoPlayer/VideoPlayer.stories.tsx +1002 -196
- package/src/components/VideoPlayer/VideoPlayer.tsx +161 -4
- package/src/components/index.ts +1 -0
- package/src/lib/composables/index.ts +4 -0
- package/src/lib/composables/useAtomixGlass.ts +71 -0
- package/src/lib/composables/useButton.ts +3 -1
- package/src/lib/composables/useCallout.ts +4 -1
- package/src/lib/composables/useGlassContainer.ts +168 -0
- package/src/lib/constants/components.ts +88 -0
- package/src/lib/types/components.ts +352 -0
- package/src/lib/utils/displacement-generator.ts +86 -0
- package/src/styles/01-settings/_settings.background.scss +8 -7
- package/src/styles/01-settings/_settings.callout.scss +7 -7
- package/src/styles/02-tools/_tools.animations.scss +19 -0
- package/src/styles/02-tools/_tools.background.scss +19 -17
- package/src/styles/02-tools/_tools.glass.scss +1 -0
- package/src/styles/03-generic/_generic.root.scss +3 -2
- package/src/styles/04-elements/_elements.body.scss +0 -18
- package/src/styles/06-components/_components.accordion.scss +16 -0
- package/src/styles/06-components/_components.atomix-glass.scss +0 -0
- package/src/styles/06-components/_components.badge.scss +34 -0
- package/src/styles/06-components/_components.button.scss +10 -0
- package/src/styles/06-components/_components.callout.scss +41 -2
- package/src/styles/06-components/_components.card.scss +17 -0
- package/src/styles/06-components/_components.chart.scss +1 -1
- package/src/styles/06-components/_components.datepicker.scss +18 -0
- package/src/styles/06-components/_components.dropdown.scss +7 -1
- package/src/styles/06-components/_components.hero.scss +1 -2
- package/src/styles/06-components/_components.input.scss +31 -1
- package/src/styles/06-components/_components.video-player.scss +48 -26
- package/src/styles/06-components/_index.scss +1 -0
- package/src/styles/99-utilities/_utilities.glass-fixes.scss +48 -0
- package/dist/themes/yabai.css +0 -15207
- package/dist/themes/yabai.min.css +0 -189
package/dist/atomix.css
CHANGED
|
@@ -11,6 +11,23 @@
|
|
|
11
11
|
background-position: 0 50%;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
|
+
@keyframes backgroundMoving {
|
|
15
|
+
0% {
|
|
16
|
+
background-position: 0 0%;
|
|
17
|
+
}
|
|
18
|
+
250% {
|
|
19
|
+
background-position: 100% 100%;
|
|
20
|
+
}
|
|
21
|
+
50% {
|
|
22
|
+
background-position: 100% 0%;
|
|
23
|
+
}
|
|
24
|
+
75% {
|
|
25
|
+
background-position: 0% 100%;
|
|
26
|
+
}
|
|
27
|
+
100% {
|
|
28
|
+
background-position: 100% 100%;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
14
31
|
@keyframes component-spin {
|
|
15
32
|
0% {
|
|
16
33
|
transform: rotate(0deg);
|
|
@@ -589,25 +606,10 @@ body {
|
|
|
589
606
|
font-weight: 400;
|
|
590
607
|
font-size: 1rem;
|
|
591
608
|
line-height: 1.2;
|
|
592
|
-
background: url("https://plus.unsplash.com/premium_photo-1685082778205-8665f65e8c2c?q=80&w=3864&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
|
|
593
|
-
background-size: cover;
|
|
594
|
-
background-repeat: no-repeat;
|
|
595
|
-
background-attachment: fixed;
|
|
596
609
|
}
|
|
597
610
|
body.is-blocked, body.is-modal-open {
|
|
598
611
|
overflow: hidden;
|
|
599
612
|
}
|
|
600
|
-
body::after {
|
|
601
|
-
content: "";
|
|
602
|
-
position: fixed;
|
|
603
|
-
top: 0;
|
|
604
|
-
left: 0;
|
|
605
|
-
width: 100%;
|
|
606
|
-
height: 100%;
|
|
607
|
-
opacity: 0.7;
|
|
608
|
-
z-index: -1;
|
|
609
|
-
background: var(--atomix-gradient);
|
|
610
|
-
}
|
|
611
613
|
h1,
|
|
612
614
|
.h1 {
|
|
613
615
|
font-size: 2.5rem;
|
|
@@ -1486,10 +1488,7 @@ a, a:hover {
|
|
|
1486
1488
|
transition-duration: 0.2s;
|
|
1487
1489
|
transition-timing-function: ease-in-out;
|
|
1488
1490
|
transition-delay: 0s;
|
|
1489
|
-
background
|
|
1490
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
1491
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
1492
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-accordion-header-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-accordion-header-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
1491
|
+
background-color: var(--atomix-accordion-header-bg);
|
|
1493
1492
|
}
|
|
1494
1493
|
.c-accordion__header--icon-left {
|
|
1495
1494
|
flex-direction: row-reverse;
|
|
@@ -1524,10 +1523,7 @@ a, a:hover {
|
|
|
1524
1523
|
color: var(--atomix-accordion-body-color);
|
|
1525
1524
|
padding: var(--atomix-accordion-body-padding-y) var(--atomix-accordion-body-padding-x);
|
|
1526
1525
|
border-radius: 0 0 var(--atomix-accordion-border-radius) var(--atomix-accordion-border-radius);
|
|
1527
|
-
background
|
|
1528
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
1529
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
1530
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-accordion-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-accordion-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-accordion-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
1526
|
+
background-color: var(--atomix-accordion-body-bg);
|
|
1531
1527
|
}
|
|
1532
1528
|
.c-accordion:focus, .c-accordion.is-focused {
|
|
1533
1529
|
--atomix-accordion-border-color: var(--atomix-focus-border-color);
|
|
@@ -1544,6 +1540,15 @@ a, a:hover {
|
|
|
1544
1540
|
--atomix-accordion-body-color: var(--atomix-accordion-disable-color);
|
|
1545
1541
|
--atomix-accordion-icon-color: var(--atomix-accordion-disable-color);
|
|
1546
1542
|
}
|
|
1543
|
+
.c-accordion--glass {
|
|
1544
|
+
border-color: transparent;
|
|
1545
|
+
}
|
|
1546
|
+
.c-accordion--glass .c-accordion__header {
|
|
1547
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
|
|
1548
|
+
}
|
|
1549
|
+
.c-accordion--glass .c-accordion__body {
|
|
1550
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
|
|
1551
|
+
}
|
|
1547
1552
|
.c-avatar {
|
|
1548
1553
|
--atomix-avatar-fit: cover;
|
|
1549
1554
|
--atomix-avatar-size: 2.5rem;
|
|
@@ -1565,10 +1570,7 @@ a, a:hover {
|
|
|
1565
1570
|
width: var(--atomix-avatar-size);
|
|
1566
1571
|
height: var(--atomix-avatar-size);
|
|
1567
1572
|
border-radius: var(--atomix-avatar-border-radius);
|
|
1568
|
-
background
|
|
1569
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
1570
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
1571
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-avatar-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-avatar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-avatar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
1573
|
+
background-color: var(--atomix-avatar-bg);
|
|
1572
1574
|
color: var(--atomix-avatar-color);
|
|
1573
1575
|
border: var(--atomix-avatar-border-width) solid var(--atomix-avatar-border-color);
|
|
1574
1576
|
overflow: hidden;
|
|
@@ -1670,10 +1672,7 @@ a, a:hover {
|
|
|
1670
1672
|
color: var(--atomix-avatar-group-more-color);
|
|
1671
1673
|
font-size: var(--atomix-avatar-group-more-font-size);
|
|
1672
1674
|
font-weight: var(--atomix-avatar-group-more-font-weight);
|
|
1673
|
-
background
|
|
1674
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
1675
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
1676
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-avatar-group-more-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-avatar-group-more-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-avatar-group-more-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
1675
|
+
background-color: var(--atomix-avatar-group-more-bg);
|
|
1677
1676
|
border: var(--atomix-avatar-group-more-border-width) solid var(--atomix-avatar-group-more-border-color);
|
|
1678
1677
|
width: var(--atomix-avatar-size);
|
|
1679
1678
|
height: var(--atomix-avatar-size);
|
|
@@ -1746,10 +1745,7 @@ a, a:hover {
|
|
|
1746
1745
|
line-height: 1;
|
|
1747
1746
|
padding: var(--atomix-tag-padding-y) var(--atomix-tag-padding-x);
|
|
1748
1747
|
border-radius: var(--atomix-tag-border-radius);
|
|
1749
|
-
background
|
|
1750
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
1751
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
1752
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
1748
|
+
background-color: var(--atomix-tag-bg-color);
|
|
1753
1749
|
-webkit-user-select: none;
|
|
1754
1750
|
-moz-user-select: none;
|
|
1755
1751
|
user-select: none;
|
|
@@ -1765,6 +1761,10 @@ a, a:hover {
|
|
|
1765
1761
|
.c-badge--lg {
|
|
1766
1762
|
--atomix-tag-padding-y: 0.5rem;
|
|
1767
1763
|
}
|
|
1764
|
+
.c-badge--glass {
|
|
1765
|
+
background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 80%, transparent);
|
|
1766
|
+
border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 20%, transparent);
|
|
1767
|
+
}
|
|
1768
1768
|
.c-badge--primary {
|
|
1769
1769
|
--atomix-tag-bg-color: var(--atomix-brand-bg-subtle);
|
|
1770
1770
|
--atomix-tag-color: var(--atomix-brand-text-emphasis);
|
|
@@ -1792,10 +1792,16 @@ a, a:hover {
|
|
|
1792
1792
|
.c-badge--light {
|
|
1793
1793
|
--atomix-tag-bg-color: var(--atomix-light);
|
|
1794
1794
|
--atomix-tag-color: var(--atomix-dark);
|
|
1795
|
+
border: 1px solid var(--atomix-light);
|
|
1795
1796
|
}
|
|
1796
1797
|
.c-badge--dark {
|
|
1797
1798
|
--atomix-tag-bg-color: var(--atomix-dark);
|
|
1798
1799
|
--atomix-tag-color: var(--atomix-light);
|
|
1800
|
+
border: 1px solid var(--atomix-dark);
|
|
1801
|
+
}
|
|
1802
|
+
.c-badge-glass {
|
|
1803
|
+
box-shadow: inset 1px 2px 3px rgba(255, 255, 255, 0.1), inset 0 -2px 2px rgba(0, 0, 0, 0.3);
|
|
1804
|
+
border-radius: 999px;
|
|
1799
1805
|
}
|
|
1800
1806
|
.c-breadcrumb {
|
|
1801
1807
|
--atomix-breadcrumb-font-size: 0.875rem;
|
|
@@ -1817,10 +1823,7 @@ a, a:hover {
|
|
|
1817
1823
|
list-style: none;
|
|
1818
1824
|
padding-left: 0px;
|
|
1819
1825
|
margin-bottom: var(--atomix-breadcrumb-margin-bottom);
|
|
1820
|
-
background
|
|
1821
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
1822
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
1823
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-breadcrumb-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-breadcrumb-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-breadcrumb-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
1826
|
+
background-color: var(--atomix-breadcrumb-bg);
|
|
1824
1827
|
}
|
|
1825
1828
|
.c-breadcrumb__item {
|
|
1826
1829
|
display: flex;
|
|
@@ -1915,10 +1918,7 @@ a, a:hover {
|
|
|
1915
1918
|
text-align: center;
|
|
1916
1919
|
white-space: nowrap;
|
|
1917
1920
|
vertical-align: middle;
|
|
1918
|
-
background
|
|
1919
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
1920
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
1921
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-btn-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-btn-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-btn-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
1921
|
+
background-color: var(--atomix-btn-bg);
|
|
1922
1922
|
cursor: pointer;
|
|
1923
1923
|
-webkit-user-select: none;
|
|
1924
1924
|
-moz-user-select: none;
|
|
@@ -1932,10 +1932,7 @@ a, a:hover {
|
|
|
1932
1932
|
}
|
|
1933
1933
|
.c-btn:hover {
|
|
1934
1934
|
color: var(--atomix-btn-hover-color);
|
|
1935
|
-
background
|
|
1936
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
1937
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
1938
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-btn-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-btn-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
1935
|
+
background-color: var(--atomix-btn-hover-bg);
|
|
1939
1936
|
border-color: var(--atomix-btn-hover-border-color);
|
|
1940
1937
|
}
|
|
1941
1938
|
.c-btn--primary {
|
|
@@ -2199,13 +2196,16 @@ a, a:hover {
|
|
|
2199
2196
|
.c-btn:disabled, .c-btn--disabled, fieldset:disabled .c-btn {
|
|
2200
2197
|
color: var(--atomix-btn-disabled-color);
|
|
2201
2198
|
pointer-events: none;
|
|
2202
|
-
background
|
|
2203
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2204
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2205
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-btn-disabled-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-btn-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-btn-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
2199
|
+
background-color: var(--atomix-btn-disabled-bg);
|
|
2206
2200
|
border-color: var(--atomix-btn-disabled-border-color);
|
|
2207
2201
|
opacity: var(--atomix-btn-disabled-opacity);
|
|
2208
2202
|
}
|
|
2203
|
+
.c-btn--glass {
|
|
2204
|
+
background-color: color-mix(in srgb, var(--atomix-btn-bg) 50%, transparent);
|
|
2205
|
+
}
|
|
2206
|
+
.c-btn--glass:hover {
|
|
2207
|
+
background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 50%, transparent);
|
|
2208
|
+
}
|
|
2209
2209
|
.c-datepicker {
|
|
2210
2210
|
--atomix-datepicker-width: 19rem;
|
|
2211
2211
|
--atomix-datepicker-padding-x: 0.5rem;
|
|
@@ -2284,10 +2284,7 @@ a, a:hover {
|
|
|
2284
2284
|
z-index: 5;
|
|
2285
2285
|
width: var(--atomix-datepicker-width);
|
|
2286
2286
|
padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
|
|
2287
|
-
background
|
|
2288
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2289
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2290
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-datepicker-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-datepicker-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-datepicker-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
2287
|
+
background-color: var(--atomix-datepicker-bg);
|
|
2291
2288
|
border-radius: var(--atomix-datepicker-border-radius);
|
|
2292
2289
|
box-shadow: var(--atomix-datepicker-box-shadow);
|
|
2293
2290
|
margin-top: 0.25rem;
|
|
@@ -2331,6 +2328,24 @@ a, a:hover {
|
|
|
2331
2328
|
.c-datepicker__calendar--right-end {
|
|
2332
2329
|
bottom: 0;
|
|
2333
2330
|
}
|
|
2331
|
+
.c-datepicker__calendar--glass {
|
|
2332
|
+
z-index: auto;
|
|
2333
|
+
z-index: initial;
|
|
2334
|
+
box-shadow: none;
|
|
2335
|
+
border: none;
|
|
2336
|
+
border-radius: 0;
|
|
2337
|
+
padding: 0;
|
|
2338
|
+
background: transparent;
|
|
2339
|
+
}
|
|
2340
|
+
.c-datepicker__glass-content {
|
|
2341
|
+
z-index: auto;
|
|
2342
|
+
z-index: initial;
|
|
2343
|
+
box-shadow: none;
|
|
2344
|
+
border: none;
|
|
2345
|
+
border-radius: var(--atomix-datepicker-border-radius);
|
|
2346
|
+
padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
|
|
2347
|
+
background: color-mix(in srgb, var(--atomix-datepicker-bg) 50%, transparent 0%);
|
|
2348
|
+
}
|
|
2334
2349
|
.c-datepicker--inline {
|
|
2335
2350
|
--atomix-datepicker-width: calc(
|
|
2336
2351
|
var(--atomix-datepicker-width) + var(--atomix-datepicker-week-width)
|
|
@@ -2652,10 +2667,7 @@ a, a:hover {
|
|
|
2652
2667
|
transition-duration: 0.2s;
|
|
2653
2668
|
transition-timing-function: ease-in-out;
|
|
2654
2669
|
transition-delay: 0s;
|
|
2655
|
-
background
|
|
2656
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2657
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2658
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-card-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-card-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-card-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
2670
|
+
background-color: var(--atomix-card-bg);
|
|
2659
2671
|
}
|
|
2660
2672
|
.c-card__header {
|
|
2661
2673
|
margin-bottom: var(--atomix-card-header-spacer-y);
|
|
@@ -2733,6 +2745,21 @@ a, a:hover {
|
|
|
2733
2745
|
padding: var(--atomix-card-row-spacer-y) var(--atomix-card-row-spacer-x);
|
|
2734
2746
|
padding-top: 0;
|
|
2735
2747
|
}
|
|
2748
|
+
.c-card--glass {
|
|
2749
|
+
background-color: transparent;
|
|
2750
|
+
padding: 0;
|
|
2751
|
+
border: none;
|
|
2752
|
+
display: block;
|
|
2753
|
+
border-radius: 0;
|
|
2754
|
+
}
|
|
2755
|
+
.c-card--glass .c-card__glass-content {
|
|
2756
|
+
padding: var(--atomix-card-spacer-y) var(--atomix-card-spacer-x);
|
|
2757
|
+
max-width: var(--atomix-card-width);
|
|
2758
|
+
border-radius: var(--atomix-card-border-radius);
|
|
2759
|
+
width: 100%;
|
|
2760
|
+
background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
|
|
2761
|
+
background-blend-mode: overlay;
|
|
2762
|
+
}
|
|
2736
2763
|
.is-elevated .c-card {
|
|
2737
2764
|
box-shadow: var(--atomix-box-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.175));
|
|
2738
2765
|
z-index: 1;
|
|
@@ -2758,19 +2785,12 @@ a, a:hover {
|
|
|
2758
2785
|
min-height: var(--atomix-chart-min-height);
|
|
2759
2786
|
width: 100%;
|
|
2760
2787
|
max-width: 100%;
|
|
2761
|
-
background
|
|
2762
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
2763
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
2788
|
+
background-color: var(--atomix-chart-bg);
|
|
2764
2789
|
transition-property: all;
|
|
2765
2790
|
transition-duration: 0.2s;
|
|
2766
2791
|
transition-timing-function: ease-in-out;
|
|
2767
2792
|
transition-delay: 0s;
|
|
2768
2793
|
}
|
|
2769
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
2770
|
-
.c-chart {
|
|
2771
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-chart-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-chart-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-chart-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
2772
|
-
}
|
|
2773
|
-
}
|
|
2774
2794
|
.c-chart::after {
|
|
2775
2795
|
content: "";
|
|
2776
2796
|
position: absolute;
|
|
@@ -4474,7 +4494,7 @@ a, a:hover {
|
|
|
4474
4494
|
animation: none;
|
|
4475
4495
|
}
|
|
4476
4496
|
}
|
|
4477
|
-
.c-chart:focus-
|
|
4497
|
+
.c-chart:focus-within .c-chart__data-point:focus {
|
|
4478
4498
|
outline: 2px solid var(--atomix-primary-6);
|
|
4479
4499
|
outline-offset: 2px;
|
|
4480
4500
|
z-index: 10;
|
|
@@ -4576,10 +4596,7 @@ a, a:hover {
|
|
|
4576
4596
|
-webkit-appearance: none;
|
|
4577
4597
|
-moz-appearance: none;
|
|
4578
4598
|
appearance: none;
|
|
4579
|
-
background
|
|
4580
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
4581
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
4582
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-checkbox-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-checkbox-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-checkbox-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
4599
|
+
background-color: var(--atomix-checkbox-bg);
|
|
4583
4600
|
width: var(--atomix-checkbox-width);
|
|
4584
4601
|
height: var(--atomix-checkbox-height);
|
|
4585
4602
|
color: currentColor;
|
|
@@ -4668,10 +4685,7 @@ a, a:hover {
|
|
|
4668
4685
|
color: var(--atomix-body-color);
|
|
4669
4686
|
}
|
|
4670
4687
|
.c-color-mode-toggle:hover {
|
|
4671
|
-
background
|
|
4672
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
4673
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
4674
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
4688
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
4675
4689
|
}
|
|
4676
4690
|
.c-color-mode-toggle:focus {
|
|
4677
4691
|
outline: none;
|
|
@@ -4682,10 +4696,7 @@ a, a:hover {
|
|
|
4682
4696
|
height: 1.5rem;
|
|
4683
4697
|
}
|
|
4684
4698
|
[data-atomix-theme=dark] .c-color-mode-toggle:hover {
|
|
4685
|
-
background
|
|
4686
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
4687
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
4688
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(255, 255, 255, 0.1) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(255, 255, 255, 0.1) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(255, 255, 255, 0.1) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
4699
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
4689
4700
|
}
|
|
4690
4701
|
.c-countdown {
|
|
4691
4702
|
--atomix-countdown-color: var(--atomix-body-color);
|
|
@@ -4723,10 +4734,7 @@ a, a:hover {
|
|
|
4723
4734
|
align-items: center;
|
|
4724
4735
|
padding: var(--atomix-countdown-item-padding-y) var(--atomix-countdown-item-padding-x);
|
|
4725
4736
|
border-radius: var(--atomix-countdown-focused-border-radius);
|
|
4726
|
-
background
|
|
4727
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
4728
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
4729
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-countdown-focused-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-countdown-focused-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-countdown-focused-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
4737
|
+
background-color: var(--atomix-countdown-focused-bg);
|
|
4730
4738
|
}
|
|
4731
4739
|
.c-countdown--focused .c-countdown__time-label {
|
|
4732
4740
|
font-size: var(--atomix-countdown-focused-label-font-size);
|
|
@@ -4753,17 +4761,11 @@ a, a:hover {
|
|
|
4753
4761
|
width: 100%;
|
|
4754
4762
|
margin-bottom: 0;
|
|
4755
4763
|
color: var(--atomix-data-table-color);
|
|
4756
|
-
background
|
|
4757
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
4758
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
4759
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
4764
|
+
background-color: var(--atomix-data-table-bg);
|
|
4760
4765
|
border-collapse: collapse;
|
|
4761
4766
|
}
|
|
4762
4767
|
.c-data-table__header {
|
|
4763
|
-
background
|
|
4764
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
4765
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
4766
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-header-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-header-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
4768
|
+
background-color: var(--atomix-data-table-header-bg);
|
|
4767
4769
|
}
|
|
4768
4770
|
.c-data-table__header-cell {
|
|
4769
4771
|
padding: 0.75rem 1rem;
|
|
@@ -4780,10 +4782,7 @@ a, a:hover {
|
|
|
4780
4782
|
user-select: none;
|
|
4781
4783
|
}
|
|
4782
4784
|
.c-data-table__header-cell--sortable:hover {
|
|
4783
|
-
background
|
|
4784
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
4785
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
4786
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
4785
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
4787
4786
|
}
|
|
4788
4787
|
.c-data-table__header-content {
|
|
4789
4788
|
display: flex;
|
|
@@ -4804,16 +4803,10 @@ a, a:hover {
|
|
|
4804
4803
|
vertical-align: middle;
|
|
4805
4804
|
}
|
|
4806
4805
|
.c-data-table__row {
|
|
4807
|
-
background
|
|
4808
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
4809
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
4810
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
4806
|
+
background-color: var(--atomix-data-table-bg);
|
|
4811
4807
|
}
|
|
4812
4808
|
.c-data-table__row:hover {
|
|
4813
|
-
background
|
|
4814
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
4815
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
4816
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
4809
|
+
background-color: var(--atomix-data-table-hover-bg);
|
|
4817
4810
|
}
|
|
4818
4811
|
.c-data-table__row[role=button] {
|
|
4819
4812
|
cursor: pointer;
|
|
@@ -4831,10 +4824,7 @@ a, a:hover {
|
|
|
4831
4824
|
color: var(--atomix-gray-500);
|
|
4832
4825
|
}
|
|
4833
4826
|
.c-data-table--striped tbody tr:nth-of-type(odd) {
|
|
4834
|
-
background
|
|
4835
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
4836
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
4837
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-striped-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-striped-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-striped-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
4827
|
+
background-color: var(--atomix-data-table-striped-bg);
|
|
4838
4828
|
}
|
|
4839
4829
|
.c-data-table--bordered {
|
|
4840
4830
|
border: var(--atomix-border-width) var(--atomix-border-style) var(--atomix-data-table-border-color);
|
|
@@ -4944,7 +4934,6 @@ a, a:hover {
|
|
|
4944
4934
|
.c-dropdown__menu-wrapper {
|
|
4945
4935
|
position: absolute;
|
|
4946
4936
|
left: 0;
|
|
4947
|
-
z-index: 99;
|
|
4948
4937
|
display: flex;
|
|
4949
4938
|
opacity: 0;
|
|
4950
4939
|
visibility: hidden;
|
|
@@ -5026,14 +5015,16 @@ a, a:hover {
|
|
|
5026
5015
|
padding: var(--atomix-dropdown-padding-y) var(--atomix-dropdown-padding-x);
|
|
5027
5016
|
list-style: none;
|
|
5028
5017
|
margin-bottom: 0rem;
|
|
5029
|
-
|
|
5030
|
-
|
|
5031
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5032
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-dropdown-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-dropdown-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5018
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
5019
|
+
background-color: var(--atomix-dropdown-bg);
|
|
5033
5020
|
border-radius: var(--atomix-dropdown-border-radius);
|
|
5034
5021
|
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
5035
5022
|
overflow: hidden;
|
|
5036
5023
|
}
|
|
5024
|
+
.c-dropdown__menu--glass {
|
|
5025
|
+
background-color: color-mix(in srgb, var(--atomix-dropdown-bg) 50%, transparent);
|
|
5026
|
+
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
5027
|
+
}
|
|
5037
5028
|
.c-dropdown__menu-item {
|
|
5038
5029
|
display: block;
|
|
5039
5030
|
width: 100%;
|
|
@@ -5050,19 +5041,13 @@ a, a:hover {
|
|
|
5050
5041
|
}
|
|
5051
5042
|
.c-dropdown__menu-item:hover, .c-dropdown__menu-item:focus {
|
|
5052
5043
|
color: var(--atomix-dropdown-link-hover-color);
|
|
5053
|
-
background
|
|
5054
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5055
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5056
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5044
|
+
background-color: var(--atomix-dropdown-link-hover-bg);
|
|
5057
5045
|
outline: none;
|
|
5058
5046
|
padding-left: calc(var(--atomix-dropdown-item-padding-x) + 3px);
|
|
5059
5047
|
}
|
|
5060
5048
|
.c-dropdown__menu-item.is-active {
|
|
5061
5049
|
color: var(--atomix-dropdown-active-color);
|
|
5062
|
-
background
|
|
5063
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5064
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5065
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-dropdown-active-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-dropdown-active-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-dropdown-active-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5050
|
+
background-color: var(--atomix-dropdown-active-bg);
|
|
5066
5051
|
}
|
|
5067
5052
|
.c-dropdown__menu-item.is-disabled {
|
|
5068
5053
|
color: var(--atomix-dropdown-color);
|
|
@@ -5159,10 +5144,7 @@ a, a:hover {
|
|
|
5159
5144
|
.c-edge-panel__backdrop {
|
|
5160
5145
|
position: absolute;
|
|
5161
5146
|
inset: 0;
|
|
5162
|
-
background
|
|
5163
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5164
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5165
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5147
|
+
background-color: var(--atomix-edge-panel-backdrop-bg);
|
|
5166
5148
|
-webkit-backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
|
|
5167
5149
|
backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
|
|
5168
5150
|
opacity: 0;
|
|
@@ -5181,10 +5163,7 @@ a, a:hover {
|
|
|
5181
5163
|
color: var(--atomix-edge-panel-color);
|
|
5182
5164
|
width: var(--atomix-edge-panel-width);
|
|
5183
5165
|
height: 100%;
|
|
5184
|
-
background
|
|
5185
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5186
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5187
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-edge-panel-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-edge-panel-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5166
|
+
background-color: var(--atomix-edge-panel-bg);
|
|
5188
5167
|
box-shadow: var(--atomix-edge-panel-shadow);
|
|
5189
5168
|
z-index: 2;
|
|
5190
5169
|
overflow: hidden;
|
|
@@ -5219,10 +5198,7 @@ a, a:hover {
|
|
|
5219
5198
|
transition: background-color 0.2s ease;
|
|
5220
5199
|
}
|
|
5221
5200
|
.c-edge-panel__close:hover {
|
|
5222
|
-
background
|
|
5223
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5224
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5225
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5201
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
5226
5202
|
}
|
|
5227
5203
|
.c-edge-panel__close:focus-visible {
|
|
5228
5204
|
outline: 2px solid var(--atomix-primary);
|
|
@@ -5422,10 +5398,7 @@ a, a:hover {
|
|
|
5422
5398
|
--atomix-footer-newsletter-padding: 1.5rem;
|
|
5423
5399
|
--atomix-footer-bottom-padding-top: 1.5rem;
|
|
5424
5400
|
--atomix-footer-bottom-margin-top: 2rem;
|
|
5425
|
-
background
|
|
5426
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5427
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5428
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-footer-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-footer-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-footer-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5401
|
+
background-color: var(--atomix-footer-bg);
|
|
5429
5402
|
color: var(--atomix-footer-color);
|
|
5430
5403
|
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
5431
5404
|
padding: var(--atomix-footer-padding-y) 0;
|
|
@@ -5637,10 +5610,7 @@ a, a:hover {
|
|
|
5637
5610
|
justify-content: center;
|
|
5638
5611
|
width: 2.5rem;
|
|
5639
5612
|
height: 2.5rem;
|
|
5640
|
-
background
|
|
5641
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5642
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5643
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-surface-variant) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-surface-variant) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-surface-variant) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5613
|
+
background-color: var(--atomix-surface-variant);
|
|
5644
5614
|
color: var(--atomix-text);
|
|
5645
5615
|
border-radius: 50%;
|
|
5646
5616
|
text-decoration: none;
|
|
@@ -5657,10 +5627,7 @@ a, a:hover {
|
|
|
5657
5627
|
transition: transform 0.6s ease;
|
|
5658
5628
|
}
|
|
5659
5629
|
.c-footer__social-link:hover, .c-footer__social-link:focus {
|
|
5660
|
-
background
|
|
5661
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5662
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5663
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5630
|
+
background-color: var(--atomix-primary);
|
|
5664
5631
|
color: var(--atomix-primary-contrast);
|
|
5665
5632
|
transform: translateY(-3px) scale(1.05);
|
|
5666
5633
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
@@ -5728,10 +5695,7 @@ a, a:hover {
|
|
|
5728
5695
|
background: linear-gradient(135deg, #25d366, #66bb6a);
|
|
5729
5696
|
}
|
|
5730
5697
|
.c-footer__newsletter {
|
|
5731
|
-
background
|
|
5732
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5733
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5734
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8)) 10%, transparent), 4px 8px 32px color-mix(in srgb, linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8)) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8)) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5698
|
+
background-color: linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8));
|
|
5735
5699
|
padding: 1.5rem;
|
|
5736
5700
|
border-radius: 0.5rem;
|
|
5737
5701
|
border: 1px solid var(--atomix-border-subtle);
|
|
@@ -5787,10 +5751,7 @@ a, a:hover {
|
|
|
5787
5751
|
flex: 1 1;
|
|
5788
5752
|
padding: 0.75rem 1rem;
|
|
5789
5753
|
font-size: 0.875rem;
|
|
5790
|
-
background
|
|
5791
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5792
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5793
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-surface) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-surface) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-surface) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5754
|
+
background-color: var(--atomix-surface);
|
|
5794
5755
|
color: var(--atomix-text);
|
|
5795
5756
|
border: 1px solid var(--atomix-border);
|
|
5796
5757
|
border-radius: 0.375rem;
|
|
@@ -5819,10 +5780,7 @@ a, a:hover {
|
|
|
5819
5780
|
}
|
|
5820
5781
|
.c-footer__newsletter-button {
|
|
5821
5782
|
padding: 0.75rem 1.5rem;
|
|
5822
|
-
background
|
|
5823
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5824
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5825
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5783
|
+
background-color: var(--atomix-primary);
|
|
5826
5784
|
color: var(--atomix-primary-contrast);
|
|
5827
5785
|
border: none;
|
|
5828
5786
|
border-radius: 0.375rem;
|
|
@@ -5842,10 +5800,7 @@ a, a:hover {
|
|
|
5842
5800
|
transition: transform 0.6s ease;
|
|
5843
5801
|
}
|
|
5844
5802
|
.c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
|
|
5845
|
-
background
|
|
5846
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5847
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5848
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary-hover) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5803
|
+
background-color: var(--atomix-primary-hover);
|
|
5849
5804
|
transform: translateY(-2px);
|
|
5850
5805
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
5851
5806
|
}
|
|
@@ -5890,10 +5845,7 @@ a, a:hover {
|
|
|
5890
5845
|
align-items: center;
|
|
5891
5846
|
gap: 0.5rem;
|
|
5892
5847
|
padding: 0.75rem 1.25rem;
|
|
5893
|
-
background
|
|
5894
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5895
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5896
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-surface-variant) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-surface-variant) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-surface-variant) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5848
|
+
background-color: var(--atomix-surface-variant);
|
|
5897
5849
|
border: 1px solid var(--atomix-border-subtle);
|
|
5898
5850
|
color: var(--atomix-text);
|
|
5899
5851
|
font-size: 0.875rem;
|
|
@@ -5914,10 +5866,7 @@ a, a:hover {
|
|
|
5914
5866
|
}
|
|
5915
5867
|
.c-footer__back-to-top:hover, .c-footer__back-to-top:focus {
|
|
5916
5868
|
color: var(--atomix-primary);
|
|
5917
|
-
background
|
|
5918
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
5919
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
5920
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
5869
|
+
background-color: var(--atomix-primary);
|
|
5921
5870
|
border-color: var(--atomix-primary);
|
|
5922
5871
|
transform: translateY(-2px);
|
|
5923
5872
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
@@ -6462,10 +6411,7 @@ a, a:hover {
|
|
|
6462
6411
|
display: grid;
|
|
6463
6412
|
place-items: center;
|
|
6464
6413
|
padding: var(--atomix-hero-padding-y) var(--atomix-hero-padding-x);
|
|
6465
|
-
background
|
|
6466
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6467
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6468
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-hero-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-hero-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-hero-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6414
|
+
background-color: var(--atomix-hero-bg);
|
|
6469
6415
|
overflow: hidden;
|
|
6470
6416
|
}
|
|
6471
6417
|
.c-hero__bg {
|
|
@@ -6488,16 +6434,12 @@ a, a:hover {
|
|
|
6488
6434
|
.c-hero__overlay {
|
|
6489
6435
|
position: absolute;
|
|
6490
6436
|
inset: 0;
|
|
6491
|
-
background
|
|
6492
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6493
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6494
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-hero-overlay) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-hero-overlay) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-hero-overlay) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6437
|
+
background-color: var(--atomix-hero-overlay);
|
|
6495
6438
|
opacity: var(--atomix-hero-overlay-opacity);
|
|
6496
|
-
z-index:
|
|
6439
|
+
z-index: 0;
|
|
6497
6440
|
}
|
|
6498
6441
|
.c-hero__container {
|
|
6499
6442
|
position: relative;
|
|
6500
|
-
z-index: 2;
|
|
6501
6443
|
}
|
|
6502
6444
|
.c-hero__grid {
|
|
6503
6445
|
--atomix-gutter-x: var(--atomix-hero-grid-gutter);
|
|
@@ -6625,10 +6567,7 @@ a, a:hover {
|
|
|
6625
6567
|
border: var(--atomix-input-border-width) solid var(--atomix-input-border-color);
|
|
6626
6568
|
border-radius: var(--atomix-input-border-radius);
|
|
6627
6569
|
outline: none;
|
|
6628
|
-
background
|
|
6629
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6630
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6631
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-input-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-input-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6570
|
+
background-color: var(--atomix-input-bg);
|
|
6632
6571
|
transition-property: all;
|
|
6633
6572
|
transition-duration: 0.2s;
|
|
6634
6573
|
transition-timing-function: ease-in-out;
|
|
@@ -6700,6 +6639,21 @@ a, a:hover {
|
|
|
6700
6639
|
--atomix-input-bg: var(--atomix-secondary-bg-subtle);
|
|
6701
6640
|
pointer-events: none;
|
|
6702
6641
|
}
|
|
6642
|
+
.c-input--glass {
|
|
6643
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
6644
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
6645
|
+
}
|
|
6646
|
+
.c-input--glass:focus, .c-input--glass:hover {
|
|
6647
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
6648
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 0 0 2px rgba(var(--atomix-primary-rgb, 122, 255, 215), 0.3);
|
|
6649
|
+
}
|
|
6650
|
+
.c-input--glass.c-input--textarea {
|
|
6651
|
+
resize: vertical;
|
|
6652
|
+
}
|
|
6653
|
+
.c-input--glass:disabled, .c-input--glass.is-disabled {
|
|
6654
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
|
|
6655
|
+
opacity: 0.6;
|
|
6656
|
+
}
|
|
6703
6657
|
.c-list-group {
|
|
6704
6658
|
--atomix-list-group-width: 100%;
|
|
6705
6659
|
--atomix-list-group-bg: ;
|
|
@@ -6718,20 +6672,14 @@ a, a:hover {
|
|
|
6718
6672
|
list-style: none;
|
|
6719
6673
|
width: 100%;
|
|
6720
6674
|
max-width: var(--atomix-list-group-width);
|
|
6721
|
-
background
|
|
6722
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6723
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6724
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-list-group-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-list-group-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-list-group-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6675
|
+
background-color: var(--atomix-list-group-bg);
|
|
6725
6676
|
}
|
|
6726
6677
|
.c-list-group__item {
|
|
6727
6678
|
padding: var(--atomix-list-group-item-padding-y) var(--atomix-list-group-item-padding-x);
|
|
6728
6679
|
font-size: var(--atomix-list-group-item-font-size);
|
|
6729
6680
|
color: var(--atomix-list-group-item-color);
|
|
6730
6681
|
border-bottom: var(--atomix-list-group-item-border-width) solid var(--atomix-list-group-item-border-color);
|
|
6731
|
-
background
|
|
6732
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6733
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6734
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-list-group-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-list-group-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-list-group-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6682
|
+
background-color: var(--atomix-list-group-item-bg);
|
|
6735
6683
|
}
|
|
6736
6684
|
.c-list-group__item--primary {
|
|
6737
6685
|
--atomix-list-group-item-bg: var(--atomix-brand-bg-subtle);
|
|
@@ -6796,10 +6744,7 @@ a, a:hover {
|
|
|
6796
6744
|
left: 0;
|
|
6797
6745
|
width: var(--atomix-list-item-dash-width);
|
|
6798
6746
|
height: var(--atomix-list-item-dash-height);
|
|
6799
|
-
background
|
|
6800
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6801
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6802
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-list-color) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-list-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-list-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6747
|
+
background-color: var(--atomix-list-color);
|
|
6803
6748
|
transform: translateY(-50%);
|
|
6804
6749
|
}
|
|
6805
6750
|
.c-list--number {
|
|
@@ -6839,10 +6784,7 @@ a, a:hover {
|
|
|
6839
6784
|
display: inline-block;
|
|
6840
6785
|
min-width: var(--atomix-menu-min-width);
|
|
6841
6786
|
padding: var(--atomix-menu-item-padding-y) var(--atomix-menu-item-padding-x);
|
|
6842
|
-
background
|
|
6843
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6844
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6845
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-menu-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-menu-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-menu-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6787
|
+
background-color: var(--atomix-menu-bg);
|
|
6846
6788
|
border-radius: var(--atomix-menu-border-radius);
|
|
6847
6789
|
box-shadow: var(--atomix-menu-box-shadow);
|
|
6848
6790
|
z-index: 5;
|
|
@@ -6888,10 +6830,7 @@ a, a:hover {
|
|
|
6888
6830
|
color: var(--atomix-menu-item-color);
|
|
6889
6831
|
font-size: var(--atomix-menu-item-font-size);
|
|
6890
6832
|
font-weight: var(--atomix-menu-item-font-weight);
|
|
6891
|
-
background
|
|
6892
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6893
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6894
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-menu-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-menu-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-menu-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6833
|
+
background-color: var(--atomix-menu-item-bg);
|
|
6895
6834
|
border-radius: var(--atomix-menu-border-radius);
|
|
6896
6835
|
cursor: pointer;
|
|
6897
6836
|
transition-property: all;
|
|
@@ -6901,16 +6840,10 @@ a, a:hover {
|
|
|
6901
6840
|
}
|
|
6902
6841
|
.c-menu__link:hover {
|
|
6903
6842
|
color: var(--atomix-menu-item-color);
|
|
6904
|
-
background
|
|
6905
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6906
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6907
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-menu-item-bg-hover) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-menu-item-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-menu-item-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6843
|
+
background-color: var(--atomix-menu-item-bg-hover);
|
|
6908
6844
|
}
|
|
6909
6845
|
.c-menu__link:focus, .c-menu__link:active, .c-menu__link.is-active {
|
|
6910
|
-
background
|
|
6911
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
6912
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
6913
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-menu-item-bg-active) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-menu-item-bg-active) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-menu-item-bg-active) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
6846
|
+
background-color: var(--atomix-menu-item-bg-active);
|
|
6914
6847
|
}
|
|
6915
6848
|
.c-menu__icon {
|
|
6916
6849
|
font-size: var(--atomix-menu-item-icon-size);
|
|
@@ -7080,10 +7013,7 @@ a, a:hover {
|
|
|
7080
7013
|
padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
|
|
7081
7014
|
border-radius: var(--atomix-messages-border-radius);
|
|
7082
7015
|
border: var(--atomix-messages-border-width) solid var(--atomix-messages-border-color);
|
|
7083
|
-
background
|
|
7084
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7085
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7086
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7016
|
+
background-color: var(--atomix-messages-bg);
|
|
7087
7017
|
}
|
|
7088
7018
|
.c-messages__body {
|
|
7089
7019
|
max-height: var(--atomix-messages-body-height);
|
|
@@ -7133,10 +7063,7 @@ a, a:hover {
|
|
|
7133
7063
|
color: var(--atomix-messages-text-color);
|
|
7134
7064
|
font-size: var(--atomix-messages-text-font-size);
|
|
7135
7065
|
padding: var(--atomix-messages-text-padding-y) var(--atomix-messages-text-padding-x);
|
|
7136
|
-
background
|
|
7137
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7138
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7139
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-text-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-text-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-text-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7066
|
+
background-color: var(--atomix-messages-text-bg);
|
|
7140
7067
|
border-radius: 0.25rem var(--atomix-messages-text-border-radius) var(--atomix-messages-text-border-radius) 0.25rem;
|
|
7141
7068
|
}
|
|
7142
7069
|
.c-messages__file {
|
|
@@ -7144,10 +7071,7 @@ a, a:hover {
|
|
|
7144
7071
|
flex-wrap: wrap;
|
|
7145
7072
|
padding: var(--atomix-messages-file-padding-y) var(--atomix-messages-file-padding-x);
|
|
7146
7073
|
border-radius: 0.25rem var(--atomix-messages-file-border-radius) var(--atomix-messages-file-border-radius) 0.25rem;
|
|
7147
|
-
background
|
|
7148
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7149
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7150
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-file-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-file-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-file-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7074
|
+
background-color: var(--atomix-messages-file-bg);
|
|
7151
7075
|
}
|
|
7152
7076
|
.c-messages__file-icon {
|
|
7153
7077
|
display: grid !important;
|
|
@@ -7157,10 +7081,7 @@ a, a:hover {
|
|
|
7157
7081
|
height: var(--atomix-messages-file-icon-size);
|
|
7158
7082
|
color: var(--atomix-tertiary-text-emphasis);
|
|
7159
7083
|
margin-right: var(--atomix-messages-file-icon-margin-right);
|
|
7160
|
-
background
|
|
7161
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7162
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7163
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7084
|
+
background-color: var(--atomix-body-bg);
|
|
7164
7085
|
border-radius: 50rem;
|
|
7165
7086
|
}
|
|
7166
7087
|
.c-messages__file-name {
|
|
@@ -7216,10 +7137,7 @@ a, a:hover {
|
|
|
7216
7137
|
}
|
|
7217
7138
|
.c-messages__content--self .c-messages__file-icon {
|
|
7218
7139
|
color: var(--atomix-invert-text-emphasis);
|
|
7219
|
-
background
|
|
7220
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7221
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7222
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-file-icon-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-file-icon-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-file-icon-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7140
|
+
background-color: var(--atomix-messages-file-icon-bg);
|
|
7223
7141
|
}
|
|
7224
7142
|
.c-messages__content--self .c-messages__file-icon [data-atomix-color-mode=dark] {
|
|
7225
7143
|
--atomix-messages-file-icon-bg: #6425ca;
|
|
@@ -7263,10 +7181,7 @@ a, a:hover {
|
|
|
7263
7181
|
font-size: var(--atomix-messages-input-font-size);
|
|
7264
7182
|
border: var(--atomix-messages-input-border-width) solid var(--atomix-messages-input-border-color);
|
|
7265
7183
|
border-radius: var(--atomix-messages-input-border-radius);
|
|
7266
|
-
background
|
|
7267
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7268
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7269
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7184
|
+
background-color: var(--atomix-messages-bg);
|
|
7270
7185
|
resize: none;
|
|
7271
7186
|
}
|
|
7272
7187
|
.c-messages__input::-moz-placeholder {
|
|
@@ -7286,10 +7201,7 @@ a, a:hover {
|
|
|
7286
7201
|
place-items: center;
|
|
7287
7202
|
align-self: flex-end;
|
|
7288
7203
|
padding: 0.625rem;
|
|
7289
|
-
background
|
|
7290
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7291
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7292
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7204
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
7293
7205
|
color: var(--atomix-invert-text-emphasis);
|
|
7294
7206
|
border-radius: 50rem;
|
|
7295
7207
|
cursor: pointer;
|
|
@@ -7338,10 +7250,7 @@ a, a:hover {
|
|
|
7338
7250
|
.c-modal__backdrop {
|
|
7339
7251
|
position: absolute;
|
|
7340
7252
|
inset: 0;
|
|
7341
|
-
background
|
|
7342
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7343
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7344
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-modal-backdrop-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-modal-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-modal-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7253
|
+
background-color: var(--atomix-modal-backdrop-bg);
|
|
7345
7254
|
opacity: 0;
|
|
7346
7255
|
transition: 0.3s;
|
|
7347
7256
|
}
|
|
@@ -7366,10 +7275,7 @@ a, a:hover {
|
|
|
7366
7275
|
width: 100%;
|
|
7367
7276
|
max-height: 100%;
|
|
7368
7277
|
padding: var(--atomix-modal-inner-padding);
|
|
7369
|
-
background
|
|
7370
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7371
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7372
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-modal-content-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-modal-content-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7278
|
+
background-color: var(--atomix-modal-content-bg);
|
|
7373
7279
|
box-shadow: var(--atomix-modal-content-box-shadow);
|
|
7374
7280
|
border-radius: var(--atomix-modal-content-border-radius);
|
|
7375
7281
|
overflow: hidden;
|
|
@@ -7480,20 +7386,14 @@ a, a:hover {
|
|
|
7480
7386
|
color: var(--atomix-nav-link-color);
|
|
7481
7387
|
}
|
|
7482
7388
|
.c-nav__link:hover, .c-nav__link:active, .c-nav__link:focus, .c-nav__link:focus-visible {
|
|
7483
|
-
background
|
|
7484
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7485
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7486
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-nav-link-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-nav-link-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-nav-link-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7389
|
+
background-color: var(--atomix-nav-link-hover-bg);
|
|
7487
7390
|
}
|
|
7488
7391
|
.c-nav__link--disabled {
|
|
7489
7392
|
color: var(--atomix-disabled-text-emphasis);
|
|
7490
7393
|
pointer-events: none;
|
|
7491
7394
|
}
|
|
7492
7395
|
.c-nav__link:focus, .c-nav__link:active, .c-nav__link.is-active {
|
|
7493
|
-
background
|
|
7494
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7495
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7496
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7396
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
7497
7397
|
}
|
|
7498
7398
|
.c-nav__icon {
|
|
7499
7399
|
font-size: var(--atomix-nav-icon-size);
|
|
@@ -7547,24 +7447,14 @@ a, a:hover {
|
|
|
7547
7447
|
left: 50%;
|
|
7548
7448
|
transform: translateX(-50%);
|
|
7549
7449
|
z-index: 1000;
|
|
7550
|
-
background
|
|
7551
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7552
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7553
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7450
|
+
background-color: var(--atomix-body-bg);
|
|
7554
7451
|
border: 1px solid var(--atomix-border-color);
|
|
7555
7452
|
border-radius: 50rem;
|
|
7556
7453
|
box-shadow: var(--atomix-box-shadow-lg);
|
|
7557
7454
|
padding: 0.5rem 1rem;
|
|
7558
7455
|
-webkit-backdrop-filter: blur(10px);
|
|
7559
7456
|
backdrop-filter: blur(10px);
|
|
7560
|
-
|
|
7561
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7562
|
-
}
|
|
7563
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
7564
|
-
.c-nav--float-top-center, .c-nav--float-bottom-center {
|
|
7565
|
-
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 60%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 50%, transparent) 35%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 40%, transparent) 65%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 15%, transparent) 0%, transparent 70%);
|
|
7566
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7567
|
-
}
|
|
7457
|
+
background-color: rgba(var(--atomix-body-bg-rgb), 0.95);
|
|
7568
7458
|
}
|
|
7569
7459
|
.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 {
|
|
7570
7460
|
margin-left: 0.25rem;
|
|
@@ -7574,10 +7464,7 @@ a, a:hover {
|
|
|
7574
7464
|
border-radius: 0.625rem;
|
|
7575
7465
|
}
|
|
7576
7466
|
.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 {
|
|
7577
|
-
background
|
|
7578
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7579
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7580
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7467
|
+
background-color: var(--atomix-brand-bg-subtle);
|
|
7581
7468
|
}
|
|
7582
7469
|
.c-nav--float-top-center {
|
|
7583
7470
|
top: 1.25rem;
|
|
@@ -7611,10 +7498,7 @@ a, a:hover {
|
|
|
7611
7498
|
position: relative;
|
|
7612
7499
|
padding: var(--atomix-navbar-padding-y) 0;
|
|
7613
7500
|
border-bottom: var(--atomix-navbar-border-width) solid var(--atomix-navbar-border-color);
|
|
7614
|
-
background
|
|
7615
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7616
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7617
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-navbar-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-navbar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-navbar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7501
|
+
background-color: var(--atomix-navbar-bg);
|
|
7618
7502
|
z-index: var(--atomix-navbar-z-index);
|
|
7619
7503
|
}
|
|
7620
7504
|
.c-navbar__container {
|
|
@@ -7649,10 +7533,7 @@ a, a:hover {
|
|
|
7649
7533
|
width: var(--atomix-navbar-toggler-size);
|
|
7650
7534
|
height: var(--atomix-navbar-toggler-size);
|
|
7651
7535
|
padding: 0;
|
|
7652
|
-
background
|
|
7653
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7654
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7655
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-navbar-toggler-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-navbar-toggler-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-navbar-toggler-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7536
|
+
background-color: var(--atomix-navbar-toggler-bg);
|
|
7656
7537
|
border: var(--atomix-navbar-toggler-border);
|
|
7657
7538
|
border-radius: var(--atomix-navbar-toggler-border-radius);
|
|
7658
7539
|
cursor: pointer;
|
|
@@ -7705,10 +7586,7 @@ a, a:hover {
|
|
|
7705
7586
|
left: 0;
|
|
7706
7587
|
width: 100%;
|
|
7707
7588
|
height: 100%;
|
|
7708
|
-
background
|
|
7709
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7710
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7711
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7589
|
+
background-color: var(--atomix-navbar-backdrop-bg);
|
|
7712
7590
|
z-index: var(--atomix-navbar-backdrop-z-index);
|
|
7713
7591
|
opacity: 0;
|
|
7714
7592
|
visibility: hidden;
|
|
@@ -7957,24 +7835,24 @@ a, a:hover {
|
|
|
7957
7835
|
--atomix-callout-padding-y: 1rem;
|
|
7958
7836
|
--atomix-callout-tost-padding-x: 1rem;
|
|
7959
7837
|
--atomix-callout-tost-padding-y: 1rem;
|
|
7960
|
-
--atomix-callout-bg:
|
|
7838
|
+
--atomix-callout-bg: var(--atomix-body-bg);
|
|
7961
7839
|
--atomix-callout-border-radius: 0.5rem;
|
|
7962
|
-
--atomix-callout-border-color:
|
|
7840
|
+
--atomix-callout-border-color: var(--atomix-border-color);
|
|
7963
7841
|
--atomix-callout-border-witdh: var(--atomix-border-width);
|
|
7964
7842
|
--atomix-callout-title-font-size: 1rem;
|
|
7965
7843
|
--atomix-callout-title-font-weight: 600;
|
|
7966
|
-
--atomix-callout-title-color:
|
|
7844
|
+
--atomix-callout-title-color: var(--atomix-body-color);
|
|
7967
7845
|
--atomix-callout-text-font-size: 0.875rem;
|
|
7968
7846
|
--atomix-callout-text-font-weight: 400;
|
|
7969
|
-
--atomix-callout-text-color:
|
|
7847
|
+
--atomix-callout-text-color: var(--atomix-body-color);
|
|
7970
7848
|
--atomix-callout-message-spacer: 0.75rem;
|
|
7971
7849
|
--atomix-callout-icon-size: 1.25rem;
|
|
7972
|
-
--atomix-callout-icon-color:
|
|
7850
|
+
--atomix-callout-icon-color: var(--atomix-primary);
|
|
7973
7851
|
--atomix-callout-close-btn-size: 1.25rem;
|
|
7974
7852
|
--atomix-callout-actions-spacer: 0.5rem;
|
|
7975
7853
|
--atomix-callout-actions-spacer-y: 0.75rem;
|
|
7976
|
-
--atomix-callout-toast-bg:
|
|
7977
|
-
--atomix-callout-box-shadow:
|
|
7854
|
+
--atomix-callout-toast-bg: var(--atomix-body-bg);
|
|
7855
|
+
--atomix-callout-box-shadow: var(--atomix-box-shadow);
|
|
7978
7856
|
--atomix-callout-transition-duration: 0.3s;
|
|
7979
7857
|
--atomix-callout-transition-timing: cubic-bezier(0.16, 1, 0.3, 1);
|
|
7980
7858
|
display: inline-flex;
|
|
@@ -7984,10 +7862,7 @@ a, a:hover {
|
|
|
7984
7862
|
max-width: var(--atomix-callout-width);
|
|
7985
7863
|
gap: var(--atomix-callout-actions-spacer);
|
|
7986
7864
|
padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
|
|
7987
|
-
background
|
|
7988
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
7989
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
7990
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-callout-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-callout-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7865
|
+
background-color: var(--atomix-callout-bg);
|
|
7991
7866
|
border-radius: var(--atomix-callout-border-radius);
|
|
7992
7867
|
border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
|
|
7993
7868
|
transition: opacity var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing), transform var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing);
|
|
@@ -8026,9 +7901,9 @@ a, a:hover {
|
|
|
8026
7901
|
.c-callout__actions {
|
|
8027
7902
|
display: flex;
|
|
8028
7903
|
align-items: center;
|
|
8029
|
-
flex-wrap: wrap;
|
|
8030
7904
|
gap: var(--atomix-callout-actions-spacer);
|
|
8031
7905
|
margin-left: auto;
|
|
7906
|
+
margin-right: 10px;
|
|
8032
7907
|
}
|
|
8033
7908
|
.c-callout__close-btn {
|
|
8034
7909
|
display: inline-flex;
|
|
@@ -8068,10 +7943,7 @@ a, a:hover {
|
|
|
8068
7943
|
align-items: flex-start;
|
|
8069
7944
|
justify-content: flex-start;
|
|
8070
7945
|
border: none;
|
|
8071
|
-
background
|
|
8072
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8073
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8074
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-callout-toast-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-callout-toast-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-callout-toast-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
7946
|
+
background-color: var(--atomix-callout-toast-bg);
|
|
8075
7947
|
box-shadow: var(--atomix-callout-box-shadow);
|
|
8076
7948
|
animation: calloutToastIn 0.3s var(--atomix-callout-transition-timing) forwards;
|
|
8077
7949
|
}
|
|
@@ -8133,9 +8005,35 @@ a, a:hover {
|
|
|
8133
8005
|
--atomix-callout-title-color: var(--atomix-light);
|
|
8134
8006
|
--atomix-callout-text-color: #d1d5db;
|
|
8135
8007
|
--atomix-callout-bg: var(--atomix-dark);
|
|
8136
|
-
--atomix-callout-border-color: var(--atomix-
|
|
8008
|
+
--atomix-callout-border-color: var(--atomix-dark-border-subtle);
|
|
8137
8009
|
--atomix-callout-icon-color: var(--atomix-light);
|
|
8138
8010
|
}
|
|
8011
|
+
.c-callout--glass {
|
|
8012
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
|
|
8013
|
+
padding: 0;
|
|
8014
|
+
border: none;
|
|
8015
|
+
display: block;
|
|
8016
|
+
}
|
|
8017
|
+
.c-callout--glass .c-callout__glass-content {
|
|
8018
|
+
display: flex;
|
|
8019
|
+
justify-content: center;
|
|
8020
|
+
align-items: center;
|
|
8021
|
+
padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
|
|
8022
|
+
border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
|
|
8023
|
+
max-width: var(--atomix-callout-width);
|
|
8024
|
+
border-radius: var(--atomix-callout-border-radius);
|
|
8025
|
+
width: 100%;
|
|
8026
|
+
}
|
|
8027
|
+
.c-callout--glass .c-callout__title {
|
|
8028
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8029
|
+
}
|
|
8030
|
+
.c-callout--glass .c-callout__text {
|
|
8031
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8032
|
+
}
|
|
8033
|
+
.c-callout--glass.c-callout--toast {
|
|
8034
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
|
|
8035
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
8036
|
+
}
|
|
8139
8037
|
.c-callout.is-hide {
|
|
8140
8038
|
opacity: 0;
|
|
8141
8039
|
transform: translateY(-10px);
|
|
@@ -8276,10 +8174,7 @@ a, a:hover {
|
|
|
8276
8174
|
color: var(--atomix-pagination-color);
|
|
8277
8175
|
font-size: var(--atomix-pagination-font-size);
|
|
8278
8176
|
padding: var(--atomix-pagination-padding-y) var(--atomix-pagination-padding-x);
|
|
8279
|
-
background
|
|
8280
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8281
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8282
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-pagination-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-pagination-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8177
|
+
background-color: var(--atomix-pagination-bg);
|
|
8283
8178
|
border-radius: var(--atomix-pagination-border-radius);
|
|
8284
8179
|
border: none;
|
|
8285
8180
|
cursor: pointer;
|
|
@@ -8363,10 +8258,7 @@ a, a:hover {
|
|
|
8363
8258
|
flex-direction: column;
|
|
8364
8259
|
gap: var(--atomix-popover-inner-gap-y) var(--atomix-popover-inner-gap-x);
|
|
8365
8260
|
padding: var(--atomix-popover-padding-y) var(--atomix-popover-padding-x);
|
|
8366
|
-
background
|
|
8367
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8368
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8369
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8261
|
+
background-color: var(--atomix-popover-bg);
|
|
8370
8262
|
border-radius: var(--atomix-popover-border-radius);
|
|
8371
8263
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
8372
8264
|
}
|
|
@@ -8374,10 +8266,7 @@ a, a:hover {
|
|
|
8374
8266
|
position: absolute;
|
|
8375
8267
|
width: var(--atomix-popover-arrow-size);
|
|
8376
8268
|
height: var(--atomix-popover-arrow-size);
|
|
8377
|
-
background
|
|
8378
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8379
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8380
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8269
|
+
background-color: var(--atomix-popover-bg);
|
|
8381
8270
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
8382
8271
|
z-index: 1;
|
|
8383
8272
|
transform-origin: center;
|
|
@@ -8419,10 +8308,7 @@ a, a:hover {
|
|
|
8419
8308
|
--atomix-product-review-label-color: var(--atomix-text-muted);
|
|
8420
8309
|
padding: var(--atomix-product-review-padding);
|
|
8421
8310
|
border-radius: var(--atomix-product-review-border-radius);
|
|
8422
|
-
background
|
|
8423
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8424
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8425
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-product-review-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-product-review-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-product-review-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8311
|
+
background-color: var(--atomix-product-review-bg);
|
|
8426
8312
|
border: 1px solid var(--atomix-product-review-border-color);
|
|
8427
8313
|
width: 100%;
|
|
8428
8314
|
max-width: 37.5rem;
|
|
@@ -8482,10 +8368,7 @@ a, a:hover {
|
|
|
8482
8368
|
padding: 0.75rem;
|
|
8483
8369
|
border: 1px solid var(--atomix-product-review-border-color);
|
|
8484
8370
|
border-radius: var(--atomix-border-radius);
|
|
8485
|
-
background
|
|
8486
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8487
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8488
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8371
|
+
background-color: var(--atomix-body-bg);
|
|
8489
8372
|
color: var(--atomix-body-color);
|
|
8490
8373
|
font-family: inherit;
|
|
8491
8374
|
resize: vertical;
|
|
@@ -8533,10 +8416,7 @@ a, a:hover {
|
|
|
8533
8416
|
width: 100%;
|
|
8534
8417
|
max-width: var(--atomix-progress-width);
|
|
8535
8418
|
height: var(--atomix-progress-bar-height);
|
|
8536
|
-
background
|
|
8537
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8538
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8539
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-progress-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-progress-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-progress-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8419
|
+
background-color: var(--atomix-progress-bg);
|
|
8540
8420
|
border-radius: var(--atomix-progress-border-radius);
|
|
8541
8421
|
overflow: hidden;
|
|
8542
8422
|
}
|
|
@@ -8544,10 +8424,7 @@ a, a:hover {
|
|
|
8544
8424
|
width: var(--atomix-progress-bar-width);
|
|
8545
8425
|
height: var(--atomix-progress-bar-height);
|
|
8546
8426
|
color: var(--atomix-progress-bar-color);
|
|
8547
|
-
background
|
|
8548
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8549
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8550
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-progress-bar-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-progress-bar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-progress-bar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8427
|
+
background-color: var(--atomix-progress-bar-bg);
|
|
8551
8428
|
border-radius: var(--atomix-progress-border-radius);
|
|
8552
8429
|
transition: var(--atomix-progress-bar-transition) var(--atomix-progress-bar-easing);
|
|
8553
8430
|
}
|
|
@@ -8754,10 +8631,7 @@ a, a:hover {
|
|
|
8754
8631
|
max-width: var(--atomix-river-width);
|
|
8755
8632
|
padding: var(--atomix-river-padding-y) var(--atomix-river-padding-x);
|
|
8756
8633
|
border-radius: var(--atomix-river-border-radius);
|
|
8757
|
-
background
|
|
8758
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8759
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8760
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-river-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-river-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-river-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8634
|
+
background-color: var(--atomix-river-bg);
|
|
8761
8635
|
}
|
|
8762
8636
|
.c-river__bg {
|
|
8763
8637
|
position: absolute;
|
|
@@ -8777,10 +8651,7 @@ a, a:hover {
|
|
|
8777
8651
|
.c-river__overlay {
|
|
8778
8652
|
position: absolute;
|
|
8779
8653
|
inset: 0;
|
|
8780
|
-
background
|
|
8781
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
8782
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
8783
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-river-overlay) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-river-overlay) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-river-overlay) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8654
|
+
background-color: var(--atomix-river-overlay);
|
|
8784
8655
|
opacity: var(--atomix-river-overlay-opacity);
|
|
8785
8656
|
border-radius: var(--atomix-river-border-radius);
|
|
8786
8657
|
}
|
|
@@ -9004,10 +8875,7 @@ a, a:hover {
|
|
|
9004
8875
|
left: 0;
|
|
9005
8876
|
width: 100%;
|
|
9006
8877
|
height: 100%;
|
|
9007
|
-
background
|
|
9008
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9009
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9010
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8878
|
+
background-color: var(--atomix-sectionintro-overlay-bg-color);
|
|
9011
8879
|
opacity: var(--atomix-sectionintro-overlay-opacity);
|
|
9012
8880
|
}
|
|
9013
8881
|
.c-sectionintro--has-bg {
|
|
@@ -9087,10 +8955,7 @@ a, a:hover {
|
|
|
9087
8955
|
padding: var(--atomix-select-padding-x) var(--atomix-select-padding-y);
|
|
9088
8956
|
color: var(--atomix-select-placeholder-color);
|
|
9089
8957
|
font-size: var(--atomix-select-font-size);
|
|
9090
|
-
background
|
|
9091
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9092
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9093
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-select-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-select-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-select-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8958
|
+
background-color: var(--atomix-select-bg);
|
|
9094
8959
|
border: 1px solid var(--atomix-select-border-color);
|
|
9095
8960
|
border-radius: var(--atomix-select-border-radius);
|
|
9096
8961
|
cursor: pointer;
|
|
@@ -9120,10 +8985,7 @@ a, a:hover {
|
|
|
9120
8985
|
height: 0px;
|
|
9121
8986
|
top: calc(100% + var(--atomix-select-panel-spacer-y));
|
|
9122
8987
|
left: 0;
|
|
9123
|
-
background
|
|
9124
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9125
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9126
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-select-panel-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-select-panel-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-select-panel-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
8988
|
+
background-color: var(--atomix-select-panel-bg);
|
|
9127
8989
|
border-radius: var(--atomix-select-panel-border-radius);
|
|
9128
8990
|
box-shadow: var(--atomix-select-panel-box-shadow);
|
|
9129
8991
|
overflow: hidden;
|
|
@@ -9144,10 +9006,7 @@ a, a:hover {
|
|
|
9144
9006
|
.c-select__item {
|
|
9145
9007
|
padding: var(--atomix-select-item-padding-x) var(--atomix-select-item-padding-y);
|
|
9146
9008
|
color: var(--atomix-select-item-color);
|
|
9147
|
-
background
|
|
9148
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9149
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9150
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-select-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-select-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-select-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9009
|
+
background-color: var(--atomix-select-item-bg);
|
|
9151
9010
|
border-radius: var(--atomix-select-item-border-radius);
|
|
9152
9011
|
transition-property: all;
|
|
9153
9012
|
transition-duration: 0.2s;
|
|
@@ -9158,10 +9017,7 @@ a, a:hover {
|
|
|
9158
9017
|
cursor: pointer;
|
|
9159
9018
|
}
|
|
9160
9019
|
.c-select__item:hover {
|
|
9161
|
-
background
|
|
9162
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9163
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9164
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-select-item-bg-hover) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-select-item-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-select-item-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9020
|
+
background-color: var(--atomix-select-item-bg-hover);
|
|
9165
9021
|
}
|
|
9166
9022
|
.c-select--lg {
|
|
9167
9023
|
--atomix-select-font-size: var(--atomix-select-font-size-lg);
|
|
@@ -9211,10 +9067,7 @@ a, a:hover {
|
|
|
9211
9067
|
--atomix-side-menu-inner-padding-top: 1.25rem;
|
|
9212
9068
|
width: 100%;
|
|
9213
9069
|
padding: var(--atomix-side-menu-padding-y) var(--atomix-side-menu-padding-x);
|
|
9214
|
-
background
|
|
9215
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9216
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9217
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9070
|
+
background-color: var(--atomix-side-menu-bg);
|
|
9218
9071
|
border-radius: var(--atomix-side-menu-border-radius);
|
|
9219
9072
|
border: var(--atomix-side-menu-border-width) solid var(--atomix-side-menu-border-color);
|
|
9220
9073
|
box-shadow: var(--atomix-side-menu-box-shadow);
|
|
@@ -9252,10 +9105,7 @@ a, a:hover {
|
|
|
9252
9105
|
justify-content: space-between;
|
|
9253
9106
|
width: 100%;
|
|
9254
9107
|
padding: var(--atomix-side-menu-toggler-padding-y) var(--atomix-side-menu-toggler-padding-x);
|
|
9255
|
-
background
|
|
9256
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9257
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9258
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9108
|
+
background-color: var(--atomix-side-menu-toggler-bg);
|
|
9259
9109
|
border: none;
|
|
9260
9110
|
border-radius: var(--atomix-side-menu-toggler-border-radius);
|
|
9261
9111
|
cursor: pointer;
|
|
@@ -9271,10 +9121,7 @@ a, a:hover {
|
|
|
9271
9121
|
}
|
|
9272
9122
|
}
|
|
9273
9123
|
.c-side-menu__toggler:hover {
|
|
9274
|
-
background
|
|
9275
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9276
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9277
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9124
|
+
background-color: var(--atomix-side-menu-toggler-hover-bg);
|
|
9278
9125
|
}
|
|
9279
9126
|
.c-side-menu__toggler:focus {
|
|
9280
9127
|
outline: 2px solid var(--atomix-focus-ring-color);
|
|
@@ -9312,10 +9159,7 @@ a, a:hover {
|
|
|
9312
9159
|
color: var(--atomix-side-menu-item-color);
|
|
9313
9160
|
font-size: var(--atomix-side-menu-item-font-size);
|
|
9314
9161
|
font-weight: var(--atomix-side-menu-item-font-weight);
|
|
9315
|
-
background
|
|
9316
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9317
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9318
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9162
|
+
background-color: var(--atomix-side-menu-item-bg);
|
|
9319
9163
|
border: none;
|
|
9320
9164
|
border-radius: var(--atomix-side-menu-item-border-radius);
|
|
9321
9165
|
text-decoration: none;
|
|
@@ -9324,10 +9168,7 @@ a, a:hover {
|
|
|
9324
9168
|
}
|
|
9325
9169
|
.c-side-menu__link:hover {
|
|
9326
9170
|
color: var(--atomix-side-menu-item-hover-color);
|
|
9327
|
-
background
|
|
9328
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9329
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9330
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9171
|
+
background-color: var(--atomix-side-menu-item-hover-bg);
|
|
9331
9172
|
text-decoration: none;
|
|
9332
9173
|
}
|
|
9333
9174
|
.c-side-menu__link:focus {
|
|
@@ -9339,18 +9180,12 @@ a, a:hover {
|
|
|
9339
9180
|
}
|
|
9340
9181
|
.c-side-menu__link.is-active {
|
|
9341
9182
|
color: var(--atomix-side-menu-item-active-color);
|
|
9342
|
-
background
|
|
9343
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9344
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9345
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9183
|
+
background-color: var(--atomix-side-menu-item-active-bg);
|
|
9346
9184
|
font-weight: 500;
|
|
9347
9185
|
}
|
|
9348
9186
|
.c-side-menu__link.is-disabled, .c-side-menu__link[aria-disabled=true] {
|
|
9349
9187
|
color: var(--atomix-side-menu-item-disabled-color);
|
|
9350
|
-
background
|
|
9351
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9352
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9353
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9188
|
+
background-color: var(--atomix-side-menu-item-disabled-bg);
|
|
9354
9189
|
cursor: not-allowed;
|
|
9355
9190
|
pointer-events: none;
|
|
9356
9191
|
opacity: 0.6;
|
|
@@ -9394,10 +9229,7 @@ a, a:hover {
|
|
|
9394
9229
|
display: inline-block;
|
|
9395
9230
|
width: var(--atomix-skeleton-width);
|
|
9396
9231
|
min-height: var(--atomix-skeleton-height);
|
|
9397
|
-
background
|
|
9398
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9399
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9400
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 10%, transparent), 4px 8px 32px color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9232
|
+
background-color: linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%);
|
|
9401
9233
|
background-size: 400% 100%;
|
|
9402
9234
|
border-radius: var(--atomix-skeleton-border-radius);
|
|
9403
9235
|
animation-name: atomix--skeleton-loading;
|
|
@@ -9493,10 +9325,7 @@ a, a:hover {
|
|
|
9493
9325
|
display: flex;
|
|
9494
9326
|
align-items: center;
|
|
9495
9327
|
justify-content: center;
|
|
9496
|
-
background
|
|
9497
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9498
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9499
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9328
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
9500
9329
|
border: 2px dashed var(--atomix-primary-border-subtle);
|
|
9501
9330
|
border-radius: 0.25rem;
|
|
9502
9331
|
}
|
|
@@ -9536,10 +9365,7 @@ a, a:hover {
|
|
|
9536
9365
|
height: var(--atomix-slider-nav-size);
|
|
9537
9366
|
border: none;
|
|
9538
9367
|
border-radius: 50rem;
|
|
9539
|
-
background
|
|
9540
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9541
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9542
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9368
|
+
background-color: var(--atomix-primary-bg-subtle);
|
|
9543
9369
|
color: var(--atomix-primary-text);
|
|
9544
9370
|
cursor: pointer;
|
|
9545
9371
|
pointer-events: auto;
|
|
@@ -9552,10 +9378,7 @@ a, a:hover {
|
|
|
9552
9378
|
}
|
|
9553
9379
|
.c-slider__navigation-prev:hover,
|
|
9554
9380
|
.c-slider__navigation-next:hover {
|
|
9555
|
-
background
|
|
9556
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9557
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9558
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9381
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
9559
9382
|
transform: translateY(-50%) scale(1.05);
|
|
9560
9383
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
9561
9384
|
}
|
|
@@ -9607,29 +9430,20 @@ a, a:hover {
|
|
|
9607
9430
|
height: 0.5rem;
|
|
9608
9431
|
border-radius: 50rem;
|
|
9609
9432
|
border: none;
|
|
9610
|
-
background
|
|
9611
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9612
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9613
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9433
|
+
background-color: var(--atomix-tertiary-bg-subtle);
|
|
9614
9434
|
cursor: pointer;
|
|
9615
9435
|
pointer-events: auto;
|
|
9616
9436
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9617
9437
|
}
|
|
9618
9438
|
.c-slider__pagination-bullet:hover {
|
|
9619
|
-
background
|
|
9620
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9621
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9622
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9439
|
+
background-color: var(--atomix-secondary-bg-subtle);
|
|
9623
9440
|
transform: scale(1.2);
|
|
9624
9441
|
}
|
|
9625
9442
|
.c-slider__pagination-bullet:active {
|
|
9626
9443
|
transform: scale(1.1);
|
|
9627
9444
|
}
|
|
9628
9445
|
.c-slider__pagination-bullet--active {
|
|
9629
|
-
background
|
|
9630
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9631
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9632
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9446
|
+
background-color: var(--atomix-primary);
|
|
9633
9447
|
transform: scale(1.2);
|
|
9634
9448
|
}
|
|
9635
9449
|
.c-slider__empty-message {
|
|
@@ -9786,10 +9600,7 @@ a, a:hover {
|
|
|
9786
9600
|
.c-steps__line {
|
|
9787
9601
|
width: var(--atomix-steps-line-width);
|
|
9788
9602
|
height: var(--atomix-steps-line-height);
|
|
9789
|
-
background
|
|
9790
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9791
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9792
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-steps-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-steps-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-steps-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9603
|
+
background-color: var(--atomix-steps-item-bg);
|
|
9793
9604
|
transition: 1s;
|
|
9794
9605
|
}
|
|
9795
9606
|
.c-steps__content {
|
|
@@ -9805,10 +9616,7 @@ a, a:hover {
|
|
|
9805
9616
|
height: var(--atomix-steps-item-number-size);
|
|
9806
9617
|
color: var(--atomix-steps-item-number-color);
|
|
9807
9618
|
font-size: var(--atomix-steps-item-number-font-size);
|
|
9808
|
-
background
|
|
9809
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9810
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9811
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-steps-item-number-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-steps-item-number-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-steps-item-number-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9619
|
+
background-color: var(--atomix-steps-item-number-bg);
|
|
9812
9620
|
border-radius: var(--atomix-steps-item-number-border-radius);
|
|
9813
9621
|
}
|
|
9814
9622
|
.c-steps__text {
|
|
@@ -9885,10 +9693,7 @@ a, a:hover {
|
|
|
9885
9693
|
border-radius: var(--atomix-tabs-nav-btn-border-radius);
|
|
9886
9694
|
border: var(--atomix-tabs-nav-btn-border-width) solid transparent;
|
|
9887
9695
|
border-bottom: var(--atomix-tabs-nav-btn-border-width) solid var(--atomix-tabs-nav-btn-border-color);
|
|
9888
|
-
background
|
|
9889
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9890
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9891
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9696
|
+
background-color: var(--atomix-tabs-nav-btn-bg);
|
|
9892
9697
|
transition-property: all;
|
|
9893
9698
|
transition-duration: 0.2s;
|
|
9894
9699
|
transition-timing-function: ease-in-out;
|
|
@@ -9899,20 +9704,14 @@ a, a:hover {
|
|
|
9899
9704
|
border-color: transparent transparent var(--atomix-tabs-nav-btn-border-active-color) transparent;
|
|
9900
9705
|
}
|
|
9901
9706
|
.c-tabs__nav-btn:hover {
|
|
9902
|
-
background
|
|
9903
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9904
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9905
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9707
|
+
background-color: var(--atomix-tabs-nav-btn-bg-hover);
|
|
9906
9708
|
}
|
|
9907
9709
|
.c-tabs__nav-btn:disabled, .c-tabs__nav-btn.is-disabled {
|
|
9908
9710
|
--atomix-tabs-nav-btn-border-active-color: var(
|
|
9909
9711
|
--atomix-tabs-nav-btn-border-disabled-color
|
|
9910
9712
|
);
|
|
9911
9713
|
color: var(--atomix-tabs-nav-btn-border-disabled-color);
|
|
9912
|
-
background
|
|
9913
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9914
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9915
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9714
|
+
background-color: var(--atomix-tabs-nav-btn-bg-disabled);
|
|
9916
9715
|
pointer-events: none;
|
|
9917
9716
|
}
|
|
9918
9717
|
.c-tabs__nav-btn:focus-visible {
|
|
@@ -9957,10 +9756,7 @@ a, a:hover {
|
|
|
9957
9756
|
width: 100%;
|
|
9958
9757
|
max-width: var(--atomix-testimonial-width);
|
|
9959
9758
|
padding: var(--atomix-testimonial-padding-y) var(--atomix-testimonial-padding-x);
|
|
9960
|
-
background
|
|
9961
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
9962
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
9963
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-testimonial-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-testimonial-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-testimonial-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9759
|
+
background-color: var(--atomix-testimonial-bg);
|
|
9964
9760
|
}
|
|
9965
9761
|
.c-testimonial__quote {
|
|
9966
9762
|
color: var(--atomix-testimonial-quote-color);
|
|
@@ -10004,10 +9800,7 @@ a, a:hover {
|
|
|
10004
9800
|
margin-bottom: 1.5rem;
|
|
10005
9801
|
border: 1px solid var(--atomix-todo-border-color);
|
|
10006
9802
|
border-radius: var(--atomix-todo-border-radius);
|
|
10007
|
-
background
|
|
10008
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10009
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10010
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-todo-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-todo-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-todo-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9803
|
+
background-color: var(--atomix-todo-bg);
|
|
10011
9804
|
color: var(--atomix-todo-color);
|
|
10012
9805
|
padding: 1.25rem;
|
|
10013
9806
|
}
|
|
@@ -10049,10 +9842,7 @@ a, a:hover {
|
|
|
10049
9842
|
transition: background-color 0.2s ease;
|
|
10050
9843
|
}
|
|
10051
9844
|
.c-todo__item:hover {
|
|
10052
|
-
background
|
|
10053
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10054
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10055
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-todo-item-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-todo-item-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-todo-item-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9845
|
+
background-color: var(--atomix-todo-item-hover-bg);
|
|
10056
9846
|
}
|
|
10057
9847
|
.c-todo__item--completed .c-todo__item-text {
|
|
10058
9848
|
color: var(--atomix-todo-completed-color);
|
|
@@ -10140,10 +9930,7 @@ a, a:hover {
|
|
|
10140
9930
|
flex: 0 0 var(--atomix-toggle-switch-width);
|
|
10141
9931
|
width: var(--atomix-toggle-switch-width);
|
|
10142
9932
|
height: var(--atomix-toggle-switch-height);
|
|
10143
|
-
background
|
|
10144
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10145
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10146
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-toggle-switch-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-toggle-switch-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9933
|
+
background-color: var(--atomix-toggle-switch-bg);
|
|
10147
9934
|
border-radius: var(--atomix-toggle-switch-border-radius);
|
|
10148
9935
|
-webkit-user-select: none;
|
|
10149
9936
|
-moz-user-select: none;
|
|
@@ -10160,10 +9947,7 @@ a, a:hover {
|
|
|
10160
9947
|
width: var(--atomix-toggle-switch-handle-width);
|
|
10161
9948
|
height: var(--atomix-toggle-switch-handle-height);
|
|
10162
9949
|
margin: var(--atomix-toggle-switch-handle-margin);
|
|
10163
|
-
background
|
|
10164
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10165
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10166
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9950
|
+
background-color: var(--atomix-toggle-switch-handle-bg);
|
|
10167
9951
|
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
10168
9952
|
transition-property: all;
|
|
10169
9953
|
transition-duration: 0.2s;
|
|
@@ -10184,10 +9968,7 @@ a, a:hover {
|
|
|
10184
9968
|
pointer-events: none;
|
|
10185
9969
|
}
|
|
10186
9970
|
.c-toggle.is-disabled:not(.is-on) .c-toggle__switch {
|
|
10187
|
-
background
|
|
10188
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10189
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10190
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9971
|
+
background-color: var(--atomix-toggle-switch-disabled-bg);
|
|
10191
9972
|
}
|
|
10192
9973
|
.c-toggle.is-disabled.is-on {
|
|
10193
9974
|
pointer-events: none;
|
|
@@ -10196,10 +9977,7 @@ a, a:hover {
|
|
|
10196
9977
|
content: "";
|
|
10197
9978
|
position: absolute;
|
|
10198
9979
|
inset: 0;
|
|
10199
|
-
background
|
|
10200
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10201
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10202
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(107, 114, 128, 0.6) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(107, 114, 128, 0.6) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(107, 114, 128, 0.6) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
9980
|
+
background-color: rgba(107, 114, 128, 0.6);
|
|
10203
9981
|
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
10204
9982
|
}
|
|
10205
9983
|
.c-tooltip {
|
|
@@ -10233,10 +10011,7 @@ a, a:hover {
|
|
|
10233
10011
|
font-size: var(--atomix-tooltip-font-size);
|
|
10234
10012
|
font-weight: var(--atomix-tooltip-font-weight);
|
|
10235
10013
|
padding: var(--atomix-tooltip-padding-y) var(--atomix-tooltip-padding-x);
|
|
10236
|
-
background
|
|
10237
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10238
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10239
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10014
|
+
background-color: var(--atomix-tooltip-bg);
|
|
10240
10015
|
border-radius: var(--atomix-tooltip-border-radius);
|
|
10241
10016
|
z-index: 2;
|
|
10242
10017
|
opacity: 0;
|
|
@@ -10254,10 +10029,7 @@ a, a:hover {
|
|
|
10254
10029
|
transform: translateX(-50%) rotate(45deg);
|
|
10255
10030
|
width: var(--atomix-tooltip-arrow-size);
|
|
10256
10031
|
height: var(--atomix-tooltip-arrow-size);
|
|
10257
|
-
background
|
|
10258
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10259
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10260
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10032
|
+
background-color: var(--atomix-tooltip-bg);
|
|
10261
10033
|
z-index: 1;
|
|
10262
10034
|
}
|
|
10263
10035
|
.c-tooltip--top-left {
|
|
@@ -10370,10 +10142,7 @@ a, a:hover {
|
|
|
10370
10142
|
width: 100%;
|
|
10371
10143
|
max-width: var(--atomix-upload-width);
|
|
10372
10144
|
padding: var(--atomix-upload-padding-y) var(--atomix-upload-padding-x);
|
|
10373
|
-
background
|
|
10374
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10375
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10376
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-upload-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-upload-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-upload-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10145
|
+
background-color: var(--atomix-upload-bg);
|
|
10377
10146
|
border-radius: var(--atomix-upload-border-radius);
|
|
10378
10147
|
transition-property: all;
|
|
10379
10148
|
transition-duration: 0.2s;
|
|
@@ -10381,10 +10150,7 @@ a, a:hover {
|
|
|
10381
10150
|
transition-delay: 0s;
|
|
10382
10151
|
}
|
|
10383
10152
|
.c-upload:hover {
|
|
10384
|
-
background
|
|
10385
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10386
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10387
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-upload-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-upload-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-upload-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10153
|
+
background-color: var(--atomix-upload-hover-bg);
|
|
10388
10154
|
}
|
|
10389
10155
|
.c-upload__inner {
|
|
10390
10156
|
display: flex;
|
|
@@ -10397,10 +10163,7 @@ a, a:hover {
|
|
|
10397
10163
|
.c-upload__icon {
|
|
10398
10164
|
font-size: var(--atomix-upload-icon-size);
|
|
10399
10165
|
padding: var(--atomix-upload-icon-padding);
|
|
10400
|
-
background
|
|
10401
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10402
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10403
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-upload-icon-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-upload-icon-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-upload-icon-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10166
|
+
background-color: var(--atomix-upload-icon-bg);
|
|
10404
10167
|
border-radius: 50rem;
|
|
10405
10168
|
}
|
|
10406
10169
|
.c-upload__title {
|
|
@@ -10538,37 +10301,34 @@ a, a:hover {
|
|
|
10538
10301
|
pointer-events: none;
|
|
10539
10302
|
}
|
|
10540
10303
|
.c-video-player {
|
|
10541
|
-
--atomix
|
|
10542
|
-
--atomix
|
|
10543
|
-
--atomix
|
|
10544
|
-
--atomix
|
|
10545
|
-
--atomix
|
|
10546
|
-
--atomix
|
|
10547
|
-
--atomix
|
|
10548
|
-
--atomix
|
|
10549
|
-
--atomix
|
|
10550
|
-
--atomix
|
|
10551
|
-
--atomix
|
|
10552
|
-
--atomix
|
|
10553
|
-
--atomix
|
|
10554
|
-
--atomix
|
|
10555
|
-
--atomix
|
|
10556
|
-
--atomix
|
|
10557
|
-
--atomix
|
|
10558
|
-
--atomix
|
|
10559
|
-
--atomix
|
|
10560
|
-
--atomix
|
|
10561
|
-
--atomix
|
|
10562
|
-
--atomix
|
|
10563
|
-
--atomix
|
|
10564
|
-
--atomix
|
|
10565
|
-
--atomix
|
|
10304
|
+
--atomix--video-player-bg: #000;
|
|
10305
|
+
--atomix--video-player-border-radius: 8px;
|
|
10306
|
+
--atomix--video-player-controls-padding: 20px 16px 16px;
|
|
10307
|
+
--atomix--video-player-progress-height: 4px;
|
|
10308
|
+
--atomix--video-player-button-size: 40px;
|
|
10309
|
+
--atomix--video-player-font-size: 14px;
|
|
10310
|
+
--atomix--video-player-transition: all 0.3s ease;
|
|
10311
|
+
--atomix--video-player-volume-width: 80px;
|
|
10312
|
+
--atomix--video-player-volume-width-mobile: 60px;
|
|
10313
|
+
--atomix--video-player-volume-height: 4px;
|
|
10314
|
+
--atomix--video-player-volume-height-hover: 6px;
|
|
10315
|
+
--atomix--video-player-volume-thumb-size: 12px;
|
|
10316
|
+
--atomix--video-player-volume-bg: rgba(255, 255, 255, 0.3);
|
|
10317
|
+
--atomix--video-player-volume-bg-hover: rgba(255, 255, 255, 0.5);
|
|
10318
|
+
--atomix--video-player-volume-fill: var(--atomix-color-primary);
|
|
10319
|
+
--atomix--video-player-volume-fill-hover: var(--atomix-color-primary-light);
|
|
10320
|
+
--atomix--video-player-volume-fill-active: var(--atomix-color-primary-dark);
|
|
10321
|
+
--atomix--video-player-subtitle-bg: rgba(0, 0, 0, 0.85);
|
|
10322
|
+
--atomix--video-player-subtitle-color: #ffffff;
|
|
10323
|
+
--atomix--video-player-subtitle-font-size: 18px;
|
|
10324
|
+
--atomix--video-player-subtitle-font-weight: 500;
|
|
10325
|
+
--atomix--video-player-subtitle-line-height: 1.5;
|
|
10326
|
+
--atomix--video-player-subtitle-border-radius: 6px;
|
|
10327
|
+
--atomix--video-player-subtitle-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
|
10328
|
+
--atomix--video-player-subtitle-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
10566
10329
|
position: relative;
|
|
10567
10330
|
width: 100%;
|
|
10568
|
-
background
|
|
10569
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10570
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10571
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix--video-player-bg, #000) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix--video-player-bg, #000) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix--video-player-bg, #000) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10331
|
+
background-color: var(--atomix--video-player-bg, #000);
|
|
10572
10332
|
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
10573
10333
|
overflow: hidden;
|
|
10574
10334
|
font-family: var(--atomix--font-family-base);
|
|
@@ -10638,10 +10398,7 @@ a, a:hover {
|
|
|
10638
10398
|
bottom: 0;
|
|
10639
10399
|
left: 0;
|
|
10640
10400
|
right: 0;
|
|
10641
|
-
background: linear-gradient(
|
|
10642
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10643
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10644
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, linear-gradient(transparent, rgba(0, 0, 0, 0.8)) 10%, transparent), 4px 8px 32px color-mix(in srgb, linear-gradient(transparent, rgba(0, 0, 0, 0.8)) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, linear-gradient(transparent, rgba(0, 0, 0, 0.8)) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10401
|
+
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
|
|
10645
10402
|
padding: 1.25rem 1rem 1rem;
|
|
10646
10403
|
opacity: 0;
|
|
10647
10404
|
visibility: hidden;
|
|
@@ -10825,10 +10582,7 @@ a, a:hover {
|
|
|
10825
10582
|
bottom: 3.125rem;
|
|
10826
10583
|
right: 0;
|
|
10827
10584
|
min-width: 12.5rem;
|
|
10828
|
-
background
|
|
10829
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
10830
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
10831
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10585
|
+
background-color: rgba(var(--atomix-primary-rgb), 0.7);
|
|
10832
10586
|
border-radius: 0.5rem;
|
|
10833
10587
|
padding: 0.5rem;
|
|
10834
10588
|
-webkit-backdrop-filter: blur(10px);
|
|
@@ -11024,6 +10778,24 @@ a, a:hover {
|
|
|
11024
10778
|
.c-video-player--ambient .c-video-player__ambient-canvas {
|
|
11025
10779
|
display: block;
|
|
11026
10780
|
}
|
|
10781
|
+
.c-video-player--glass {
|
|
10782
|
+
position: relative;
|
|
10783
|
+
}
|
|
10784
|
+
.c-video-player__glass-overlay {
|
|
10785
|
+
overflow: hidden;
|
|
10786
|
+
position: absolute;
|
|
10787
|
+
top: 0;
|
|
10788
|
+
left: 0;
|
|
10789
|
+
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
10790
|
+
}
|
|
10791
|
+
.c-video-player__glass-content {
|
|
10792
|
+
position: absolute;
|
|
10793
|
+
top: 0;
|
|
10794
|
+
left: 0;
|
|
10795
|
+
right: 0;
|
|
10796
|
+
bottom: 0;
|
|
10797
|
+
pointer-events: auto;
|
|
10798
|
+
}
|
|
11027
10799
|
.c-video-player__subtitles {
|
|
11028
10800
|
position: absolute;
|
|
11029
10801
|
bottom: 5rem;
|
|
@@ -11078,10 +10850,7 @@ a, a:hover {
|
|
|
11078
10850
|
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11079
10851
|
}
|
|
11080
10852
|
.c-photo-viewer__container {
|
|
11081
|
-
background
|
|
11082
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11083
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11084
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10853
|
+
background-color: var(--atomix-body-bg);
|
|
11085
10854
|
border: 1px solid var(--atomix-primary-border-subtle);
|
|
11086
10855
|
border-radius: 0.625rem;
|
|
11087
10856
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
|
|
@@ -11135,10 +10904,7 @@ a, a:hover {
|
|
|
11135
10904
|
border: 2px solid transparent;
|
|
11136
10905
|
border-radius: 0.5rem;
|
|
11137
10906
|
padding: 0;
|
|
11138
|
-
background
|
|
11139
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11140
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11141
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, transparent 10%, transparent), 4px 8px 32px color-mix(in srgb, transparent 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, transparent 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10907
|
+
background-color: transparent;
|
|
11142
10908
|
cursor: pointer;
|
|
11143
10909
|
overflow: hidden;
|
|
11144
10910
|
position: relative;
|
|
@@ -11196,10 +10962,7 @@ body.is-open-photoviewer {
|
|
|
11196
10962
|
width: 100vw;
|
|
11197
10963
|
height: 100vh;
|
|
11198
10964
|
z-index: 1000;
|
|
11199
|
-
background
|
|
11200
|
-
backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
|
|
11201
|
-
-webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
|
|
11202
|
-
box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, transparent 10%, transparent), 4px 8px 32px color-mix(in srgb, transparent 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, transparent 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
10965
|
+
background-color: transparent;
|
|
11203
10966
|
opacity: 1;
|
|
11204
10967
|
transition-property: opacity;
|
|
11205
10968
|
}
|