From 01ff1d64cfbb5d1cee1e207bc594b31b88ebe6b1 Mon Sep 17 00:00:00 2001
From: deuulc <werkstadt3@protonmail.com>
Date: Sat, 15 Mar 2025 18:40:47 +0100
Subject: [PATCH] [theme] Minimal v0.2.2 (#515)

* fix navbar

* fix popover arrow

* align stats

* update readme

* theme card size slider

* theme studio tagger

* Theme skeleton

* theme arrow in player view

* theme arrow 2

* remove nav height

* remove vtt border

* theme tagger

* fix inputs rgba

* version update
---
 themes/Theme-Minimal/README.md         |  9 +++++++
 themes/Theme-Minimal/Theme-Minimal.yml |  5 +++-
 themes/Theme-Minimal/_theme.css        |  2 --
 themes/Theme-Minimal/inputs.css        | 34 ++++++++++++++++++++++++++
 themes/Theme-Minimal/player.css        | 17 ++++++++++---
 themes/Theme-Minimal/popover.css       |  5 ++++
 themes/Theme-Minimal/scene-tagger.css  | 14 +++++++++++
 themes/Theme-Minimal/scenes.css        |  9 +------
 themes/Theme-Minimal/skeleton.css      | 10 ++++++++
 themes/Theme-Minimal/stats.css         |  3 ++-
 themes/Theme-Minimal/studio-tagger.css | 20 +++++++++++++++
 11 files changed, 112 insertions(+), 16 deletions(-)
 create mode 100644 themes/Theme-Minimal/scene-tagger.css
 create mode 100644 themes/Theme-Minimal/skeleton.css
 create mode 100644 themes/Theme-Minimal/studio-tagger.css

diff --git a/themes/Theme-Minimal/README.md b/themes/Theme-Minimal/README.md
index f74dfcc..c670f67 100644
--- a/themes/Theme-Minimal/README.md
+++ b/themes/Theme-Minimal/README.md
@@ -17,6 +17,15 @@ For intended experience:
 
 ## Changelog
 
+### Version 0.2.2 - 2025-03-15
+
+- Theme popover arrow.
+- Theme card size slider.
+- Theme studio tagger.
+- Theme scene tagger search result.
+- Theme skeleton.
+- Center stats.
+
 ### Version 0.2.1 - 2025-03-15
 
 - Fix content offset from nav-bar.
diff --git a/themes/Theme-Minimal/Theme-Minimal.yml b/themes/Theme-Minimal/Theme-Minimal.yml
index 11baffe..105d1d0 100644
--- a/themes/Theme-Minimal/Theme-Minimal.yml
+++ b/themes/Theme-Minimal/Theme-Minimal.yml
@@ -1,6 +1,6 @@
 name: Theme - Minimal
 description: Minimal Theme for Stash
-version: 0.2.1
+version: 0.2.2
 ui:
   css:
     - index.css
@@ -17,6 +17,9 @@ ui:
     - popover.css
     - studio.css
     - nav-bar.css
+    - studio-tagger.css
+    - scene-tagger.css
+    - skeleton.css
   assets:
     /: ./assets
   javascript:
diff --git a/themes/Theme-Minimal/_theme.css b/themes/Theme-Minimal/_theme.css
index df0e64d..77857e0 100644
--- a/themes/Theme-Minimal/_theme.css
+++ b/themes/Theme-Minimal/_theme.css
@@ -153,6 +153,4 @@
   --text-7xl: 4.5rem; /* 72px */
   --text-8xl: 6rem; /* 96px */
   --text-9xl: 8rem; /* 128px */
-
-  --nav-bar-height: 4rem;
 }
diff --git a/themes/Theme-Minimal/inputs.css b/themes/Theme-Minimal/inputs.css
index a0050b6..bd2012d 100644
--- a/themes/Theme-Minimal/inputs.css
+++ b/themes/Theme-Minimal/inputs.css
@@ -376,3 +376,37 @@ div.react-datepicker {
     }
   }
 }
+
+.input-group-text {
+  background-color: var(--primary-2);
+  color: var(--primary-11);
+  border: unset;
+}
+
+/* sliders */
+input[type="range"]::-moz-range-track {
+  background: var(--primary-5);
+}
+input[type="range"]::-moz-range-thumb {
+  border-radius: 50%;
+  background: var(--primary-10);
+  border: 1px solid var(--primary-10);
+}
+
+input[type="range"]:active::-moz-range-track,
+input[type="range"]:focus::-moz-range-track {
+  background: var(--primary-5);
+}
+input[type="range"]::-webkit-slider-runnable-track {
+  background: var(--primary-5);
+}
+input[type="range"]:active::-webkit-slider-runnable-track,
+input[type="range"]:focus::-webkit-slider-runnable-track {
+  background: var(--primary-5);
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  border-radius: 50%;
+  background: var(--primary-10);
+  border: 1px solid var(--primary-10);
+}
diff --git a/themes/Theme-Minimal/player.css b/themes/Theme-Minimal/player.css
index 6af0364..060d926 100644
--- a/themes/Theme-Minimal/player.css
+++ b/themes/Theme-Minimal/player.css
@@ -37,7 +37,7 @@
       text-align: center;
       color: var(--primary-11) !important;
       background-color: unset;
