|
|
|
@ -59,13 +59,16 @@ html {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body.dark-mode {
|
|
|
|
|
--bg-500: hsl(269, 24%, 20%);
|
|
|
|
|
--bg-selected-500: #722da0;
|
|
|
|
|
--bg-highlight-500: #a64edb;
|
|
|
|
|
--border-400: hsl(269, 40%, 50%);
|
|
|
|
|
--border-500: hsl(269, 60%, 60%);
|
|
|
|
|
--border-600: hsl(269, 80%, 70%);
|
|
|
|
|
--border-highlight-500: hsl(269, 80%, 78%);
|
|
|
|
|
--bg-400: hsl(269, 24%, 3%);
|
|
|
|
|
--bg-500: hsl(269, 24%, 7%);
|
|
|
|
|
|
|
|
|
|
--bg-selected-500: hsl(276, 56%, 30%);
|
|
|
|
|
--bg-highlight-500: hsl(277, 66%, 35%);
|
|
|
|
|
|
|
|
|
|
--border-400: hsl(269, 40%, 45%);
|
|
|
|
|
--border-500: hsl(269, 60%, 30%);
|
|
|
|
|
--border-600: hsl(269, 80%, 35%);
|
|
|
|
|
--border-highlight-500: hsl(269, 80%, 50%);
|
|
|
|
|
--border-selected-500: #b66af6;
|
|
|
|
|
--text-500: #e6cff6;
|
|
|
|
|
|
|
|
|
@ -100,7 +103,7 @@ body.dark-mode {
|
|
|
|
|
--bold-on-dark: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$device-s-width: 600px;
|
|
|
|
|
$device-s-width: 900px;
|
|
|
|
|
|
|
|
|
|
// Elements
|
|
|
|
|
|
|
|
|
@ -424,7 +427,7 @@ button,
|
|
|
|
|
// Structure
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
background: var(--bg-500);
|
|
|
|
|
background: var(--bg-400);
|
|
|
|
|
color: var(--text-500);
|
|
|
|
|
|
|
|
|
|
font-weight: 300;
|
|
|
|
|