131 lines
2.4 KiB
CSS
131 lines
2.4 KiB
CSS
:root {
|
|
/* Gruvbox Light Hard */
|
|
--bg: #f9f5d7;
|
|
--bg-panel: #fbf1c7;
|
|
--bg-raised: #ebdbb2;
|
|
--bg-raised-hover: #d5c4a1;
|
|
--fg: #3c3836;
|
|
--fg-dim: #665c54;
|
|
--fg-faint: #928374;
|
|
--border: #a89984;
|
|
--border-faint: #bdae93;
|
|
--active-bg: #3c3836;
|
|
--active-fg: #f9f5d7;
|
|
--link: #458588;
|
|
--link-vis: #b16286;
|
|
--link-hover: #9d0006;
|
|
--err: #9d0006;
|
|
--err-bg: #f9e5e5;
|
|
--err-border: #cc241d;
|
|
--green: #98971a;
|
|
--blue: #458588;
|
|
--red: #cc241d;
|
|
--bar-bg: #3c3836;
|
|
--bar-fg: #f9f5d7;
|
|
--bar-dim: #928374;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
/* Gruvbox Dark Hard */
|
|
--bg: #1d2021;
|
|
--bg-panel: #282828;
|
|
--bg-raised: #3c3836;
|
|
--bg-raised-hover: #504945;
|
|
--fg: #ebdbb2;
|
|
--fg-dim: #bdae93;
|
|
--fg-faint: #928374;
|
|
--border: #665c54;
|
|
--border-faint: #504945;
|
|
--active-bg: #d5c4a1;
|
|
--active-fg: #1d2021;
|
|
--link: #83a598;
|
|
--link-vis: #d3869b;
|
|
--link-hover: #fb4934;
|
|
--err: #fb4934;
|
|
--err-bg: #3b2020;
|
|
--err-border: #cc241d;
|
|
--green: #b8bb26;
|
|
--blue: #83a598;
|
|
--red: #fb4934;
|
|
--bar-bg: #282828;
|
|
--bar-fg: #ebdbb2;
|
|
--bar-dim: #928374;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
a {
|
|
color: var(--link);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--link-vis);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--link-hover);
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 0.5em 0;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0.8em 0 0.3em 0;
|
|
}
|
|
|
|
input, button, textarea, select {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
button {
|
|
background: var(--bg-raised);
|
|
border: 1px solid var(--border);
|
|
padding: 2px 8px;
|
|
cursor: pointer;
|
|
color: var(--fg);
|
|
}
|
|
|
|
button:hover {
|
|
background: var(--bg-raised-hover);
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
border: 1px solid var(--border);
|
|
padding: 2px 4px;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
}
|
|
|
|
select {
|
|
border: 1px solid var(--border);
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
}
|
|
|
|
code {
|
|
font-family: monospace;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
td, th {
|
|
border: 1px solid var(--border);
|
|
padding: 3px 6px;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: 1em 0;
|
|
}
|