From ff79e0b7fc9b474075b532e22ae88bf049dbd53b Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sun, 16 Feb 2025 03:17:32 +0400
Subject: [PATCH 1/3] Renaming booru colors to vars, adding several new
 variables

---
 src/styles/{booru-colors.scss => booru-vars.scss} | 4 ++++
 src/styles/content/listing.scss                   | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)
 rename src/styles/{booru-colors.scss => booru-vars.scss} (62%)

diff --git a/src/styles/booru-colors.scss b/src/styles/booru-vars.scss
similarity index 62%
rename from src/styles/booru-colors.scss
rename to src/styles/booru-vars.scss
index 5de64ab..1db638d 100644
--- a/src/styles/booru-colors.scss
+++ b/src/styles/booru-vars.scss
@@ -1,3 +1,7 @@
+$background-color: var(--background-color);
+$media-border: var(--media-border);
+$media-box-color: var(--media-box-color);
+
 // These variables are defined dynamically based on the category of the tag
 $resolved-tag-background: var(--tag-background);
 $resolved-tag-border: var(--tag-border);
diff --git a/src/styles/content/listing.scss b/src/styles/content/listing.scss
index a00b0b1..6edc8f7 100644
--- a/src/styles/content/listing.scss
+++ b/src/styles/content/listing.scss
@@ -1,5 +1,5 @@
 @use '$styles/colors';
-@use '$styles/booru-colors';
+@use '$styles/booru-vars';
 
 // This will fix wierd misplacing of the modified media boxes in the listing.
 .js-resizable-media-container {
@@ -67,8 +67,8 @@
       user-select: none;
 
       &:hover {
-        background: booru-colors.$resolved-tag-color;
-        color: booru-colors.$resolved-tag-background;
+        background: booru-vars.$resolved-tag-color;
+        color: booru-vars.$resolved-tag-background;
       }
 
       &.is-missing:not(.is-added),

From 06b9fefe8f2e355196538177ac490f67135db414 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sun, 16 Feb 2025 03:17:50 +0400
Subject: [PATCH 2/3] Updating the popup colors to respect active theme

---
 src/styles/content/listing.scss | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/styles/content/listing.scss b/src/styles/content/listing.scss
index 6edc8f7..2db2317 100644
--- a/src/styles/content/listing.scss
+++ b/src/styles/content/listing.scss
@@ -19,22 +19,22 @@
       top: -1px;
       bottom: 0;
       z-index: 8;
-      background: colors.$footer;
-      border-top: 23px solid colors.$media-box-border;
+      background: booru-vars.$background-color;
+      border-top: 23px solid booru-vars.$media-box-color;
     }
 
     &:before {
       right: calc(100% - 1px);
       left: -50%;
-      border-left: 1px solid colors.$media-box-border;
-      box-shadow: colors.$footer -10px 0 10px;
+      border-left: 1px solid booru-vars.$media-border;
+      box-shadow: booru-vars.$background-color -10px 0 10px;
     }
 
     &:after {
       left: calc(100% - 1px);
       right: -50%;
-      border-right: 1px solid colors.$media-box-border;
-      box-shadow: colors.$footer 10px 0 10px;
+      border-right: 1px solid booru-vars.$media-border;
+      box-shadow: booru-vars.$background-color 10px 0 10px;
     }
   }
 
@@ -46,8 +46,8 @@
     left: -50%;
     right: -50%;
     z-index: 8;
-    background: colors.$footer;
-    border: 1px solid colors.$media-box-border;
+    background: booru-vars.$background-color;
+    border: 1px solid booru-vars.$media-border;
     border-top: 0;
 
     .tags-list {

From b6a96abadf65ca6f3216b4b8e6620af66bfa4e64 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sun, 16 Feb 2025 03:22:37 +0400
Subject: [PATCH 3/3] Fixed incorrect usage of media border variable

---
 src/styles/content/listing.scss | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/styles/content/listing.scss b/src/styles/content/listing.scss
index 2db2317..71cf423 100644
--- a/src/styles/content/listing.scss
+++ b/src/styles/content/listing.scss
@@ -26,14 +26,14 @@
     &:before {
       right: calc(100% - 1px);
       left: -50%;
-      border-left: 1px solid booru-vars.$media-border;
+      border-left: booru-vars.$media-border;
       box-shadow: booru-vars.$background-color -10px 0 10px;
     }
 
     &:after {
       left: calc(100% - 1px);
       right: -50%;
-      border-right: 1px solid booru-vars.$media-border;
+      border-right: booru-vars.$media-border;
       box-shadow: booru-vars.$background-color 10px 0 10px;
     }
   }
@@ -47,8 +47,11 @@
     right: -50%;
     z-index: 8;
     background: booru-vars.$background-color;
-    border: 1px solid booru-vars.$media-border;
-    border-top: 0;
+    border: {
+      left: booru-vars.$media-border;
+      right: booru-vars.$media-border;
+      bottom: booru-vars.$media-border;
+    };
 
     .tags-list {
       display: flex;