common/tcommon/static/css/base.css

/* Colors */
html { --rosewater: 245, 224, 220; --flamingo: 242, 205, 205; --pink: 245, 194, 231; --mauve: 203, 166, 247; --red: 243, 139, 168; --maroon: 235, 160, 172; --peach: 250, 179, 135; --yellow: 249, 226, 175; --green: 166, 227, 161; --teal: 148, 226, 213; --sky: 137, 220, 235; --sapphire: 116, 199, 236; --blue: 137, 180, 250; --lavender: 180, 190, 254; --text: 205, 214, 244; --subtext1: 186, 194, 222; --subtext0: 166, 173, 200; --overlay2: 147, 153, 178; --overlay1: 127, 132, 156; --overlay0: 108, 112, 134; --surface2: 88, 91, 112; --surface1: 69, 71, 90; --surface0: 49, 50, 68; --base: 30, 30, 46; --mantle: 24, 24, 37; --crust: 17, 17, 27; }
html[data-light] { --rosewater: 220, 138, 120; --flamingo: 221, 120, 120; --pink: 234, 118, 203; --mauve: 136, 57, 239; --red: 210, 15, 57; --maroon: 230, 69, 83; --peach: 254, 100, 11; --yellow: 223, 142, 29; --green: 64, 160, 43; --teal: 23, 146, 153; --sky: 4, 165, 229; --sapphire: 32, 159, 181; --blue: 30, 102, 245; --lavender: 114, 135, 253; --text: 76, 79, 105; --subtext1: 92, 95, 119; --subtext0: 108, 111, 133; --overlay2: 124, 127, 147; --overlay1: 140, 143, 161; --overlay0: 156, 160, 176; --surface2: 172, 176, 190; --surface1: 188, 192, 204; --surface0: 204, 208, 218; --base: 239, 241, 245; --mantle: 230, 233, 239; --crust: 220, 224, 232; }

/* 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: rgb(var(--base));
  color: rgb(var(--text));
  font-family: "DejaVu Sans";
  font-size: 18px;
}

::selection {
  background-color: rgb(var(--accent));
  color: rgb(var(--base));
}

code, pre:not(.not-code) {
  font-family: "Ubuntu Mono";
  background-color: rgb(var(--mantle));
  padding: 2px 5px;
  border-radius: 3px;
}

pre.not-code {
  font-family: "DejaVu Sans";
  white-space: pre-wrap;
}

i {
  color: rgb(var(--subtext0));
}

small {
  color: rgb(var(--subtext0));
  font-size: 12px;
}

small a {
  opacity: 80%;
}

blockquote {
  margin: 0;
  padding-left: 15px;
  border-left: 3px solid rgb(var(--accent));
}

h1 {
  color: rgb(var(--accent));
}

a:link,
a:visited {
  color: rgb(var(--accent));
  font-weight: 700;
}

input:not(
  [type="submit"],
  [type="checkbox"]
),
textarea {
  background-color: rgb(var(--mantle));
  color: rgb(var(--text));
  font-family: "DejaVu Sans";
  outline: 1px solid rgb(var(--surface0));
  padding: 4px 6px;
  border: none;
  margin: 2px 0;
  border-radius: 4px;
  transition: outline-color 0.25s, background-color 0.25s;
}

textarea.auto-size {
  resize: vertical;
  max-width: 400px;
  width: 90vw;
  height: 100px;
}

input:not(
  [type="submit"],
  [type="checkbox"]
):focus,
textarea:focus {
  outline-color: rgb(var(--accent));
  background-color: rgb(var(--crust));
  transition: outline-color 0.1s, background-color 0.1s;
}

input[type="submit"],
button {
  background-color: rgb(var(--mantle));
  color: rgb(var(--text));
  font-family: "DejaVu Sans";
  outline: 1px solid rgb(var(--surface0));
  padding: 4px 8px;
  min-width: 75px;
  border: none;
  margin: 2px 0;
  border-radius: 99999px;
  cursor: pointer;
  transition: outline-color 0.25s, background-color 0.25s;
}

input[type="checkbox"] {
  display: block;
  height: 0;
  width: 0;
  opacity: 0;
  pointer-events: none;
}

input[type="checkbox"]:not(:has(+ label[data-fake-checkbox])) {
  display: inline-block;
  pointer-events: all;
  height: 1em;
  width: 1em;
  opacity: 100%;
}

label[data-fake-checkbox]::before {
  content: "";
  transition: background-color 0.25s, outline-color 0.25s;
  background-color: rgb(var(--crust));
  display: inline-block;
  position: relative;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  outline: 1px solid rgb(var(--surface2));
  margin-right: 5px;
}

label[data-fake-checkbox]:hover::before {
  outline-color: rgb(var(--overlay1));
  background-color: rgb(var(--mantle));
}

input[type="checkbox"]:focus + label[data-fake-checkbox]::before {
  outline-color: rgb(var(--accent));
}

input[type="checkbox"]:checked + label[data-fake-checkbox]::before {
  background-color: rgb(var(--accent));
}

ul,
ol {
  padding-left: 15px;
}

hr {
  background: none;
  border: 1px solid rgb(var(--accent));
  outline: none;
  width: 90vw;
  max-width: 500px;
}

hr.sub {
  max-width: 300px;
  border: 0.75px solid rgb(var(--surface0));
  margin-bottom: 3px;
}

input[type="submit"]:focus,
button:focus {
  outline-color: rgb(var(--accent));
  transition: outline-color 0.1s;
}

input[type="submit"]:active,
button:active {
  background-color: rgb(var(--crust));
  transition: background-color 0.1s;
}

.left   { text-align: left;   }
.center { text-align: center; }
.right  { text-align: right;  }

.block { display: block; }
.inline-block { display: inline-block; }

.no-margin { margin: 0; }
.no-padding { padding: 0; }
.no-border { border: none; }
.no-outline { outline: none; }

.cursor-pointer { cursor: pointer; }

.not-bold { font-weight: 400 !important; }

.success-anim {
  animation: kf-success-anim 0.5s forwards ease-in;
  outline: 1px solid;
}

@keyframes kf-success-anim {
  0% {
    outline-color: rgba(var(--green), 255);
  }

  100% {
    outline-color: rgba(var(--green), 0);
  }
}

#container {
  text-align: center;
  padding: 10px;
  width: calc(100vw - 20px);
  max-width: calc(100vw - 20px);
}