[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

Author: deuulc

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.

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:

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;
 }

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);
+}

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;
+  }
 }

themes/Theme-Minimal/popover.css

@@ -5,4 +5,9 @@
   .image-thumbnail {
     border-radius: 4px;
   }
+
+  .arrow::after,
+  .arrow::before {
+    border-bottom-color: var(--primary-2);
+  }
 }

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);
+    }
+  }
+}

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;
-  }
-}
+

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;
+}

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 {