add light and dark mode scrollbar (#571)
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
Co-authored-by: Tejas Srikanth <tcsrikan@high-fructose-corn-syrup.csclub.uwaterloo.ca> Reviewed-on: #571 Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
This commit is contained in:
parent
48c056ea92
commit
cc99e2d02b
@ -19,6 +19,10 @@ export const PALETTE_NAMES = [
|
||||
"--primary-background",
|
||||
"--secondary-background",
|
||||
|
||||
"--scrollbar-track",
|
||||
"--scrollbar-thumb",
|
||||
"--scrollbar-hover",
|
||||
|
||||
"--primary-accent",
|
||||
"--primary-accent-soft",
|
||||
"--primary-accent-light",
|
||||
|
@ -42,7 +42,7 @@ body {
|
||||
|
||||
--light--icon: #2A2A62;
|
||||
|
||||
--light--navbar-page-overlay: hsla(0,0%,47.1%,0.6980392156862745);
|
||||
--light--navbar-page-overlay: hsla(0, 0%, 47.1%, 0.6980392156862745);
|
||||
--light--code-background: #f0f0f0;
|
||||
|
||||
--light--button-background: #1482e3;
|
||||
@ -56,6 +56,14 @@ body {
|
||||
--light--border: #2a2a62;
|
||||
--light--marker: #1482e3;
|
||||
|
||||
--dark--scrollbar-hover: #626294;
|
||||
--dark--scrollbar-thumb: var(--dark--code-background);
|
||||
--dark--scrollbar-track: var(--dark--secondary-background);
|
||||
|
||||
--light--scrollbar-hover: var(--light--blue-gradient);
|
||||
--light--scrollbar-thumb: var(--dark--primary-accent-soft);
|
||||
--light--scrollbar-track: var(--light--dark-card-background);
|
||||
|
||||
--dark--primary-background: #171729;
|
||||
--dark--secondary-background: #252542;
|
||||
|
||||
@ -72,7 +80,7 @@ body {
|
||||
|
||||
--dark--form-invalid: #9f616a;
|
||||
--dark--warning-background: #dd0014;
|
||||
--dark--warning-text: #ffffff;
|
||||
--dark--warning-text: #ffffff;
|
||||
|
||||
--dark--link: #4ED4B2;
|
||||
--dark--link-hover: #C1F0E4;
|
||||
@ -120,6 +128,10 @@ body {
|
||||
--secondary-accent: var(--light--secondary-accent);
|
||||
--secondary-accent-light: var(--light--secondary-accent-light);
|
||||
|
||||
--scrollbar-track: var(--light--scrollbar-track);
|
||||
--scrollbar-thumb: var(--light--link);
|
||||
--scrollbar-hover: var(--light--link-hover);
|
||||
|
||||
--primary-heading: var(--light--primary-heading);
|
||||
|
||||
--form-invalid: var(--light--form-invalid);
|
||||
@ -170,6 +182,8 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input {
|
||||
font-family: "Poppins", "sans-serif";
|
||||
}
|
||||
@ -225,11 +239,12 @@ p {
|
||||
* A lot of elements right next to an h4 (eg p, ol, ul, etc) have a 16px margin.
|
||||
* We need to make sure that the next item has an 8px margin-top.
|
||||
*/
|
||||
h4 + * {
|
||||
h4+* {
|
||||
margin-top: calc(8rem / 16);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
|
||||
/* h1, h2 = h3 on mobile */
|
||||
h1,
|
||||
h2 {
|
||||
@ -241,6 +256,11 @@ h4 + * {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
body {
|
||||
--primary-background: var(--dark--primary-background);
|
||||
@ -277,6 +297,10 @@ h4 + * {
|
||||
|
||||
--icon: var(--dark--icon);
|
||||
|
||||
--scrollbar-track: var(--dark--scrollbar-track);
|
||||
--scrollbar-thumb: var(--dark--scrollbar-thumb);
|
||||
--scrollbar-hover: var(--dark--scrollbar-hover);
|
||||
|
||||
--primary-title: var(--dark--primary-title);
|
||||
--primary-subtitle: var(--dark--primary-subtitle);
|
||||
--secondary-subtitle: var(--dark--secondary-subtitle);
|
||||
@ -293,5 +317,24 @@ h4 + * {
|
||||
--blue-gradient: var(--dark--blue-gradient);
|
||||
--border: var(--dark--border);
|
||||
--marker: var(--dark--marker);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--scrollbar-track);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--scrollbar-hover);
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user