From bac364f22130be6a83727dc96c01724a69bfe7fc Mon Sep 17 00:00:00 2001
From: "Luna D." <luna@nighty.cloud>
Date: Tue, 30 Apr 2024 20:38:28 +0200
Subject: [PATCH] unnest, add light theme, fixes

---
 assets/css/common/mixins.css          | 32 +++++-----
 assets/css/elements/block.css         | 66 ++++++++++----------
 assets/css/elements/button.css        | 74 +++++++++++-----------
 assets/css/elements/dropdown.css      | 36 +++++------
 assets/css/elements/flash.css         | 18 +++---
 assets/css/elements/heading.css       | 11 ++--
 assets/css/elements/input.css         | 12 ++--
 assets/css/elements/interaction.css   |  8 +--
 assets/css/elements/layout.css        |  8 +--
 assets/css/elements/media.css         | 34 +++++-----
 assets/css/elements/separator.css     | 16 +++--
 assets/css/options/extra-rounding.css |  5 ++
 assets/css/options/no-rounding.css    |  5 ++
 assets/css/options/tag-border.css     |  3 +
 assets/css/themes/light-blue.css      | 89 +++++++++++++++++++++++++++
 assets/css/views/communication.css    |  6 +-
 assets/css/views/metabar.css          | 18 +++---
 assets/css/views/statistics.css       | 12 ++--
 assets/css/views/tag.css              | 56 ++++++++---------
 assets/package-lock.json              | 53 +---------------
 assets/package.json                   |  1 -
 assets/tsconfig.json                  |  2 +-
 assets/vite.config.ts                 | 35 ++++-------
 23 files changed, 317 insertions(+), 283 deletions(-)
 create mode 100644 assets/css/options/extra-rounding.css
 create mode 100644 assets/css/options/no-rounding.css
 create mode 100644 assets/css/options/tag-border.css
 create mode 100644 assets/css/themes/light-blue.css

diff --git a/assets/css/common/mixins.css b/assets/css/common/mixins.css
index 6d5c8f3e..718f880f 100644
--- a/assets/css/common/mixins.css
+++ b/assets/css/common/mixins.css
@@ -22,35 +22,35 @@
   }
 }
 
