feat: design (it doesn't look the same as tinyemotes)

1 files changed, 95 insertions, 0 deletions

diff --git a/static/style.css b/static/style.css
index a068d89..05a2676 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,4 +1,99 @@
+:root {
+    --primary-1: #97ca96;
+    --primary-2: #c6eec5;
+    --primary-3: #d5e9d5;
+    --border: #445e43;
+}
+
 * {
     padding: 0;
     margin: 0;
+}
+
+body {
+    background: var(--primary-3);
+    width: 100%;
+    min-height: 100vh;
+}
+
+main {
+    padding: 8px;
+}
+
+header {
+    background: linear-gradient(0deg, var(--primary-1), var(--primary-2));
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    flex-direction: row;
+    padding: 2px 8px;
+}
+
+header .brand {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: end;
+}
+
+header .brand>a {
+    text-decoration: none;
+    color: black;
+    font-size: 12px;
+}
+
+.box {
+    background: var(--primary-1);
+    border: 1px solid var(--border);
+    padding: 8px;
+    border-radius: 4px;
+}
+
+.box:has(.content):has(.tab) {
+    background-color: unset;
+    border: unset;
+    padding: unset;
+    border-radius: unset;
+}
+
+.box>.tab {
+    display: inline-block;
+    background: var(--primary-1);
+    padding: 4px 8px;
+    border: 1px solid var(--border);
+    border-bottom: unset;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    margin-bottom: -1px;
+}
+
+.box>.content {
+    background: var(--primary-1);
+    border: 1px solid var(--border);
+    padding: 8px;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+.sound-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.sound-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.sound-item>.timestamp {
+    font-size: 12px;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
 }
\ No newline at end of file