Final version frontend: favicon, audio player, dist included

2026-05-23 08:45:25 -04:00
commit d7094c94cf
26 changed files with 9120 additions and 0 deletions
@@ -0,0 +1,138 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+:root {
+  color-scheme: dark;
+}
+
+html {
+  min-height: 100%;
+  overflow-y: scroll;
+}
+
+body,
+#root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  background: #060816;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  overflow-x: hidden;
+}
+
+@layer utilities {
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.12);
+    border-radius: 999px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.22);
+  }
+}
+
+@layer components {
+  .audio-preview-range {
+    height: 20px;
+    appearance: none;
+    -webkit-appearance: none;
+    background: transparent;
+  }
+
+  .audio-preview-range::-webkit-slider-runnable-track {
+    height: 6px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.16);
+  }
+
+  .audio-preview-range::-webkit-slider-thumb {
+    width: 16px;
+    height: 16px;
+    margin-top: -5px;
+    border: 3px solid #ffffff;
+    border-radius: 999px;
+    appearance: none;
+    -webkit-appearance: none;
+    background: #67e8f9;
+    box-shadow: 0 0 0 5px rgba(103, 232, 249, 0.16), 0 8px 18px rgba(0, 0, 0, 0.32);
+  }
+
+  .audio-preview-range::-moz-range-track {
+    height: 6px;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.16);
+  }
+
+  .audio-preview-range::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border: 3px solid #ffffff;
+    border-radius: 999px;
+    background: #67e8f9;
+    box-shadow: 0 0 0 5px rgba(103, 232, 249, 0.16), 0 8px 18px rgba(0, 0, 0, 0.32);
+  }
+}
+
+@layer components {
+  .message-audio-range {
+    height: 20px;
+    appearance: none;
+    -webkit-appearance: none;
+    background: transparent;
+  }
+
+  .message-audio-range::-webkit-slider-runnable-track {
+    height: 6px;
+    border-radius: 999px;
+    background: transparent;
+  }
+
+  .message-audio-range::-webkit-slider-thumb {
+    width: 16px;
+    height: 16px;
+    margin-top: -5px;
+    border: 3px solid #ffffff;
+    border-radius: 999px;
+    appearance: none;
+    -webkit-appearance: none;
+    background: #67e8f9;
+    box-shadow: 0 0 0 5px rgba(103, 232, 249, 0.16), 0 8px 18px rgba(0, 0, 0, 0.32);
+  }
+
+  .message-audio-range::-moz-range-track {
+    height: 6px;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+  }
+
+  .message-audio-range::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border: 3px solid #ffffff;
+    border-radius: 999px;
+    background: #67e8f9;
+    box-shadow: 0 0 0 5px rgba(103, 232, 249, 0.16), 0 8px 18px rgba(0, 0, 0, 0.32);
+  }
+}