diff --git a/qt/aqt/data/web/css/webview.scss b/qt/aqt/data/web/css/webview.scss index 71a377303..f96d5f65b 100644 --- a/qt/aqt/data/web/css/webview.scss +++ b/qt/aqt/data/web/css/webview.scss @@ -17,6 +17,7 @@ body { transition: opacity 0.5s ease-out; margin: 2em; overscroll-behavior: none; + @include scrollbar.custom; } a { @@ -27,7 +28,3 @@ a { h1 { margin-bottom: 0.2em; } - -.night-mode { - @include scrollbar.night-mode; -} diff --git a/sass/_vars.scss b/sass/_vars.scss index 93032dae9..d406a4a80 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -48,6 +48,7 @@ --button-pressed-border: #8f8f8f; --scrollbar-bg: #d8d8d8; --scrollbar-hover-bg: #d0d0d0; + --scrollbar-active-bg: #c8c8c8; } :root[class*="night-mode"] { @@ -97,5 +98,6 @@ --button-pressed-border: #0a0a0a; --scrollbar-bg: #434343; --scrollbar-hover-bg: #4e4e4e; + --scrollbar-active-bg: #464646; color-scheme: dark; } diff --git a/sass/base.scss b/sass/base.scss index ab8054a6b..13fb684bb 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -34,10 +34,7 @@ $utilities: ( body { overscroll-behavior: none; -} - -.night-mode { - @include scrollbar.night-mode; + @include scrollbar.custom; } button { diff --git a/sass/scrollbar.scss b/sass/scrollbar.scss index e448be308..4b47b91d8 100644 --- a/sass/scrollbar.scss +++ b/sass/scrollbar.scss @@ -4,7 +4,7 @@ @use "vars"; @use "fusion-vars"; -@mixin night-mode { +@mixin custom { ::-webkit-scrollbar { background-color: var(--window-bg); @@ -18,8 +18,8 @@ } ::-webkit-scrollbar-thumb { - background: fusion-vars.$button-hover-bg; - border-radius: 8px; + background: var(--scrollbar-bg); + border-radius: 5px; &:horizontal { min-width: 50px; @@ -28,9 +28,22 @@ &:vertical { min-height: 50px; } + + &:hover { + background: var(--scrollbar-hover-bg); + } + + &:active { + background: var(--scrollbar-active-bg); + } } ::-webkit-scrollbar-corner { background-color: var(--window-bg); } + + ::-webkit-scrollbar-track { + border-radius: 5px; + background-color: transparent; + } } diff --git a/ts/editable/editable-base.scss b/ts/editable/editable-base.scss index ac31a51ea..65f09d9ec 100644 --- a/ts/editable/editable-base.scss +++ b/ts/editable/editable-base.scss @@ -18,6 +18,6 @@ p { display: none; } -:host(.night-mode) { - @include scrollbar.night-mode; +:host(body) { + @include scrollbar.custom; }