This commit is contained in:
deuulc
2025-04-06 14:57:00 +02:00
committed by GitHub
parent de34ff51c9
commit f85fd4820b
11 changed files with 293 additions and 21 deletions

View File

@@ -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.

View File

@@ -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

View File

@@ -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 */

View File

@@ -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);
}
}

View File

@@ -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;
}
}

View File

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

View File

@@ -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) {

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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;
}
}
}
}
}
}

View File

@@ -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;
}
}
}
}
}