GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-23 08:22:24 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Make webview scrollbar look identical to Qt one

Browse source
This commit is contained in:
Matthias Metelka 2022-09-04 13:38:05 +02:00
parent 86b78256f7
commit 970148e231
5 changed files with 22 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
qt/aqt/data/web/css/webview.scss
View file

@ -17,6 +17,7 @@ body {
transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out;
margin: 2em; margin: 2em;
overscroll-behavior: none; overscroll-behavior: none;
@include scrollbar.custom;
} }
a { a {
@ -27,7 +28,3 @@ a {
h1 { h1 {
margin-bottom: 0.2em; margin-bottom: 0.2em;
} }
.night-mode {
@include scrollbar.night-mode;
}

2
sass/_vars.scss
View file

@ -48,6 +48,7 @@
--button-pressed-border: #8f8f8f; --button-pressed-border: #8f8f8f;
--scrollbar-bg: #d8d8d8; --scrollbar-bg: #d8d8d8;
--scrollbar-hover-bg: #d0d0d0; --scrollbar-hover-bg: #d0d0d0;
--scrollbar-active-bg: #c8c8c8;
} }
:root[class*="night-mode"] { :root[class*="night-mode"] {
@ -97,5 +98,6 @@
--button-pressed-border: #0a0a0a; --button-pressed-border: #0a0a0a;
--scrollbar-bg: #434343; --scrollbar-bg: #434343;
--scrollbar-hover-bg: #4e4e4e; --scrollbar-hover-bg: #4e4e4e;
--scrollbar-active-bg: #464646;
color-scheme: dark; color-scheme: dark;
} }

5
sass/base.scss
View file

@ -34,10 +34,7 @@ $utilities: (
body { body {
overscroll-behavior: none; overscroll-behavior: none;
} @include scrollbar.custom;
.night-mode {
@include scrollbar.night-mode;
} }
button { button {

19
sass/scrollbar.scss
View file

@ -4,7 +4,7 @@
@use "vars"; @use "vars";
@use "fusion-vars"; @use "fusion-vars";
@mixin night-mode { @mixin custom {
::-webkit-scrollbar { ::-webkit-scrollbar {
background-color: var(--window-bg); background-color: var(--window-bg);
@ -18,8 +18,8 @@
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: fusion-vars.$button-hover-bg; background: var(--scrollbar-bg);
border-radius: 8px; border-radius: 5px;
&:horizontal { &:horizontal {
min-width: 50px; min-width: 50px;
@ -28,9 +28,22 @@
&:vertical { &:vertical {
min-height: 50px; min-height: 50px;
} }
&:hover {
background: var(--scrollbar-hover-bg);
}
&:active {
background: var(--scrollbar-active-bg);
}
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background-color: var(--window-bg); background-color: var(--window-bg);
} }
::-webkit-scrollbar-track {
border-radius: 5px;
background-color: transparent;
}
} }

4
ts/editable/editable-base.scss
View file

@ -18,6 +18,6 @@ p {
display: none; display: none;
} }
:host(.night-mode) { :host(body) {
@include scrollbar.night-mode; @include scrollbar.custom;
} }