diff --git a/layout/sidebar/sidebar.scarlet b/layout/sidebar/sidebar.scarlet index 11ab4a91..eb5f3ce2 100644 --- a/layout/sidebar/sidebar.scarlet +++ b/layout/sidebar/sidebar.scarlet @@ -12,7 +12,7 @@ const sidebar-spacing-y = 0.7rem background sidebar-opaque-background transform translateX(-100%) overflow-x hidden - overflow-y auto + overflow-y overlay opacity 0 pointer-events none box-shadow 24px 0 24px rgba(0, 0, 0, 0.2) diff --git a/styles/config.scarlet b/styles/config.scarlet index 61d80dab..8c4f9d9c 100644 --- a/styles/config.scarlet +++ b/styles/config.scarlet @@ -43,10 +43,11 @@ ui-disabled-color = rgb(224, 224, 224) const ui-element-border-radius = 3px // Scrollbar -scrollbar-size = 10px -scrollbar-border-size = 2px -scrollbar-border-radius = 5px -scrollbar-thumb-color = hsla(text-color-h, text-color-s, text-color-l, 0.75) +scrollbar-size = 12px +scrollbar-border-size = 3px +scrollbar-border-radius = 7px +scrollbar-thumb-color = hsla(text-color-h, text-color-s, text-color-l, 0.4) +scrollbar-thumb-hover-color = hsla(text-color-h, text-color-s, text-color-l, 0.6) scrollbar-track-color = transparent // Input diff --git a/styles/layout.scarlet b/styles/layout.scarlet index 4fe88e12..63bcbf39 100644 --- a/styles/layout.scarlet +++ b/styles/layout.scarlet @@ -5,9 +5,9 @@ #content-container flex 1 overflow-x hidden - overflow-y scroll + overflow-y overlay position relative #columns horizontal - height 100% \ No newline at end of file + height 100% diff --git a/styles/scrollbar.scarlet b/styles/scrollbar.scarlet index 7923278e..56e54f84 100644 --- a/styles/scrollbar.scarlet +++ b/styles/scrollbar.scarlet @@ -7,6 +7,9 @@ ::-webkit-scrollbar width scrollbar-size + ::-webkit-scrollbar-button + display none + ::-webkit-scrollbar-track background-color scrollbar-track-color @@ -15,3 +18,7 @@ border-radius scrollbar-border-radius background-clip content-box background-color scrollbar-thumb-color + + :hover, + :focus + background-color scrollbar-thumb-hover-color