101 lines
4.1 KiB
CSS
101 lines
4.1 KiB
CSS
/* Colors */
|
|
html { --rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7; --mauve: #cba6f7; --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387; --yellow: #f9e2af; --green: #a6e3a1; --teal: #94e2d5; --sky: #89dceb; --sapphire: #74c7ec; --blue: #89b4fa; --lavender: #b4befe; --text: #cdd6f4; --subtext1: #bac2de; --subtext0: #a6adc8; --overlay2: #9399b2; --overlay1: #7f849c; --overlay0: #6c7086; --surface2: #585b70; --surface1: #45475a; --surface0: #313244; --base: #1e1e2e; --mantle: #181825; --crust: #11111b; --base-low-op: #1e1e2ed0 }
|
|
html[data-light] { --rosewater: #dc8a78; --flamingo: #dd7878; --pink: #ea76cb; --mauve: #8839ef; --red: #d20f39; --maroon: #e64553; --peach: #fe640b; --yellow: #df8e1d; --green: #40a02b; --teal: #179299; --sky: #04a5e5; --sapphire: #209fb5; --blue: #1e66f5; --lavender: #7287fd; --text: #4c4f69; --subtext1: #5c5f77; --subtext0: #6c6f85; --overlay2: #7c7f93; --overlay1: #8c8fa1; --overlay0: #9ca0b0; --surface2: #acb0be; --surface1: #bcc0cc; --surface0: #ccd0da; --base: #eff1f5; --mantle: #e6e9ef; --crust: #dce0e8; --base-low-op: #eff1f5b0}
|
|
|
|
/* Font */
|
|
@font-face { font-family: 'DejaVu Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/font/DejaVuSans.ttf") format("truetype"); }
|
|
@font-face { font-family: 'DejaVu Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/font/DejaVuSans-Bold.ttf") format("truetype"); }
|
|
@font-face { font-family: 'DejaVu Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/font/DejaVuSans-Oblique.ttf") format("truetype"); }
|
|
@font-face { font-family: 'DejaVu Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/font/DejaVuSans-BoldOblique.ttf") format("truetype"); }
|
|
@font-face { font-family: 'DejaVu Sans'; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/font/DejaVuSans-ExtraLight.ttf") format("truetype"); }
|
|
@font-face { font-family: "Ubuntu Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/font/UbuntuMono-Regular.ttf") format("truetype"); }
|
|
@font-face { font-family: "Ubuntu Mono"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/font/UbuntuMono-Italic.ttf") format("truetype"); }
|
|
@font-face { font-family: "Ubuntu Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/font/UbuntuMono-Bold.ttf") format("truetype"); }
|
|
@font-face { font-family: "Ubuntu Mono"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/font/UbuntuMono-BoldItalic.ttf") format("truetype"); }
|
|
|
|
body {
|
|
margin: 0;
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
background-color: var(--base);
|
|
color: var(--text);
|
|
font-family: "DejaVu Sans";
|
|
font-size: 18px;
|
|
}
|
|
|
|
code, pre {
|
|
font-family: "Ubuntu Mono"
|
|
}
|
|
|
|
small, i {
|
|
color: var(--subtext0);
|
|
font-size: 12px;
|
|
}
|
|
|
|
h1 {
|
|
color: var(--accent);
|
|
}
|
|
|
|
a:link,
|
|
a:visited {
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
}
|
|
|
|
input:not(
|
|
[type="submit"]
|
|
) {
|
|
background-color: var(--mantle);
|
|
color: var(--text);
|
|
font-family: "DejaVu Sans";
|
|
outline: 1px solid var(--surface0);
|
|
padding: 4px 6px;
|
|
border: none;
|
|
margin: 2px 0;
|
|
border-radius: 4px;
|
|
transition: outline-color 0.25s, background-color 0.25s;
|
|
}
|
|
|
|
input:not(
|
|
[type="submit"]
|
|
):focus {
|
|
outline-color: var(--accent);
|
|
background-color: var(--crust);
|
|
transition: outline-color 0.1s, background-color 0.1s;
|
|
}
|
|
|
|
input[type="submit"],
|
|
button {
|
|
background-color: var(--mantle);
|
|
color: var(--text);
|
|
font-family: "DejaVu Sans";
|
|
outline: 1px solid var(--surface0);
|
|
padding: 4px 12px;
|
|
min-width: 75px;
|
|
border: none;
|
|
margin: 2px 0;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: outline-color 0.25s, background-color 0.25s;
|
|
}
|
|
|
|
input[type="submit"]:focus,
|
|
button:focus {
|
|
outline-color: var(--accent);
|
|
transition: outline-color 0.1s;
|
|
}
|
|
|
|
input[type="submit"]:active,
|
|
button:active {
|
|
background-color: var(--crust);
|
|
transition: background-color 0.1s;
|
|
}
|
|
|
|
|
|
#container {
|
|
text-align: center;
|
|
padding: 10px;
|
|
width: calc(100vw - 20px);
|
|
max-width: calc(100vw - 20px);
|
|
}
|