[theme] Minimal 0.2 Release (#513)

* fix scene selector

* rework scene overaly

* move nav-bar to seperate file

* add readme about studio image

* make studio settings generic

* add 0.2 change log to readme

* fix auto play

* make studio overlay readable

* update readme

* update version

Author: deuulc

themes/Theme-Minimal/README.md

@@ -4,8 +4,23 @@ I've tried to create a theme that brings content to the front while reducing men
 
 It's still rough around the edges and very much a work in progress. Feedback is welcome!
 
+For intended experience:
+
+- Turn off studio images in card view.
+
 ## Screenshots
+
 <img width="1792" alt="stash--minimal-theme-v0 1--performers" src="https://github.com/user-attachments/assets/9050c621-deb8-4ede-b6ca-f759e89f1519" />
 <img width="1792" alt="stash--minimal-theme-v0 1--tags" src="https://github.com/user-attachments/assets/fb562bdc-cf5c-4bd8-ab5e-1ee1147ba068" />
 <img width="1792" alt="stash--minimal-theme-v0 1--settings" src="https://github.com/user-attachments/assets/65befac3-74c4-4b6f-a999-8ff0e8e9dc40" />
 <img width="1792" alt="stash--minimal-theme-v0 1--scenes" src="https://github.com/user-attachments/assets/05d45f6e-7fb7-4ed8-b2af-5a153bdb3611" />
+
+## Changelog
+
+### Version 0.2 - 2025-03-15
+
+- Themed the tagger view for a more cohesive look.
+- Restyled and refactored the navbar for improved usability and aesthetics.
+- Restyled all the scene card information overlays to enhance clarity and visual appeal.
+- Fixed the scene card selector to ensure proper functionality.
+- Fixed scene auto play.

themes/Theme-Minimal/Theme-Minimal.yml

@@ -1,6 +1,6 @@
 name: Theme - Minimal
 description: Minimal Theme for Stash
-version: 0.1.1
+version: 0.2
 ui:
   css:
     - index.css
@@ -16,6 +16,7 @@ ui:
     - markers-wall.css
     - popover.css
     - studio.css
+    - navbar.css
   assets:
     /: ./assets
   javascript:

themes/Theme-Minimal/index.css

@@ -17,34 +17,6 @@ body {
   padding-top: 0;
 }
 
-.top-nav {
-  height: var(--nav-bar-height);
-  position: sticky;
-}
-
-.main {
-  padding-top: 12px;
-}
-
-.navbar-toggler {
-  color: unset;
-  padding: 0.5em 0;
-  text-align: center;
-  width: 3em;
-}
-
-.navbar-buttons .btn {
-  align-items: center;
-  display: flex;
-}
-
-.nav-link {
-  padding: 0;
-  svg {
-    color: var(--primary-11);
-  }
-}
-
 .bg-dark {
   background-color: var(--primary-2) !important;
 }

themes/Theme-Minimal/nav-bar.css

@@ -0,0 +1,67 @@
+.top-nav {
+  height: var(--nav-bar-height);
+  background-color: var(--primary-1) !important;
+  position: sticky;
+
+  .btn {
+    font-size: var(--text-sm);
+    color: var(--primary-11);
+    padding-top: 0.5cap !important;
+    padding-bottom: 0.5cap !important;
+    transition: color 0.2s ease-in-out;
+
+    &.active,
+    &:active {
+      color: var(--primary-12);
+      background-color: unset !important;
+      svg {
+        color: var(--primary-12);
+      }
+    }
+
+    &:hover {
+      color: var(--primary-12);
+      svg {
+        color: var(--primary-11);
+      }
+    }
+
+    svg {
+      transition: color 0.2s ease-in-out;
+      margin-left: 0.5ch;
+      margin-right: 1ch;
+      color: var(--primary-9);
+    }
+  }
+
+  .navbar-brand {
+    font-size: inherit;
+  }
+
+  .navbar-collapse {
+    background-color: var(--primary-1) !important;
+  }
+}
+
+.main {
+  padding-top: 12px;
+}
+
+.navbar-toggler {
+  color: unset;
+  padding: 0.5em 0;
+  text-align: center;
+  width: 3em;
+}
+
+.navbar-buttons .btn {
+  align-items: center;
+  display: flex;
+}
+
+.nav-link {
+  padding: 0;
+  svg {
+    color: var(--primary-11);
+  }
+}

themes/Theme-Minimal/scenes.css

@@ -7,12 +7,6 @@
   padding: 20px;
   margin: 8px;
 
-  /* demo */
-  /* .scene-card-preview-image,
-  .performer-card-image {
-    filter: blur(50px);
-  } */
-
   a .card-section-title {
     color: unset;
     text-decoration: none;
@@ -28,7 +22,7 @@
 
     position: absolute;
     top: 0.7rem;
-    z-index: 1;
+    z-index: 20;
   }
 
   .card-check,
@@ -38,11 +32,17 @@
     width: 1.2rem;
   }
 
