1 files changed, 30 insertions, 21 deletions

diff --git a/static/misc.css b/static/misc.css
index 9a5c198..6b88e63 100644
--- a/static/misc.css
+++ b/static/misc.css
@@ -1,11 +1,11 @@
 .alertbox {
-  border: 1px solid;
-  border-radius: 8px;
-  margin: 16px;
-  padding: 16px;
+  border: var(--border);
+  border-radius: var(--border-radius);
+  margin: var(--spacing-double);
+  padding: var(--spacing-double);
   &.info {
-    border-color: #23f4;
-    background: #5673ff44;
+    /*border-color: #23f4;*/
+    background: var(--clr-info-background);
   }
   p {
     margin: 0;
@@ -15,24 +15,25 @@
 
 button.primary,
 button.secondary {
-  font-family: inherit;
-  font-size: inherit;
-  border-radius: 8px;
+  border-radius: var(--border-radius);
   border: none;
-  padding: 8px 16px;
+  padding: var(--spacing-single) var(--spacing-double);
   box-sizing: border-box;
   cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: bold;
   &:disabled {
     opacity: 80%;
     cursor: default;
   }
   &.primary {
-    background: #3b005e;
-    color: #fff;
+    background: var(--clr-primary);
+    color: var(--clr-foreground-on-primary);
   }
   &.secondary {
-    background: #dfd4e7;
-    color: #202;
+    background: var(--clr-secondary);
+    color: var(--clr-foreground-on-secondary);
   }
 }
 
@@ -47,10 +48,11 @@ button.icon {
   }
 }
 
-a.icon {
+.icon {
   color: inherit;
   text-decoration: none;
-  font-size: 24px;
+  font-size: var(--icon-size);
+  user-select: none;
 }
 
 span.inlineIcon {
@@ -60,15 +62,22 @@ span.inlineIcon {
 }
 
 span.unreadIndicator {
-  background: #3b005e;
-  color: #fff;
-  width: 24px;
-  height: 24px;
-  border-radius: 12px;
+  background: var(--clr-primary);
+  color: var(--clr-foreground-on-primary);
+  width: var(--icon-size);
+  aspect-ratio: 1;
+  font-size: calc(var(--icon-size) * 0.65);
+  border-radius: calc(var(--icon-size) / 2);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
+
+  &.reduced {
+    width: calc(var(--icon-size) / 2);
+    border-radius: calc(var(--icon-size) / 4);
+    font-size: 0;
+  }
 }
 
 [hidden] {