diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css index c32108393..e99b70df7 100644 --- a/ui/dist/themes/dark.css +++ b/ui/dist/themes/dark.css @@ -40,7 +40,11 @@ --table-item-even: var(--color-bg-alt); --table-item-odd: transparent; - /* Modla */ + /* Modal */ --modal-overlay-bg: var(--color-dark-overlay); --modal-border: 1px solid rgba(0, 0, 0, 0.25); + + /* Scrollbar */ + --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20); + --scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.35); } diff --git a/ui/scss/_gui.scss b/ui/scss/_gui.scss index 0f4b13be5..dffbc5298 100644 --- a/ui/scss/_gui.scss +++ b/ui/scss/_gui.scss @@ -30,10 +30,16 @@ body #main-content { - padding: $spacing-vertical; - margin-top: var(--header-height); + margin: auto; display: flex; flex-direction: column; + overflow: overlay; + padding: $spacing-vertical; + position: absolute; + top: var(--header-height); + bottom: 0; + left: 5px; + right: 5px; main { margin-left: auto; margin-right: auto; diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index 0a86d1d76..e7eb45008 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -125,4 +125,11 @@ $text-color: #000; --tooltip-bg: var(--color-bg); --tooltip-color: var(--text-color); --tooltip-border: 1px solid #aaa; + + /* Scrollbar */ + --scrollbar-radius: 10px; + --scrollbar-thumb-bg: rgba(0, 0, 0, 0.20); + --scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.35); + --scrollbar-thumb-active-bg: var(--color-primary); + --scrollbar-track-bg: transparent; } diff --git a/ui/scss/all.scss b/ui/scss/all.scss index 69656fa41..191a24756 100644 --- a/ui/scss/all.scss +++ b/ui/scss/all.scss @@ -21,5 +21,6 @@ @import "component/_video.scss"; @import "component/_pagination.scss"; @import "component/_markdown-editor.scss"; +@import "component/_scrollbar.scss"; @import "page/_developer.scss"; @import "page/_show.scss"; diff --git a/ui/scss/component/_scrollbar.scss b/ui/scss/component/_scrollbar.scss new file mode 100644 index 000000000..6bf891e62 --- /dev/null +++ b/ui/scss/component/_scrollbar.scss @@ -0,0 +1,24 @@ +::-webkit-scrollbar { + width: 6px; + overflow: auto; +} + +::-webkit-scrollbar-track { + background: var(--scrollbar-track-bg); + border-radius: var(--scrollbar-radius); + margin: 16px 0; +} + +::-webkit-scrollbar-thumb { + border-radius: var(--scrollbar-radius); + background-color: var(--scrollbar-thumb-bg); + transition: background-color 0.3s ease; +} + +::-webkit-scrollbar-thumb:hover { + background-color: var(--scrollbar-thumb-hover-bg); +} + +::-webkit-scrollbar-thumb:active { + background-color: var(--scrollbar-thumb-active-bg); +}