diff --git a/themes/Theme-Minimal/README.md b/themes/Theme-Minimal/README.md index 3bc3343..6f01858 100644 --- a/themes/Theme-Minimal/README.md +++ b/themes/Theme-Minimal/README.md @@ -17,6 +17,13 @@ For intended experience: ## Changelog +### Version 0.2.4 - 2025-04-06 + +- Increase contrast for settings toggles +- Fix popover arrow theming +- Theme performer scraper +- Theme player vtt preview and markers + ### Version 0.2.3 - 2025-04-05 - Fix studio image in scene view. diff --git a/themes/Theme-Minimal/Theme-Minimal.yml b/themes/Theme-Minimal/Theme-Minimal.yml index 24c49a5..cc21ab5 100644 --- a/themes/Theme-Minimal/Theme-Minimal.yml +++ b/themes/Theme-Minimal/Theme-Minimal.yml @@ -1,6 +1,6 @@ name: Theme - Minimal description: Minimal Theme for Stash -version: 0.2.3 +version: 0.2.4 ui: css: - index.css @@ -17,8 +17,8 @@ ui: - popover.css - studio.css - nav-bar.css - - studio-tagger.css - scene-tagger.css + - studio-performer-tagger.css - skeleton.css assets: /: ./assets diff --git a/themes/Theme-Minimal/_theme.css b/themes/Theme-Minimal/_theme.css index 77857e0..d453d36 100644 --- a/themes/Theme-Minimal/_theme.css +++ b/themes/Theme-Minimal/_theme.css @@ -138,6 +138,19 @@ --black-a11: rgba(0, 0, 0, 0.9); --black-a12: rgba(0, 0, 0, 0.95); + --white-a1: rgba(255, 255, 255, 0.05); + --white-a2: rgba(255, 255, 255, 0.1); + --white-a3: rgba(255, 255, 255, 0.15); + --white-a4: rgba(255, 255, 255, 0.2); + --white-a5: rgba(255, 255, 255, 0.3); + --white-a6: rgba(255, 255, 255, 0.4); + --white-a7: rgba(255, 255, 255, 0.5); + --white-a8: rgba(255, 255, 255, 0.6); + --white-a9: rgba(255, 255, 255, 0.7); + --white-a10: rgba(255, 255, 255, 0.8); + --white-a11: rgba(255, 255, 255, 0.9); + --white-a12: rgba(255, 255, 255, 0.95); + --text-3xs: 0.5rem; /* 8px */ --text-2xs: 0.625rem; /* 10px */ --text-xs: 0.75rem; /* 12px */ diff --git a/themes/Theme-Minimal/inputs.css b/themes/Theme-Minimal/inputs.css index bd2012d..feb9871 100644 --- a/themes/Theme-Minimal/inputs.css +++ b/themes/Theme-Minimal/inputs.css @@ -383,9 +383,70 @@ div.react-datepicker { border: unset; } +/* ios toggle */ +/* :before is background pill */ +.custom-control-input ~ .custom-control-label:before { + /* color: var(--primary-11); */ + border-color: var(--primary-6); + background-color: var(--primary-6); +} +.custom-control-input:checked ~ .custom-control-label:before { + /* color: var(--primary-12); */ + border-color: var(--primary-6); + background-color: var(--primary-6); +} +/* due to hierarchy parent can disabled checked child*/ +.custom-switch + .custom-control-input:disabled:checked + ~ .custom-control-label:before { + border-color: var(--primary-6); + background-color: var(--primary-6); +} + +/* :after is moving cirle */ +.custom-switch .custom-control-input ~ .custom-control-label:after { + /* color: var(--primary-11); */ + /* border-color: var(--primary-4); */ + background-color: var(--primary-2); + + box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0); + transition: all 0.3s ease-out, box-shadow 1s ease-out; +} +.custom-switch .custom-control-input:checked ~ .custom-control-label:after { + /* color: var(--primary-12); */ + /* border-color: var(--primary-7); */ + background-color: var(--primary-12); + box-shadow: 0 0 20px 2px rgba(255, 255, 255, 0.5); + animation-delay: 0.5s; +} + +/* scene/studio filter buttons */ +.filtered-list-toolbar.btn-toolbar, +.pagination { + .btn { + border-left: 0; + border-right: 0; + } + .btn-secondary { + &.active { + color: var(--primary-12); + background-color: unset; + svg { + filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); + } + } + color: var(--primary-11); + } +} + +.filter-container.text-muted.paginationIndex.center-text { + color: var(--primary-10) !important; + font-size: var(--text-xs); +} + /* sliders */ input[type="range"]::-moz-range-track { - background: var(--primary-5); + background: var(--primary-4); } input[type="range"]::-moz-range-thumb { border-radius: 50%; @@ -395,14 +456,14 @@ input[type="range"]::-moz-range-thumb { input[type="range"]:active::-moz-range-track, input[type="range"]:focus::-moz-range-track { - background: var(--primary-5); + background: var(--primary-4); } input[type="range"]::-webkit-slider-runnable-track { - background: var(--primary-5); + background: var(--primary-4); } input[type="range"]:active::-webkit-slider-runnable-track, input[type="range"]:focus::-webkit-slider-runnable-track { - background: var(--primary-5); + background: var(--primary-4); } input[type="range"]::-webkit-slider-thumb { @@ -410,3 +471,17 @@ input[type="range"]::-webkit-slider-thumb { background: var(--primary-10); border: 1px solid var(--primary-10); } + +/* player side-bar */ +.organized-button { + transition: filter, color ease-in 0.5; + &.organized { + color: var(--primary-12); + svg { + filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); + } + } + &.not-organized { + color: var(--primary-10); + } +} diff --git a/themes/Theme-Minimal/player.css b/themes/Theme-Minimal/player.css index 060d926..0adb228 100644 --- a/themes/Theme-Minimal/player.css +++ b/themes/Theme-Minimal/player.css @@ -192,12 +192,85 @@ border-radius: 8px; overflow: hidden; + font-family: unset; + .vjs-poster { background-color: var(--primary-1); } .vjs-vtt-thumbnail-display { + box-shadow: unset; + outline: 3px solid var(--black-a7); + backdrop-filter: blur(10px); border: unset; - border-radius: 0.8rem; + border-radius: 12px; + + bottom: 72px; + } + + .vjs-progress-holder.vjs-slider { + border-radius: 12px; + background-color: var(--white-a3); + + .vjs-load-progress { + background-color: var(--white-a4); + } + .vjs-load-progress { + /* divs are watched sections */ + div { + background-color: var(--white-a5); + } + } + + .vjs-play-progress.vjs-slider-bar { + border-top-left-radius: 12px; + border-bottom-left-radius: 12px; + background-color: var(--white-a10); + } + + .vjs-mouse-display { + .vjs-marker-tooltip, + .vjs-time-tooltip { + background-color: var(--black-a7); + backdrop-filter: blur(10px); + border-radius: 8px; + padding: 6px 8px; + + color: var(--primary-12); + font-size: var(--text-2xs); + font-family: unset; + font-weight: 500; + + /* same width as thumbnail-display */ + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + + /* fix positioning */ + right: unset !important; + transform: translate(-50%, 50%); + top: -50px; + } + } + } + + .vjs-marker-dot { + top: 13px; + + &:hover { + /* removes scaling */ + transform: translate(-50%, -50%); + } + } + + .vjs-marker-dot, + .vjs-marker-range { + background-color: var(--white-a8) !important; + position: absolute; + height: 4px; + border-radius: 2px; + box-shadow: unset; + transition: none; } } diff --git a/themes/Theme-Minimal/popover.css b/themes/Theme-Minimal/popover.css index fa75991..09c1d10 100644 --- a/themes/Theme-Minimal/popover.css +++ b/themes/Theme-Minimal/popover.css @@ -9,5 +9,6 @@ .arrow::after, .arrow::before { border-bottom-color: var(--primary-2); + border-top-color: var(--primary-2); } } diff --git a/themes/Theme-Minimal/scenes.css b/themes/Theme-Minimal/scenes.css index b7f4fd1..ccd0e7e 100644 --- a/themes/Theme-Minimal/scenes.css +++ b/themes/Theme-Minimal/scenes.css @@ -11,6 +11,8 @@ color: unset; text-decoration: none; font-size: var(--text-lg); + /* demo */ + /* filter: blur(3px); */ } .card-controls { @@ -91,8 +93,8 @@ white-space: nowrap; text-overflow: ellipsis; - width: 100%; overflow: hidden; + width: 100%; } a:has(> img) { diff --git a/themes/Theme-Minimal/settings.css b/themes/Theme-Minimal/settings.css index 624aa8c..588c41a 100644 --- a/themes/Theme-Minimal/settings.css +++ b/themes/Theme-Minimal/settings.css @@ -41,18 +41,6 @@ } } -.custom-control-input ~ .custom-control-label:before { - color: var(--primary-11); - border-color: var(--primary-5); - background-color: var(--primary-5); -} - -.custom-control-input:checked ~ .custom-control-label:before { - color: var(--primary-12); - border-color: var(--primary-7); - background-color: var(--primary-7); -} - .setting-section { display: flex; flex-direction: column; diff --git a/themes/Theme-Minimal/shared.css b/themes/Theme-Minimal/shared.css index 07d4c10..fa3bcc6 100644 --- a/themes/Theme-Minimal/shared.css +++ b/themes/Theme-Minimal/shared.css @@ -97,8 +97,20 @@ /* tags */ .tag-item { - background-color: var(--primary-4); + background-color: var(--black-a7); + backdrop-filter: blur(10px); + border-radius: 8px; + padding: 6px 10px; + color: var(--primary-12); + font-size: var(--text-2xs); + font-family: unset; + font-weight: 500; + + .btn-secondary { + color: var(--primary-12); + opacity: 1; + } } .badge-secondary { diff --git a/themes/Theme-Minimal/studio-performer-tagger.css b/themes/Theme-Minimal/studio-performer-tagger.css new file mode 100644 index 0000000..bc5dfda --- /dev/null +++ b/themes/Theme-Minimal/studio-performer-tagger.css @@ -0,0 +1,59 @@ +.StudioTagger, +.PerformerTagger { + .StudioTagger-studio, + .PerformerTagger-performer { + background-color: unset; + .studio-card, + .performer-card { + border-radius: 12px; + img { + background-color: unset; + } + } + .StudioTagger-details, + .PerformerTagger-details { + margin-top: 1rem; + + .StudioTagger-header, + .PerformerTagger-header { + h2 { + font-size: var(--text-xl); + } + } + + .text-left h5 { + color: var(--primary-11); + font-weight: unset; + font-size: var(--text-xs); + } + + .PerformerTagger-performer-search { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); + gap: 24px; + button.PerformerTagger-performer-search-item { + flex: unset; + max-width: unset; + width: min-content; + border-radius: 8px; + + padding: 12px; + align-items: flex-start; + gap: 12px; + + img.PerformerTagger-thumb { + height: 80px; + border-radius: 6px; + margin-right: 0; + } + + span { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } + } + } + } +} diff --git a/themes/Theme-Minimal/studio.css b/themes/Theme-Minimal/studio.css index 8c061f0..012268d 100644 --- a/themes/Theme-Minimal/studio.css +++ b/themes/Theme-Minimal/studio.css @@ -100,3 +100,45 @@ } } } + +.PerformerScrapeModal-list { + .search-item { + background-color: unset; + transition: background-color 0.3s ease-in; + border-radius: 16px; + padding: 8px; + + &:hover { + background-color: var(--primary-3); + } + + .performer-result { + .row { + gap: 12px; + + .scene-image-container { + img.scene-image { + border-radius: 12px; + padding-left: unset !important; + + max-height: unset; + max-width: unset; + min-width: unset; + width: 14rem; + object-fit: contain; + } + } + + .performer-name { + font-size: var(--text-lg); + font-weight: 500; + } + + .performer-details { + font-size: var(--text-base); + font-weight: unset; + } + } + } + } +}