-      padding: 12px 16px;
+      padding: 12px 1rem;
       border: 0 !important;
       border-radius: 8px !important;
       line-height: 1;
@@ -74,7 +74,7 @@
 
     .scene-markers-panel {
       & > * + * {
-        margin-top: 16px;
+        margin-top: 1rem;
       }
 
       .container {
@@ -83,10 +83,10 @@
         padding-left: unset;
       }
       .primary-tag {
-        margin-top: 16px;
+        margin-top: 1rem;
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-        gap: 16px;
+        gap: 1rem;
         justify-items: stretch;
 
         .primary-card {
@@ -180,6 +180,10 @@
   }
 }
 
+.scene-divider button {
+  color: var(--primary-10);
+}
+
 .scene-player-container {
   max-width: unset !important;
 }
@@ -191,4 +195,9 @@
   .vjs-poster {
     background-color: var(--primary-1);
   }
+
+  .vjs-vtt-thumbnail-display {
+    border: unset;
+    border-radius: 0.8rem;
+  }
 }
diff --git a/themes/Theme-Minimal/popover.css b/themes/Theme-Minimal/popover.css
index 94f13de..fa75991 100644
--- a/themes/Theme-Minimal/popover.css
+++ b/themes/Theme-Minimal/popover.css
@@ -5,4 +5,9 @@
   .image-thumbnail {
     border-radius: 4px;
   }
+
+  .arrow::after,
+  .arrow::before {
+    border-bottom-color: var(--primary-2);
+  }
 }
diff --git a/themes/Theme-Minimal/scene-tagger.css b/themes/Theme-Minimal/scene-tagger.css
new file mode 100644
index 0000000..716cefa
--- /dev/null
+++ b/themes/Theme-Minimal/scene-tagger.css
@@ -0,0 +1,14 @@
+.tagger-container {
+  .search-item {
+    background-color: unset;
+
+    .search-result {
+      padding: 1.25rem;
+      border-radius: 1rem;
+    }
+
+    .selected-result {
+      background-color: var(--primary-2);
+    }
+  }
+}
diff --git a/themes/Theme-Minimal/scenes.css b/themes/Theme-Minimal/scenes.css
index b208ccf..9936e6e 100644
--- a/themes/Theme-Minimal/scenes.css
+++ b/themes/Theme-Minimal/scenes.css
@@ -314,12 +314,5 @@
   }
 }
 
-.search-item {
-  background-color: unset;
 
-  .input-group-text {
-    background-color: var(--primary-2);
-    color: var(--primary-11);
-    border: unset;
-  }
-}
+
diff --git a/themes/Theme-Minimal/skeleton.css b/themes/Theme-Minimal/skeleton.css
new file mode 100644
index 0000000..a3bb6e4
--- /dev/null
+++ b/themes/Theme-Minimal/skeleton.css
@@ -0,0 +1,10 @@
+.skeleton-card {
+  background-color: var(--primary-3);
+}
+
+.scene-skeleton {
+  max-height: unset;
+  min-height: unset;
+  height: 16rem;
+  border-radius: 1rem;
+}
diff --git a/themes/Theme-Minimal/stats.css b/themes/Theme-Minimal/stats.css
index 49659d5..ce9711d 100644
--- a/themes/Theme-Minimal/stats.css
+++ b/themes/Theme-Minimal/stats.css
@@ -1,6 +1,7 @@
 .stats {
+  margin: 0 auto !important;
   flex-direction: column;
-  max-width: 60ch;
+  max-width: 40ch;
   margin-bottom: 32px !important;
 
   .stats-element {
diff --git a/themes/Theme-Minimal/studio-tagger.css b/themes/Theme-Minimal/studio-tagger.css
new file mode 100644
index 0000000..941f4d8
--- /dev/null
+++ b/themes/Theme-Minimal/studio-tagger.css
@@ -0,0 +1,20 @@
+.StudioTagger {
+  .StudioTagger-studio {
+    background-color: unset;
+    .studio-card {
+      border-radius: 1rem;
+      img {
+        background-color: unset;
+      }
+    }
+    .StudioTagger-details {
+      margin-top: 1rem;
+
+      .StudioTagger-header {
+        h2 {
+          font-size: var(--text-xl);
+        }
+      }
+    }
+  }
+}