Theme-Minimal: refresh for Stash v0.31 (0.3.0)

themes/Theme-Minimal/README.md

@@ -12,13 +12,41 @@ For intended experience:
 
 ## Screenshots
 
+### Version 0.3.0
+
+Taken on Stash v0.31.1 with demo content: fictional titles and names, blurred openly licensed photos (credits on the [screenshots branch](https://github.com/nexalapp/CommunityScripts/tree/screenshots)).
+
+| Scenes | Scene |
+|---|---|
+| ![Scenes](https://raw.githubusercontent.com/nexalapp/CommunityScripts/43c9691b1c39e40be1e918faa9a0a75183ba956a/Theme-Minimal/desktop-scenes.jpg) | ![Scene](https://raw.githubusercontent.com/nexalapp/CommunityScripts/43c9691b1c39e40be1e918faa9a0a75183ba956a/Theme-Minimal/desktop-scene.jpg) |
+
+| Performer | Studios |
+|---|---|
+| ![Performer](https://raw.githubusercontent.com/nexalapp/CommunityScripts/43c9691b1c39e40be1e918faa9a0a75183ba956a/Theme-Minimal/desktop-performer.jpg) | ![Studios](https://raw.githubusercontent.com/nexalapp/CommunityScripts/43c9691b1c39e40be1e918faa9a0a75183ba956a/Theme-Minimal/desktop-studios.jpg) |
+
+<img src="https://raw.githubusercontent.com/nexalapp/CommunityScripts/43c9691b1c39e40be1e918faa9a0a75183ba956a/Theme-Minimal/mobile-scenes.jpg" alt="Scenes on a phone" width="260"> <img src="https://raw.githubusercontent.com/nexalapp/CommunityScripts/43c9691b1c39e40be1e918faa9a0a75183ba956a/Theme-Minimal/mobile-scene.jpg" alt="A scene on a phone" width="260">
+
+### Version 0.1
+
 <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.3.0 - 2026-10-03
+
+- Refresh for Stash v0.29+: the list toolbar (its old `.scene-list-toolbar` selector no longer matches), filter drawer and sticky pagination.
+- Toolbar controls share a 34px hit area; pagination is centred with the result count beside it; the duplicate bottom pagination is hidden.
+- Resolution and duration share one chip; studio logo chip top-left; card spacing and caption inset on one 12px rhythm; studio and tag logos on a soft 16:9 tile.
+- Card counts are plain icon + number, aligned with the title.
+- Hover lifts the card on a soft shadow; selection is a 2px light ring.
+- One light primary action per screen; secondary actions are quiet grey pills.
+- Menu shows words only; scene title at 34px; full-bleed performer portrait with a 40px name and a tight field list.
+- Filter drawer one step lighter than the page; its toggle no longer sits half off the edge.
+- Meta text greys lifted so small text passes WCAG AA.
+
 ### Version 0.2.7 - 2025-04-07
 - Theme studio rating for real.
 - Remove card hover.

themes/Theme-Minimal/Theme-Minimal.yml

@@ -1,6 +1,6 @@
 name: Theme - Minimal
 description: Minimal Theme for Stash
-version: 0.2.8
+version: 0.3.0
 url: https://discourse.stashapp.cc/t/minimal/1421
 ui:
   css:

themes/Theme-Minimal/_theme.css

@@ -74,8 +74,8 @@
   --primary-6: #3c393f;
   --primary-7: #49474e;
   --primary-8: #625f69;
-  --primary-9: #6f6d78;
-  --primary-10: #7c7a85;
+  --primary-9: #78767f; /* lifted from #6f6d78 */
+  --primary-10: #8a8892; /* lifted from #7c7a85: meta text passes AA on --primary-1 */
   --primary-11: #b5b2bc;
   --primary-12: #eeeef0;
   --primary-a1: #00000000;

themes/Theme-Minimal/inputs.css

@@ -24,13 +24,16 @@
   }
 }
 
-.btn-primary {
-  background-color: var(--primary-6);
+.btn-primary:not(.minimal) {
+  background-color: var(--primary-12);
   border: 0;
-  color: var(--primary-12);
+  border-radius: 10px;
+  color: var(--primary-1);
+  font-weight: 600;
 
   &:hover {
-    background-color: var(--primary-7);
+    background-color: var(--primary-11);
+    color: var(--primary-1);
   }
 
   &:disabled {
@@ -42,6 +45,7 @@
 .btn-danger {
   background-color: var(--danger-6);
   border: 0;
+  border-radius: 10px;
   color: var(--danger-12);
 
   &:hover {
@@ -444,16 +448,77 @@ div.react-datepicker {
   font-size: var(--text-xs);
 }
 
+/* pagination centred with the count on the same row, at the right */
+.pagination-index-container {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 12px;
+  margin-top: 10px;
+  padding: 0 16px;
+
+  & > .pagination {
+    grid-column: 2;
+    margin: 0 !important;
+  }
+  & > .paginationIndex {
+    grid-column: 3;
+    justify-self: end;
+    margin: 0 !important;
+  }
+  & > .paginationIndex:only-child {
+    grid-column: 1 / -1;
+    justify-self: center;
+  }
+}
+@media (max-width: 575.98px) {
+  .pagination-index-container {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    & > .pagination,
+    & > .paginationIndex {
+      grid-column: 1;
+      justify-self: center;
+    }
+  }
+}
+/* the floating copy at the bottom stays, on the page ground */
+.pagination-footer-container .pagination {
+  background-color: var(--primary-1);
+}
+
 /* scene list toolbar and sidebar backgrounds */
+/* the filter drawer sits one step lighter than the page, with a hairline edge */
+.sidebar-pane .sidebar,
+.sidebar .sidebar-footer,
+.sidebar-toolbar {
+  background-color: var(--primary-2) !important;
+}
 .sidebar-pane .sidebar {
-  background-color: var(--primary-1) !important;
-  border-right: var(--primary-1) !important;
+  border-right: 1px solid var(--white-a1) !important;
 }
 
-.scene-list-toolbar.filtered-list-toolbar {
+.filtered-list-toolbar {
   background-color: var(--primary-1) !important;
 }
 
+/* every toolbar control shares a 34px hit area, so the bare row lines up */
+.filtered-list-toolbar {
+  gap: 8px;
+  .btn,
+  .form-control,
+  .page-size-selector select {
+    height: 34px;
+    border-radius: 10px;
+  }
+  .btn-group .btn {
+    border-radius: 8px !important;
+  }
+  .btn-secondary.active {
+    background-color: var(--primary-3) !important;
+  }
+}
+
 .list-results-header {
   background-color: var(--primary-1) !important;
 }
@@ -512,3 +577,82 @@ input[type="range"]::-webkit-slider-thumb {
     color: var(--primary-10);
   }
 }
+
+/* toolbar: bare text and icons at 13px; the sidebar toggle is a bare icon */
+.filtered-list-toolbar {
+  .btn,
+  .form-control,
+  select {
+    font-size: 13px;
+  }
+  .search-term-input .form-control {
+    background-color: transparent;
+    border: 0;
+  }
+}
+.sidebar-toggle-button-container .sidebar-toggle-button {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: 0 !important;
+  border-radius: 10px;
+  background-color: transparent !important;
+  color: var(--primary-11) !important;
+  opacity: 1;
+  margin-left: 0 !important; /* stock pulls it 15px left, half off the page */
+  &:hover {
+    background-color: var(--primary-3) !important;
+  }
+}
+
+/* Filter sidebar on small screens. Stash slides it over the page below 768px,
+   covering the button that closes it. Phones get a full-screen sheet whose
+   "Show N results" button is the way out; small tablets get the desktop
+   layout, the content pushed aside to a single column. */
+@media (max-width: 575.98px) {
+  .sidebar-pane:not(.hide-sidebar) {
+    z-index: 1020; /* above the performer header, which is its own layer */
+  }
+  .sidebar-pane:not(.hide-sidebar) > .sidebar {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: auto !important;
+    width: 100% !important;
+    max-width: none !important;
+    height: calc(100dvh - 46px) !important; /* down to the bottom bar */
+    max-height: none !important;
+    flex: none !important;
+    margin: 0 !important;
+    padding: 12px 15px 0 !important;
+    display: flex !important;
+    flex-direction: column;
+    z-index: 1020;
+    background-color: var(--primary-2) !important;
+  }
+  .sidebar-pane:not(.hide-sidebar) > .sidebar .sidebar-footer {
+    margin-top: auto;
+    bottom: 0;
+    left: 0 !important;
+    width: 100% !important;
+    padding: 12px 0 15px !important;
+    background: none !important;
+    border-top: 0 !important;
+  }
+  .sidebar-pane:not(.hide-sidebar) > .sidebar .sidebar-footer .btn {
+    width: 100%;
+    height: 44px;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .sidebar-pane:not(.hide-sidebar) > .sidebar-pane-content {
+    margin-left: 235px;
+  }
+  .sidebar-pane:not(.hide-sidebar) .sidebar-toggle-button-container {
+    left: 257px;
+  }
+  .sidebar-pane:not(.hide-sidebar) .grid-card {
+    width: calc(100% - 30px) !important; /* one column beside the filters */
+  }
+}

themes/Theme-Minimal/modal.css

@@ -11,3 +11,28 @@
   background-color: var(--primary-2);
   border-top: unset;
 }
+
+/* Phones: dialogs (Edit filter and the rest) fill the screen down to the
+   bottom bar; the body scrolls and the buttons stay at the foot */
+@media (max-width: 575.98px) {
+  .modal-dialog {
+    max-width: none !important;
+    width: 100% !important;
+    margin: 0 !important;
+    height: calc(100dvh - 46px);
+  }
+  .modal-content {
+    height: 100%;
+    border-radius: 0 !important;
+    border: 0 !important;
+    background-color: var(--primary-2) !important;
+  }
+  .modal-body {
+    flex: 1;
+    max-height: none !important; /* Stash caps it at a fixed height */
+    overflow-y: auto;
+  }
+  .modal-footer {
+    flex-wrap: nowrap;
+  }
+}