Make transition to shadow less noticeable

This commit is contained in:
tidy-dev 2023-10-30 06:20:20 -04:00
parent a5cf091030
commit 621b6e7eed
3 changed files with 7 additions and 5 deletions

View file

@ -192,10 +192,11 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
* for use when content can be expanded through other means than
* scrolling. Used in conjuction with background-size, background-attachment, background-repeat.
*/
--no-shadow: #{linear-gradient($white, $white)};
--no-shadow-top: #{linear-gradient($white, rgba(255, 255, 255, 0))};
--no-shadow-bottom: #{linear-gradient(rgba(255, 255, 255, 0), $white)};
--top-shadow: #{linear-gradient(0deg, rgba($white, 0) 0%, rgba($gray-200, 0.6) 90%, rgba($gray-200, 1) 100%)};
--bottom-shadow: #{linear-gradient(180deg, rgba($white, 0) 0%, rgba($gray-200, 0.6) 90%, rgba($gray-200, 1) 100%) 0 100%};
--box-overflow-shadow-background-two: #{var(--no-shadow), var(--no-shadow) 0 100%, var(--top-shadow), var(--bottom-shadow)};
--box-overflow-shadow-background-two: #{var(--no-shadow-top), var(--no-shadow-bottom) 0 100%, var(--top-shadow), var(--bottom-shadow)};
/**
* Text color for selected boxes with active keyboard focus

View file

@ -157,10 +157,11 @@ body.theme-dark {
* for use when content can be expanded through other means than
* scrolling. Used in conjuction with background-size, background-attachment, background-repeat.
*/
--no-shadow: #{linear-gradient($gray-900, $gray-900)};
--no-shadow-top: #{linear-gradient($gray-900, rgba(255, 255, 255, 0))};
--no-shadow-bottom: #{linear-gradient(rgba(255, 255, 255, 0), $gray-900)};
--top-shadow: #{linear-gradient(0deg, rgba($gray-900, 0) 0%, rgba(black, 0.6) 90%, rgba(black, 1) 100%)};
--bottom-shadow: #{linear-gradient(180deg, rgba($gray-900, 0) 0%, rgba(black, 0.6) 90%, rgba(black, 1) 100%) 0 100%};
--box-overflow-shadow-background-two: #{var(--no-shadow), var(--no-shadow) 0 100%, var(--top-shadow), var(--bottom-shadow)};
--box-overflow-shadow-background-two: #{var(--no-shadow-top), var(--no-shadow-bottom) 0 100%, var(--top-shadow), var(--bottom-shadow)};
/**
* Placeholder color for input boxes

View file

@ -11,7 +11,7 @@
overflow-y: auto;
background: var(--box-overflow-shadow-background-two);
background-repeat: no-repeat;
background-size: 100% 30px, 100% 30px, 100% 30px, 100% 30px;
background-size: 100% 30px, 100% 30px, 100% 15px, 100% 15px;
background-attachment: local, local, scroll, scroll;
padding: var(--spacing);
padding-top: 0;