Overlay scrollbar

This commit is contained in:
Eduard Urbach 2021-11-20 18:27:16 +09:00
parent e2c3feb36c
commit df5f0c0f65
Signed by: akyoto
GPG Key ID: C874F672B1AF20C0
4 changed files with 15 additions and 7 deletions

View File

@ -12,7 +12,7 @@ const sidebar-spacing-y = 0.7rem
background sidebar-opaque-background background sidebar-opaque-background
transform translateX(-100%) transform translateX(-100%)
overflow-x hidden overflow-x hidden
overflow-y auto overflow-y overlay
opacity 0 opacity 0
pointer-events none pointer-events none
box-shadow 24px 0 24px rgba(0, 0, 0, 0.2) box-shadow 24px 0 24px rgba(0, 0, 0, 0.2)

View File

@ -43,10 +43,11 @@ ui-disabled-color = rgb(224, 224, 224)
const ui-element-border-radius = 3px const ui-element-border-radius = 3px
// Scrollbar // Scrollbar
scrollbar-size = 10px scrollbar-size = 12px
scrollbar-border-size = 2px scrollbar-border-size = 3px
scrollbar-border-radius = 5px scrollbar-border-radius = 7px
scrollbar-thumb-color = hsla(text-color-h, text-color-s, text-color-l, 0.75) 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 scrollbar-track-color = transparent
// Input // Input

View File

@ -5,9 +5,9 @@
#content-container #content-container
flex 1 flex 1
overflow-x hidden overflow-x hidden
overflow-y scroll overflow-y overlay
position relative position relative
#columns #columns
horizontal horizontal
height 100% height 100%

View File

@ -7,6 +7,9 @@
::-webkit-scrollbar ::-webkit-scrollbar
width scrollbar-size width scrollbar-size
::-webkit-scrollbar-button
display none
::-webkit-scrollbar-track ::-webkit-scrollbar-track
background-color scrollbar-track-color background-color scrollbar-track-color
@ -15,3 +18,7 @@
border-radius scrollbar-border-radius border-radius scrollbar-border-radius
background-clip content-box background-clip content-box
background-color scrollbar-thumb-color background-color scrollbar-thumb-color
:hover,
:focus
background-color scrollbar-thumb-hover-color