You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.0 KiB
CSS
93 lines
2.0 KiB
CSS
body.dark-mode {
|
|
--bg: #282828;
|
|
--fg: #a6cc92;
|
|
/* --fg: #6eac4d; */
|
|
/* Magari questo: */
|
|
/* --fg: #a3b09c; */
|
|
|
|
--bg-dark: hsl(10, 10%, 20%);
|
|
--bg-darker: hsl(10, 10%, 17%);
|
|
--bg-darker-2: #1d2021;
|
|
--bg-darker-3: #101111;
|
|
|
|
--accent-1: #154d24;
|
|
--accent-1-fg: #278542;
|
|
|
|
--card-date: #928374;
|
|
--card-content: #d4be98;
|
|
|
|
--font-sf: 'Inter', sans-serif;
|
|
--font-weight-light: 300;
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-bold: 700;
|
|
|
|
--shadow-1: 0 0 16px 0 #16182077;
|
|
|
|
--text-input-bg: var(--bg-darker);
|
|
--text-input-readonly-bg: hsl(10, 10%, 22%);
|
|
--text-input-readonly-fg: hsl(10, 10%, 40%);
|
|
|
|
--bg-darker-2-1: #c8c8c8;
|
|
--accent-2-lighter: #5cc969;
|
|
--accent-2: #4eaa59;
|
|
--accent-2-darker: #2e974c;
|
|
--accent-2-darkest: #002d0d;
|
|
}
|
|
|
|
.dark-mode button {
|
|
border: 1px solid var(--bg-darker-2);
|
|
background: var(--bg-darker);
|
|
color: #afafaf;
|
|
}
|
|
|
|
.dark-mode button:hover {
|
|
background: var(--bg-dark);
|
|
}
|
|
|
|
.dark-mode button.primary {
|
|
border: 1px solid #113a1c;
|
|
background: #1e6732;
|
|
color: #b7e3c3;
|
|
}
|
|
|
|
.dark-mode button.primary:hover {
|
|
background: #23773a;
|
|
}
|
|
|
|
.dark-mode nav .nav-logo img {
|
|
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
|
|
}
|
|
|
|
.dark-mode input[type] {
|
|
background: #4b4342;
|
|
}
|
|
|
|
.dark-mode input[type='text']:read-only,
|
|
.dark-mode input[type='password']:read-only {
|
|
background: var(--text-input-readonly-bg);
|
|
color: var(--text-input-readonly-fg);
|
|
box-shadow: 0 0 8px 0 #00000010;
|
|
}
|
|
|
|
.dark-mode input[type='text'].error,
|
|
.dark-mode input[type='password'].error {
|
|
background: #633;
|
|
color: #faa;
|
|
}
|
|
|
|
.dark-mode pre {
|
|
background: var(--bg-darker);
|
|
border: 1px solid var(--bg-darker-2);
|
|
}
|
|
|
|
/* Trick molto molto malvagio per non dover rendere il colorscheme dei blocchi di codice dinamici rispetto alla dark mode */
|
|
.dark-mode pre > code > span {
|
|
filter: invert(1);
|
|
}
|
|
|
|
.dark-mode table td,
|
|
.dark-mode table th {
|
|
border-color: var(--fg);
|
|
}
|