1 files changed, 50 insertions, 1 deletions
diff --git a/static/style.css b/static/style.css
index 6a62cb5..864a4fb 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,4 +1,5 @@
 :root {
+    --primary-0: #81b180;
     --primary-1: #97ca96;
     --primary-2: #c6eec5;
     --primary-3: #d5e9d5;
@@ -77,6 +78,18 @@ header .brand>a {
     border-top-right-radius: 4px;
 }
 
+.box>.content:has(.box) {
+    background: var(--primary-0);
+}
+
+.box:has(.box)>.tab {
+    margin-bottom: unset;
+}
+
+a>.box:hover {
+    background: var(--primary-2);
+}
+
 .sound-list {
     display: flex;
     flex-direction: row;
@@ -84,7 +97,8 @@ header .brand>a {
     gap: 16px;
 }
 
-.sound-item {
+.sound-item,
+.emote-item {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -95,6 +109,37 @@ header .brand>a {
     font-size: 12px;
 }
 
+a:has(.emote-item) {
+    text-decoration: none;
+    color: unset;
+}
+
+.emote-item {
+    width: 92px;
+    height: 92px;
+}
+
+.emote-item>.code,
+.emote-item>.author {
+    max-width: 5em;
+    min-height: 1em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.emote-item>.icon {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.emote-item>.icon>img {
+    max-width: 64px;
+    max-height: 64px;
+}
+
 .row {
     display: flex;
     flex-direction: row;
@@ -105,6 +150,10 @@ header .brand>a {
     flex-direction: column;
 }
 
+.wrap {
+    flex-wrap: wrap;
+}
+
 .justify-center {
     justify-content: center;
 }