Make webview scrollbar look identical to Qt one

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

View file

@ -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;
}

View file

@ -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;
}

View file

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

View file

@ -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;
}
}

View file

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