1 files changed, 47 insertions, 38 deletions

diff --git a/static/note.css b/static/note.css
index cd9166c..84f079c 100644
--- a/static/note.css
+++ b/static/note.css
@@ -1,23 +1,27 @@
 .timelineReason {
-  background: #fee4;
-  border: 1px solid #3b005e44;
+  background: var(--clr-note-background);
+  border: var(--border);
   border-bottom: none;
-  border-radius: 8px 8px 0 0;
-  margin: 16px 16px -16px 16px;
-  padding: 8px;
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  margin: var(--spacing-double) var(--spacing-double)
+    calc(-1 * var(--spacing-double)) var(--spacing-double);
+  padding: var(--spacing-single);
   display: grid;
   grid-template-columns: max-content 1fr;
   align-items: center;
-  gap: 8px;
+  gap: var(--spacing-single);
 
   .icon {
-    font-size: 24px;
+    font-size: var(--icon-size);
     user-select: none;
   }
   a {
     text-decoration: none;
     font-weight: bold;
     color: inherit;
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   + article.note {
@@ -27,39 +31,39 @@
 }
 
 article.note {
-  background: #fee4;
-  border: 1px solid #3b005e44;
-  border-radius: 8px;
-  margin: 16px;
-  padding: 16px;
+  background: var(--clr-note-background);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  margin: var(--spacing-double);
+  padding: var(--spacing-double);
   display: grid;
   grid-template-columns: max-content 1fr;
-  gap: 16px;
+  gap: var(--spacing-double);
 
   img.avatar {
-    width: 64px;
+    width: var(--avatar-size);
     aspect-ratio: 1;
   }
 
   &.selected {
-    background: #ebf4;
+    background: var(--clr-note-selected-background);
   }
 
   .content {
-    font-size: 12pt;
-    padding: 4px 0;
+    font-size: var(--font-normal-size);
+    padding: var(--spacing-half) 0;
     .selected & {
-      font-size: 16pt;
+      font-size: var(--font-big-size);
     }
 
     summary {
-      border: 1px solid #5e380044;
-      border-radius: 8px;
-      padding: 8px 16px;
-      background: #ffda6144;
+      border: var(--border);
+      border-radius: var(--border-radius);
+      padding: var(--spacing-single) var(--spacing-double);
+      background: var(--clr-warning-background);
     }
     details[open] > summary {
-      margin-bottom: 8px;
+      margin-bottom: var(--spacing-single);
     }
   }
 
@@ -67,15 +71,20 @@ article.note {
     display: grid;
     grid-template-columns: max-content 1fr max-content max-content;
     align-items: baseline;
-    margin-bottom: 4px;
-    gap: 8px;
+    margin-bottom: var(--spacing-half);
+    gap: var(--spacing-single);
 
     .authorName {
       font-weight: bold;
+      color: inherit;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
     }
     .authorHandle,
     .timestamp {
-      font-size: 10pt;
+      font-size: var(--font-small-size);
       text-overflow: ellipsis;
       overflow: hidden;
     }
@@ -92,8 +101,8 @@ article.note {
   }
 
   .replyInfo a {
-    font-size: 10pt;
-    color: #555;
+    font-size: var(--font-small-size);
+    color: var(--clr-lesser-foreground);
     text-decoration: none;
     &:hover {
       text-decoration: underline;
@@ -101,40 +110,40 @@ article.note {
   }
 
   .buttons {
-    margin-top: 8px;
+    margin-top: var(--spacing-single);
     padding: 0;
     display: grid;
     grid-auto-flow: column;
-    gap: 16px;
+    gap: var(--spacing-double);
     width: max-content;
 
     .interactButtonContainer {
       display: flex;
       align-items: center;
-      color: #3b005e44;
+      color: var(--clr-action-default);
 
       &.like.active {
-        color: #8c22d8;
+        color: var(--clr-action-like);
       }
       &.dislike.active {
-        color: #c02e2e;
+        color: var(--clr-action-dislike);
       }
       &.reshare.active {
-        color: #21a821;
+        color: var(--clr-action-reshare);
       }
       &.reply.active {
-        color: #0761b6;
+        color: var(--clr-action-reply);
       }
     }
 
     label {
-      margin-left: 4px;
+      margin-left: var(--spacing-half);
       font-weight: bold;
     }
 
     button {
-      width: 24px;
-      font-size: 24px;
+      width: var(--icon-size);
+      font-size: var(--icon-size);
       cursor: pointer;
       color: inherit;