[theme] minimal v0.2.4

themes/Theme-Minimal/README.md

@@ -17,6 +17,13 @@ For intended experience:
 
 ## Changelog
 
+### Version 0.2.4 - 2025-04-06
+
+- Increase contrast for settings toggles
+- Fix popover arrow theming
+- Theme performer scraper
+- Theme player vtt preview and markers
+
 ### Version 0.2.3 - 2025-04-05
 
 - Fix studio image in scene view.

themes/Theme-Minimal/Theme-Minimal.yml

@@ -1,6 +1,6 @@
 name: Theme - Minimal
 description: Minimal Theme for Stash
-version: 0.2.3
+version: 0.2.4
 ui:
   css:
     - index.css
@@ -17,8 +17,8 @@ ui:
     - popover.css
     - studio.css
     - nav-bar.css
-    - studio-tagger.css
     - scene-tagger.css
+    - studio-performer-tagger.css
     - skeleton.css
   assets:
     /: ./assets

themes/Theme-Minimal/_theme.css

@@ -138,6 +138,19 @@
   --black-a11: rgba(0, 0, 0, 0.9);
   --black-a12: rgba(0, 0, 0, 0.95);
 
+  --white-a1: rgba(255, 255, 255, 0.05);
+  --white-a2: rgba(255, 255, 255, 0.1);
+  --white-a3: rgba(255, 255, 255, 0.15);
+  --white-a4: rgba(255, 255, 255, 0.2);
+  --white-a5: rgba(255, 255, 255, 0.3);
+  --white-a6: rgba(255, 255, 255, 0.4);
+  --white-a7: rgba(255, 255, 255, 0.5);
+  --white-a8: rgba(255, 255, 255, 0.6);
+  --white-a9: rgba(255, 255, 255, 0.7);
+  --white-a10: rgba(255, 255, 255, 0.8);
+  --white-a11: rgba(255, 255, 255, 0.9);
+  --white-a12: rgba(255, 255, 255, 0.95);
+
   --text-3xs: 0.5rem; /* 8px */
   --text-2xs: 0.625rem; /* 10px */
   --text-xs: 0.75rem; /* 12px */

themes/Theme-Minimal/inputs.css

@@ -383,9 +383,70 @@ div.react-datepicker {
   border: unset;
 }
 
