Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Scrollbar Styling

Browse Source
This commit is contained in:
blessedcoolant 2022-12-28 07:05:49 +13:00
parent 16c0132a6b
commit e0d7c466cc
4 changed files with 41 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/styles/Themes/_Colors_Dark.scss
View File

@ -132,4 +132,8 @@
// Checkerboard
--checkboard-dots-color: rgb(35, 35, 39);
// Scrollbar
--scrollbar-color: var(--accent-color);
--scrollbar-color-hover: var(--accent-color-bright);
}

4
frontend/src/styles/Themes/_Colors_Green.scss
View File

@ -130,4 +130,8 @@
//Checkerboard
--checkboard-dots-color: rgb(35, 35, 39);
// Scrollbar
--scrollbar-color: var(--accent-color);
--scrollbar-color-hover: var(--accent-color-bright);
}

4
frontend/src/styles/Themes/_Colors_Light.scss
View File

@ -127,4 +127,8 @@
// Checkerboard
--checkboard-dots-color: rgb(160, 160, 172);
// Scrollbar
--scrollbar-color: rgb(180, 180, 184);
--scrollbar-color-hover: rgb(150, 150, 154);
}

29
frontend/src/styles/_Misc.scss
View File

@ -14,3 +14,32 @@
// var(--background-color-secondary);
// background-size: 64px 64px;
// }
* {
scrollbar-width: thick; /* none | auto */
scrollbar-color: var(--scrollbar-color) transparent;
}
*::-webkit-scrollbar {
width: 8px; // Vertical Scrollbar Width
height: 8px; // Horizontal Scrollbar Height
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: var(--scrollbar-color);
border-radius: 8px;
border: calc(8px / 4) solid var(--scrollbar-color);
}
*::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-color-hover);
border: calc(8px / 4) solid var(--scrollbar-color-hover);
}
::-webkit-scrollbar-button {
background: transparent;
}