-  &:hover .progress-bar,
-  &:hover .rating-banner,
-  &:hover .scene-spec-overlay {
-    transition: opacity 0.3s;
-    opacity: 0;
+  &:hover,
+  &:active {
+    .thumbnail-section {
+      .progress-bar,
+      .rating-banner,
+      .scene-spec-overlay,
+      .studio-overlay {
+        transition: opacity 0.5s ease-in-out;
+        opacity: 0;
+      }
+    }
   }
 
   .thumbnail-section {
@@ -54,40 +54,102 @@
       margin-bottom: 0;
     }
 
-    .rating-banner {
-      backdrop-filter: blur(10px);
-      transform: none;
-      left: 0;
-      top: 0;
+    .studio-overlay,
+    .rating-banner,
+    .overlay-resolution,
+    .overlay-duration {
+      height: auto;
 
       margin: 8px;
-      padding: 5px 7px;
+      padding: 6px 8px;
       border-radius: 8px;
       line-height: 1;
 
       font-size: var(--text-2xs);
       font-weight: normal;
+      color: var(--primary-12);
+      background-color: var(--black-a6);
+      backdrop-filter: blur(10px);
 
-      color: var(--primary-11);
+      opacity: unset;
+
+      letter-spacing: 0.05ch;
+    }
+
+    .studio-overlay {
+      right: 0;
+      top: 0;
+
+      height: unset;
+      max-width: unset;
+      /* opacity: 1; */
+      transition: opacity 0.5s;
+
+      a {
+        text-transform: uppercase;
+        color: inherit;
+        text-shadow: none;
+        text-decoration: none;
+        letter-spacing: inherit;
+      }
+    }
+
+    .rating-banner {
+      transform: none;
+      left: 0;
+      top: 0;
+      border-style: solid;
+      border-width: 0.5px;
+      background-color: unset;
 
       &.rating-5 {
-        background-color: var(--rating-5-background);
+        background-color: transparent;
+        background-image: linear-gradient(
+          to right,
+          var(--rating-5-background),
+          rgba(102, 136, 70, 0.75)
+        );
+        border-color: rgba(153, 204, 105, 0.25);
       }
 
       &.rating-4 {
-        background-color: var(--rating-4-background);
+        background-color: transparent;
+        background-image: linear-gradient(
+          to right,
+          var(--rating-4-background),
+          rgba(134, 106, 0, 0.75)
+        );
+        border-color: rgba(201, 159, 0, 0.25);
       }
 
       &.rating-3 {
-        background-color: var(--rating-3-background);
+        background-color: transparent;
+        background-image: linear-gradient(
+          to right,
+          var(--rating-3-background),
+          rgba(154, 96, 0, 0.75)
+        );
+        border-color: rgba(231, 144, 0, 0.25);
       }
 
       &.rating-2 {
-        background-color: var(--rating-2-background);
+        background-color: transparent;
+        background-image: linear-gradient(
+          to right,
+          var(--rating-2-background),
+          rgba(172, 80, 0, 0.75)
+        );
+        border-color: rgba(255, 120, 0, 0.25);
       }
 
       &.rating-1 {
-        background-color: var(--rating-1-background);
+        background-color: transparent;
+        background-image: linear-gradient(
+          to right,
+          var(--rating-1-background),
+          rgba(188, 56, 44, 0.75)
+        );
+        border-color: rgba(255, 84, 66, 0.25);
       }
     }
 
@@ -96,50 +158,17 @@
       right: 0;
       bottom: 0;
 
-      margin: 8px;
-
-      line-height: 1;
-      font-size: var(--text-2xs);
-
       display: flex !important;
       justify-content: space-between;
-      gap: 0.25ch;
       align-items: center;
-
-      .overlay-resolution {
-        color: var(--primary-11);
-        background-color: var(--black-a5);
-        backdrop-filter: blur(10px);
-        font-weight: normal;
-        padding: 5px 7px;
-        border-radius: 8px;
-      }
-
-      .overlay-duration {
-        color: var(--primary-11);
-        background-color: var(--black-a5);
-        backdrop-filter: blur(10px);
-        font-weight: normal;
-        padding: 5px 7px;
-        border-radius: 8px;
-      }
     }
 
     .preview-scrubber {
       .hover-scrubber {
-        height: 100%;
-
-        .hover-scrubber-area {
-          height: 100%;
-        }
-
         .hover-scrubber-indicator {
-          height: 4px;
+          background-color: unset;
           .hover-scrubber-indicator-marker {
             background-color: var(--primary-a10);
-            backdrop-filter: blur(10px);
-            border-radius: 0 4px 0 0;
-            height: 4px;
           }
         }
       }
@@ -170,16 +199,19 @@
       min-height: 0;
       margin-bottom: 0;
       height: auto;
+
       .scene-card__date {
         font-size: var(--text-xs);
         color: var(--primary-11);
         line-height: 1;
       }
+
       .scene-card__description {
         display: none;
       }
     }
   }
+
   hr {
     margin-top: 0;
     display: none;
@@ -215,6 +247,7 @@
   table {
     border-collapse: separate;
     border-spacing: 0px 20px;
+
     thead {
       background-color: unset;
 
@@ -234,6 +267,7 @@
 
     tbody {
       background-color: unset;
+
       tr {
         &:hover {
           background-color: var(--primary-2);