improve table scroll shadow styles

This commit is contained in:
jeffvli
2026-01-03 03:19:40 -08:00
parent f4f75f342c
commit 968d991a1a
@@ -186,12 +186,24 @@
z-index: 1; z-index: 1;
height: 8px; height: 8px;
pointer-events: none; pointer-events: none;
background: linear-gradient(
to bottom, @mixin dark {
darken(var(--theme-colors-background), 10%) 0%, background: linear-gradient(
darken(var(--theme-colors-background), 5%) 50%, to bottom,
transparent 100% color-mix(in srgb, var(--theme-colors-background) 85%, black) 0%,
); color-mix(in srgb, var(--theme-colors-background) 92%, black) 50%,
transparent 100%
);
}
@mixin light {
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--theme-colors-background) 92%, black) 0%,
color-mix(in srgb, var(--theme-colors-background) 96%, black) 50%,
transparent 100%
);
}
} }
.item-table-left-scroll-shadow { .item-table-left-scroll-shadow {
@@ -206,8 +218,8 @@
@mixin dark { @mixin dark {
background: linear-gradient( background: linear-gradient(
to right, to right,
darken(var(--theme-colors-background), 10%) 0%, color-mix(in srgb, var(--theme-colors-background) 85%, black) 0%,
darken(var(--theme-colors-background), 5%) 50%, color-mix(in srgb, var(--theme-colors-background) 92%, black) 50%,
transparent 100% transparent 100%
); );
} }
@@ -215,8 +227,8 @@
@mixin light { @mixin light {
background: linear-gradient( background: linear-gradient(
to right, to right,
darken(var(--theme-colors-background), 5%) 0%, color-mix(in srgb, var(--theme-colors-background) 92%, black) 0%,
darken(var(--theme-colors-background), 3%) 50%, color-mix(in srgb, var(--theme-colors-background) 96%, black) 50%,
transparent 100% transparent 100%
); );
} }
@@ -234,8 +246,8 @@
@mixin dark { @mixin dark {
background: linear-gradient( background: linear-gradient(
to left, to left,
darken(var(--theme-colors-background), 10%) 0%, color-mix(in srgb, var(--theme-colors-background) 85%, black) 0%,
darken(var(--theme-colors-background), 5%) 50%, color-mix(in srgb, var(--theme-colors-background) 92%, black) 50%,
transparent 100% transparent 100%
); );
} }
@@ -243,8 +255,8 @@
@mixin light { @mixin light {
background: linear-gradient( background: linear-gradient(
to left, to left,
darken(var(--theme-colors-background), 5%) 0%, color-mix(in srgb, var(--theme-colors-background) 92%, black) 0%,
darken(var(--theme-colors-background), 3%) 50%, color-mix(in srgb, var(--theme-colors-background) 96%, black) 50%,
transparent 100% transparent 100%
); );
} }
@@ -262,8 +274,8 @@
@mixin dark { @mixin dark {
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
darken(var(--theme-colors-background), 10%) 0%, color-mix(in srgb, var(--theme-colors-background) 85%, black) 0%,
darken(var(--theme-colors-background), 5%) 50%, color-mix(in srgb, var(--theme-colors-background) 92%, black) 50%,
transparent 100% transparent 100%
); );
} }
@@ -271,8 +283,8 @@
@mixin light { @mixin light {
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
darken(var(--theme-colors-background), 5%) 0%, color-mix(in srgb, var(--theme-colors-background) 92%, black) 0%,
darken(var(--theme-colors-background), 3%) 50%, color-mix(in srgb, var(--theme-colors-background) 96%, black) 50%,
transparent 100% transparent 100%
); );
} }