-@define-mixin even-odd-type $type {
-  &:nth-child(odd).$(type),
-  &:nth-child(odd) .$(type) {
+@define-mixin even-odd-type $classname, $type {
+  .$(classname):nth-child(odd).$(type),
+  .$(classname):nth-child(odd) .$(type) {
     background: var(--$(type)-color);
   }
-  &:nth-child(even).$(type),
-  &:nth-child(even) .$(type) {
+  .$(classname):nth-child(even).$(type),
+  .$(classname):nth-child(even) .$(type) {
     background: var(--$(type)-dark-color);
   }
-  &:nth-child(even) &:nth-child(odd).$(type),
-  &:nth-child(even) &:nth-child(odd) .$(type) {
+  .$(classname):nth-child(even) .$(classname):nth-child(odd).$(type),
+  .$(classname):nth-child(even) .$(classname):nth-child(odd) .$(type) {
     background: var(--$(type)-color);
   }
 }
 
-@define-mixin even-odd {
-  &:nth-child(odd) {
+@define-mixin even-odd $classname {
+  .$(classname):nth-child(odd) {
     background: var(--secondary-dark-color);
   }
-  &:nth-child(even) {
+  .$(classname):nth-child(even) {
     background: var(--secondary-muted-color);;
   }
 
-  @mixin even-odd-type primary;
-  @mixin even-odd-type success;
-  @mixin even-odd-type warning;
-  @mixin even-odd-type danger;
-  @mixin even-odd-type information;
-  @mixin even-odd-type special;
+  @mixin even-odd-type $classname, primary;
+  @mixin even-odd-type $classname, success;
+  @mixin even-odd-type $classname, warning;
+  @mixin even-odd-type $classname, danger;
+  @mixin even-odd-type $classname, information;
+  @mixin even-odd-type $classname, special;
 }
 
 @define-mixin animated-transition {
diff --git a/assets/css/elements/block.css b/assets/css/elements/block.css
index aaf53c4c..68c8e7cc 100644
--- a/assets/css/elements/block.css
+++ b/assets/css/elements/block.css
@@ -1,29 +1,27 @@
 @define-mixin block-type $type {
-  .block--$(type) {
-    .block__content {
-      border-color: var(--$(type)-border-color);
-      background: var(--$(type)-dark-color);
-    }
+  .block--$(type) .block__content {
+    border-color: var(--$(type)-border-color);
+    background: var(--$(type)-dark-color);
+  }
 
-    .block__footer {
-      background: var(--$(type)-color);
-    }
+  .block--$(type) .block__footer {
+    background: var(--$(type)-color);
+  }
 
-    &.block--muted {
-      border-color: var(--$(type)-color);
-    }
+  .block--$(type).block--muted {
+    border-color: var(--$(type)-color);
+  }
 
-    &.block--fixed {
-      background: var(--$(type)-color);
-    }
+  .block--$(type).block--fixed {
+    background: var(--$(type)-color);
+  }
 
-    & a {
-      color: var(--$(type)-link-color);
+  .block--$(type) a {
+    color: var(--$(type)-link-color);
+  }
 
-      &:hover {
-        color: var(--link-hover-color);
-      }
-    }
+  .block--$(type) a:hover {
+    color: var(--link-hover-color);
   }
 }
 
@@ -86,10 +84,10 @@
   padding: 0 var(--padding-normal);
   font-size: var(--font-header-size);
   margin-bottom: var(--padding-small);
+}
 
-  & > .fa {
-    margin-right: var(--padding-normal);
-  }
+.block__header > .fa, .block__header--single-item > .fa {
+  margin-right: var(--padding-normal);
 }
 
 .block__header--single-item {
@@ -129,20 +127,20 @@
 .block__header--js-tabbed {
   display: flex;
   padding: 0;
+}
 
-  & a {
-    display: block;
-    color: var(--text-color);
-    padding: 0 var(--padding-normal);
+.block__header--js-tabbed a {
+  display: block;
+  color: var(--text-color);
+  padding: 0 var(--padding-normal);
+}
 
-    &:hover {
-      background: var(--background-color);
-    }
-  }
+.block__header--js-tabbed a:hover {
+  background: var(--background-color);
+}
 
-  .selected {
-    background: var(--background-color);
-  }
+.block__header--js-tabbed .selected {
+  background: var(--background-color);
 }
 
 .block--spaced-top {
diff --git a/assets/css/elements/button.css b/assets/css/elements/button.css
index a982e28c..f88d14fd 100644
--- a/assets/css/elements/button.css
+++ b/assets/css/elements/button.css
@@ -3,31 +3,31 @@
     color: var(--$(type)-link-color) !important;
     border-color: var(--$(type)-border-color);
     background: var(--$(type)-dark-color);
+  }
 
-    &.button--important {
-      color: var(--text-color) !important;
-      background: var(--$(type)-color);
-      box-shadow: 0 -1px var(--$(type)-dark-color) inset;
-    }
+  .button--$(type).button--important {
+    color: var(--text-color) !important;
+    background: var(--$(type)-color);
+    box-shadow: 0 -1px var(--$(type)-dark-color) inset;
+  }
 
-    &:hover {
-      background: var(--$(type)-muted-color) !important;
-    }
+  .button--$(type):hover {
+    background: var(--$(type)-muted-color) !important;
   }
 
   .button__group--$(type) {
     border-color: var(--$(type)-color);
     background: var(--$(type)-dark-color);
+  }
 
-    & a {
-      color: var(--$(type)-link-color);
+  .button__group--$(type) a {
+    color: var(--$(type)-link-color);
+  }
 
-      &:hover {
-        @mixin animated-transition;
-        color: var(--text-color);
-        background: var(--$(type)-color);
-      }
-    }
+  .button__group--$(type) a:hover {
+    @mixin animated-transition;
+    color: var(--text-color);
+    background: var(--$(type)-color);
   }
 }
 
@@ -46,12 +46,12 @@
   overflow: hidden;
   line-height: var(--button-height);
   align-items: center;
+}
 
-  &:hover {
-    @mixin animated-transition;
-    background: var(--primary-muted-color);
-    cursor: pointer;
-  }
+.button:hover {
+  @mixin animated-transition;
+  background: var(--primary-muted-color);
+  cursor: pointer;
 }
 
 .button > i {
@@ -66,10 +66,10 @@
 .button__row {
   display: flex;
   flex-direction: row;
+}
 
-  & > button {
-    margin-right: var(--padding-small);
-  }
+.button__row > button {
+  margin-right: var(--padding-small);
 }
 
 .button__group, .button__group--single, .button__group--standalone {
@@ -80,10 +80,10 @@
   margin-right: var(--padding-normal);
   background: var(--secondary-dark-color);
   line-height: var(--button-group-height);
+}
 
-  &:last-child {
-    margin: 0;
-  }
+.button__group:last-child, .button__group--single:last-child, .button__group--standalone:last-child {
+  margin: 0;
 }
 
 .button__group--tall {
@@ -97,10 +97,10 @@
 .button__group .button {
   border: 0;
   border-right: var(--secondary-color);
+}
 
-  &:last-child {
-    border-right: 0;
-  }
+.button__group .button:last-child {
+  border-right: 0;
 }
 
 .button__group--single {
@@ -111,11 +111,11 @@
   @mixin animated-transition;
   font-weight: bold;
   padding: 0 var(--padding-small);
+}
 
-  &:hover {
-    @mixin animated-transition;
-    background: var(--secondary-muted-color);
-  }
+.button__group--standalone a:hover {
+  @mixin animated-transition;
+  background: var(--secondary-muted-color);
 }
 
 .button--borderless {
@@ -126,10 +126,10 @@
   color: var(--link-color);
   border-width: 0 !important;
   background: 0;
+}
 
-  &:hover {
-    background: var(--primary-muted-color);
-  }
+.block__header__buttons .button:hover {
+  background: var(--primary-muted-color);
 }
 
 @mixin button-type success;
diff --git a/assets/css/elements/dropdown.css b/assets/css/elements/dropdown.css
index 17087371..5d650c7e 100644
--- a/assets/css/elements/dropdown.css
+++ b/assets/css/elements/dropdown.css
@@ -1,14 +1,12 @@
 .dropdown {
   position: relative;
   display: inline-block;
+}
 
-  &:hover {
-    .dropdown__content {
-      display: block;
-      min-width: 100%;
-      z-index: 999;
-    }
-  }
+.dropdown:hover .dropdown__content {
+  display: block;
+  min-width: 100%;
+  z-index: 999;
 }
 
 .dropdown__content {
@@ -18,11 +16,11 @@
   display: none;
   top: 100%;
   left: 0;
+}
 
-  & > :not(.hidden) {
-    display: block;
-    white-space: nowrap;
-  }
+.dropdown__content > :not(.hidden) {
+  display: block;
+  white-space: nowrap;
 }
 
 .dropdown__content--right {
@@ -34,12 +32,10 @@
   display: grid;
   grid-template-columns: auto 1fr;
   color: var(--text-color);
+}
 
-  &:hover {
-    .dropdown__text {
-      background: var(--primary-dark-color);
-    }
-  }
+.dropdown__item:hover .dropdown__text {
+  background: var(--primary-dark-color);
 }
 
 .dropdown__icon {
@@ -62,8 +58,8 @@
 .dropdown__link {
   padding: 0 var(--padding-small);
   color: var(--text-color) !important;
-
-  &:hover {
-    background: var(--primary-dark-color);
-  }
+}
+
+.dropdown__link:hover {
+  background: var(--primary-dark-color);
 }
diff --git a/assets/css/elements/flash.css b/assets/css/elements/flash.css
index ab78635d..f57fe8da 100644
--- a/assets/css/elements/flash.css
+++ b/assets/css/elements/flash.css
@@ -2,18 +2,18 @@
   .flash--$(type) {
     border: 1px solid var(--$(type)-border-color);
     background: var(--$(type)-color);
+  }
 
-    .flash__message {
-      border-left: 1px solid var(--$(type)-border-color);
-    }
+  .flash--$(type) .flash__message {
+    border-left: 1px solid var(--$(type)-border-color);
+  }
 
-    & a {
-      color: var(--$(type)-link-color);
+  .flash--$(type) a {
+    color: var(--$(type)-link-color);
+  }
 
-      &:hover {
-        color: var(--link-hover-color);
-      }
-    }
+  .flash--$(type) a:hover {
+    color: var(--link-hover-color);
   }
 }
 
diff --git a/assets/css/elements/heading.css b/assets/css/elements/heading.css
index 6a94807c..6e1ee4a4 100644
--- a/assets/css/elements/heading.css
+++ b/assets/css/elements/heading.css
@@ -14,10 +14,13 @@
     border-bottom-color: var(--$(type)-border-color);
   }
 
-  .block--$(type) {
-    h1, h2, h3, h4, h5, h6 {
-      border-bottom-color: var(--$(type)-border-color);
-    }
+  .block--$(type) h1,
+  .block--$(type) h2,
+  .block--$(type) h3,
+  .block--$(type) h4,
+  .block--$(type) h5,
+  .block--$(type) h6 {
+    border-bottom-color: var(--$(type)-border-color);
   }
 }
 
diff --git a/assets/css/elements/input.css b/assets/css/elements/input.css
index 3d527785..ae3dbc54 100644
--- a/assets/css/elements/input.css
+++ b/assets/css/elements/input.css
@@ -5,14 +5,14 @@
   color: var(--text-color);
   box-sizing: border-box;
   font-family: var(--font-family-monospace);
+}
 
-  &:focus {
-    outline: none;
-  }
+.input:focus {
+  outline: none;
+}
 
-  &::placeholder {
-    color: var(--secondary-border-color);
-  }
+.input::placeholder {
+  color: var(--secondary-border-color);
 }
 
 .input--wide {
diff --git a/assets/css/elements/interaction.css b/assets/css/elements/interaction.css
index e9980be3..34719301 100644
--- a/assets/css/elements/interaction.css
+++ b/assets/css/elements/interaction.css
@@ -4,11 +4,11 @@
     color: var(--$(type)-color) !important;
     padding: 0 var(--padding-tiny);
     width: 1rem;
+  }
 
-    &.active, &:hover {
-      color: var(--text-color) !important;
-      background-color: var(--$(type)-color);
-    }
+  .interaction--$(type).active, .interaction--$(type):hover {
+    color: var(--text-color) !important;
+    background-color: var(--$(type)-color);
   }
 }
 
diff --git a/assets/css/elements/layout.css b/assets/css/elements/layout.css
index 43e7c6c6..fd2cb878 100644
--- a/assets/css/elements/layout.css
+++ b/assets/css/elements/layout.css
@@ -44,11 +44,9 @@
 }
 
 @mixin if-desktop {
-  .centered-layout {
-    .layout--medium, .layout--narrow {
-      margin-left: auto;
-      margin-right: auto;
-    }
+  .centered-layout .layout--medium, .centered-layout .layout--narrow {
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
diff --git a/assets/css/elements/media.css b/assets/css/elements/media.css
index ec56c42d..0336fb2e 100644
--- a/assets/css/elements/media.css
+++ b/assets/css/elements/media.css
@@ -59,20 +59,18 @@
   position: relative;
   border-radius: 0 0 var(--border-radius-inner) var(--border-radius-inner);
   overflow: hidden;
-
-  .image-container {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
 }
 
-.media-box__content--featured {
-  .media-box__image {
-    max-height: var(--media-featured-width);
-  }
+.media-box__content .image-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.media-box__content--featured .media-box__image {
+  max-height: var(--media-featured-width);
 }
 
 .media-box__overlay {
@@ -105,13 +103,13 @@
 .image-container a {
   display: flex;
   max-height: 100%;
+}
 
-  /* For some reason tall images don't center properly within the container
-     without this hack. I blame CSS. */
-  & > img {
-    max-height: 100%;
-    margin: auto;
-  }
+/* For some reason tall images don't center properly within the container
+    without this hack. I blame CSS. */
+.image-container a > img {
+  max-height: 100%;
+  margin: auto;
 }
 
 .media-box__image {
diff --git a/assets/css/elements/separator.css b/assets/css/elements/separator.css
index d2d9541a..991c8188 100644
--- a/assets/css/elements/separator.css
+++ b/assets/css/elements/separator.css
@@ -1,17 +1,15 @@
 @define-mixin separator-type $type {
   .separator--$(type) {
     border-color: var(--$(type)-border-color);
-
-    &.separator--vertical {
-      background: var(--$(type)-border-color);
-    }
   }
 
-  .button__group--standalone .separator--$(type),
-  .button__group .separator--$(type) {
-    &.separator--vertical {
-      background: var(--$(type)-color) !important;
-    }
+  .separator--$(type).separator--vertical {
+    background: var(--$(type)-border-color);
+  }
+
+  .button__group--standalone .separator--$(type).separator--vertical,
+  .button__group .separator--$(type).separator--vertical {
+    background: var(--$(type)-color) !important;
   }
 }
 
diff --git a/assets/css/options/extra-rounding.css b/assets/css/options/extra-rounding.css
new file mode 100644
index 00000000..ceb02e15
--- /dev/null
+++ b/assets/css/options/extra-rounding.css
@@ -0,0 +1,5 @@
+:root {
+  --border-radius-outer: 0.6rem;
+  --border-radius-inner: 0.4rem;
+  --border-radius-tag: 0.25rem;
+}
diff --git a/assets/css/options/no-rounding.css b/assets/css/options/no-rounding.css
new file mode 100644
index 00000000..c8bdcea5
--- /dev/null
+++ b/assets/css/options/no-rounding.css
@@ -0,0 +1,5 @@
+:root {
+  --border-radius-outer: 0;
+  --border-radius-inner: 0;
+  --border-radius-tag: 0;
+}
diff --git a/assets/css/options/tag-border.css b/assets/css/options/tag-border.css
new file mode 100644
index 00000000..a6e70290
--- /dev/null
+++ b/assets/css/options/tag-border.css
@@ -0,0 +1,3 @@
+:root {
+  --tag-border-width: 1px;
+}
diff --git a/assets/css/themes/light-blue.css b/assets/css/themes/light-blue.css
new file mode 100644
index 00000000..107e0c63
--- /dev/null
+++ b/assets/css/themes/light-blue.css
@@ -0,0 +1,89 @@
+$background-color: #f7f7f7;
+$text-color: #171717;
+
+$primary-color: #62a7d9;
+$secondary-color: #c1e4f9;
+$danger-color: #e78f82;
+$warning-color: #f0c180;
+$success-color: #8de3b1;
+$information-color: #90dce7;
+$special-color: #dc77e9;
+
+$upvote-color: #5b9b26;
+$downvote-color: #da3412;
+$fave-color: #a18e27;
+$comment-color: #b099dd;
+$hide-color: #da3412;
+
+$tag-default-color: #84dd96;
+$tag-error-color: #eb848c;
+$tag-rating-color: #9cc6f0;
+$tag-origin-color: #b5b0ed;
+$tag-character-color: #b6e4ed;
+$tag-oc-color: #efaaf2;
+$tag-species-color: #e1997a;
+$tag-body-type-color: #bcbcbc;
+$tag-content-fanmade-color: #e388c2;
+$tag-content-official-color: #ebe9b3;
+$tag-spoiler-color: #dcb879;
+
+$spoiler-color: #0f0f0f;
+
+@define-mixin tag-color $tagname, $color, $text-percentage: 40, $border-percentage: 15 {
+  --tag-$(tagname)-color: $(color);
+  --tag-$(tagname)-border-color: hsl(from $color h s calc(l - $border-percentage));
+  --tag-$(tagname)-text-color: hsl(from $color h s calc(l - $text-percentage));
+}
+
+@define-mixin type-color $type, $color {
+  --$(type)-color: $color;
+  --$(type)-border-color: hsl(from $color h calc(s - 20) calc(l - 10));
+  --$(type)-dark-color: hsl(from $color h calc(s - 25) calc(l + 12));
+  --$(type)-link-color: hsl(from $color h calc(s + 50) calc(l - 47));
+}
+
+:root {
+  --background-color: $background-color;
+  --text-color: $text-color;
+
+  --link-color: hsl(from $primary-color h calc(s + 25) calc(l - 25));
+  --link-hover-color: $text-color;
+
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s + 20) calc(l - 30));
+  --primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 10));
+  --primary-dark-color: hsl(from $primary-color h calc(s - 10) calc(l + 30));
+
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
+  --secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l - 15));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l + 5));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
+
+  --upvote-color: $upvote-color;
+  --downvote-color: $downvote-color;
+  --fave-color: $fave-color;
+  --comment-color: $comment-color;
+  --hide-color: $hide-color;
+
+  --spoiler-color: $spoiler-color;
+  --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
+
+  @mixin type-color success, $success-color;
+  @mixin type-color warning, $warning-color;
+  @mixin type-color danger, $danger-color;
+  @mixin type-color information, $information-color;
+  @mixin type-color special, $special-color;
+
+  @mixin tag-color default, $tag-default-color;
+  @mixin tag-color error, $tag-error-color, 37;
+  @mixin tag-color rating, $tag-rating-color, 37;
+  @mixin tag-color origin, $tag-origin-color, 42;
+  @mixin tag-color character, $tag-character-color;
+  @mixin tag-color oc, $tag-oc-color, 40;
+  @mixin tag-color species, $tag-species-color, 37;
+  @mixin tag-color body-type, $tag-body-type-color, 45, 12;
+  @mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
+  @mixin tag-color content-official, $tag-content-official-color;
+  @mixin tag-color spoiler, $tag-spoiler-color;
+}
diff --git a/assets/css/views/communication.css b/assets/css/views/communication.css
index 152ca379..b00cf338 100644
--- a/assets/css/views/communication.css
+++ b/assets/css/views/communication.css
@@ -13,10 +13,10 @@
   background: 0;
   border: 0;
   padding: var(--padding-small);
+}
 
-  &:hover {
-    background: var(--secondary-muted-color);
-  }
+.communication__toolbar__button:hover {
+  background: var(--secondary-muted-color);
 }
 
 .communication-edit__actions {
diff --git a/assets/css/views/metabar.css b/assets/css/views/metabar.css
index cf2c85b9..07d36cc5 100644
--- a/assets/css/views/metabar.css
+++ b/assets/css/views/metabar.css
@@ -1,5 +1,5 @@
 @define-mixin fix-interaction $type {
-  .interaction--$(type) {
+  .metabar__interactions .interaction--$(type) {
     padding: var(--padding-tiny) var(--padding-small);
   }
 }
@@ -9,13 +9,13 @@
     display: grid;
     width: 100%;
     grid-template-columns: repeat(5, 1fr);
-
-    @mixin fix-interaction fave;
-    @mixin fix-interaction upvote;
-    @mixin fix-interaction downvote;
-    @mixin fix-interaction hide;
   }
 
+  @mixin fix-interaction fave;
+  @mixin fix-interaction upvote;
+  @mixin fix-interaction downvote;
+  @mixin fix-interaction hide;
+
   .metabar__interactions * {
     align-self: center;
     justify-self: center;
@@ -58,10 +58,8 @@
   box-sizing: border-box;
 }
 
-.metabar__mobile-info {
-  & td {
-    padding: var(--padding-small);
-  }
+.metabar__mobile-info td {
+  padding: var(--padding-small);
 }
 
 .badges {
diff --git a/assets/css/views/statistics.css b/assets/css/views/statistics.css
index 4a17e399..7d90ffb4 100644
--- a/assets/css/views/statistics.css
+++ b/assets/css/views/statistics.css
@@ -7,13 +7,13 @@
 }
 
 .statistics__statistic {
-  @mixin even-odd;
-
   display: grid;
   grid-template-columns: 15% 15% auto;
   background: var(--secondary-color);
 }
 
+@mixin even-odd statistics__statistic;
+
 .statistics__column {
   text-align: center;
   padding: var(--padding-small);
@@ -27,8 +27,8 @@
 
 .barline__bar {
   fill: var(--primary-border-color);
-
-  &:hover {
-    fill: var(--danger-color);
-  }
+}
+
+.barline__bar:hover {
+  fill: var(--danger-color);
 }
diff --git a/assets/css/views/tag.css b/assets/css/views/tag.css
index fb9d6bae..8ac31b4f 100644
--- a/assets/css/views/tag.css
+++ b/assets/css/views/tag.css
@@ -1,20 +1,20 @@
 @define-mixin tag-color $tagtype {
-  &[data-tag-category=$(tagtype)] {
+  .tag[data-tag-category=$(tagtype)] {
     color: var(--tag-$(tagtype)-text-color);
     background: var(--tag-$(tagtype)-color);
     border-color: var(--tag-$(tagtype)-border-color);
+  }
 
-    .tag__state {
-      color: var(--tag-$(tagtype)-text-color);
-    }
+  .tag[data-tag-category=$(tagtype)] .tag__state {
+    color: var(--tag-$(tagtype)-text-color);
+  }
 
-    .tag__name {
-      color: var(--tag-$(tagtype)-text-color);
-    }
+  .tag[data-tag-category=$(tagtype)] .tag__name {
+    color: var(--tag-$(tagtype)-text-color);
+  }
 
-    .tag__count {
-      background: var(--tag-$(tagtype)-border-color);
-    }
+  .tag[data-tag-category=$(tagtype)] .tag__count {
+    background: var(--tag-$(tagtype)-border-color);
   }
 }
 
@@ -35,23 +35,23 @@
   border-radius: var(--border-radius-tag);
   border: var(--tag-border-width) solid var(--tag-default-border-color);
   font-weight: bold;
-
-  a {
-    color: inherit;
-  }
-
-  @mixin tag-color error;
-  @mixin tag-color rating;
-  @mixin tag-color origin;
-  @mixin tag-color character;
-  @mixin tag-color oc;
-  @mixin tag-color species;
-  @mixin tag-color body-type;
-  @mixin tag-color content-fanmade;
-  @mixin tag-color content-official;
-  @mixin tag-color spoiler;
 }
 
+.tag a {
+  color: inherit;
+}
+
+@mixin tag-color error;
+@mixin tag-color rating;
+@mixin tag-color origin;
+@mixin tag-color character;
+@mixin tag-color oc;
+@mixin tag-color species;
+@mixin tag-color body-type;
+@mixin tag-color content-fanmade;
+@mixin tag-color content-official;
+@mixin tag-color spoiler;
+
 .tag > span {
   display: table-cell;
   white-space: pre;
@@ -79,10 +79,10 @@
 .tag__dropdown__link {
   background-color: var(--primary-muted-color);
   padding: 0 var(--padding-small);
+}
 
-  &:hover {
-    background-color: var(--primary-dark-color);
-  }
+.tag__dropdown__link:hover {
+  background-color: var(--primary-dark-color);
 }
 
 .tag-info__image {
diff --git a/assets/package-lock.json b/assets/package-lock.json
index 6092a760..06719909 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -17,7 +17,6 @@
         "jest-environment-jsdom": "^29.7.0",
         "normalize.css": "^8.0.1",
         "postcss-mixins": "^10.0.1",
-        "postcss-nested": "^6.0.1",
         "postcss-simple-vars": "^7.0.1",
         "typescript": "^5.4",
         "vite": "^5.2"
@@ -3073,17 +3072,6 @@
       "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
       "dev": true
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/cssom": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -3243,9 +3231,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.751",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.751.tgz",
-      "integrity": "sha512-2DEPi++qa89SMGRhufWTiLmzqyuGmNF3SK4+PQetW1JKiZdEpF4XQonJXJCzyuYSA6mauiMhbyVhqYAP45Hvfw=="
+      "version": "1.4.752",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.752.tgz",
+      "integrity": "sha512-P3QJreYI/AUTcfBVrC4zy9KvnZWekViThgQMX/VpJ+IsOBbcX5JFpORM4qWapwWQ+agb2nYAOyn/4PMXOk0m2Q=="
     },
     "node_modules/emittery": {
       "version": "0.13.1",
@@ -5962,36 +5950,6 @@
         "postcss": "^8.2.14"
       }
     },
-    "node_modules/postcss-nested": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
-      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.11"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-simple-vars": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
@@ -6806,11 +6764,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
-    },
     "node_modules/v8-to-istanbul": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz",
diff --git a/assets/package.json b/assets/package.json
index 6c8742c0..c3ea8af7 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -22,7 +22,6 @@
     "jest-environment-jsdom": "^29.7.0",
     "normalize.css": "^8.0.1",
     "postcss-mixins": "^10.0.1",
-    "postcss-nested": "^6.0.1",
     "postcss-simple-vars": "^7.0.1",
     "typescript": "^5.4",
     "vite": "^5.2"
diff --git a/assets/tsconfig.json b/assets/tsconfig.json
index 279f26c6..4b415237 100644
--- a/assets/tsconfig.json
+++ b/assets/tsconfig.json
@@ -12,7 +12,7 @@
       "DOM.Iterable"
     ],
 
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
diff --git a/assets/vite.config.ts b/assets/vite.config.ts
index fcb01836..e3e9588a 100644
--- a/assets/vite.config.ts
+++ b/assets/vite.config.ts
@@ -2,36 +2,27 @@ import fs from 'fs';
 import path from 'path';
 import autoprefixer from 'autoprefixer';
 import postcssMixins from 'postcss-mixins';
-import postcssNested from 'postcss-nested';
 import postcssSimpleVars from 'postcss-simple-vars';
 import postcssRelativeColor from '@csstools/postcss-relative-color-syntax';
 import { defineConfig, UserConfig, ConfigEnv } from 'vite';
 
 export default defineConfig(({ command }: ConfigEnv): UserConfig => {
   const isDev = command !== 'build';
+  const targets = new Map();
 
-  if (isDev) {
-    process.stdin.on('close', () => {
-      // eslint-disable-next-line no-process-exit
-      process.exit(0);
-    });
+  fs.readdirSync(path.resolve(__dirname, 'css/themes/')).forEach(name => {
+    const m = name.match(/([-a-z]+).css/);
 
-    process.stdin.resume();
-  }
+    if (m)
+      targets.set(`css/${m[1]}`, `./css/themes/${m[1]}.css`);
+  });
 
-  const themeNames =
-    fs.readdirSync(path.resolve(__dirname, 'css/themes/')).map(name => {
-      const m = name.match(/([-a-z]+).css/);
+  fs.readdirSync(path.resolve(__dirname, 'css/options/')).forEach(name => {
+    const m = name.match(/([-a-z]+).css/);
 
-      if (m) { return m[1]; }
-      return null;
-    });
-
-  const themes = new Map();
-
-  for (const name of themeNames) {
-    themes.set(`css/${name}`, `./css/themes/${name}.css`);
-  }
+    if (m)
+      targets.set(`css/options/${m[1]}`, `./css/options/${m[1]}.css`);
+  });
 
   return {
     publicDir: 'static',
@@ -55,7 +46,7 @@ export default defineConfig(({ command }: ConfigEnv): UserConfig => {
         input: {
           'js/app': './js/app.js',
           'css/application': './css/application.css',
-          ...Object.fromEntries(themes)
+          ...Object.fromEntries(targets)
         },
         output: {
           entryFileNames: '[name].js',
@@ -66,7 +57,7 @@ export default defineConfig(({ command }: ConfigEnv): UserConfig => {
     },
     css: {
       postcss:  {
-        plugins: [postcssMixins(), postcssNested(), postcssSimpleVars, postcssRelativeColor(), autoprefixer]
+        plugins: [postcssMixins(), postcssSimpleVars(), postcssRelativeColor(), autoprefixer]
       }
     }
   };