v0.3.8

frontend/src/style/global.css

@@ -0,0 +1,189 @@
+@font-face {
+  font-family: "PingFang-Medium";
+  src: url("./fonts/PingFang-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  background: #191919;
+  font-family: "PingFang-Medium", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  color: #F7F7F7;
+  font-size: 13px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* Global native scrollbar style: thin thumb, transparent track */
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(100, 100, 100, 0.8) transparent;
+}
+:root{
+  color-scheme: dark;
+}
+
+/* WebKit/Blink (Chrome, Safari, Edge, Opera) */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track-piece,
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(100, 100, 100, 0.8);
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(120, 120, 120, 0.9);
+}
+
+/* macOS overlay scrollbar style */
+@supports (scrollbar-width: thin) {
+  :root {
+    scrollbar-width: thin;
+  }
+}
+
+/* Prevent layout shift when scrollbar appears */
+.overflow-auto,
+.overflow-scroll {
+  scrollbar-gutter: stable;
+}
+
+.no-flex-gap .flex.gap-1:not(.flex-col) > * + *,
+.no-flex-gap .inline-flex.gap-1:not(.flex-col) > * + *,
+.no-flex-gap .center-row.gap-1 > * + * {
+  margin-left: 0.25rem;
+}
+
+.no-flex-gap .flex.flex-col.gap-1 > * + *,
+.no-flex-gap .center-col.gap-1 > * + * {
+  margin-top: 0.25rem;
+}
+
+.no-flex-gap .flex.gap-1\.5:not(.flex-col) > * + *,
+.no-flex-gap .inline-flex.gap-1\.5:not(.flex-col) > * + *,
+.no-flex-gap .center-row.gap-1\.5 > * + * {
+  margin-left: 0.375rem;
+}
+
+.no-flex-gap .flex.flex-col.gap-1\.5 > * + *,
+.no-flex-gap .center-col.gap-1\.5 > * + * {
+  margin-top: 0.375rem;
+}
+
+.no-flex-gap .flex.gap-2:not(.flex-col) > * + *,
+.no-flex-gap .inline-flex.gap-2:not(.flex-col) > * + *,
+.no-flex-gap .center-row.gap-2 > * + * {
+  margin-left: 0.5rem;
+}
+
+.no-flex-gap .flex.flex-col.gap-2 > * + *,
+.no-flex-gap .center-col.gap-2 > * + * {
+  margin-top: 0.5rem;
+}
+
+.no-flex-gap .flex.gap-2\.5:not(.flex-col) > * + *,
+.no-flex-gap .inline-flex.gap-2\.5:not(.flex-col) > * + *,
+.no-flex-gap .center-row.gap-2\.5 > * + * {
+  margin-left: 0.625rem;
+}
+
+.no-flex-gap .flex.flex-col.gap-2\.5 > * + *,
+.no-flex-gap .center-col.gap-2\.5 > * + * {
+  margin-top: 0.625rem;
+}
+
+.no-flex-gap .flex.gap-3:not(.flex-col) > * + *,
+.no-flex-gap .inline-flex.gap-3:not(.flex-col) > * + *,
+.no-flex-gap .center-row.gap-3 > * + * {
+  margin-left: 0.75rem;
+}
+
+.no-flex-gap .flex.flex-col.gap-3 > * + *,
+.no-flex-gap .center-col.gap-3 > * + * {
+  margin-top: 0.75rem;
+}
+
+.no-flex-gap .flex.gap-4:not(.flex-col) > * + *,
+.no-flex-gap .inline-flex.gap-4:not(.flex-col) > * + *,
+.no-flex-gap .center-row.gap-4 > * + * {
+  margin-left: 1rem;
+}
+
+.no-flex-gap .flex.flex-col.gap-4 > * + *,
+.no-flex-gap .center-col.gap-4 > * + * {
+  margin-top: 1rem;
+}
+
+.no-flex-gap .flex.gap-\[1px\]:not(.flex-col) > * + *,
+.no-flex-gap .inline-flex.gap-\[1px\]:not(.flex-col) > * + *,
+.no-flex-gap .center-row.gap-\[1px\] > * + * {
+  margin-left: 1px;
+}
+
+.no-flex-gap .flex.flex-col.gap-\[1px\] > * + *,
+.no-flex-gap .center-col.gap-\[1px\] > * + * {
+  margin-top: 1px;
+}
+
+.no-flex-gap .flex.gap-\[2px\]:not(.flex-col) > * + *,
+.no-flex-gap .inline-flex.gap-\[2px\]:not(.flex-col) > * + *,
+.no-flex-gap .center-row.gap-\[2px\] > * + * {
+  margin-left: 2px;
+}
+
+.no-flex-gap .flex.flex-col.gap-\[2px\] > * + *,
+.no-flex-gap .center-col.gap-\[2px\] > * + * {
+  margin-top: 2px;
+}
+
+.no-flex-gap .flex.gap-\[6px\]:not(.flex-col) > * + *,
+.no-flex-gap .inline-flex.gap-\[6px\]:not(.flex-col) > * + *,
+.no-flex-gap .center-row.gap-\[6px\] > * + * {
+  margin-left: 6px;
+}
+
+.no-flex-gap .flex.flex-col.gap-\[6px\] > * + *,
+.no-flex-gap .center-col.gap-\[6px\] > * + * {
+  margin-top: 6px;
+}
+
+.no-flex-gap .flex.gap-\[8px\]:not(.flex-col) > * + *,
+.no-flex-gap .inline-flex.gap-\[8px\]:not(.flex-col) > * + *,
+.no-flex-gap .center-row.gap-\[8px\] > * + * {
+  margin-left: 8px;
+}
+
+.no-flex-gap .flex.flex-col.gap-\[8px\] > * + *,
+.no-flex-gap .center-col.gap-\[8px\] > * + * {
+  margin-top: 8px;
+}
+
+.no-flex-gap .flex.gap-\[10px\]:not(.flex-col) > * + *,
+.no-flex-gap .inline-flex.gap-\[10px\]:not(.flex-col) > * + *,
+.no-flex-gap .center-row.gap-\[10px\] > * + * {
+  margin-left: 10px;
+}
+
+.no-flex-gap .flex.flex-col.gap-\[10px\] > * + *,
+.no-flex-gap .center-col.gap-\[10px\] > * + * {
+  margin-top: 10px;
+}

frontend/src/style/tailwind.css

@@ -0,0 +1,26 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "HFKos";
+  src: url("./fonts/HFKos-R.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@layer base {
+  :root {
+  --font-num: "HFKos", "PingFang-Medium", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  }
+}
+
+@layer components {
+  .center-row {
+    @apply flex flex-row items-center;
+  }
+
+  .center-col {
+    @apply flex flex-col items-center;
+  }
+}