diff --git a/themes/Theme-PulsarLight/README.md b/themes/Theme-PulsarLight/README.md
index 1952fdf9..2b80f3a5 100644
--- a/themes/Theme-PulsarLight/README.md
+++ b/themes/Theme-PulsarLight/README.md
@@ -1,3 +1,31 @@
# PulsarLight
-https://discourse.stashapp.cc/t/pulsarlight/1430
\ No newline at end of file
+https://discourse.stashapp.cc/t/pulsarlight/1430
+
+This is a community created theme for Stash: the light companion to Pulsar, with a soft pastel backdrop under frosted white glass, dark ink and one blue accent.
+
+Version 1.0 refreshes the theme for Stash v0.31. The backdrop is now drawn in CSS from the original Flower image, so it no longer loads it from imgur. Blue replaces the slate and stock blue that leaked through, cards, menus and dialogs are white glass with hairline edges, and the newer parts of Stash (filter sidebar, selection toolbar, performer header, settings, dialogs, phone layouts) are styled.
+
+The theme will only change the look and feel of the Stash interface. It will not affect any other data.
+
+## 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 |
+|---|---|
+|  |  |
+
+| Performer | Studios |
+|---|---|
+|  |  |
+
+
+
+## Install
+
+1. Open the Plugins panel in settings. (http://localhost:9999/settings?tab=plugins)
+
+2. Find the Theme in the listing, in the default Community repo
+
+3. Click Install
diff --git a/themes/Theme-PulsarLight/Theme-PulsarLight.css b/themes/Theme-PulsarLight/Theme-PulsarLight.css
index 8543b820..cfc0f317 100644
--- a/themes/Theme-PulsarLight/Theme-PulsarLight.css
+++ b/themes/Theme-PulsarLight/Theme-PulsarLight.css
@@ -1,4 +1,4 @@
-/* Light Pulsar Theme - Fonzie 2021 v0.3.1 */
+/* Light Pulsar Theme - Fonzie 2021 v0.3.1, refreshed for Stash v0.31 (v1.0) */
/* ---------------------------------------------------- */
/* --------- Updated to Stash version 0.12.0 ---------- */
@@ -19,38 +19,64 @@
/* ===================== General ===================== */
body {
- background-image: url("https://i.imgur.com/UwICmXP.jpg"); /* Flower */
- /* background-image:url("https://i.imgur.com/zqt3MFY.jpg"); /* Green Leaves */
- /* background-image:url("https://i.imgur.com/vCotzwB.jpg"); /* White Desert */
- /* background-image:url("https://i.imgur.com/Lverfqy.jpg"); /* Tropic Beach */
- /* background-image:url("https://i.imgur.com/4jrpuyR.jpg"); /* White Blue Waves */
- /* background-image:url("https://i.imgur.com/KUtfQzs.jpg"); /* Bright Lights */
-
width: 100%;
height: 100%;
- padding: 0 0 0;
background-size: cover;
background-repeat: no-repeat;
- background-color: #127aa5;
+ background-color: #dfe9f0;
background-attachment: fixed;
background-position: center;
- color: #f9fbfd;
- color: #000;
+ color: var(--pl-ink);
}
h1,
h2,
h3 {
- color: #fff;
+ color: var(--pl-ink);
}
:root {
--HeaderFont: Helvetica, "Helvetica Neue", "The Sans", "Segoe UI";
- --std-txt-shadow: 2px 2px 1px #000;
- --light-txt-shadow: 1px 1px 3px #555;
+ --std-txt-shadow: none; /* dark ink on pale glass needs no shadow */
+ --light-txt-shadow: none;
--white: #ffffff;
--stars: url("https://i.imgur.com/YM1nCqo.png");
--fourTwo: 0.35;
+
+ --pl-backdrop:
+ radial-gradient(ellipse 20% 17% at 57% 63%, rgba(186, 223, 236, 1.00), transparent),
+ radial-gradient(ellipse 37% 21% at 64% 24%, rgba(238, 172, 151, 1.00), transparent),
+ radial-gradient(ellipse 10% 21% at 83% 2%, rgba(14, 121, 163, 0.50), transparent),
+ radial-gradient(ellipse 13% 20% at 31% 73%, rgba(22, 0, 8, 0.46), transparent),
+ radial-gradient(ellipse 22% 93% at 11% 17%, rgba(255, 232, 235, 0.74), transparent),
+ radial-gradient(ellipse 38% 73% at 28% 99%, rgba(255, 243, 246, 0.87), transparent),
+ radial-gradient(ellipse 40% 40% at 82% 40%, rgba(188, 180, 189, 1.00), transparent),
+ radial-gradient(ellipse 42% 33% at 59% 35%, rgba(255, 255, 248, 1.00), transparent),
+ radial-gradient(ellipse 13% 22% at 20% 98%, rgba(1, 0, 0, 1.00), transparent),
+ radial-gradient(ellipse 16% 64% at 4% 63%, rgba(205, 166, 178, 1.00), transparent),
+ radial-gradient(ellipse 15% 23% at 33% 56%, rgba(255, 48, 16, 1.00), transparent),
+ radial-gradient(ellipse 37% 145% at 61% 56%, rgba(255, 240, 240, 1.00), transparent),
+ linear-gradient(180deg, #36caf5, #c0f9ff, #81deff);
+ --pl-glass: rgba(255, 255, 255, 0.58); /* cards and panels */
+ --pl-control: rgba(255, 255, 255, 0.55); /* toolbar boxes */
+ --pl-control-on: rgba(255, 255, 255, 0.92); /* active control */
+ --pl-menu: rgba(255, 255, 255, 0.9); /* menus and dialogs */
+ --pl-bar: rgba(255, 255, 255, 0.72); /* top bar */
+ --pl-side: rgba(255, 255, 255, 0.28); /* filter sidebar */
+ --pl-inner: rgba(255, 255, 255, 0.45);
+ --pl-raised: rgba(13, 34, 51, 0.08); /* hover */
+ --pl-line: rgba(13, 34, 51, 0.1); /* every hairline */
+ --pl-ink: #0d2233;
+ --pl-ink-2: #2b4256;
+ --pl-ink-3: #4a6274;
+ --pl-blue: #1f78bd; /* fills behind white text, and blue text */
+ --pl-blue-soft: rgba(31, 120, 189, 0.12);
+ --pl-danger: #d9363e;
+ --pl-radius-in: 6px;
+ --pl-radius: 8px;
+ --pl-radius-card: 12px;
+ --pl-blur: blur(14px) saturate(1.2);
+ --pl-shadow: 0 6px 20px rgba(13, 34, 51, 0.1);
}
/* --- The Home button in the top left corner of each page. Remove the last 3 lines if you don't like the logo --- */
@@ -66,8 +92,10 @@ button.minimal.brand-link.d-inline-block.btn.btn-primary {
/* --- Makes the background of the Navigation Bar at the Top half-transparent --- */
nav.bg-dark {
- background: rgba(100, 200, 250, var(--fourTwo)) !important;
- color: #000;
+ background: var(--pl-bar) !important;
+ backdrop-filter: var(--pl-blur);
+ border-bottom: 1px solid var(--pl-line);
+ color: var(--pl-ink);
}
.bg-dark {
background: none !important;
@@ -89,12 +117,8 @@ nav.bg-dark {
padding: 0.13rem 1rem;
}
-/* --- Changes how the Bar at the top of the page behaves --- */
-.fixed-bottom,
-.fixed-top {
- position: relative !important;
- top: 0px !important;
-}
+/* --- The bar at the top stays pinned, as in stock Stash: the list toolbar,
+ filter sidebar and scene player are pinned just below it --- */
/* The pagination at the top and at the bottom of the Scenes/Performer/Images/... pages;
transparent background, rounded corners, etc. */
@@ -121,19 +145,13 @@ transparent background, rounded corners, etc. */
.card {
padding: 20px;
margin: 4px 0.5% 14px;
- /* --- Adds a glowing shimmer effect --- */
- background-image: linear-gradient(
- 130deg,
- rgba(60, 70, 85, 0.21),
- rgba(150, 155, 160, 0.3),
- rgba(35, 40, 45, 0.2),
- rgba(160, 160, 165, 0.21),
- rgba(70, 80, 85, 0.27)
- );
- background-color: rgba(106, 120, 125, 0.25);
- box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.55);
- /* --- Increases the rounded borders of each item on the Scenes/Performers/... pages for 6px in 10px --- */
- border-radius: 10px;
+ /* --- Pale frosted glass: a white tint blurred over the backdrop, with an ink hairline --- */
+ background-image: none;
+ background-color: var(--pl-glass);
+ backdrop-filter: var(--pl-blur);
+ border: 1px solid var(--pl-line);
+ box-shadow: var(--pl-shadow);
+ border-radius: var(--pl-radius-card);
}
/* --- Removes the glowing shimmer effect on the start page & the settings for readability purpose --- */
@@ -145,7 +163,7 @@ transparent background, rounded corners, etc. */
/* --- Color that is used within .card secments --- */
.text-muted {
- color: #eee !important;
+ color: var(--pl-ink-2) !important;
text-shadow: 1px 1px 2px #000;
}
@@ -292,7 +310,7 @@ a {
a.minimal:hover:not(:disabled),
button.minimal:hover:not(:disabled) {
background: rgba(138, 155, 168, 0.45);
- color: #fff;
+ color: var(--pl-ink);
}
div.performer-card div.card-popovers {
margin-bottom: -3px;
@@ -311,13 +329,8 @@ div.card-section hr {
/* --- In Full screen HD 1920x1080 you now see 8 performers per row instead of 6 --- */
/*.performer-card-image, .performer-card, .card-image { min-width: 160px; width: calc(108px + 10.625vw / 2); max-width: 230px } */
/*.performer-card-image, .performer-card, .card-image { min-width: 160px; width: calc(108px + 19vw / 3.6);width:212px; max-width: 230px } */
-.performer-card-image,
-.performer-card,
-.card-image {
- min-width: 160px;
- width: calc(100px + 11.2vw / 1.92);
- max-width: 230px;
-}
+/* Since Stash v0.31 the card size slider sets each card's width inline, so the
+ theme no longer sizes performer cards here; the image fills the card at 2:3. */
/* --- Changes the height of the Performer Card to keep the 2x3 picture ratio --- */
/*.performer-card-image, .justify-content-center .card-image { min-height:240px; height: calc((108px + 10.625vw / 2) * 1.5); max-height: 345px} */
@@ -680,7 +693,7 @@ div.react-select__control .css-12jo7m5 {
background-color: rgba(16, 22, 26, 0.1);
}
table#performer-details {
- color: #fff;
+ color: var(--pl-ink);
text-shadow: 1px 1px 1px #000;
}
@@ -748,7 +761,7 @@ dl.details-list dd {
#performer-edit .col-sm-auto div,
#performer-edit label.form-label {
font-weight: normal;
- color: #fff;
+ color: var(--pl-ink);
text-shadow: var(--std-txt-shadow);
}
@@ -891,28 +904,17 @@ h5.card-section-title,
}
/* --- Tightens the space between the Tags-, Performer-, O-Counter-, Gallery- and Movie-Icons --- */
-.btn-primary {
- margin: 0 -3px 0 -9px;
+.card-popovers .btn-primary {
+ margin: 0;
}
/* --- Moves the Tags-, Performer-, O-Counter-, Gallery- and Movie-Icon from below the description to the bottom right corner of the card --- */
.scene-popovers,
.card-popovers {
min-width: 0;
- margin-bottom: 3px;
- margin-top: -40px;
justify-content: flex-end;
}
-/* --- Adds an invisible dot after the description text, Also leaves ~80 pixels space to enforce a line break,
-so it leaves some space in the bottom right corner of the card for the icons in the Selector above --- */
-.card-section p:after {
- font-size: 1px;
- color: rgba(0, 0, 0, 0.01);
- padding-right: 3.2vw;
- margin-right: 2.8vw;
- content: " ";
-}
/* -- The whole section replaces the ratings banner with a star rating in the bottom left corner --- */
.scene-card.card .rating-1 {
@@ -1013,9 +1015,6 @@ div.scene-file-info .text-truncate {
}
/* Zoom 0 */
-.zoom-0 {
- width: 290px;
-}
.zoom-0 .video-section {
height: 181px;
}
@@ -1032,11 +1031,6 @@ div.scene-file-info .text-truncate {
}
/* Zoom 1 */
-.zoom-1 {
- min-width: 300px;
- width: calc(234px + 24vw / 3.84);
- max-width: 430px;
-}
/* Improves the way the scene picture is displayed when the resolution isn't 16:9 (e.g. 4:3) --- */
.zoom-1 .video-section {
height: calc((233px + 24vw / 3.84) / 1.65);
@@ -1062,11 +1056,6 @@ div.scene-file-info .text-truncate {
}
/* Zoom 2 */
-.zoom-2 {
- min-width: 350px;
- width: calc(310px + 26vw / 3.84);
- max-width: 495px;
-}
.zoom-2 .video-section {
height: calc((310px + 26vw / 3.84) / 1.65);
max-height: 295px;
@@ -1088,11 +1077,6 @@ div.scene-file-info .text-truncate {
}
/* Zoom 3 */
-.zoom-3 {
- min-width: 400px;
- width: calc(530px + 18vw / 5.76);
- max-width: 590px;
-}
.zoom-3 .video-section {
height: 375px;
}
@@ -1175,7 +1159,7 @@ div.tagger-container .btn-link {
padding: 8px;
}
.studio-details table td:nth-child(1) {
- color: #fff;
+ color: var(--pl-ink);
text-shadow: 1px 1px 1px #000;
}
@@ -1193,7 +1177,7 @@ div.tagger-container .btn-link {
margin-top: 22px;
}
.studio-card .card-section div {
- color: #fff;
+ color: var(--pl-ink);
}
.studio-card .card-popovers {
width: 63%;
@@ -1279,7 +1263,7 @@ td:first-child {
}
.studio-details .form-group,
.studio-details table td:nth-child(1) {
- color: #fff;
+ color: var(--pl-ink);
text-shadow: 1px 1px 1px #000;
}
@@ -1430,11 +1414,11 @@ div.studio-card.card .card-popovers {
.tag-sub-tags,
.tag-parent-tags {
margin-bottom: 9px;
- color: #fff;
+ color: var(--pl-ink);
}
.tag-sub-tags a,
.tag-parent-tags a {
- color: #fff;
+ color: var(--pl-ink);
text-shadow: var(--std-txt-shadow);
}
@@ -1515,7 +1499,7 @@ div.movie-card .card-section span {
position: absolute;
margin-top: -3px;
margin-bottom: 6px;
- color: #fff;
+ color: var(--pl-ink);
}
.movie-card-header {
@@ -1615,7 +1599,7 @@ td:first-child {
}
.movie-details .form-group,
.movie-details table td:nth-child(1) {
- color: #fff;
+ color: var(--pl-ink);
text-shadow: 1px 1px 1px #000;
}
@@ -1815,7 +1799,7 @@ input[type="range"]::-webkit-slider-runnable-track {
/* --- Adds a text shadow to the statistics on the startpage --- */
.stats .title {
- color: #fff;
+ color: var(--pl-ink);
text-shadow: 2px 2px 4px #282828;
}
@@ -2049,7 +2033,7 @@ div.modal-body b,
a.minimal,
button.minimal {
- color: #fff;
+ color: var(--pl-ink);
text-shadow: 1px 1px 2px #000;
}
@@ -2075,35 +2059,28 @@ button.minimal {
}
.scene-card .card-section {
- color: #fff;
- text-shadow: 0px 0px 1px #111;
+ color: var(--pl-ink);
}
.changelog-version,
.tab-content {
- color: #fff;
+ color: var(--pl-ink);
}
.tab-content .bg-dark {
- color: #fff;
+ color: var(--pl-ink);
}
#performer-details-tabpane-details {
color: #000;
}
.scraper-table a {
- color: #dde;
+ color: var(--pl-blue);
}
.image-tabs,
.gallery-tabs,
.scene-tabs {
- background-image: linear-gradient(
- 130deg,
- rgba(60, 70, 85, 0.21),
- rgba(150, 155, 160, 0.3),
- rgba(35, 40, 45, 0.22),
- rgba(160, 160, 165, 0.21),
- rgba(50, 60, 65, 0.3)
- );
- background-color: rgba(106, 120, 125, 0.29);
+ background-image: none;
+ background-color: var(--pl-glass);
+ backdrop-filter: var(--pl-blur);
}
.table-striped.table-bordered,
@@ -2116,11 +2093,11 @@ button.minimal {
}
.PerformerScrapeModal-list .btn-link {
- color: #a9d0ff;
+ color: var(--pl-blue);
}
.tab-content .scene-file-info a {
- color: #cde;
+ color: var(--pl-blue);
}
.grid-card .card-check {
@@ -2226,70 +2203,37 @@ div.movie-card.grid-card.card p {
/* ============== SETTINGS ============== */
+/* One frosted panel holds the menu and the settings. The settings themselves
+ keep Stash's own layout: the old two-column restyle was written for an
+ earlier settings page and no longer lines up with Stash v0.31. */
#settings-container {
padding-left: 230px;
background-image: none !important;
- background-color: rgba(16, 20, 25, 0.4) !important;
- box-shadow: 2px 2px 7px rgb(0 0 0 / 75%);
- border-radius: 10px;
+ background-color: var(--pl-glass) !important;
+ backdrop-filter: var(--pl-blur);
+ border: 1px solid var(--pl-line);
+ box-shadow: var(--pl-shadow);
+ border-radius: var(--pl-radius-card);
padding-top: 25px;
min-height: 450px;
}
#settings-container .card {
- margin-bottom: 25px;
background-image: none !important;
- background-color: rgba(16, 20, 25, 0);
- box-shadow: 0px 0px 0px rgb(0 0 0 / 75%);
- border-radius: 0px;
+ background-color: var(--pl-inner);
+ backdrop-filter: none;
+ box-shadow: none;
+ border-radius: var(--pl-radius);
}
#settings-container .bg-dark {
- background-color: rgba(16, 20, 25, 0.12) !important;
-}
-
-.form-group > .form-group {
- margin-top: 0.5em;
- margin-bottom: 0.5rem;
-}
-
-#configuration-tabs-tabpane-tasks > .form-group {
- margin-bottom: 2rem;
- margin-top: 1em;
+ background-color: var(--pl-inner) !important;
}
-#configuration-tabs-tabpane-tasks h6 {
- margin-top: 3.5em;
- font-weight: bold;
- margin-bottom: 1em;
-}
-#configuration-tabs-tabpane-tasks h5 {
- margin-top: 2em;
- font-weight: bold;
- letter-spacing: 0.09rem;
-}
-
-.form-group h4 {
- margin-top: 2em;
-}
-
-#parser-container.mx-auto {
- max-width: 1400px;
- margin-right: auto !important;
-}
-.scene-parser-row .parser-field-title {
- width: 62ch;
-}
-
-.mx-auto {
- margin-right: 1% !important;
-}
-.mx-auto.card .row .col-md-2 .flex-column {
- position: fixed;
- min-height: 400px;
-}
-.mx-auto.card > .row {
- min-height: 360px;
+.setting-section h1,
+#tasks-panel h1 {
+ font-size: 28px;
+ font-weight: 700;
}
.loading-indicator {
@@ -2297,203 +2241,8 @@ div.movie-card.grid-card.card p {
zoom: 2;
}
-/* --- Settings - Tasks ------------------------------------------------------------------------------------- */
-
-#configuration-tabs-tabpane-tasks > .form-group .card {
- padding: 20px;
- margin: 4px 0.4% 14px;
- background-image: none;
- background-color: rgba(16, 20, 25, 0);
- box-shadow: none;
- border-radius: 10px;
-}
-
-#tasks-panel h1 {
- margin-top: 3em;
-}
-.setting-section h1,
-#tasks-panel h1 {
- font-size: 1.55rem;
- max-width: 180px;
-}
-
-@media (min-width: 576px) and (min-height: 600px) {
- #tasks-panel .tasks-panel-queue {
- background: none !important;
- margin-top: -2.6rem;
- padding-bottom: 0.25rem;
- padding-top: 0rem;
- position: relative;
- top: 0rem;
- z-index: 2;
- }
-}
-
-#tasks-panel hr {
- border-top: 0px solid rgba(140, 142, 160, 0.38);
-}
-#tasks-panel h1 {
- margin-top: 1.8em;
-}
-#tasks-panel h1 {
- margin-top: 0.8em;
-}
-
-#configuration-tabs-tabpane-tasks {
- margin-top: 40px;
-}
-
-#configuration-tabs-tabpane-tasks
- .form-group:last-child
- .setting-section
- .setting
- div:last-child {
- margin-right: 0% !important;
- margin-left: 0px;
- margin-top: 2px;
-}
-
-#configuration-tabs-tabpane-tasks .setting-section .sub-heading {
- margin-bottom: 1em;
-}
-#configuration-tabs-tabpane-tasks .setting-section .collapsible-section {
- margin-bottom: 3em;
-}
-#configuration-tabs-tabpane-tasks #video-preview-settings button {
- width: 250px;
- margin-top: 22px;
- margin-left: -57px;
-}
-#configuration-tabs-tabpane-tasks
- .tasks-panel-tasks
- .setting-section:nth-child(3) {
- margin-top: 5em;
-}
-
-.tasks-panel-tasks .setting a {
- color: #ccccd3;
-}
-
-@media (min-width: 1000px) {
- #settings-container .card {
- margin-top: -43px;
- margin-left: 255px;
- }
-}
-
-#settings-container .col-form-label {
- padding-top: calc(0.55rem);
- padding-bottom: calc(0.55rem);
-}
-
-.setting-section .setting-group > .setting:not(:first-child),
-.setting-section .setting-group .collapsible-section .setting {
- margin-left: 4rem;
-}
-
-.setting-section .setting h3 {
- font-size: 1.4rem;
- margin: 0.6em 0 0.4em;
-}
-
-.setting-section:not(:first-child) {
- margin-top: 1em;
-}
-.setting-section .setting-group > .setting:not(:first-child).sub-setting,
-.setting-section .setting-group .collapsible-section .setting.sub-setting {
- padding-left: 3rem;
-}
-
-@media (min-width: 1200px) {
- .offset-xl-2 {
- max-width: 1250px;
- margin-left: 15%;
- margin-right: auto;
- }
-
- #settings-container .tab-content,
- .mx-auto {
- max-width: none;
- }
-}
-
-.setting-section .setting:not(:last-child) {
- border-bottom: 0px solid #000;
-}
-
-.job-table.card {
- margin-top: -32px !important;
- background-color: rgba(16, 20, 25, 0.2) !important;
- border-radius: 10px !important;
-}
-
-.custom-switch {
- padding-left: 2.25rem;
-}
-.custom-control {
- min-height: 1.5rem;
- padding-left: 0.5rem;
- margin-right: 1em;
-}
-
-.custom-control-input:checked ~ .custom-control-label:before {
- color: rgb(0 0 0 / 0%);
- border-color: rgb(0 0 0 / 0%);
- background-color: rgb(0 0 0 / 0%);
-}
-
-.custom-switch .custom-control-label:before {
- pointer-events: auto;
- border-radius: 0;
-}
-
-.custom-switch .custom-control-input:checked ~ .custom-control-label:after {
- background-color: blue;
- transform: auto;
-}
-
-.custom-switch .custom-control-label:after {
- top: auto;
- left: auto;
- width: auto;
- height: auto;
- background-color: blue;
- border-radius: 0;
- transform: none;
- transition: none;
-}
-
-.custom-control-label:before {
- display: none;
-}
-
-.custom-control-input {
- position: absolute;
- top: 2px;
- left: 0;
- z-index: -1;
- width: 1.2rem;
- height: 1.35rem;
- opacity: 1;
- background-color: #10659a;
- color: #10659a;
-}
-
-.setting-section .setting-group > .setting:not(:first-child),
-.setting-section .setting-group .collapsible-section .setting {
- padding-bottom: 3px;
- padding-top: 4px;
- margin-right: 0rem;
-}
-
-.setting-section {
- margin-bottom: 0.8em;
-}
-
-.setting-section .sub-heading {
- font-size: 0.9rem;
- margin-top: 0.5rem;
- margin-bottom: 3rem;
+.scraper-table tr:nth-child(2n) {
+ background-color: var(--pl-raised);
}
@media (min-width: 768px) {
@@ -2506,42 +2255,6 @@ div.movie-card.grid-card.card p {
width: 200px;
padding-top: 25px;
}
-
- #configuration-tabs-tabpane-interface
- .setting-section:first-child
- .card
- .setting
- div:nth-child(2) {
- width: 64%;
- min-width: 300px;
- padding-top: 6px;
- }
- #configuration-tabs-tabpane-interface
- .setting-section:first-child
- .card
- .setting
- div
- .sub-heading {
- margin-top: -28px;
- margin-left: 255px;
- width: 700px;
- }
- #language .input-control {
- width: 250px;
- }
-
- #configuration-tabs-tabpane-interface
- .setting-section
- .setting-group
- > .setting:not(:first-child) {
- margin-left: 275px;
- }
- #configuration-tabs-tabpane-interface
- .setting-section
- .setting-group
- > .setting:nth-child(2) {
- margin-top: -40px;
- }
}
@media (min-width: 1200px) {
@@ -2549,10 +2262,6 @@ div.movie-card.grid-card.card p {
margin-left: 14%;
margin-right: 2%;
}
- .setting-section h1,
- #tasks-panel h1 {
- max-width: 220px;
- }
#settings-menu-container {
padding-top: 25px;
margin-left: 14% !important;
@@ -2574,10 +2283,6 @@ div.movie-card.grid-card.card p {
#settings-container {
padding-left: 180px;
}
- .setting-section h1,
- #tasks-panel h1 {
- max-width: 300px;
- }
}
@media (max-width: 576px) {
@@ -2596,10 +2301,6 @@ div.movie-card.grid-card.card p {
}
@media (max-width: 1004px) {
- .setting-section h1,
- #tasks-panel h1 {
- max-width: 400px;
- }
.job-table.card {
margin-top: 2px !important;
}
@@ -2608,221 +2309,1443 @@ div.movie-card.grid-card.card p {
.markdown table tr:nth-child(2n),
.modal-body .nav-link:hover,
#settings-menu-container .nav-link:hover {
- background-color: rgba(10, 20, 20, 0.15);
+ background-color: var(--pl-raised);
+}
+
+/* ===================== Stash v0.29+ refresh ===================== */
+
+/* The backdrop: the original Flower image as a soft field of colour, redrawn
+ in CSS (twelve radial gradients fitted to the image after a further 48px blur), so
+ it is crisp at any size and makes no external request. It is painted on a
+ 16:10 layer cropped like a cover-fitted photo, so it frames the same way on
+ any screen. To use an image instead, replace the background line with
+ background: url("...") center / cover no-repeat; filter: blur(48px);
+ using one of the original images:
+ https://i.imgur.com/UwICmXP.jpg Flower
+ https://i.imgur.com/zqt3MFY.jpg Green Leaves
+ https://i.imgur.com/vCotzwB.jpg White Desert
+ https://i.imgur.com/Lverfqy.jpg Tropic Beach
+ https://i.imgur.com/4jrpuyR.jpg White Blue Waves
+ https://i.imgur.com/KUtfQzs.jpg Bright Lights */
+body::before {
+ content: "";
+ position: fixed;
+ left: 50%;
+ top: 50%;
+ width: max(calc(100vw + 120px), calc((100vh + 120px) * 1.6));
+ aspect-ratio: 16 / 10;
+ transform: translate(-50%, -50%);
+ z-index: -1;
+ pointer-events: none;
+ background: var(--pl-backdrop);
}
-@media (min-width: 1000px) {
- #settings-container
- #configuration-tabs-tabpane-interface
- .setting-section
- > .setting {
- padding: 15px 0px;
- }
- #settings-container
- #configuration-tabs-tabpane-interface
- .setting-section
- .setting-group
- .setting
- > div:first-item {
- margin-left: 4% !important;
- }
+.btn-primary.btn.donate.minimal {
+ display: none;
+}
- #settings-container #stash-table {
- margin-top: 25px;
- }
- #configuration-tabs-tabpane-interface .setting-section:first-child .card {
- margin-top: -5px;
- margin-left: -1%;
- }
+/* Titles and names: no text shadow; dark ink on pale glass */
+.card-section-title,
+.scene-tabs .scene-header,
+.performer-name,
+.detail-header h2 {
+ text-shadow: none !important;
+}
- #language .input-control {
- width: 250px;
- }
- #configuration-tabs-tabpane-interface .setting-section:first-child h3 {
- font-size: 1.55rem;
- }
+/* Buttons: one blue fill with white text, red Delete, translucent white for the rest */
+.btn-primary {
+ color: #fff;
+ background-color: var(--pl-blue);
+ border-color: var(--pl-blue);
+}
+.btn-primary:hover {
+ background-color: #1a69a6;
+ border-color: #1a69a6;
+}
+.btn-secondary {
+ color: var(--pl-ink);
+ background-color: var(--pl-control);
+ border-color: var(--pl-line);
+}
+.btn-secondary:hover {
+ background-color: var(--pl-raised);
+ border-color: var(--pl-line);
+}
+.btn-danger {
+ color: #fff;
+ background-color: var(--pl-danger);
+ border-color: var(--pl-danger);
+}
+.btn-link,
+a.nav-link {
+ color: var(--pl-blue);
+}
+.form-control,
+.form-control:focus,
+.input-control,
+div.react-select__control {
+ color: var(--pl-ink);
+ background-color: var(--pl-control) !important;
+ border-color: var(--pl-line) !important;
+}
+.dropdown-menu,
+.modal-content,
+div.react-select__menu {
+ background-color: var(--pl-menu);
+ backdrop-filter: var(--pl-blur);
+ border: 1px solid var(--pl-line);
+ border-radius: var(--pl-radius);
+}
+.dropdown-item {
+ color: var(--pl-ink);
+ border-radius: var(--pl-radius-in);
+}
+.dropdown-item:hover,
+.dropdown-item.active {
+ color: var(--pl-ink);
+ background-color: var(--pl-raised);
+}
+.modal-header,
+.modal-footer {
+ border-color: var(--pl-line);
+}
- #configuration-tabs-tabpane-interface
- .setting-section:first-child
- .card
- > .setting
- div:nth-child(1) {
- width: 255px;
+/* Top nav: white glass, dark uppercase wordmark, words only, the active page
+ on a blue pill */
+button.minimal.brand-link.d-none.d-md-inline-block.btn.btn-primary,
+button.minimal.brand-link.d-inline-block.btn.btn-primary {
+ background: none !important;
+ padding-left: 12px;
+ border: 0;
+ letter-spacing: 0.04em;
+}
+.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;
+ color: var(--pl-ink) !important;
+ background: none !important;
+ border: 0 !important;
+ border-radius: var(--pl-radius) !important;
+ font-weight: 600;
+}
+.navbar-collapse > .navbar-nav > div > a.active {
+ color: #fff !important;
+ background-color: var(--pl-blue) !important;
+}
+@media (min-width: 1200px) {
+ .navbar-collapse > .navbar-nav > div > a svg {
+ display: none !important; /* words only on desktop */
}
+}
+.navbar-buttons .btn.minimal {
+ color: var(--pl-ink);
+ background: none;
+ border-color: transparent;
+}
+.top-nav a[href$="/new"] .btn {
+ color: var(--pl-ink);
+ background: none;
+ border: 1px solid var(--pl-ink);
+}
- #configuration-tabs-tabpane-interface
- .setting-section:first-child
- .card
- .setting
- div:nth-child(2) {
- width: 68%;
- padding-top: 6px;
+/* List toolbar: translucent white 34px boxes with dark ink, no slate band */
+.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(--pl-control);
+ border: 1px solid var(--pl-line);
+ border-radius: var(--pl-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-group {
+ border-left: 0 !important;
+}
+.filtered-list-toolbar .btn-group .btn,
+.filtered-list-toolbar .sort-by-select .btn {
+ height: 28px !important; /* the saved-filter button sits one group deeper */
+ margin: 0 !important;
+ padding: 0 9px;
+ color: var(--pl-ink);
+ border: 0 !important;
+ border-radius: var(--pl-radius-in) !important;
+ background: none !important;
+ box-shadow: none !important;
+}
+.filtered-list-toolbar .btn-group .btn:hover {
+ background-color: var(--pl-raised) !important;
+}
+.filtered-list-toolbar .btn-group .btn.active {
+ color: var(--pl-blue) !important;
+ background-color: var(--pl-control-on) !important;
+}
+.filtered-list-toolbar .btn-group .btn-danger {
+ background-color: var(--pl-danger) !important;
+}
+.filtered-list-toolbar .search-term-input .form-control,
+.filtered-list-toolbar .page-size-selector select,
+.clearable-text-field {
+ height: 34px;
+ color: var(--pl-ink);
+ background-color: var(--pl-control) !important;
+ border: 1px solid var(--pl-line) !important;
+ border-radius: var(--pl-radius) !important;
+}
+.filtered-list-toolbar.has-selection .selected-items-info span {
+ color: var(--pl-blue);
+ font-weight: 600;
+}
+.item-list-container .filtered-list-toolbar.has-selection {
+ background-color: var(--pl-bar) !important;
+ border-bottom: 1px solid var(--pl-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; the toolbar leaves room for it here */
+ color: var(--pl-ink);
+ background-color: var(--pl-control) !important;
+ border: 1px solid var(--pl-line) !important;
+ border-radius: var(--pl-radius) !important;
+ opacity: 1;
+}
+.sidebar-pane .sidebar,
+.sidebar .sidebar-footer,
+.sidebar-toolbar {
+ background-color: transparent !important; /* the backdrop shows through */
+ backdrop-filter: none;
+}
+.sidebar-pane .sidebar {
+ border-right: 1px solid var(--pl-line);
+}
+input[type="range"],
+input[type="checkbox"] {
+ accent-color: var(--pl-blue);
+}
+input[type="range"].zoom-slider::-webkit-slider-runnable-track {
+ height: 4px;
+ border-radius: 2px;
+ background: var(--pl-blue);
+}
+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(--pl-ink);
+}
+input[type="range"].zoom-slider::-webkit-slider-runnable-track {
+ background: var(--pl-blue);
+}
+
+/* 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;
+ padding: 0;
+ font-size: 13px;
+ color: var(--pl-ink-2);
+ background: none;
+ box-shadow: none;
+}
+.pagination-index-container > .paginationIndex:only-child {
+ grid-column: 1 / -1;
+ justify-self: center;
+}
+.pagination.btn-group {
+ background-color: var(--pl-control);
+ backdrop-filter: var(--pl-blur);
+ border: 1px solid var(--pl-line);
+ border-radius: var(--pl-radius);
+ padding: 2px;
+ gap: 2px;
+}
+.pagination .btn,
+.pagination .btn:first-child,
+.pagination .btn:last-child {
+ margin: 0 !important;
+ color: var(--pl-ink);
+ border: 0 !important;
+ border-radius: var(--pl-radius-in) !important;
+ background: none;
+}
+.pagination .btn:hover {
+ background-color: var(--pl-raised);
+}
+.pagination .btn.active {
+ background-color: var(--pl-control-on);
+}
+@media (max-width: 575.98px) {
+ .pagination-index-container {
+ grid-template-columns: 1fr;
+ justify-items: center;
}
- #configuration-tabs-tabpane-interface
- .setting-section:first-child
- .card
- .setting
- div
- .sub-heading {
- margin-top: -28px;
- margin-left: 255px;
- width: 700px;
+ .pagination-index-container > .pagination,
+ .pagination-index-container > .paginationIndex {
+ grid-column: 1;
+ justify-self: center;
}
+}
- #configuration-tabs-tabpane-interface #language {
- margin-bottom: 15px;
+/* Cards: hover lifts the card with a blue edge; selection is a 2px blue 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: rgba(31, 120, 189, 0.8);
+ box-shadow: 0 14px 36px rgba(13, 34, 51, 0.14);
+}
+.grid-card:has(.card-check:checked) {
+ border-color: var(--pl-blue);
+ box-shadow: 0 0 0 1px var(--pl-blue);
+}
+/* White resolution and duration sit on a short scrim at the foot of the cover */
+.scene-card .thumbnail-section::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 45%;
+ pointer-events: none;
+ background: linear-gradient(180deg, transparent, rgba(13, 34, 51, 0.45));
+}
+.scene-card .overlay-resolution {
+ display: inline !important;
+ color: #fff;
+}
+.scene-card .scene-specs-overlay {
+ z-index: 1;
+ color: #fff;
+}
+.grid-card .thumbnail-section {
+ overflow: hidden;
+ flex: none; /* never squeezed by the text below it */
+}
+.grid-card .scene-card-link,
+.grid-card .video-section {
+ height: auto !important;
+}
+.grid-card .scene-card-preview,
+.grid-card .scene-card-preview-image,
+.grid-card .scene-card-preview-video {
+ width: 100% !important;
+ min-width: 0 !important;
+ max-width: none !important;
+ height: auto !important;
+ min-height: 0 !important;
+ max-height: none !important;
+ aspect-ratio: 16 / 9;
+ object-fit: cover !important;
+ margin: 0 !important;
+ transform: none !important;
+}
+.grid-card .card-section {
+ padding: 12px 14px 0 !important;
+ min-height: 0 !important;
+}
+.grid-card .card-section-title,
+.grid-card a .card-section-title {
+ color: var(--pl-ink) !important;
+ font-size: 17px !important;
+ font-weight: 700 !important;
+}
+.performer-card .card-section span,
+.performer-card .performer-name {
+ font-size: inherit !important;
+}
+.scene-card__date,
+.performer-card__age {
+ color: var(--pl-ink-2) !important;
+ font-size: 13px;
+}
+.scene-card__details {
+ margin-bottom: 0 !important;
+}
+.scene-card__description,
+.TruncatedText.scene-card__description {
+ color: var(--pl-ink-2);
+ font-size: 13px;
+}
+.grid-card .card-popovers {
+ margin: auto 0 0 !important;
+ padding: 12px 14px !important;
+ justify-content: flex-end !important;
+ gap: 18px;
+}
+.grid-card hr {
+ display: none;
+}
+.grid-card .card-popovers .btn {
+ color: var(--pl-ink);
+ border: 0 !important;
+ background: none !important;
+ box-shadow: none !important;
+ padding: 0 !important;
+ font-size: 13px;
+}
+.grid-card .card-popovers .btn:hover {
+ color: var(--pl-blue);
+}
+.grid-card .card-popovers .btn span,
+.grid-card .card-popovers .btn svg {
+ font-size: 13px;
+}
+.scene-card .scene-specs-overlay {
+ font-size: 13px !important;
+ font-weight: 700;
+ right: 10px !important;
+ bottom: 8px !important;
+}
+.scene-card .scene-specs-overlay span {
+ margin: 0 !important;
+ padding: 0 !important;
+ background: none !important;
+}
+.scene-card .scene-specs-overlay .overlay-resolution + .overlay-duration::before {
+ content: "\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(--pl-radius-in);
+ background-color: rgba(255, 255, 255, 0.72);
+ 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: 7px !important;
+ padding: 0 !important;
+ line-height: 1;
+}
+.grid-card .favorite-button svg {
+ width: 21px !important;
+ height: 21px !important;
+ font-size: 21px !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
+ rather than the cards plus the dots, every card one width and a row one
+ height */
+.recommendation-row .slick-slider {
+ margin: 0 30px 30px;
+}
+.recommendation-row .slick-prev {
+ left: -28px;
+}
+.recommendation-row .slick-next {
+ right: -28px;
+}
+.recommendation-row .slick-dots {
+ position: absolute;
+ top: 100%;
+}
+.recommendation-row .slick-track {
+ display: flex !important;
+ margin-bottom: 0;
+}
+.recommendation-row .slick-arrow {
+ top: 0;
+ height: 100%;
+ transform: none;
+}
+.recommendation-row .slick-slide {
+ height: auto !important;
+}
+.recommendation-row .slick-slide > div {
+ height: 100%;
+}
+.recommendation-row .slick-slide .grid-card {
+ width: 320px !important;
+ height: calc(100% - 10px);
+ margin: 5px 7px !important; /* the same 14px gap as the grid pages */
+ box-shadow: none; /* the carousel clips it into a hard grey band */
+}
+
+/* Detail pages: the performer header is one frosted card, the photo flush
+ left at 2:3 with the name and fields beside it */
+.detail-header {
+ background-color: transparent !important;
+ border-bottom: 0;
+}
+.detail-header:has(.performer-head) {
+ margin: 16px 16px 0 !important;
+ padding: 0 !important;
+ width: auto !important;
+ max-width: none !important;
+ background-color: var(--pl-glass) !important;
+ backdrop-filter: var(--pl-blur);
+ border: 1px solid var(--pl-line);
+ border-radius: var(--pl-radius-card);
+ overflow: hidden;
+}
+.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 {
+ flex: 0 0 300px;
+ width: 300px;
+ aspect-ratio: 2 / 3;
+ 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;
+ box-shadow: none !important;
+}
+.detail-header:has(.performer-head) > .detail-container > .row {
+ flex: 1;
+ min-width: 0;
+ margin: 0;
+ padding: 24px 32px;
+}
+.detail-header:has(.performer-head) .performer-head .col,
+.detail-header:has(.performer-head) .performer-head .row {
+ padding: 0 !important;
+ margin: 0 !important;
+}
+.detail-header .performer-name {
+ font-size: 40px;
+ font-weight: 700;
+}
+.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;
+ color: var(--pl-ink-3);
+}
+.details-edit {
+ gap: 8px;
+}
+.details-edit .btn {
+ margin: 0 !important;
+}
+@media (max-width: 767.98px) {
+ .detail-header:has(.performer-head) .detail-container {
+ flex-direction: column;
}
- #configuration-tabs-tabpane-library #stashes .sub-heading {
- margin-top: -26px;
- margin-left: 235px;
- width: 700px;
+ .detail-header:has(.performer-head) .detail-header-image {
+ flex-basis: auto;
+ width: 100%;
+ aspect-ratio: 4 / 5;
+ }
+ .detail-header:has(.performer-head) > .detail-container > .row {
+ padding: 14px;
}
}
-#configuration-tabs-tabpane-metadata-providers .setting,
-#configuration-tabs-tabpane-security .setting,
-#configuration-tabs-tabpane-tasks .setting,
-#configuration-tabs-tabpane-system .setting-section .setting,
-#settings-dlna .setting-section .setting,
-#configuration-tabs-tabpane-interface .setting-section .setting {
- padding-top: 0;
- padding-bottom: 0;
+/* Tabs: blue active tab on a pale blue pill with a blue underline */
+.nav-tabs {
+ border-bottom: 1px solid var(--pl-line);
+}
+.nav-tabs .nav-link {
+ color: var(--pl-ink);
+ border: 0;
+ border-radius: var(--pl-radius-in) var(--pl-radius-in) 0 0;
+}
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-link.active:hover {
+ color: var(--pl-blue);
+ background-color: var(--pl-blue-soft);
+ border-bottom: 2px solid var(--pl-blue);
+}
+.nav-tabs .badge,
+.badge-pill.badge-secondary,
+.tag-item.badge-secondary {
+ color: var(--pl-ink);
+ background-color: var(--pl-raised);
+}
+.tag-item.badge-secondary a {
+ color: inherit;
}
-#configuration-tabs-tabpane-interface .setting-section:nth-child(1) h1 {
- display: none;
+/* Scene page */
+.scene-tabs .scene-header,
+.scene-tabs .scene-header .TruncatedText {
+ font-size: 32px !important;
+ font-weight: 700;
+ line-height: 1.15;
+}
+.scene-tabs .tab-content h6 a,
+.scene-tabs .tab-content .scene-details a {
+ color: var(--pl-blue);
+}
+.scene-tabs .tab-content p.pre {
+ color: var(--pl-ink-2);
+}
+.scene-tabs,
+.scene-divider {
+ background-color: var(--pl-glass);
+ backdrop-filter: var(--pl-blur);
+}
+.scene-divider .btn {
+ color: var(--pl-blue);
+ background: none;
+ border: 0;
+}
+.video-js .vjs-play-progress,
+.video-js .vjs-volume-level {
+ background-color: var(--pl-blue);
+}
+.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(16, 23, 29, 0.8) !important;
+}
+.video-js:hover .vjs-big-play-button {
+ background-color: var(--pl-blue) !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(--pl-ink) !important;
+ background-color: var(--pl-glass) !important;
+ border: 1px solid var(--pl-line) !important;
+}
+/* Two performers side by side in the details panel */
+.scene-performers .performer-card {
+ width: calc(50% - 10px) !important;
+ margin: 5px !important;
+}
+
+/* Settings: one big frosted panel, blue active item, blue toggles */
+.nav-pills .nav-link {
+ color: var(--pl-ink);
+ border-radius: var(--pl-radius-in);
+}
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+ color: var(--pl-ink);
+ background-color: var(--pl-raised) !important;
+}
+#settings-container h1,
+#tasks-panel h1 {
+ font-size: 28px;
+ font-weight: 700;
+}
+#tasks-panel .tasks-panel-queue {
+ background-color: transparent !important;
+}
+.job-table.card {
+ background-color: var(--pl-inner) !important;
+}
+#settings-container .btn-primary {
+ color: #fff;
+ background-color: var(--pl-blue);
+ border-color: var(--pl-blue);
+}
+.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
+ background-color: var(--pl-blue);
+ border-color: var(--pl-blue);
}
-#configuration-tabs-tabpane-interface
- .setting-section
- .setting-group
- > .setting:not(:first-child)
- h3 {
- font-size: 1rem;
- margin-left: 2em;
+/* 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(--pl-line) !important;
+ border-radius: var(--pl-radius) !important;
}
-#configuration-tabs-tabpane-interface
- .setting-section
- .setting-group
- .setting
- > div:last-child {
- margin-right: 95% !important;
- margin-left: 0px;
- margin-top: -32px;
+/* 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: 600;
+ color: var(--pl-ink-2);
}
-.setting-section .setting > div:first-child {
- max-width: 415px;
+/* Stock light greys and whites that vanish on pale glass */
+.scene-tabs .date,
+.form-label,
+.studio-card .card-section a,
+.studio-parent-studios,
+.studio-child-studios {
+ color: var(--pl-ink-2) !important;
}
-#configuration-tabs-tabpane-interface
- .setting-section
- .setting
- > div:last-child {
- min-width: 20px;
- text-align: left;
- width: 38%;
+
+/* Phone bar and count line: dark ink, no shadow */
+.navbar .navbar-toggler,
+.navbar-buttons .btn,
+.navbar-buttons .nav-utility,
+.navbar-buttons svg {
+ color: var(--pl-ink) !important;
+}
+.navbar .navbar-toggler-icon {
+ filter: invert(1) brightness(0.2);
+}
+.paginationIndex,
+.paginationIndex span {
+ color: var(--pl-ink-2) !important;
+ text-shadow: none !important;
+ font-weight: 400;
}
-#configuration-tabs-tabpane-interface h3 {
- font-size: 1.25em;
+/* Tags: quiet translucent chips with dark ink */
+.tag-item.badge,
+.tag-item.badge-secondary {
+ color: var(--pl-ink) !important;
+ background-image: none !important;
+ background-color: var(--pl-control) !important;
+ border: 1px solid var(--pl-line);
+ text-shadow: none;
}
-#wall-preview .input-control {
- width: 160px;
+/* No text glow anywhere in the top bar */
+nav.bg-dark,
+nav.bg-dark * {
+ text-shadow: none !important;
}
-.setting-section .setting-group > .setting:not(:first-child),
-.setting-section .setting-group .collapsible-section .setting {
- padding-top: 0px;
- padding-bottom: 0px;
- margin-right: 0rem;
- line-height: 100%;
- margin-top: -3px;
- margin-bottom: -4px;
+/* Studio and tag logos sit on a slightly lighter wash of the card glass */
+.studio-card .studio-card-header,
+.tag-card .tag-card-header {
+ background-color: rgba(255, 255, 255, 0.35);
}
-#configuration-tabs-tabpane-interface .setting-section:nth-child(7) .setting {
- margin-left: 15px !important;
+/* Tables (scene list view, plugins, scrapers): pale header and stripes
+ instead of Stash's slate */
+.table thead,
+.table thead th,
+.table-list table thead,
+#plugins-table thead,
+.scraper-table thead {
+ color: var(--pl-ink) !important;
+ background-color: var(--pl-control) !important;
+}
+.table-striped tbody tr:nth-of-type(odd),
+.table-list table tbody tr:nth-of-type(odd) td {
+ background-color: var(--pl-raised) !important;
}
-#configuration-tabs-tabpane-interface
- .setting-section:nth-child(7)
- .setting:nth-child(1) {
- margin-left: 0px !important;
+.table-list table tbody td {
+ color: var(--pl-ink);
+ background-color: transparent;
}
-#settings-dlna h5 {
- margin-bottom: 70px;
+/* Home carousels: whole cards only. The number of cards that fits at about
+ 320px, sized to fill the row exactly, so none is cut off at the edge */
+.recommendation-row .slick-list {
+ container-type: inline-size;
}
-#settings-dlna .form-group h5 {
- margin-left: 255px;
- margin-top: -30px;
+.recommendation-row .slick-slide .grid-card {
+ width: calc(100cqw / max(1, round(100cqw / 334px, 1)) - 14px) !important;
+ max-width: none !important;
}
-#configuration-tabs-tabpane-metadata-providers #stash-boxes .sub-heading {
- margin-top: -28px;
- margin-left: 235px;
- width: 700px;
- font-size: 14px;
+/* Counts on the cards: dark ink, no shadow */
+.grid-card .card-popovers,
+.grid-card .card-popovers * {
+ text-shadow: none !important;
+ filter: none !important;
}
-.scraper-table tr:nth-child(2n) {
- background-color: rgba(16, 20, 25, 0.12);
+/* Stash ID pill: blue endpoint, the ID on the same pale control as the
+ toolbar (stock puts it on slate) */
+.stash-id-pill span {
+ color: #fff !important;
+ background-color: var(--pl-blue) !important;
+}
+.stash-id-pill a {
+ color: var(--pl-ink) !important;
+ background-color: var(--pl-control) !important;
+ border: 1px solid var(--pl-line);
+ border-left: 0;
}
-/* Library */
+/* Performer actions start in line with the field labels */
+.detail-header .details-edit {
+ margin-left: 0 !important;
+ padding-left: 0 !important;
+ justify-content: flex-start;
+}
-.stash-row .col-md-2 {
- padding-left: 4%;
+/* Tabs: one thin hairline under the bar; the active tab is ink with a blue
+ underline, no pill; counts sit on soft grey badges */
+.nav-tabs {
+ border-bottom: 1px solid var(--pl-line) !important;
+ padding-bottom: 0 !important; /* the underline sits on the hairline */
}
-#configuration-tabs-tabpane-library .setting-section .setting {
- padding: 0;
+.nav-tabs .nav-link {
+ color: var(--pl-ink-2) !important;
+ background: none !important;
+ border: 0 !important;
+ border-bottom: 3px solid transparent !important;
+ margin-bottom: -1px;
+}
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-link.active:hover {
+ color: var(--pl-ink) !important;
+ background: none !important;
+ border-bottom-color: var(--pl-blue) !important;
+}
+.nav-tabs .badge,
+.nav-tabs .left-spacing.badge {
+ color: var(--pl-ink) !important;
+ background-color: rgba(13, 34, 51, 0.1) !important;
}
-#configuration-tabs-tabpane-security .setting-section,
-#configuration-tabs-tabpane-tasks .setting-section,
-#configuration-tabs-tabpane-tasks .setting-group {
- max-width: 915px;
-}
-
-#configuration-tabs-tabpane-logs .setting-section,
-#configuration-tabs-tabpane-metadata-providers .setting-section,
-#configuration-tabs-tabpane-services .setting-section,
-#configuration-tabs-tabpane-system .setting-section,
-#configuration-tabs-tabpane-library .setting-section:not(:first-child),
-#configuration-tabs-tabpane-interface .setting-section {
- max-width: 810px;
-}
-
-#configuration-tabs-tabpane-security .setting-section .setting > div:last-child,
-#configuration-tabs-tabpane-metadata-providers
- .setting-section
- .setting
- > div:last-child,
-#configuration-tabs-tabpane-services .setting-section .setting > div:last-child,
-#configuration-tabs-tabpane-system .setting-section .setting > div:last-child,
-#configuration-tabs-tabpane-library .setting-section .setting > div:last-child,
-#configuration-tabs-tabpane-interface
- .setting-section
- .setting
- > div:last-child,
-#configuration-tabs-tabpane-tasks .setting-section .setting > div:last-child {
- min-width: 20px;
- text-align: right;
- width: auto;
+/* No text shadows anywhere: dark ink on pale glass doesn't need them, and
+ white text only sits on the cover scrim */
+*,
+*::before,
+*::after {
+ text-shadow: none !important;
+}
+
+/* Filter sidebar: hairline dividers, a plain search box */
+.sidebar-section,
+.sidebar .sidebar-section {
+ border-color: var(--pl-line) !important;
+}
+.sidebar .form-control,
+.sidebar .clearable-text-field {
+ box-shadow: none !important;
+ border: 1px solid var(--pl-line) !important;
+ background-color: var(--pl-control) !important;
+}
+.sidebar .sidebar-section .btn,
+.sidebar .sidebar-section .collapse-button {
+ color: var(--pl-ink) !important;
+ background: none !important;
+}
+
+/* Hairlines instead of slate or black: scene-page counter dividers, settings rows */
+.scene-toolbar .btn.minimal,
+.scene-tabs .btn-group .btn.minimal,
+.setting,
+.setting-group,
+.setting-section .setting:not(:last-child) {
+ border-color: var(--pl-line) !important;
+}
+
+/* Detail-page tab bars: Stash pads them below, which lifts the active
+ underline off the bar's line */
+.nav-tabs {
+ padding-bottom: 0 !important;
+}
+
+/* The slim header Stash pins when a detail page scrolls: the top bar's white
+ glass with dark ink, not white text on nothing */
+.detail-header.sticky {
+ background-color: var(--pl-bar) !important;
+ backdrop-filter: var(--pl-blur);
+ border-bottom: 1px solid var(--pl-line);
+ margin: 0 !important;
+ border-radius: 0 !important;
+}
+.detail-header.sticky,
+.detail-header.sticky a,
+.detail-header.sticky span {
+ color: var(--pl-ink) !important;
+}
+.detail-header.sticky .performer-gender,
+.detail-header.sticky .performer-age,
+.detail-header.sticky span:not(.performer-name) {
+ color: var(--pl-ink-2) !important;
+}
+
+/* The pinned header slides down only as the full header's bottom edge passes
+ under the top bar, instead of appearing as soon as the page scrolls. The
+ animation follows the scroll position, so scrolling back up reverses it.
+ Browsers without scroll-driven animations show it as Stash does. */
+@supports (animation-timeline: view()) {
+ .main {
+ timeline-scope: --pl-detail-header;
+ }
+ .detail-header:not(.sticky) {
+ view-timeline: --pl-detail-header block;
+ }
+ .detail-header.sticky {
+ animation: pl-sticky-in linear both;
+ animation-timeline: --pl-detail-header;
+ animation-range: exit calc(100% - 130px) exit calc(100% - 50px);
+ }
+ @keyframes pl-sticky-in {
+ from {
+ transform: translateY(-100%);
+ opacity: 0;
+ visibility: hidden;
+ }
+ to {
+ transform: none;
+ opacity: 1;
+ visibility: visible;
+ }
+ }
+}
+
+/* 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" footer 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) .sidebar {
+ width: 100% !important;
+ max-width: none !important;
+ bottom: 46px; /* the top bar sits at the foot of the screen on phones */
+ height: auto !important;
+ background-color: rgba(246, 249, 251, 0.98) !important; /* a full-screen sheet hides the page */
+ backdrop-filter: var(--pl-blur);
+ }
+ .sidebar-toolbar {
+ background-color: transparent !important;
+ }
+ /* the results button: full width, on the sheet itself rather than a band */
+ .sidebar .sidebar-footer {
+ background: none !important;
+ backdrop-filter: none !important;
+ border-top: 0 !important;
+ padding: 12px 0 15px !important;
+ }
+ .sidebar .sidebar-footer .btn {
+ width: 100%;
+ height: 44px;
+ }
+ /* detail-page tabs (a performer's Scenes, a studio's Scenes...) keep the
+ sidebar in the page flow at a fixed 250px; lift it into the same sheet */
+ .sidebar-pane:not(.hide-sidebar) > .sidebar {
+ position: fixed !important;
+ top: 0 !important;
+ left: 0 !important;
+ right: 0 !important;
+ bottom: auto !important;
+ height: calc(100dvh - 46px) !important; /* down to the bottom bar */
+ max-height: none !important; /* detail pages cap it at the old sticky height */
+ flex: none !important;
+ margin: 0 !important;
+ padding: 12px 15px 0 !important; /* nothing touches the screen edge */
+ z-index: 1020;
+ }
+ /* above the performer header, which is its own layer */
+ .sidebar-pane:not(.hide-sidebar) {
+ z-index: 1020;
+ }
+ /* the sheet fills the screen; its "Show N results" footer sits at the foot */
+ .sidebar-pane:not(.hide-sidebar) .sidebar {
+ display: flex !important;
+ flex-direction: column;
+ }
+ .sidebar-pane:not(.hide-sidebar) .sidebar .sidebar-footer {
+ margin-top: auto;
+ bottom: 0;
+ width: 100% !important;
+ left: 0 !important;
+ }
+}
+@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;
+ }
+ /* one column of cards beside the filters */
+ .sidebar-pane:not(.hide-sidebar) .grid-card {
+ width: calc(100% - 30px) !important;
+ }
+}
+
+/* Detail fields on phones: the label above its value, so long values like a
+ Stash ID get the full width; an ID that still doesn't fit ends in an
+ ellipsis (the link opens the full ID) */
+@media (max-width: 575.98px) {
+ .detail-header .detail-item {
+ display: block !important;
+ }
+ .detail-header .detail-item-title {
+ display: block;
+ width: auto !important;
+ margin-bottom: 1px;
+ }
+ /* the stacked header's details take the card's width, not their content's */
+ .detail-header > .detail-container > .row {
+ align-self: stretch;
+ max-width: 100%;
+ }
+ .detail-header .performer-head {
+ min-width: 0;
+ max-width: 100%;
+ }
+}
+.stash-id-pill {
+ display: inline-flex !important;
+ max-width: 100%;
+ min-width: 0;
+}
+.stash-id-pill span {
+ flex: none;
+}
+.stash-id-pill a {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.detail-item-value.stash-ids,
+.detail-item-value.stash-ids ul,
+.detail-item-value.stash-ids li {
+ display: block;
+ max-width: 100%;
+ min-width: 0;
+ margin: 0;
+}
+.detail-item-value.stash-ids {
+ flex: 1;
+ overflow: hidden;
+}
+.detail-header .detail-group,
+.detail-header .detail-item.stash_ids {
+ min-width: 0;
+ max-width: 100%;
+}
+
+/* Dialogs: the white glass of menus with dark ink, hairline dividers and
+ blue only on the main action (the old theme painted them solid blue) */
+.modal-backdrop.show {
+ background-color: rgba(13, 34, 51, 0.35);
+ opacity: 1;
+}
+.modal-content {
+ color: var(--pl-ink) !important;
+ background-color: var(--pl-menu) !important;
+ backdrop-filter: var(--pl-blur);
+ border: 1px solid var(--pl-line) !important;
+ border-radius: var(--pl-radius-card) !important;
+ box-shadow: 0 24px 60px rgba(13, 34, 51, 0.22);
+ overflow: hidden;
+}
+.modal-header,
+.modal-body,
+.modal-footer {
+ color: var(--pl-ink) !important;
+ background: transparent !important;
+ border-color: var(--pl-line) !important;
+}
+.modal-header {
+ font-size: 20px;
+ font-weight: 700;
+ align-items: center;
+}
+.modal-body .col-form-label,
+.modal-body label,
+.modal-body .search-term-row > span {
+ color: var(--pl-ink-2) !important;
+}
+.modal-content .btn-secondary {
+ color: var(--pl-ink) !important;
+ background-color: var(--pl-control) !important;
+ border: 1px solid var(--pl-line) !important;
+}
+.modal-footer .btn-secondary:not([title]) {
+ background: none !important; /* Cancel is a quiet text button */
+ border-color: transparent !important;
+}
+.modal-footer .btn-primary {
+ color: #fff !important;
+ background-color: var(--pl-blue) !important;
+ border-color: var(--pl-blue) !important;
+}
+
+/* Edit filter: the design's narrower dialog, filters grouped in one soft
+ block with hairlines between them */
+.edit-filter-dialog .modal-dialog {
+ max-width: 560px;
+}
+.edit-filter-dialog .criterion-list {
+ margin: 8px 0;
+ border: 1px solid var(--pl-line);
+ border-radius: var(--pl-radius);
+ background-color: var(--pl-inner);
+ overflow: hidden;
+}
+.edit-filter-dialog .criterion-list + .criterion-list {
+ margin-top: 14px;
+}
+.edit-filter-dialog .criterion-list > .card {
+ margin: 0 !important;
+ padding: 0 !important;
+ background: none !important;
+ backdrop-filter: none !important;
+ border: 0 !important;
+ border-bottom: 1px solid var(--pl-line) !important;
+ border-radius: 0 !important;
+ box-shadow: none !important;
+}
+.edit-filter-dialog .criterion-list > .card:last-child {
+ border-bottom: 0 !important;
+}
+.edit-filter-dialog .filter-item-header {
+ color: var(--pl-ink) !important;
+ background: none !important;
+ font-weight: 600;
+ font-size: 14px;
+}
+.edit-filter-dialog .filter-item-header:hover {
+ background-color: var(--pl-raised) !important;
+}
+.edit-filter-dialog .pin-criterion-button {
+ color: var(--pl-ink-3) !important;
+}
+
+/* Phones: dialogs 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,
+ .edit-filter-dialog .modal-dialog {
+ max-width: none !important;
+ width: 100% !important;
+ margin: 0 !important;
+ min-height: 0;
+ height: calc(100dvh - 46px);
+ }
+ .modal-content {
+ height: 100%;
+ border-radius: 0 !important;
+ border: 0 !important;
+ background-color: rgba(246, 249, 251, 0.98) !important;
+ }
+ .modal-body {
+ flex: 1;
+ max-height: none !important; /* Stash caps it at a fixed height */
+ overflow-y: auto;
+ }
+ .modal-footer {
+ flex-wrap: nowrap;
+ }
+}
+
+/* Focused fields: a soft blue ring instead of Stash's dark one */
+.form-control:focus,
+.clearable-text-field:focus,
+.modal-content .form-control:focus {
+ border-color: var(--pl-blue) !important;
+ box-shadow: 0 0 0 3px var(--pl-blue-soft) !important;
+}
+.edit-filter-dialog .filter-item-header:focus,
+.edit-filter-dialog .filter-item-header:focus-visible {
+ outline: none !important;
+ box-shadow: inset 3px 0 0 var(--pl-blue) !important; /* keyboard focus: a blue edge */
+}
+
+/* Phone and tablet menu (the ☰ button): an even grid of tiles, small icon
+ above its label, the current page on a pale blue tile, utility icons in a
+ row beneath a hairline; all on the bar's white glass. The desktop rule that
+ lays nav items out as one-line words does not apply here. */
+@media (max-width: 1199.98px) {
+ .navbar-collapse.show,
+ .navbar-collapse.collapsing {
+ background-color: var(--pl-bar) !important;
+ backdrop-filter: var(--pl-blur);
+ border-top: 1px solid var(--pl-line);
+ padding: 10px 24px 6px !important;
+ margin: 0 -14px; /* edge to edge across the bar's padding */
+ }
+ .navbar-collapse > .navbar-nav:first-child {
+ display: grid !important;
+ grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); /* 3 across on phones */
+ gap: 6px;
+ }
+ .navbar-collapse > .navbar-nav:first-child > div {
+ max-width: none !important;
+ flex: none !important;
+ width: auto !important;
+ padding: 0 !important;
+ }
+ .navbar-collapse > .navbar-nav > div > a {
+ display: flex !important;
+ flex-direction: column !important;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ height: 64px !important;
+ padding: 6px !important;
+ color: var(--pl-ink) !important;
+ background: none !important;
+ border-radius: var(--pl-radius) !important;
+ font-size: 12px;
+ font-weight: 600;
+ }
+ .navbar-collapse > .navbar-nav > div > a svg {
+ display: block !important;
+ width: 20px !important;
+ height: 20px !important;
+ font-size: 20px !important;
+ margin: 0 !important;
+ color: var(--pl-ink-2);
+ }
+ .navbar-collapse > .navbar-nav > div > a.active {
+ color: var(--pl-blue) !important;
+ background-color: var(--pl-blue-soft) !important;
+ }
+ .navbar-collapse > .navbar-nav > div > a.active svg {
+ color: var(--pl-blue);
+ }
+ .navbar-collapse > .navbar-nav:not(:first-child) {
+ justify-content: center;
+ gap: 8px;
+ margin-top: 8px;
+ padding-top: 6px;
+ border-top: 1px solid var(--pl-line);
+ }
+ .navbar-collapse .nav-utility svg {
+ width: 18px !important;
+ height: 18px !important;
+ }
}
-#configuration-tabs-tabpane-tasks
- .setting-section
- .collapsible-section
- .setting
- div:last-child {
- margin-right: 95% !important;
- margin-left: -12px;
- margin-top: -15px;
+/* Phones: the list toolbar on two rows, as in the design. The space for the
+ filter button is kept on the first row only (search stretches beside it,
+ then the saved-filter and filter buttons); the rest slims down to share
+ the second row. */
+@media (max-width: 575.98px) {
+ .filtered-list-toolbar {
+ margin-left: 0 !important;
+ margin-right: 0 !important; /* stock keeps 40px each side */
+ justify-content: flex-start !important;
+ gap: 8px 6px !important;
+ }
+ .filtered-list-toolbar > .search-term-input {
+ margin-left: 40px !important;
+ flex: 1 1 0 !important;
+ min-width: 0 !important;
+ width: auto !important;
+ }
+ .filtered-list-toolbar > .search-term-input .form-control {
+ width: 100% !important;
+ min-width: 0 !important;
+ }
+ .filtered-list-toolbar .sort-by-select .btn {
+ padding: 0 6px !important;
+ }
+ .filtered-list-toolbar > .page-size-selector,
+ .filtered-list-toolbar > .page-size-selector select {
+ width: 56px !important;
+ min-width: 0 !important;
+ }
+ .filtered-list-toolbar .btn-group .btn {
+ padding: 0 8px !important;
+ }
+ .filtered-list-toolbar > .btn-group:last-of-type {
+ margin-left: auto; /* the view buttons close the second row on the right */
+ }
+ .filtered-list-toolbar .btn-group:not(.pagination) .btn {
+ padding: 0 6px !important;
+ }
+ /* row 1: search + the filter buttons; a zero-height break; row 2: the rest */
+ .filtered-list-toolbar > * {
+ order: 3;
+ }
+ .filtered-list-toolbar > .search-term-input,
+ .filtered-list-toolbar > .search-term-input + .btn-group {
+ order: 1;
+ }
+ .filtered-list-toolbar::after {
+ content: "";
+ order: 2;
+ flex-basis: 100%;
+ height: 0;
+ }
}
-#configuration-tabs-tabpane-system .setting-section .sub-heading {
- margin-bottom: 1.2rem;
+/* Theme Switch menu: solid, on the theme's menu colours (stock leaves its
+ sections on Bootstrap's slate, and see-through over the cards) */
+.theme-plugin-menu.dropdown-menu {
+ padding: 6px !important;
+ color: var(--pl-ink);
+ background: rgba(255, 255, 255, 0.96) !important;
+ border: 1px solid var(--pl-line) !important;
+ border-radius: var(--pl-radius-card) !important;
+ box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
+}
+.theme-plugin-menu .accordion {
+ max-width: none !important;
+}
+.theme-plugin-menu .modal-header {
+ margin: 0 0 6px;
+ padding: 6px 8px 10px !important;
+ color: var(--pl-ink) !important;
+ background: none !important;
+ border: 0 !important;
+ border-bottom: 1px solid var(--pl-line) !important;
+ border-radius: 0 !important;
+ font-size: 14px;
+ font-weight: 600;
+ text-shadow: none;
+}
+.theme-plugin-menu .accordion > .card {
+ margin: 0 0 4px !important;
+ color: var(--pl-ink) !important;
+ background: rgba(13, 34, 51, 0.04) !important;
+ border: 1px solid var(--pl-line) !important;
+ border-radius: var(--pl-radius-in) !important;
+ box-shadow: none !important;
+ backdrop-filter: none !important;
+}
+.theme-plugin-menu .card-header,
+.theme-plugin-menu .card-body {
+ color: var(--pl-ink) !important;
+ background: none !important;
+ border: 0 !important;
+ text-shadow: none;
+}
+.theme-plugin-menu .card-header {
+ cursor: pointer;
+}
+.theme-plugin-menu .card-header svg {
+ color: var(--pl-ink-2);
+}
+.theme-plugin-menu legend {
+ color: var(--pl-ink) !important;
+}
+.theme-plugin-menu .checkbox-switch input + label::before {
+ color: var(--pl-ink-2) !important;
+ background: color-mix(in srgb, var(--pl-ink-2) 30%, transparent) !important;
+ border-color: transparent !important;
+}
+.theme-plugin-menu .checkbox-switch input:checked + label::before {
+ color: #fff !important;
+ background: var(--pl-blue) !important;
+ border-color: var(--pl-blue) !important;
+}
+/* A blurred bar turns everything drawn inside it see-through, the open
+ menu included: while the menu is open the bar drops its blur */
+.top-nav:has(.theme-plugin-menu.show) {
+ backdrop-filter: none !important;
+ -webkit-backdrop-filter: none !important;
+}
+.top-nav:has(.theme-plugin-menu.show) {
+ background-color: rgba(255, 255, 255, 0.96) !important;
}
diff --git a/themes/Theme-PulsarLight/Theme-PulsarLight.yml b/themes/Theme-PulsarLight/Theme-PulsarLight.yml
index e07d4738..aae60a1a 100644
--- a/themes/Theme-PulsarLight/Theme-PulsarLight.yml
+++ b/themes/Theme-PulsarLight/Theme-PulsarLight.yml
@@ -1,6 +1,6 @@
name: Theme - PulsarLight
description: Plex Theme for Stash by Fonzie 2021
-version: 0.3.1
+version: 1.0
url: https://discourse.stashapp.cc/t/pulsarlight/1430
ui:
css: