Dark mode scrollbar colors

This commit is contained in:
Nils Maier 2019-10-02 22:09:04 +02:00
parent 4ba7bb530d
commit 312f39f7f6
2 changed files with 26 additions and 4 deletions

View File

@ -63,11 +63,26 @@
--popup-bgcolor: #4a4a4f; --popup-bgcolor: #4a4a4f;
--popup-color: rgb(249, 249, 250); --popup-color: rgb(249, 249, 250);
--general-button-shadow: 0px 0px 7px 1px rgba(128,128,128,0.8); --general-button-shadow: 0px 0px 7px 1px rgba(128,128,128,0.8);
scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
} }
html.dark a {
html.dark a {
color: lightblue; color: lightblue;
} }
html.dark ::-webkit-scrollbar {
background: rgba(20,20,25,.3);
}
html.dark ::-webkit-scrollbar-thumb {
background: rgba(249,249,250,.4);
}
html.dark ::-webkit-scrollbar-corner {
background: #000;
}
html[data-platform="mac"] { html[data-platform="mac"] {
--folder-color: rgb(4, 102, 214); --folder-color: rgb(4, 102, 214);
} }
@ -197,7 +212,8 @@ body, html {
background: var(--general-bgcolor); background: var(--general-bgcolor);
} }
body#popup { html#popup,
html#popup > body {
color: var(--popup-color); color: var(--popup-color);
background: var(--popup-bgcolor); background: var(--popup-bgcolor);
} }

View File

@ -1,4 +1,6 @@
<!doctype html> <!doctype html>
<html id="popup">
<head> <head>
<!-- License: GPL-v2 --> <!-- License: GPL-v2 -->
<meta charset="utf-8"> <meta charset="utf-8">
@ -11,6 +13,8 @@
height: auto !important; height: auto !important;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
margin: 0;
padding: 0;
} }
ul { ul {
@ -65,7 +69,7 @@
<script defer src="/bundles/content-popup.js"></script> <script defer src="/bundles/content-popup.js"></script>
</head> </head>
<body id="popup"> <body>
<ul> <ul>
<li id="regular" data-action="do-regular"> <li id="regular" data-action="do-regular">
<img srcset="/style/button-regular.png, /style/button-regular@2x.png 2x"> <img srcset="/style/button-regular.png, /style/button-regular@2x.png 2x">
@ -106,3 +110,5 @@
</li> </li>
</ul> </ul>
</body> </body>
</html>