luisgulo/photoprism
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UX: Improve scrollbar styles

Browse source 
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2022-05-21 02:33:09 +02:00
parent 9f6d15db07
commit f73d21171a
2 changed files with 17 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/css/app.css
View file

@ -68,9 +68,11 @@ Additional information can be found in our Developer Guide:
}
}
/*
html {
overflow: auto overlay;
}
*/
html,
body {
@ -80,7 +82,7 @@ body {
body {
background-color: #fafafa;
color: #333333;
font-family: Roboto, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
min-width: 320px;
min-height: 500px;
@ -101,8 +103,12 @@ body {
font-feature-settings: 'kern', 'liga';
}
body .application {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body.chrome {
overflow: auto overlay;
/* overflow: auto overlay; */
min-height: 100%;
margin: 0;
padding: 0;

24
frontend/src/css/scrollbar.css
View file

@ -10,17 +10,17 @@ see https://css-tricks.com/custom-scrollbars-in-webkit/#aa-the-different-pieces
background: transparent;
}
[data-color-mode=light][data-light-theme*=dark],
[data-color-mode=dark][data-dark-theme*=dark] {
color-scheme: dark;
}
:root,
[data-color-mode=light][data-light-theme*=light],
[data-color-mode=dark][data-dark-theme*=light] {
color-scheme: light;
}
[data-color-mode=light][data-light-theme*=dark],
[data-color-mode=dark][data-dark-theme*=dark] {
color-scheme: dark!important;
}
body.nojs::-webkit-scrollbar,
body.viewer::-webkit-scrollbar,
body.player::-webkit-scrollbar,
@ -39,7 +39,6 @@ body.hide-scrollbar {
body.dark-theme {
color-scheme: dark !important;
background-color: black;
}
body.firefox.dark-theme {
@ -49,9 +48,9 @@ body.firefox.dark-theme {
/* Chrome specific styles */
::-webkit-scrollbar {
height: 9px;
height: 11px;
overflow: visible;
width: 9px;
width: 11px;
}
@media only screen and (max-width: 599px) {
@ -71,20 +70,15 @@ body.firefox.dark-theme {
}
::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, .15);
background-color: rgba(230, 230, 230, 0.43);
border: solid transparent;
border-width: 0 0 0 4px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .3);
background-color: rgba(0, 0, 0, .57);
border: solid transparent;
border-width: 1px 1px 1px 6px;
min-height: 28px;
padding: 100px 0 0;
}
[data-color-mode=light][data-light-theme*=dark] ::-webkit-scrollbar-thumb,
[data-color-mode=dark][data-dark-theme*=dark] ::-webkit-scrollbar-thumb {
background-color: rgba(200, 200, 200, .4);
}