refactor: changed fetching fonts from remote to local; changed sass import rules to use

chore: updated packages
2026-05-03 13:38:12 +00:00 · 2025-03-20 20:36:19 +01:00
parent f28f1e31c2
commit 42d0d1ddb9
18 changed files with 2461 additions and 2292 deletions
@@ -0,0 +1,251 @@
+@use 'fonts';
+@use 'colors';
+
+// Global scrollbar style
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+::-webkit-scrollbar-track {
+  background: #333;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+body,
+html {
+  padding: 0;
+  margin: 0;
+  min-height: 100vh;
+  background-color: colors.$bgCol;
+
+  font-family: 'Libre Franklin', sans-serif;
+  font-weight: 500;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+
+  &:hover {
+    color: colors.$accentCol;
+  }
+}
+
+button {
+  border: none;
+  outline: none;
+  background: none;
+
+  transition:
+    color 90ms ease-in,
+    border 90ms ease-in;
+  font-family: 'Libre Franklin', sans-serif;
+
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 1em;
+}
+
+button.g-button {
+  text-align: center;
+  color: inherit;
+
+  transition:
+    color 100ms ease-in,
+    background-color 100ms ease-in;
+
+  &.action {
+    background-color: colors.$bgColDarker;
+    padding: 0.5em;
+
+    &:focus-visible {
+      outline: 2px solid colors.$accentCol;
+    }
+
+    &:hover:not([data-disabled='true']) {
+      background-color: colors.$bgColLighter;
+    }
+  }
+
+  &.option {
+    position: relative;
+    margin: 0 0.25em;
+    padding: 0.25em;
+
+    &:focus-visible::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 2px;
+      background-color: colors.$accentCol;
+    }
+
+    &[data-active='true'] {
+      color: colors.$accentCol;
+    }
+  }
+
+  &.text {
+    padding: 0;
+
+    &:focus-visible {
+      color: colors.$accentCol;
+    }
+  }
+}
+
+// Text styles
+.text {
+  &--accent {
+    color: colors.$accentCol;
+  }
+
+  &--warn {
+    color: colors.$warnCol;
+  }
+}
+
+// Select style
+select {
+  border: 2px solid black;
+  background: none;
+  padding: 0.1em 0;
+  border-radius: 0.3em;
+  text-align: center;
+
+  border: 2px solid #888;
+  color: white;
+  outline: none;
+
+  margin: 0;
+  padding: 0.15em;
+
+  &[disabled] {
+    color: gray;
+  }
+
+  &:focus-visible {
+    border-color: colors.$accentCol;
+  }
+}
+
+option[disabled] {
+  color: #ccc;
+}
+
+// List style
+ul {
+  padding: 0;
+  margin: 0;
+
+  list-style: none;
+  text-align: center;
+}
+
+// Modal
+.g-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .modal-bg {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+
+    cursor: pointer;
+
+    background-color: #000000aa;
+  }
+
+  .modal-content {
+    position: relative;
+    z-index: 1001;
+
+    overflow: auto;
+  }
+}
+
+// Checkbox
+label.g-checkbox {
+  display: inline-block;
+  margin: 0.25em 0;
+  cursor: pointer;
+  color: #aaa;
+
+  user-select: none;
+  -moz-user-select: none;
+
+  span {
+    transition: color 125ms ease;
+  }
+
+  span::before {
+    content: '\2717';
+    display: inline-block;
+
+    // background-color: #aaa;
+    border-radius: 50%;
+    margin-right: 0.25em;
+
+    transition: background-color 125ms ease;
+  }
+
+  input {
+    width: 0;
+    opacity: 0;
+
+    &:focus-visible + span {
+      text-decoration: underline;
+    }
+
+    &:checked + span {
+      color: greenyellow;
+
+      &::before {
+        content: '\2713';
+        // background-color: greenyellow;
+      }
+    }
+  }
+}
+
+// Tooltip
+[data-tooltip] {
+  cursor: pointer;
+}
+
+[data-tooltip]:hover::after,
+[data-tooltip]:focus::after {
+  position: absolute;
+
+  content: attr(data-tooltip);
+  color: white;
+  background: black;
+  padding: 0.5em;
+  margin: 0.25em;
+  max-width: 300px;
+  z-index: 100;
+}