nicer tabs in wallpaper and style

MercuryWorkshop · Dec 5, 2024 · 2520939 · 2520939
1 parent a433767
commit 2520939
Showing 1 changed file with 35 additions and 4 deletions.
diff --git a/src/coreapps/WallpaperSelector.tsx b/src/coreapps/WallpaperSelector.tsx
@@ -271,25 +271,56 @@ class WallpaperSelector extends App {
         }
 
         &:has(#colors) h2:not(:first-of-type) {
-            color: var(--theme-fg);
+            color: var(--theme-accent);
+
+            &::after {
+                width: 100%;
+            }
         }
 
         &:has(#colors) h2 {
-            color: var(--theme-secondary-fg);
+            color: var(--theme-fg);
+
+            &::after {
+                width: 0px;
+            }
         }
 
         &:not(:has(#colors)) h2 {
-            color: var(--theme-fg);
+            color: var(--theme-accent);
+
+            &::after {
+                width: 100%;
+            }
         }
 
         &:not(:has(#colors)) h2:not(:first-of-type) {
-            color: var(--theme-secondary-fg);
+            color: var(--theme-fg);
+
+            &::after {
+                width: 0px;
+            }
         }
 
         h2 {
             display: inline-block;
             margin-right: 1rem;
             cursor: pointer;
+            font-size: 1rem;
+            text-transform: capitalize;
+
+            &::after {
+                content: "";
+                display: block;
+                width: 0px;
+                height: 3px;
+                background: var(--theme-accent);
+                margin-top: 0.5rem;
+                transition: 0.15s width;
+                display: flex;
+                align-self: center;
+                justify-self: center;
+            }
         }
     `;