A lot of AI slop

frontend/app/components/parts/site_options/ThemeSelector.vue

@@ -89,19 +89,39 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .circle {
-    width: 12px;
-    height: 12px;
-    margin-top: -3px;
-    border-radius: 50%;      /* makes it a circle */
+    width: 10px;
+    height: 10px;
+    margin-top: -1px;
+    border-radius: 0;
     z-index: 200;
     justify-content: center;
-    border: 2px var(--color-border) solid;
+    border: 1px solid var(--color-border-color);
 
     &.dark {
         background-color: rgb(28, 28, 28);
+        position: relative;
+        
+        &::after {
+            content: "◆";
+            color: white;
+            font-size: 6px;
+            position: absolute;
+            top: -1px;
+            left: 1px;
+        }
     }
     &.light {
         background-color: rgb(232, 232, 232);
+        position: relative;
+        
+        &::after {
+            content: "◆";
+            color: #666;
+            font-size: 6px;
+            position: absolute;
+            top: -1px;
+            left: 1px;
+        }
     }
     &.katlum {
         background-color: #4f8fba;
@@ -141,11 +161,11 @@ onUnmounted(() => {
   background: var(--color-background-fore);
   color: var(--color-text);
   font-size: 1em;
-  border: 1px solid #30363d;
-  padding: 8px 12px;
-  border-radius: 6px;
-  cursor: pointer;
-  margin-right: 15px;
+border: 1px solid var(--color-border-color);
+   padding: 8px 12px;
+   border-radius: 0;
+   cursor: pointer;
+   margin-right: 15px;
 }
 
 /* Dropdown transitions */
@@ -160,16 +180,16 @@ onUnmounted(() => {
 /* Dropdown */
 .dropdown {
  z-index: 10;
-  position: absolute;
-  top: 50px;
-  right: 0;
-  margin-right: 10px;
-  width: 320px;
-  background: var(--color-background-fore);
-  border: 1px solid #30363d;
-  border-radius: 8px;
-  padding: 8px 0;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
+   position: absolute;
+   top: 50px;
+   right: 0;
+   margin-right: 10px;
+   width: 320px;
+   background: var(--color-background-fore);
+   border: 1px solid var(--color-border-color);
+   border-radius: 0;
+   padding: 8px 0;
+   box-shadow: 4px -4px 0px 0px rgba(0,0,0,0.3);
 }
 
 /* Sections */
@@ -183,7 +203,7 @@ onUnmounted(() => {
   color: var(--color-text);
   cursor: pointer;
   display: flex;
-  border-radius: 5px;
+  border-radius: 0;
   gap: 10px;
   margin: 8px;
   align-items: center;
@@ -209,8 +229,16 @@ onUnmounted(() => {
 
 /* Divider */
 .divider {
-  height: 1px;
-  background: #30363d;
-  margin: 6px 0;
+  height: 0;
+  color: var(--color-border-color);
+  font-family: 'Hurmit', monospace;
+  font-size: 0;
+  line-height: 0;
+  white-space: nowrap;
+  margin: 8px 16px;
+
+  &::before {
+    content: "═══════════";
+  }
 }
 </style>