From f95b93d8a5b3cc5e0cdd7841ffa2bf7cb59bbfc2 Mon Sep 17 00:00:00 2001 From: nexalapp <108235158+nexalapp@users.noreply.github.com> Date: Sun, 4 Oct 2026 14:51:37 -0600 Subject: [PATCH] Theme-Night: refresh for Stash v0.31 (1.0) Co-Authored-By: Claude Opus 5.5 (1M context) --- themes/Theme-Night/README.md | 18 +- themes/Theme-Night/Theme-Night.css | 843 ++++++++++++++++++++++++++--- themes/Theme-Night/Theme-Night.yml | 2 +- 3 files changed, 785 insertions(+), 78 deletions(-) diff --git a/themes/Theme-Night/README.md b/themes/Theme-Night/README.md index d4e16ad6..aeef285a 100644 --- a/themes/Theme-Night/README.md +++ b/themes/Theme-Night/README.md @@ -1,3 +1,19 @@ # Night -https://discourse.stashapp.cc/t/night/1425 \ No newline at end of file +https://discourse.stashapp.cc/t/night/1425 + +True black with one cinema red. Version 1.0 refreshes the theme for Stash v0.31: uppercase red nav labels with the active page on a grey pill, dark bordered toolbar boxes with red icons and a red-filled active view, red dates, headings and labels with light grey paragraphs, red text lifted so it passes WCAG AA on black, and styling for the newer parts of Stash (filter sidebar, selection toolbar, performer header, settings, dialogs). The stock blue no longer shows through. + +## Screenshots + +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/5f964efdf7d4dbd85e42c22e6b23fdaffd5ef4f0/Theme-Night/desktop-scenes.jpg) | ![Scene](https://raw.githubusercontent.com/nexalapp/CommunityScripts/5f964efdf7d4dbd85e42c22e6b23fdaffd5ef4f0/Theme-Night/desktop-scene.jpg) | + +| Performer | Studios | +|---|---| +| ![Performer](https://raw.githubusercontent.com/nexalapp/CommunityScripts/5f964efdf7d4dbd85e42c22e6b23fdaffd5ef4f0/Theme-Night/desktop-performer.jpg) | ![Studios](https://raw.githubusercontent.com/nexalapp/CommunityScripts/5f964efdf7d4dbd85e42c22e6b23fdaffd5ef4f0/Theme-Night/desktop-studios.jpg) | + +Scenes on a phone A scene on a phone diff --git a/themes/Theme-Night/Theme-Night.css b/themes/Theme-Night/Theme-Night.css index 9093c882..230e3514 100644 --- a/themes/Theme-Night/Theme-Night.css +++ b/themes/Theme-Night/Theme-Night.css @@ -1,79 +1,115 @@ /* -Night theme Version 0.1. +Night theme Version 1.0, refreshed for Stash v0.31. +True black with one cinema red. */ +:root { + --night-bg: #0a0a0a; /* page */ + --night-bar: #101010; /* nav, sidebar */ + --night-card: #161616; /* cards, toolbar boxes, menus */ + --night-raised: #1e2227; /* active pill, hover */ + --night-line: #262626; /* every hairline */ + --night-text: #f2f2f2; + --night-text-2: #b3b3b3; + --night-text-3: #8c8c8c; + --night-red: #d6141c; /* fills, rings, toggles */ + --night-red-text: #f2454b; /* red text, lifted to pass AA on black */ + --night-radius: 6px; + --night-radius-sm: 4px; +} + body { - color: #bb0009; - background-color: #000000; + color: var(--night-text); + background-color: var(--night-bg); } .bg-dark { - background-color: #1a1a1b !important; + background-color: var(--night-bar) !important; } .card { - background-color: #30404d; - border-radius: 3px; - box-shadow: - 0 0 0 1px rgba(16, 22, 26, 0.4), - 0 0 0 rgba(16, 22, 26, 0), - 0 0 0 rgba(16, 22, 26, 0); - padding: 20px; - background-color: rgba(0, 0, 0, 0.3); + background-color: var(--night-card); + border: 1px solid var(--night-line); + border-radius: var(--night-radius); + box-shadow: none; } .bg-secondary { - background-color: #313437 !important; + background-color: var(--night-card) !important; } .text-white { - color: #bb0009 !important; + color: var(--night-text) !important; } .border-secondary { - border-color: #2f3335 !important; -} - -.btn-secondary.filter-item.col-1.d-none.d-sm-inline.form-control { - background-color: rgba(0, 0, 0, 0.15); + border-color: var(--night-line) !important; } .btn-secondary { - color: #bb0009; - background-color: rgba(0, 0, 0, 0.15); + color: var(--night-red-text); + background-color: var(--night-card); + border-color: var(--night-line); } -.btn-primary { - color: #bb0009; - background-color: #bb0009; +.btn-secondary:hover { + color: var(--night-text); + background-color: var(--night-raised); + border-color: var(--night-line); } a { - color: hsla(0, 0%, 100%, 0.45); + color: var(--night-text-2); } .btn.active { - background-color: #2f3335; - color: #bb0009; + background-color: var(--night-raised); + color: var(--night-red-text); } -minimal.w-100.active.btn.btn-primary { - background-color: #bb0009; - color: #bb0009; +/* Primary actions: white outline; Delete filled red */ +.btn-primary { + color: var(--night-text); + background-color: transparent; + border-color: var(--night-text); } -.btn-primary { +.btn-primary:hover { + color: #000; + background-color: var(--night-text); + border-color: var(--night-text); +} + +.btn-primary:not(:disabled):not(.disabled).active, +.btn-primary:not(:disabled):not(.disabled):active, +.show > .btn-primary.dropdown-toggle { + color: var(--night-text); + background-color: var(--night-raised); + border-color: var(--night-red); +} + +.btn-danger { color: #fff; - background-color: #1a1a1b; - border-color: #374242; + background-color: var(--night-red); + border-color: var(--night-red); +} + +.nav-tabs { + border-bottom: 1px solid var(--night-line); } -.nav-tabs .nav-link.active { - color: #bb0009; +.nav-tabs .nav-link { + outline: 0; + color: var(--night-red-text); + border: 0; + border-radius: var(--night-radius-sm) var(--night-radius-sm) 0 0; } +.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover { - border-bottom-color: #bb0009; + color: var(--night-text); + background-color: var(--night-raised); + border-bottom: 2px solid var(--night-red); outline: 0; } @@ -89,14 +125,13 @@ minimal.w-100.active.btn.btn-primary { display: none; } -.nav-tabs .nav-link { - outline: 0; - color: #bb0009; -} - .input-control, -.input-control:focus { - background-color: rgba(16, 22, 26, 0.3); +.input-control:focus, +.form-control, +.form-control:focus { + color: var(--night-text); + background-color: var(--night-card); + border-color: var(--night-line); } #performer-page .image-container .performer { @@ -104,24 +139,21 @@ minimal.w-100.active.btn.btn-primary { box-shadow: 0 0 2px rgba(0, 0, 0, 0.35); } -.btn-primary:not(:disabled):not(.disabled).active, -.btn-primary:not(:disabled):not(.disabled):active, -.show > .btn-primary.dropdown-toggle { - color: #fff; - border-color: #bb0009; +/* Settings: grey pill under the active item */ +.nav-pills .nav-link { + color: var(--night-text-2); + border-radius: var(--night-radius-sm); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { - background-color: #1a1a1b; + color: var(--night-text); + background-color: var(--night-raised); } -.btn-primary:not(:disabled):not(.disabled).active, -.btn-primary:not(:disabled):not(.disabled):active, -.show > .btn-primary.dropdown-toggle { - color: #fff; - background-color: #2f3335; - border-color: #bb0009; +input[type="range"], +input[type="checkbox"] { + accent-color: var(--night-red); } input[type="range"]::-moz-range-track { @@ -129,65 +161,724 @@ input[type="range"]::-moz-range-track { } input[type="range"]::-moz-range-thumb { - background: #bcbcbc; + background: var(--night-text); } div.react-select__control { - background-color: hsla(0, 0%, 39.2%, 0.4); - color: #182026; - border-color: #394b59; + background-color: var(--night-card); + color: var(--night-text); + border-color: var(--night-line); cursor: pointer; } +div.react-select__menu { + background-color: var(--night-card); +} + .scene-wall-item-text-container { background: radial-gradient( farthest-corner at 50% 50%, rgba(50, 50, 50, 0.5) 50%, #323232 100% ); - color: #bb0009; + color: var(--night-red-text); } .btn-link { font-weight: 500; - color: #bb0009; + color: var(--night-red-text); text-decoration: none; } +/* Top nav: uppercase bold red labels, the active page on a grey pill */ button.minimal.brand-link.d-none.d-md-inline-block.btn.btn-primary { - text-transform: uppercase; - font-weight: bold; - color: #bb0009; + color: var(--night-text); + font-weight: 600; + border: 0; } a.minimal { text-transform: uppercase; font-weight: bold; - color: #bb0009; + color: var(--night-red-text); } + a:hover { - color: hsla(0, 0%, 100%, 0.7); + color: var(--night-text); } option { - background-color: #1a1a1b; + background-color: var(--night-card); } + .scrubber-tags-background { - background-color: #202351; + background-color: var(--night-raised); } -.btn-primary.btn.settings-button.minimal { - color: #007dd0; +/* Top-right icons: red, not the stock blue (or the old green logout) */ +.navbar-buttons .btn.minimal, +.btn-primary.btn.settings-button.minimal, +.btn-primary.btn.logout-button.minimal { + color: var(--night-red-text); + background-color: transparent; + border-color: transparent; } -button.minimal.btn.btn-primary { - color: #007dd0; +.scrubber-viewport { + background-color: var(--night-bar); +} + +/* ---------- Stash v0.29+ refresh ---------- */ + +.navbar { + border-bottom: 1px solid var(--night-line); +} +.navbar-collapse > .navbar-nav > div > a { + display: flex !important; + flex-direction: row !important; /* stock stacks icon over label */ + align-items: center; + height: 32px; + padding: 0 12px !important; + border-radius: var(--night-radius); + font-size: 13px; + letter-spacing: 0.04em; +} +.navbar-collapse > .navbar-nav > div > a.active { + color: var(--night-text) !important; + background-color: var(--night-raised) !important; +} +@media (min-width: 1200px) { + .navbar-collapse > .navbar-nav > div > a svg { + display: none !important; /* words only on desktop */ + } +} +.top-nav a[href$="/new"] .btn { + color: var(--night-text); + background-color: transparent; + border: 1px solid var(--night-text); +} + +/* List toolbar: dark bordered 34px boxes, red glyphs, red-filled active view */ +.filtered-list-toolbar { + background-color: transparent !important; + gap: 8px; +} +.filtered-list-toolbar .btn-group, +.filtered-list-toolbar .sort-by-select { + height: 34px; + background-color: var(--night-card); + border: 1px solid var(--night-line); + border-radius: var(--night-radius); + padding: 2px; + gap: 2px; + align-items: center; +} +.filtered-list-toolbar .btn-group .btn-group { + border: 0; + padding: 0; + height: auto; + background: none; +} +.filtered-list-toolbar .btn-group .btn, +.filtered-list-toolbar .sort-by-select .btn { + height: 28px !important; /* the saved-filter button sits one group deeper */ + padding: 0 9px; + color: var(--night-red-text); + border: 0 !important; + border-radius: var(--night-radius-sm) !important; + background: none !important; + box-shadow: none !important; +} +.filtered-list-toolbar .btn-group .btn:hover { + background-color: var(--night-raised) !important; +} +.filtered-list-toolbar .btn-group .btn.active { + color: #fff !important; + background-color: var(--night-red) !important; +} +.filtered-list-toolbar .btn-group .btn-danger { + color: #fff !important; + background-color: var(--night-red) !important; +} +.filtered-list-toolbar .search-term-input .form-control, +.filtered-list-toolbar .page-size-selector select { + height: 34px; + background-color: var(--night-card) !important; + border: 1px solid var(--night-line) !important; + border-radius: var(--night-radius) !important; +} +.filtered-list-toolbar .page-size-selector select { + color: var(--night-red-text); +} +.filtered-list-toolbar.has-selection .selected-items-info span { + color: var(--night-red-text); + font-weight: 600; +} +.item-list-container .filtered-list-toolbar.has-selection { + background-color: var(--night-bg) !important; + border-bottom: 1px solid var(--night-line); +} +.sidebar-toggle-button-container .sidebar-toggle-button { + width: 34px; + height: 34px; + padding: 0; + margin-left: 0 !important; /* stock hangs it half off the page */ + color: var(--night-red-text); + background-color: var(--night-card) !important; + border: 1px solid var(--night-line) !important; + border-radius: var(--night-radius) !important; + opacity: 1; +} +.sidebar-pane .sidebar, +.sidebar .sidebar-footer, +.sidebar-toolbar { + background-color: var(--night-bar) !important; +} +.sidebar-pane .sidebar { + border-right: 1px solid var(--night-line); +} +.zoom-slider { + accent-color: var(--night-red); +} +/* Size slider: red track, white thumb (stock is blue) */ +input[type="range"].zoom-slider::-webkit-slider-runnable-track { + height: 4px; + border-radius: 2px; + background: var(--night-red); +} +input[type="range"].zoom-slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 14px; + height: 14px; + margin-top: -5px; + border: 0; + border-radius: 50%; + background: var(--night-text) !important; +} +.zoom-slider::-moz-range-track { + height: 4px; + background: var(--night-red) !important; +} +.zoom-slider::-moz-range-thumb { + border: 0; + background: var(--night-text); +} + +/* Pagination centred, with the result count on the same row; the floating + bottom pagination stays */ +.pagination-index-container { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + gap: 12px; + margin-top: 10px; +} +.pagination-index-container > .pagination { + grid-column: 2; + margin: 0 !important; +} +.pagination-index-container > .paginationIndex { + grid-column: 3; + justify-self: end; + margin: 0 !important; + font-size: 13px; + color: var(--night-text-2); +} +.pagination-index-container > .paginationIndex:only-child { + grid-column: 1 / -1; + justify-self: center; +} +.pagination.btn-group { + background-color: var(--night-card); + border: 1px solid var(--night-line); + border-radius: var(--night-radius); + padding: 2px; + gap: 2px; +} +.pagination .btn, +.pagination .btn:first-child, +.pagination .btn:last-child { + color: var(--night-red-text); + border: 0 !important; + border-radius: var(--night-radius-sm) !important; + background: none; +} +.pagination .btn:hover { + color: var(--night-text); + background-color: var(--night-raised); +} +.pagination .btn.active, +.pagination .btn:disabled { + color: var(--night-text); +} +@media (max-width: 575.98px) { + .pagination-index-container { + grid-template-columns: 1fr; + justify-items: center; + } + .pagination-index-container > .pagination, + .pagination-index-container > .paginationIndex { + grid-column: 1; + justify-self: center; + } +} + +/* Cards: hover lifts 2px with a red hairline; selection is a 2px red ring */ +.grid-card { + overflow: hidden; + display: flex; + flex-direction: column; + padding: 0; + transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s, border-color 0.2s; +} +.grid-card:hover { + transform: translateY(-2px); + border-color: var(--night-red); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); +} +.grid-card:has(.card-check:checked) { + border-color: var(--night-red); + box-shadow: 0 0 0 1px var(--night-red); +} +.grid-card .thumbnail-section { + overflow: hidden; + flex: none; /* never squeezed by the text below it */ +} +.grid-card .card-section { + padding: 12px 14px 0 !important; +} +.grid-card .card-section-title { + color: var(--night-text); + font-size: 16px !important; + font-weight: 500 !important; +} +.scene-card__date, +.performer-card__age { + color: var(--night-red-text) !important; + font-size: 13px; +} +.scene-card__details { + margin-bottom: 0 !important; +} +.scene-card__description, +.TruncatedText.scene-card__description { + color: var(--night-text-2); + font-size: 13px; +} +.grid-card .card-popovers { + margin: auto 0 0 !important; + padding: 12px 14px !important; + justify-content: center !important; + gap: 24px; +} +.grid-card hr { + display: none; +} +.grid-card .card-popovers .btn { + color: var(--night-text); + border: 0 !important; + background: none !important; + box-shadow: none !important; + padding: 0 !important; +} +.grid-card .card-popovers .btn:hover { + color: var(--night-red-text); +} +.scene-card .scene-specs-overlay { + font-size: 12px !important; + font-weight: 700; + color: #fff; +} +.scene-card .scene-specs-overlay span { + margin: 0 !important; + padding: 0 !important; +} +.scene-card .scene-specs-overlay .overlay-resolution + .overlay-duration::before { + content: "\00a0ยท\00a0"; +} +.scene-card .extra-scene-info, +.scene-card .overlay-filesize { + display: none !important; +} +/* Rating ribbon off the cards; the rating stays on the scene page */ +.grid-card .rating-banner { + display: none; +} +.performer-card .performer-card-image { + width: 100% !important; + height: auto !important; + min-width: 0 !important; + max-width: none !important; + max-height: none !important; + aspect-ratio: 2 / 3; + object-fit: cover; + object-position: top; +} +.studio-card .studio-card-header, +.tag-card .tag-card-header { + display: block !important; + position: relative; + aspect-ratio: 16 / 9; + height: auto !important; +} +.studio-card .studio-card-image, +.tag-card .tag-card-image { + position: absolute; + inset: 0; + width: 100% !important; + height: 100% !important; + max-height: none !important; + object-fit: contain; + padding: 10% 12%; +} + +/* Studio chip top-left on the cover */ +.scene-card .studio-overlay { + top: 8px !important; + left: 8px !important; + right: auto !important; + max-width: 60%; + height: auto !important; + padding: 3px 7px; + border-radius: var(--night-radius-sm); + background-color: rgba(0, 0, 0, 0.55); + opacity: 1; + line-height: 0; +} +.scene-card .studio-overlay a { + display: block; + height: auto !important; +} +.scene-card .studio-overlay .image-thumbnail { + height: 18px !important; + max-height: 18px !important; + width: auto; + max-width: 100% !important; + object-fit: contain; +} + +/* Card heart: the same size as the select checkbox, mirrored in the + opposite corner */ +.grid-card .favorite-button { + top: 10px !important; + right: 8px !important; + padding: 0 !important; + line-height: 1; +} +.grid-card .favorite-button svg { + width: 17px !important; + height: 17px !important; + font-size: 17px !important; + margin: 0 !important; +} + +/* Home carousels: slides pulled in so the arrows sit inside the page (stock + pushes the next arrow off a phone screen), arrows centred on the cards (not + the cards plus the dots below), every card in a row as tall as the tallest */ +.recommendation-row .slick-slider { + margin: 0 30px; +} +.recommendation-row .slick-prev { + left: -28px; +} +.recommendation-row .slick-next { + right: -28px; +} +.recommendation-row .slick-slider { + margin-bottom: 30px; +} +.recommendation-row .slick-dots { + position: absolute; /* out of the flow, so the slider is exactly the cards' height */ + top: 100%; +} +.recommendation-row .slick-track { + margin-bottom: 0; +} +.recommendation-row .slick-arrow { + top: 0; + height: 100%; + transform: none; + color: var(--night-red-text); +} +.recommendation-row .slick-track { + display: flex !important; +} +.recommendation-row .slick-slide { + height: auto !important; +} +.recommendation-row .slick-slide > div { + height: 100%; +} +.recommendation-row .slick-slide .grid-card { + width: 320px !important; /* studios too, not just scenes and performers */ + height: calc(100% - 10px); + margin-top: 5px; + margin-bottom: 5px; +} + +/* Detail pages: red titles and labels, grey paragraphs */ +.detail-header { + background-color: var(--night-bg) !important; + border-bottom: 1px solid var(--night-line); +} +/* Performer page: full-bleed portrait fading into the header */ +.detail-header:has(.performer-head) { + padding: 0 !important; + margin: 0 !important; + width: auto !important; + max-width: none !important; +} +.detail-header:has(.performer-head) .detail-container { + max-width: none; + margin: 0; + padding: 0; + display: flex; + align-items: flex-start; +} +.detail-header:has(.performer-head) .detail-header-image { + position: relative; + flex: 0 0 420px; + width: 420px; + height: 400px; + margin: 0; + padding: 0; + overflow: hidden; +} +.detail-header:has(.performer-head) .detail-header-image .btn-link { + display: block; + width: 100%; + height: 100%; + padding: 0; + border: 0 !important; +} +.detail-header:has(.performer-head) img.performer { + width: 100%; + height: 100%; + max-width: none !important; + max-height: none; + object-fit: cover; + object-position: center top; + border: 0 !important; + border-radius: 0 !important; +} +.detail-header:has(.performer-head) .detail-header-image::after { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + background: linear-gradient(90deg, transparent 55%, var(--night-bg)); +} +.detail-header:has(.performer-head) > .detail-container > .row { + flex: 1; + min-width: 0; + margin: 0; + padding: 24px 36px 0; +} +.detail-header:has(.performer-head) .performer-head .col, +.detail-header:has(.performer-head) .performer-head .row { + padding: 0 !important; + margin: 0 !important; +} +.detail-header .detail-item { + font-size: 13px; + line-height: 1.4; + margin: 0 !important; + padding: 0 !important; +} +.detail-header .detail-group { + row-gap: 5px; +} +.detail-header .detail-item-title { + width: 130px; +} +@media (max-width: 767.98px) { + .detail-header:has(.performer-head) .detail-container { + flex-direction: column; + } + .detail-header:has(.performer-head) .detail-header-image { + flex-basis: auto; + width: 100%; + height: 430px; + } + .detail-header:has(.performer-head) .detail-header-image::after { + background: linear-gradient(180deg, transparent 55%, var(--night-bg)); + } + .detail-header:has(.performer-head) > .detail-container > .row { + padding: 14px; + } +} +.detail-header .performer-name, +.detail-header .studio-name, +.detail-header h2 { + color: var(--night-red-text); + font-size: 40px; + font-weight: 500; +} +.detail-header .detail-item-title { + color: var(--night-text-3); +} +.detail-header .detail-item-value { + color: var(--night-red-text); +} +.details-edit { + gap: 8px; +} +.details-edit .btn { + margin: 0 !important; +} +.details-edit .btn-secondary { + color: var(--night-red-text); + background-color: transparent; + border-color: var(--night-red); } -.btn-primary.btn.logout-button.minimal { - color: #00bb2f; +/* Scene page */ +.scene-tabs .scene-header, +.scene-tabs .scene-header .TruncatedText { + color: var(--night-red-text); + font-size: 32px !important; + font-weight: 500; + line-height: 1.15; +} +/* Scene details: red labels and headings, light grey paragraphs */ +.scene-tabs .tab-content h6 { + color: var(--night-red-text); + font-size: 13px; +} +.scene-tabs .tab-content h6 a { + color: var(--night-red-text); +} +.scene-tabs .tab-content p.pre { + color: var(--night-text-2); + font-size: 13px; +} +.tag-item.badge-secondary { + color: var(--night-text); + background-color: var(--night-raised); + border: 1px solid var(--night-line); +} +.nav-tabs .badge, +.badge-pill.badge-secondary { + color: var(--night-text); + background-color: var(--night-raised); +} +.tag-item.badge-secondary a { + color: inherit; +} +.video-js .vjs-play-progress, +.video-js .vjs-volume-level { + background-color: var(--night-red); +} +.video-js .vjs-big-play-button { + width: 72px !important; + height: 72px !important; + margin-left: -36px !important; + margin-top: -36px !important; + font-size: 36px !important; + line-height: 72px !important; + border: 0 !important; + border-radius: 50% !important; + background-color: rgba(40, 40, 40, 0.85) !important; +} +.video-js:hover .vjs-big-play-button { + background-color: var(--night-red) !important; +} +.video-js .vjs-big-play-button .vjs-icon-placeholder::before { + font-size: 36px !important; + line-height: 72px !important; + width: 100% !important; + height: 100% !important; + text-indent: 3px; +} +.scrubber-button { + color: var(--night-red-text) !important; + background-color: var(--night-card) !important; + border: 1px solid var(--night-line) !important; +} +/* Two performers side by side in the details panel */ +.scene-performers .performer-card { + width: calc(50% - 10px) !important; + margin: 5px !important; +} + +/* Settings: red headings and labels, red toggles */ +#settings-container h1, +#tasks-panel h1, +.setting-section h1 { + color: var(--night-red-text); + font-size: 28px; + font-weight: 500; +} +.setting-section .setting h3, +.setting-section > h2 { + color: var(--night-red-text); +} +.custom-switch .custom-control-input:checked ~ .custom-control-label::before { + background-color: var(--night-red); + border-color: var(--night-red); } -.scrubber-viewport { - background-color: #1f062d; +/* Dialogs and menus on the card tone */ +.modal-content, +.dropdown-menu { + background-color: var(--night-card); + border: 1px solid var(--night-line); +} +.modal-header { + border-bottom: 1px solid var(--night-line); + color: var(--night-red-text); +} +.modal-footer { + border-top: 1px solid var(--night-line); +} +.modal-footer .btn-primary { + color: #fff; + background-color: var(--night-red); + border-color: var(--night-red); +} +.dropdown-item { + color: var(--night-text); +} +.dropdown-item:hover, +.dropdown-item.active { + color: var(--night-text); + background-color: var(--night-raised); +} + +/* Theme Switch menu: its sections are spaced apart, so keep the full outline + that Bootstrap's accordion style strips from all but the last */ +.theme-plugin-menu .accordion > .card { + border-bottom: 1px solid var(--night-line) !important; + border-radius: var(--night-radius) !important; +} + +/* Empty lists */ +.item-list-container .sidebar-pane-content:not(:has(.grid-card, .table-list, .scene-wall, .wall, .tagger-container, .card)) > .pagination-index-container::after { + content: "Nothing here yet"; + grid-column: 1 / -1; + margin-top: 18vh; + text-align: center; + font-size: 26px; + font-weight: 500; + color: var(--night-text-2); +} + +/* Task queue and job cards: off the stock blue-grey */ +#tasks-panel .tasks-panel-queue { + background-color: var(--night-bg) !important; +} +.job-table.card { + background-color: var(--night-card) !important; + border: 1px solid var(--night-line); +} +/* Settings Edit buttons and the scene-page panel toggle keep the theme */ +#settings-container .btn-primary { + color: var(--night-text); + background-color: transparent; + border-color: var(--night-text); +} +.scene-divider .btn { + color: var(--night-red-text); + background: none; + border: 0; } diff --git a/themes/Theme-Night/Theme-Night.yml b/themes/Theme-Night/Theme-Night.yml index a6627063..3eafb634 100644 --- a/themes/Theme-Night/Theme-Night.yml +++ b/themes/Theme-Night/Theme-Night.yml @@ -1,6 +1,6 @@ name: Theme - Night description: Night Theme for Stash (unknown author) -version: 0.1 +version: 1.0 url: https://discourse.stashapp.cc/t/night/1425 ui: css: