forked from NotNet/gluestick
120 lines
1.8 KiB
CSS
120 lines
1.8 KiB
CSS
@property --bg {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #2d2a2e;
|
|
}
|
|
|
|
@property --bg-dark {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #403e41;
|
|
}
|
|
|
|
@property --bg-darker {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #221f22;
|
|
}
|
|
|
|
@property --fg {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #fcfcfa;
|
|
}
|
|
|
|
@property --fg-dark {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #727072;
|
|
}
|
|
|
|
@property --fg-darker {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #5b595c;
|
|
}
|
|
|
|
@property --error {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #ff6188;
|
|
}
|
|
|
|
@property --warning {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #ffd866;
|
|
}
|
|
|
|
:root {
|
|
--theme-transition: 0.5s ease;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
max-width: 100vw;
|
|
overflow-x: hidden;
|
|
color: var(--fg);
|
|
background-color: var(--bg);
|
|
font-family: lunchtype, system-ui, -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
|
sans-serif;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
font-stretch: expanded;
|
|
font-weight: 500;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
input,
|
|
button,
|
|
label {
|
|
transition: background-color var(--theme-transition),
|
|
color var(--theme-transition);
|
|
}
|
|
|
|
input,
|
|
button {
|
|
font: inherit;
|
|
color: inherit;
|
|
background-color: inherit;
|
|
}
|
|
|
|
button,
|
|
input[type="submit"] {
|
|
padding: 0.5em 1em;
|
|
background-color: var(--bg-dark);
|
|
border-radius: 0.25rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input:disabled,
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed !important;
|
|
}
|
|
|
|
input::placeholder {
|
|
color: var(--fg-dark);
|
|
transition: color var(--theme-transition);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--fg);
|
|
color: var(--bg);
|
|
}
|