+/* ios toggle */
+/* :before is background pill */
+.custom-control-input ~ .custom-control-label:before {
+  /* color: var(--primary-11); */
+  border-color: var(--primary-6);
+  background-color: var(--primary-6);
+}
+.custom-control-input:checked ~ .custom-control-label:before {
+  /* color: var(--primary-12); */
+  border-color: var(--primary-6);
+  background-color: var(--primary-6);
+}
+/* due to hierarchy parent can disabled checked child*/
+.custom-switch
+  .custom-control-input:disabled:checked
+  ~ .custom-control-label:before {
+  border-color: var(--primary-6);
+  background-color: var(--primary-6);
+}
+
+/* :after is moving cirle */
+.custom-switch .custom-control-input ~ .custom-control-label:after {
+  /* color: var(--primary-11); */
+  /* border-color: var(--primary-4); */
+  background-color: var(--primary-2);
+
+  box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0);
+  transition: all 0.3s ease-out, box-shadow 1s ease-out;
+}
+.custom-switch .custom-control-input:checked ~ .custom-control-label:after {
+  /* color: var(--primary-12); */
+  /* border-color: var(--primary-7); */
+  background-color: var(--primary-12);
+  box-shadow: 0 0 20px 2px rgba(255, 255, 255, 0.5);
+  animation-delay: 0.5s;
+}
+
+/* scene/studio filter buttons */
+.filtered-list-toolbar.btn-toolbar,
+.pagination {
+  .btn {
+    border-left: 0;
+    border-right: 0;
+  }
+  .btn-secondary {
+    &.active {
+      color: var(--primary-12);
+      background-color: unset;
+      svg {
+        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
+      }
+    }
+    color: var(--primary-11);
+  }
+}
+
+.filter-container.text-muted.paginationIndex.center-text {
+  color: var(--primary-10) !important;
+  font-size: var(--text-xs);
+}
+
 /* sliders */
 input[type="range"]::-moz-range-track {
-  background: var(--primary-5);
+  background: var(--primary-4);
 }
 input[type="range"]::-moz-range-thumb {
   border-radius: 50%;
@@ -395,18 +456,32 @@ input[type="range"]::-moz-range-thumb {
 
 input[type="range"]:active::-moz-range-track,
 input[type="range"]:focus::-moz-range-track {
-  background: var(--primary-5);
+  background: var(--primary-4);
 }
 input[type="range"]::-webkit-slider-runnable-track {
-  background: var(--primary-5);
+  background: var(--primary-4);
 }
 input[type="range"]:active::-webkit-slider-runnable-track,
 input[type="range"]:focus::-webkit-slider-runnable-track {
-  background: var(--primary-5);
+  background: var(--primary-4);
 }
 
 input[type="range"]::-webkit-slider-thumb {
   border-radius: 50%;
   background: var(--primary-10);
   border: 1px solid var(--primary-10);
 }
+
+/* player side-bar */
+.organized-button {
+  transition: filter, color ease-in 0.5;
+  &.organized {
+    color: var(--primary-12);
+    svg {
+      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
+    }
+  }
+  &.not-organized {
+    color: var(--primary-10);
+  }
+}

themes/Theme-Minimal/player.css

@@ -192,12 +192,85 @@
   border-radius: 8px;
   overflow: hidden;
 
+  font-family: unset;
+
   .vjs-poster {
     background-color: var(--primary-1);
   }
 
   .vjs-vtt-thumbnail-display {
+    box-shadow: unset;
+    outline: 3px solid var(--black-a7);
+    backdrop-filter: blur(10px);
     border: unset;
-    border-radius: 0.8rem;
+    border-radius: 12px;
+
+    bottom: 72px;
+  }
+
+  .vjs-progress-holder.vjs-slider {
+    border-radius: 12px;
+    background-color: var(--white-a3);
+
+    .vjs-load-progress {
+      background-color: var(--white-a4);
+    }
+    .vjs-load-progress {
+      /* divs are watched sections */
+      div {
+        background-color: var(--white-a5);
+      }
+    }
+
+    .vjs-play-progress.vjs-slider-bar {
+      border-top-left-radius: 12px;
+      border-bottom-left-radius: 12px;
+      background-color: var(--white-a10);
+    }
+
+    .vjs-mouse-display {
+      .vjs-marker-tooltip,
+      .vjs-time-tooltip {
+        background-color: var(--black-a7);
+        backdrop-filter: blur(10px);
+        border-radius: 8px;
+        padding: 6px 8px;
+
+        color: var(--primary-12);
+        font-size: var(--text-2xs);
+        font-family: unset;
+        font-weight: 500;
+
+        /* same width as thumbnail-display */
+        max-width: 160px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+        /* fix positioning */
+        right: unset !important;
+        transform: translate(-50%, 50%);
+        top: -50px;
+      }
+    }
+  }
+
+  .vjs-marker-dot {
+    top: 13px;
+
+    &:hover {
+      /* removes scaling */
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .vjs-marker-dot,
+  .vjs-marker-range {
+    background-color: var(--white-a8) !important;
+    position: absolute;
+    height: 4px;
+    border-radius: 2px;
+    box-shadow: unset;
+    transition: none;
   }
 }

themes/Theme-Minimal/popover.css

@@ -9,5 +9,6 @@
   .arrow::after,
   .arrow::before {
     border-bottom-color: var(--primary-2);
+    border-top-color: var(--primary-2);
   }
 }

themes/Theme-Minimal/scenes.css

@@ -11,6 +11,8 @@
     color: unset;
     text-decoration: none;
     font-size: var(--text-lg);
+    /* demo */
+    /* filter: blur(3px); */
   }
 
   .card-controls {
@@ -91,8 +93,8 @@
 
         white-space: nowrap;
         text-overflow: ellipsis;
-        width: 100%;
         overflow: hidden;
+        width: 100%;
       }
 
       a:has(> img) {

themes/Theme-Minimal/settings.css

@@ -41,18 +41,6 @@
   }
 }
 
-.custom-control-input ~ .custom-control-label:before {
-  color: var(--primary-11);
-  border-color: var(--primary-5);
-  background-color: var(--primary-5);
-}
-
-.custom-control-input:checked ~ .custom-control-label:before {
-  color: var(--primary-12);
-  border-color: var(--primary-7);
-  background-color: var(--primary-7);
-}
-
 .setting-section {
   display: flex;
   flex-direction: column;

themes/Theme-Minimal/shared.css

@@ -97,8 +97,20 @@
 /* tags */
 
 .tag-item {
-  background-color: var(--primary-4);
+  background-color: var(--black-a7);
+  backdrop-filter: blur(10px);
+  border-radius: 8px;
+  padding: 6px 10px;
+
   color: var(--primary-12);
+  font-size: var(--text-2xs);
+  font-family: unset;
+  font-weight: 500;
+
+  .btn-secondary {
+    color: var(--primary-12);
+    opacity: 1;
+  }
 }
 
 .badge-secondary {

themes/Theme-Minimal/studio-performer-tagger.css

@@ -0,0 +1,59 @@
+.StudioTagger,
+.PerformerTagger {
+  .StudioTagger-studio,
+  .PerformerTagger-performer {
+    background-color: unset;
+    .studio-card,
+    .performer-card {
+      border-radius: 12px;
+      img {
+        background-color: unset;
+      }
+    }
+    .StudioTagger-details,
+    .PerformerTagger-details {
+      margin-top: 1rem;
+
+      .StudioTagger-header,
+      .PerformerTagger-header {
+        h2 {
+          font-size: var(--text-xl);
+        }
+      }
+
+      .text-left h5 {
+        color: var(--primary-11);
+        font-weight: unset;
+        font-size: var(--text-xs);
+      }
+
+      .PerformerTagger-performer-search {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+        gap: 24px;
+        button.PerformerTagger-performer-search-item {
+          flex: unset;
+          max-width: unset;
+          width: min-content;
+          border-radius: 8px;
+
+          padding: 12px;
+          align-items: flex-start;
+          gap: 12px;
+
+          img.PerformerTagger-thumb {
+            height: 80px;
+            border-radius: 6px;
+            margin-right: 0;
+          }
+
+          span {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+}