From 2ac5bd44b00207ebd42b39fb446e897b44a54edf Mon Sep 17 00:00:00 2001 From: Scruffy Nerf Date: Mon, 1 Jan 2024 13:21:33 -0500 Subject: [PATCH 1/2] Add Themes --- themes/Theme-BlackHole/Theme-BlackHole.css | 91 + themes/Theme-BlackHole/Theme-BlackHole.yml | 6 + themes/Theme-ModernDark/Theme-ModernDark.css | 484 +++++ themes/Theme-ModernDark/Theme-ModernDark.yml | 6 + themes/Theme-NeonDark/Theme-NeonDark.css | 1081 ++++++++++ themes/Theme-NeonDark/Theme-NeonDark.yml | 6 + themes/Theme-Night/Theme-Night.css | 189 ++ themes/Theme-Night/Theme-Night.yml | 6 + themes/{plex => Theme-Plex}/README.md | 10 +- .../plex.css => Theme-Plex/Theme-Plex.css} | 0 themes/Theme-Plex/Theme-Plex.yml | 6 + themes/Theme-Pulsar/Theme-Pulsar.css | 1787 ++++++++++++++++ themes/Theme-Pulsar/Theme-Pulsar.yml | 6 + .../Theme-PulsarLight/Theme-PulsarLight.css | 1830 +++++++++++++++++ .../Theme-PulsarLight/Theme-PulsarLight.yml | 6 + 15 files changed, 5509 insertions(+), 5 deletions(-) create mode 100644 themes/Theme-BlackHole/Theme-BlackHole.css create mode 100644 themes/Theme-BlackHole/Theme-BlackHole.yml create mode 100644 themes/Theme-ModernDark/Theme-ModernDark.css create mode 100644 themes/Theme-ModernDark/Theme-ModernDark.yml create mode 100644 themes/Theme-NeonDark/Theme-NeonDark.css create mode 100644 themes/Theme-NeonDark/Theme-NeonDark.yml create mode 100644 themes/Theme-Night/Theme-Night.css create mode 100644 themes/Theme-Night/Theme-Night.yml rename themes/{plex => Theme-Plex}/README.md (80%) rename themes/{plex/plex.css => Theme-Plex/Theme-Plex.css} (100%) create mode 100644 themes/Theme-Plex/Theme-Plex.yml create mode 100644 themes/Theme-Pulsar/Theme-Pulsar.css create mode 100644 themes/Theme-Pulsar/Theme-Pulsar.yml create mode 100644 themes/Theme-PulsarLight/Theme-PulsarLight.css create mode 100644 themes/Theme-PulsarLight/Theme-PulsarLight.yml diff --git a/themes/Theme-BlackHole/Theme-BlackHole.css b/themes/Theme-BlackHole/Theme-BlackHole.css new file mode 100644 index 00000000..66ca41ab --- /dev/null +++ b/themes/Theme-BlackHole/Theme-BlackHole.css @@ -0,0 +1,91 @@ +/* Black Hole Theme by BViking78 v2.0 */ +/* STASH GENERAL */ +/* Set Background to Black & Optional Custom Image */ +body { + background: black url("") no-repeat fixed center; + background-size: contain; +} + +/* Change Top Nav Bar Colors */ +.bg-dark { + background-color: #000000!important; +} + +/* Set Red Border on Button on Hover */ +.btn-primary.btn:hover { + border: 1px solid red; +} + +/* Set Background to Transparent for Tags/Performers Popups*/ +.fade.hover-popover-content { + background: transparent; +} + +/* Zoom Performers image when Hover*/ +.hover-popover-content { + max-width: initial; +} +.image-thumbnail:hover { + height: 100%; +} + +/* Set Opacity Studio Logo to 100% */ +.scene-studio-overlay { + opacity: 100%; +} + +/* Making Checkbox Slightly Bigger */ +.grid-card .card-check { + top: 0.9rem; + width: 1.75rem; +} + +/* Center Titles on Cards */ +.grid-card a .card-section-title { + text-align: center; +} + +/* Setting Background on Cards to Black and Borders to "Stash Grey" */ +.card { + background-color: black; + border: 1px solid #30404d; +} + +/* STASH MAIN PAGE*/ +/* Change Card Header Color */ +.card-header { + background: black; + border: 1px solid white; +} +/* Change Markdown Color */ +.card-body { + background: black; + border: 1px solid white; +} + +/* SCENE PAGE */ +/* Hide the scene scrubber */ +.scrubber-wrapper { + display: none; +} + +/* Setting Row "Scrape With" Background to Black */ +#scene-edit-details .edit-buttons-container { + background-color: black; +} + +/* Setting Other Rows Background to Black */ +div.react-select__control { + background-color: black; +} + +/* SETTING */ +/* Setting Text Input Border to White */ +.input-control, .text-input { + border: 1px solid white; +} + +/* Setting Background on Task Queue to Black */ +#tasks-panel .tasks-panel-queue { + background-color: black; +} diff --git a/themes/Theme-BlackHole/Theme-BlackHole.yml b/themes/Theme-BlackHole/Theme-BlackHole.yml new file mode 100644 index 00000000..a5ded900 --- /dev/null +++ b/themes/Theme-BlackHole/Theme-BlackHole.yml @@ -0,0 +1,6 @@ +name: Theme - BlackHole +description: BlackHole Theme for Stash by BViking78 +version: 2.0.0 +ui: + css: + - Theme-BlackHole.css diff --git a/themes/Theme-ModernDark/Theme-ModernDark.css b/themes/Theme-ModernDark/Theme-ModernDark.css new file mode 100644 index 00000000..c2a23f90 --- /dev/null +++ b/themes/Theme-ModernDark/Theme-ModernDark.css @@ -0,0 +1,484 @@ +/* Modern Dark Theme by cj13 v1.2 */ + :root { + --nav-color: #212121; + --body-color: #191919; + --card-color: #2a2a2a; + --plex-yelow: #e5a00d; + --tag-color: #555555; +} + #scrubber-position-indicator { + background-color: #e5a00d; +} + .scrubber-tags-background { + background-color: #e5a00d; + opacity: 30%; +} + body { + width: 100%; + height: 100%; + background: var(--body-color); +} + .text-white { + color: #cbced2 !important; +} + #root { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; +} + div.react-select__menu, div.dropdown-menu { + background-color: var(--card-color); +} + * { + scrollbar-color: hsla(0, 0%, 100%, .2) transparent; +} + .bg-dark { + background-color: var(--nav-color)!important; +} + .card { + background-color: #30404d; + border-radius: 3px; + box-shadow: 0 0 0 1px rgba(16, 22, 26, .4), 0 0 0 rgba(16, 22, 26, 0), 0 0 0 rgba(16, 22, 26, 0); + padding: 20px; + background-color: var(--card-color); +} + .text-input, .text-input:focus, .text-input[readonly], .text-input:disabled { + background-color: var(--card-color); +} + #scrubber-forward { + background-color: transparent; + border: 1px solid #555; +} + .scrubber-button { + background-color: transparent; + border: 1px solid #555; +} + .bg-secondary { + background-color: var(--card-color) !important; +} + .text-white { + color: #eee !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, .15); +} + .btn-secondary { + color: #eee; + background-color: rgba(0, 0, 0, .15); + border-color: var(--tag-color); +} + .pagination .btn:last-child { + border-right: 1px solid var(--tag-color); +} + .pagination .btn:first-child { + border-left: 1px solid var(--tag-color); +} + a { + color: hsla(0, 0%, 100%, .45); +} + .btn.active { + background-color: #2f3335; + color: #f5f8fa; +} + minimal.w-100.active.btn.btn-primary { + background-color: #2f3335; + color: #f5f8fa; +} + .btn-primary { + color: #fff; + background-color: #cc7b19; + border-color: #cc7b19; + font-weight: bold; +} + .btn-primary:hover { + color: #fff; + background-color: #e59029; + border-color: #e59029 font-weight: bold; +} + .nav-tabs .nav-link.active { + color: #eee; +} + .nav-tabs .nav-link.active:hover { + border-bottom-color: #eee; + outline: 0; +} + .nav-tabs .nav-link { + color: hsla(0,0%,100%,.65); +} + .tag-item { + background-color: var(--tag-color); + color: #fff; +} + .input-control, .input-control:focus { + background-color: rgba(16, 22, 26, .3); +} + #performer-page .image-container .performer { + background-color: rgba(0, 0, 0, .45); + box-shadow: 0 0 2px rgba(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: #eee; +} + .nav-pills .nav-link.active, .nav-pills .show>.nav-link { + background-color: var(--nav-color); +} + .btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus { + box-shadow: none; +} + .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: #eee; +} + input[type="range"]::-moz-range-track { + background: hsla(0, 0%, 100%, .25); +} + input[type="range"]::-moz-range-thumb { + background: #bcbcbc; +} + div.react-select__control { + background-color: hsla(0, 0%, 39.2%, .4); + color: #182026; + border-color: var(--card-color); + cursor: pointer; +} + .scene-wall-item-text-container { + background: radial-gradient(farthest-corner at 50% 50%, rgba(50, 50, 50, .5) 50%, #323232 100%); + color: #eee; +} + .filter-container, .operation-container { + background-color: rgba(0, 0, 0, .15); + box-shadow: none; + margin-top: -10px; + padding: 10px; +} + .container-fluid, .container-lg, .container-md, .container-sm, .container-xl { + width: 100%; + margin-right: 0px; + margin-left: 0px; +} + .btn-link { + font-weight: 500; + color: #eee; + text-decoration: none; +} + button.minimal.brand-link.d-none.d-md-inline-block.btn.btn-primary { + text-transform: uppercase; + font-weight: bold; +} + a:hover { + color: hsla(0, 0%, 100%, .7); +} + option { + background-color: var(--nav-color); +} + .folder-list .btn-link { + color: #2c2e30; +} + #performer-scraper-popover { + z-index: 10; +} + .filter-container, .operation-container { + background-color: transparent; +} + .search-item { + background-color: var(--card-color); +} + .selected-result { + background-color: var(--card-color); +} + .selected-result:hover { + background-color: var(--card-color); +} + .performer-select-active .react-select__control, .studio-select-active .react-select__control { + background-color: hsla(0, 0%, 39.2%, .4); +} + #scene-edit-details .edit-buttons-container { + margin: 0px; + background: var(--body-color); +} + #tasks-panel .tasks-panel-queue { + background: var(--body-color); +} + .job-table.card { + background-color: var(--card-color); +} + .modal-header, .modal-body, .modal-footer { + background-color: #2d3744; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + /* background-position: center; + */ +} + .folder-list .btn-link { + color: #fff; +} + .modal-header, .modal-body, .modal-footer { + background-color: #30404d; + color: #f5f8fa; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + background-position: center; +} + @media (max-width: 575.98px) and (orientation: portrait) { + .scene-card-preview-image { + height: calc(100vw * (9 / 16)); + } + .gallery-tabs .mr-auto.nav.nav-tabs { + display: grid; + grid-auto-flow: column; + text-align: center; + left: 0; + right: 0; + position: fixed; + } + .VideoPlayer.portrait .video-js { + height: 56.25vw; + } + .gallery-container .tab-content { + top: 3rem; + position: fixed; + height: calc(100vh - 6.5rem); + } + .gallery-tabs { + display: none; + } + .btn-toolbar { + padding-top: 1rem; + } + body { + padding: 0rem 0 5rem; + } + .scene-tabs .mr-auto.nav.nav-tabs { + background-color: #121212; + display: grid; + grid-auto-flow: column; + height: 3rem; + left: 0; + margin: 0; + margin-bottom: 0; + max-height: 3rem; + padding-bottom: 2.2rem; + padding-top: 0.1rem; + position: fixed; + right: 0; + text-align: center; + top: calc(100vw * (9 / 16)); + white-space: nowrap; + z-index: 20; + } + .scene-tabs.order-xl-first.order-last { + height: calc(100vh - (100vw * (9 / 16) + 8.5rem)); + top: calc((100vw * (9 / 16)) + 5rem); + position: fixed; + } + .tab-content { + overflow-y: auto; + overflow-x: hidden; + } + .studio-card { + width: 100%; + height: 294px; + } + .movie-card { + width: 45%; + } + .performer-card-image { + height: 19rem; + } + .performer-card { + width: 14rem; + height: 27.5rem; + } + .scene-performers .performer-card-image { + height: 19rem; + } + .scene-performers .performer-card { + width: 14rem; + height: 27.5rem; + } + .movie-card .TruncatedText { + display: none; + } + .nav-tabs .nav-link.active:hover { + outline: 0; + border-bottom: 2px solid + } + #performer-details-tab-edit{ + display: none; + } + #performer-details-tab-operations{ + display: none; + } + .scene-tabs .ml-auto.btn-group { + position: fixed; + right: 1rem; + top: calc((100vw * (9 / 16)) + 2.7rem); + } + .stats-element { + flex-grow: 1; + margin: auto 0rem; + } + .stats { + margin-left: 0px; + } + .top-nav { + bottom: 0; + top: auto; + } + div[data-rb-event-key="/images"] { + display: none; + } + div[data-rb-event-key="/scenes/markers"] { + display: none; + } + .row.justify-content-center.scene-performers { + max-height: 450px; + display: flex; + flex-direction: column; + overflow: auto; + border-top: solid 2px #2d3035; + border-bottom: solid 2px #2d3035; + padding-top: .5rem; + padding-bottom: .5rem; + } + .scene-tabs { + max-height: 100%; + } +} + dd { + word-break: break-word; +} + .btn-secondary { + color: hsla(0,0%,100%,.65); +} + .btn-secondary:hover { + color: white; + z-index: 0; + border-color: var(--nav-color); + background-color: rgba(0, 0, 0, .15); +} + .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show>.btn-secondary.dropdown-toggle { + background-color: rgba(0, 0, 0, .35); +} + .btn-secondary:focus, .btn-secondary.focus { + background-color: rgba(0, 0, 0, .35); +} + .scrubber-wrapper { + background-color: rgba(0, 0, 0, .3); + border-style: ridge; + border-color: #555555; +} + a.minimal:hover:not(:disabled), button.minimal:hover:not(:disabled) { + background: none; + color: white; +} + .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle { + color: var(--plex-yelow); + border-bottom: solid; + background: none; +} + a.minimal, button.minimal { + color: hsla(0,0%,100%,.65); +} + .nav-pills .nav-link.active, .nav-pills .show>.nav-link { + background: none; + border-left: solid; + color: var(--plex-yelow); +} + .nav-link { + color: hsla(0,0%,100%,.65); +} + .nav-link:hover, .nav-link:focus { + color: white; + background-color: hsla(0,0%,100%,.08); +} + .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { + background-color: transparent; +} + .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show>.btn-secondary.dropdown-toggle { + background: none; + color: var(--plex-yelow); + border-bottom: solid; +} + .nav-tabs .nav-link.active { + color: var(--plex-yelow); + background: none; +} + .nav-tabs .nav-link:hover { + border-bottom: none; +} + .custom-control-input:checked~.custom-control-label:before { + color: #fff; + border-color: var(--plex-yelow); + background-color: var(--plex-yelow); +} + .custom-switch .custom-control-input:disabled:checked~.custom-control-label:before { + background-color: var(--plex-yelow); +} + .btn-primary.disabled, .btn-primary:disabled { + color: #fff; + background-color: #e59029; + border-color: #e59029; + font-weight: bold; +} + .btn-primary:focus, .btn-primary.focus { + background-color: #cc7b19; + border-color: #cc7b19; + font-weight: bold; +} + .btn-danger { + color: hsla(0,0%,100%,.75); + background-color: #b32; + border-color: #b32; + font-weight: bold; +} + .btn-danger:hover { + color: white; + background-color: #b32; + border-color: #b32; +} + .brand-link { + background-color: var(--nav-color)!important; +} + .hover-popover-content { + max-width: 32rem; + text-align: center; + background: var(--nav-color); +} + .progress-bar { + background-color: var(--plex-yelow); +} + .modal-header, .modal-body, .modal-footer { + background-color: var(--body-color); +} + .btn-secondary.disabled, .btn-secondary:disabled { + background-color: var(--card-color); + border-color: var(--card-color); + border-left: none!important; + border-right: none!important; +} + #queue-viewer .current { + background-color: var(--card-color); +} + .tab-content .card-popovers .btn { + padding-left: .4rem; + padding-right: .4rem; +} +/* .gallery-tabs, .scene-tabs, .scene-player-container { + background-color: var(--nav-color); +} + */ + .react-select__menu-portal { + z-index: 2; +} + .video-js .vjs-play-progress { + background-color: #e5a00d; +} diff --git a/themes/Theme-ModernDark/Theme-ModernDark.yml b/themes/Theme-ModernDark/Theme-ModernDark.yml new file mode 100644 index 00000000..6e3c40ba --- /dev/null +++ b/themes/Theme-ModernDark/Theme-ModernDark.yml @@ -0,0 +1,6 @@ +name: Theme - ModernDark +description: ModernDark Theme for Stash by cj13 +version: 1.2 +ui: + css: + - Theme-ModernDark.css diff --git a/themes/Theme-NeonDark/Theme-NeonDark.css b/themes/Theme-NeonDark/Theme-NeonDark.css new file mode 100644 index 00000000..0126434a --- /dev/null +++ b/themes/Theme-NeonDark/Theme-NeonDark.css @@ -0,0 +1,1081 @@ +/* Neon Dark Theme by Dankonite */ +:root +{ + --background-color:#101010; + --blue-accent:#137cbd; + --card-radius:.75rem; + --disabled-color:#181818; + --font-color:#fff; + --lighter-gray:#303030; + --menu-gray:#202020; + --menu-rounding:1rem; + --not-card-radius:.25rem; + --red-delete:#DB3737 +} + +.btn +{ + border-radius:var(--not-card-radius) +} + +.btn-primary:not(:disabled):not(.disabled):not(.brand-link):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle +{ + background-color:var(--lighter-gray); + border-color:var(--blue-accent); + color:var(--font-color) +} + +.dropdown-item +{ + border-radius:var(--menu-rounding) +} + +.edit-buttons-container>* +{ + margin-bottom:1rem +} + +.fa-chevron-up,.fa-chevron-down +{ + color:var(--blue-accent) +} + +.form-control +{ + border-radius:var(--not-card-radius); + padding-right:1.3rem +} + +.input-group-text +{ + background-color:var(--menu-gray); + border:1px solid var(--blue-accent); + color:var(--font-color) +} + +.input-group.has-validation>.input-group-append>div>div>button +{ + border-bottom-left-radius:0!important; + border-top-left-radius:0!important +} + +.nav-pills .nav-link +{ + border-radius:var(--not-card-radius) +} + +.row +{ + margin-left:0; + margin-right:0 +} + +.saved-filter-list-menu>div>div +{ + margin-bottom:1rem +} + +.search-item +{ + background-color:var(--menu-gray); + border-radius:.25rem; + padding:1rem +} + +.set-as-default-button +{ + margin-top:1rem +} + +.setting-section .setting:not(:last-child) +{ + border-bottom:1px solid var(--blue-accent) +} + +a.bg-secondary:hover,a.bg-secondary:focus,button.bg-secondary:hover,button.bg-secondary:focus +{ + background-color:var(--lighter-gray)!important +} + +button.brand-link +{ + font-size:0; + visibility:hidden!important +} + +button.brand-link:after +{ + align-items:center; + border:1px solid var(--blue-accent)!important; + border-radius:var(--not-card-radius); + content:"Home"; + display:inline-block; + font-size:1rem; + height:40px; + padding:7px 12px; + position:relative; + top:-1px; + vertical-align:middle; + visibility:visible +} + +button.brand-link:hover:after +{ + background-color:var(--lighter-gray) +} + +div.row>h4 +{ + margin:0; + padding:1rem +} + +div.row>hr.w-100 +{ + padding-bottom:1rem +} + +input.bg-secondary.text-white.border-secondary.form-control,.date-input.form-control,.text-input.form-control +{ + height:33.5px +} + +@media (max-width: 1199.98px) { + .brand-link:after + { + margin-left:-16px + } + + .top-nav .btn + { + padding:0 12px + } +} + +@media (min-width: 1199.98px) { + .navbar-collapse>.navbar-nav>div>a + { + height:40px + } +} + +@media (min-width: 576px) { +#settings-menu-container +{ + padding:1rem; + position:fixed +} +} + +.bs-popover-bottom>.arrow:after,.bs-popover-auto[x-placement^=bottom]>.arrow:after +{ + border-bottom-color:var(--blue-accent); + border-width:0 .5rem .5rem; + top:1px +} + +.btn-toolbar>.btn-group>.dropdown>button,.query-text-field,.form-control,.dropdown,.dropdown-toggle +{ + height:100% +} + +.navbar-brand +{ + display:inline-block; + font-size:1.25rem; + line-height:inherit; + margin-right:0; + padding-bottom:.3125rem; + padding-top:.3125rem; + white-space:nowrap +} + +.navbar-collapse>.navbar-nav>div>a +{ + border:1px solid var(--blue-accent) +} + +.navbar-expand-xl .navbar-nav .nav-link +{ + padding-left:.5rem; + padding-right:0 +} + +.setting-section .setting-group:not(:last-child) +{ + border-bottom:1px solid var(--blue-accent) +} + +a +{ + color:var(--font-color) +} + +h6.col-md-2.col-4 +{ + display:flex; + justify-content:center +} + +img +{ + border-bottom:1px solid var(--blue-accent)!important +} + +@media(min-width: 576px) { + .offset-sm-3 + { + border-left:1px solid var(--blue-accent) + } +} + +.TruncatedText.scene-card__description +{ + font-size:.9rem +} + +.brand-link +{ + padding:0 +} + +.btn-primary +{ + background-color:var(--menu-gray); + border-color:var(--blue-accent); + color:var(--font-color) +} + +.btn-secondary +{ + background-color:var(--menu-gray); + border-color:var(--blue-accent); + color:var(--font-color) +} + +.btn-secondary.disabled,.btn-secondary:disabled +{ + background-color:var(--disabled-color); + border-color:var(--blue-accent); + color:var(--font-color) +} + +.btn-secondary:focus,.btn-secondary.focus +{ + background-color:var(--lighter-gray); + border-color:var(--blue-accent); + box-shadow:0 0 .3rem .3rem var(--blue-accent); + color:var(--font-color) +} + +.btn-secondary:hover +{ + background-color:var(--lighter-gray); + border-color:var(--blue-accent); + color:var(--font-color) +} + +.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle +{ + background-color:var(--lighter-gray); + border-color:var(--blue-accent); + color:var(--font-color) +} + +.btn-secondary:not(:disabled):not(.disabled):active:focus,.btn-secondary:not(:disabled):not(.disabled).active:focus,.show>.btn-secondary.dropdown-toggle:focus +{ + box-shadow:var(--blue-accent) +} + +.btn-toolbar +{ + justify-content:flex-start; + padding-top:.5rem +} + +.btn:focus,.btn.focus +{ + box-shadow:var(--blue-accent)!important +} + +.dropdown-item.disabled,.dropdown-item:disabled +{ + color:#adb5bd +} + +.dropdown-menu.show +{ + display:block; + padding:1rem +} + +.form-control::placeholder +{ + color:var(--font-color) +} + +.form-control:focus +{ + box-shadow:var(--blue-accent) +} + +.nav-menu-toggle +{ + border:1px solid var(--blue-accent)!important +} + +.query-text-field:active,.query-text-field:focus +{ + box-shadow:0 0 .3rem .3rem var(--blue-accent)!important +} + +.scene-card a,.gallery-card a +{ + color:var(--font-color) +} + +body +{ + background-color:var(--background-color); + color:var(--font-color); + text-align:left +} + +div.navbar-buttons>:not(.mr-2) +{ + border:1px solid var(--blue-accent)!important; + border-radius:var(--not-card-radius) +} + +h5,.h5 +{ + font-size:1.1rem +} + +hr +{ + border-top:1px solid var(--blue-accent) +} + +@media (min-width:576px) { + .gallery-card + { + width:unset!important + } + + .performer-card + { + width:unset!important + } + + .tag-card-image + { + height:180px + } +} + +@media (max-width:576px) { + .gallery-card + { + width:unset!important + } + + .performer-card + { + width:unset!important + } + + .tag-card-image + { + height:120px + } +} + +#scrubber-current-position +{ + background-color:var(--blue-accent); + height:30px; + left:50%; + position:absolute; + width:2px; + z-index:1 +} + +#scrubber-position-indicator +{ + background-color:var(--lighter-gray); + border-right:2px solid var(--blue-accent); + height:20px; + left:-100%; + position:absolute; + width:100%; + z-index:0 +} + +.badge-info +{ + background-color:var(--menu-gray); + border:1px solid var(--blue-accent); + color:var(--font-color) +} + +.badge-secondary +{ + background-color:var(--lighter-gray); + border:1px solid var(--blue-accent); + border-radius:.25rem; + color:var(--font-color) +} + +.bg-dark +{ + background-color:var(--menu-gray)!important +} + +.bg-secondary +{ + background-color:var(--menu-gray)!important +} + +.border-secondary +{ + border-color:var(--blue-accent)!important +} + +.brand-link +{ + border:1px solid var(--blue-accent)!important +} + +.card +{ + background-color:var(--menu-gray); + border-radius:var(--card-radius)!important; + box-shadow:var(--blue-accent) +} + +.card +{ + border:1px solid var(--blue-accent) +} + +.filter-button .badge +{ + border-radius:999px; + right:-7px; + top:-6px; + z-index:3!important +} + +.gallery-card +{ + height:min-content!important +} + +.gallery-card.card +{ + padding-bottom:0 +} + +.modal-footer +{ + border-radius:1rem; + border-top:1px solid var(--blue-accent); + border-top-left-radius:0; + border-top-right-radius:0 +} + +.modal-header +{ + border-bottom:1px solid var(--blue-accent); + border-bottom-left-radius:0!important; + border-bottom-right-radius:0!important; + border-radius:1rem +} + +.modal-header,.modal-body,.modal-footer +{ + background-color:var(--menu-gray); + color:var(--font-color) +} + +.nav-pills .nav-link.active,.nav-pills .show>.nav-link +{ + background-color:var(--menu-gray); + border:1px solid var(--blue-accent); + color:var(--font-color) +} + +.nav-tabs .nav-link.active,.nav-tabs .nav-item.show .nav-link +{ + background-color:var(--menu-gray); + border-color:var(--blue-accent); + color:var(--font-color) +} + +.nav-tabs .nav-link:hover +{ + border-bottom:2px solid var(--blue-accent) +} + +.pagination .btn +{ + border-left:1px solid var(--blue-accent); + border-right:1px solid var(--blue-accent) +} + +.pagination .btn:first-child +{ + border-left:1px solid var(--blue-accent) +} + +.pagination .btn:last-child +{ + border-right:1px solid var(--blue-accent) +} + +.performer-card .fi +{ + bottom:.3rem; + filter:drop-shadow(0 0 2px rgba(0,0,0,.9)); + height:2rem; + position:absolute; + right:.2rem; + width:3rem +} + +.popover +{ + background-color:var(--menu-gray); + border:1px solid var(--blue-accent)!important; + border-radius:var(--card-radius) +} + +.popover-header +{ + background-color:var(--lighter-gray); + border-bottom:1px solid var(--blue-accent) +} + +.query-text-field +{ + border:1px solid var(--blue-accent)!important +} + +.scene-header>h3>.TruncatedText +{ + text-align:left +} + +.scene-specs-overlay,.scene-interactive-speed-overlay,.scene-studio-overlay,span.scene-card__date +{ + font-weight:900!important +} + +.scrubber-tags-background +{ + background-color:var(--menu-gray); + height:20px; + left:0; + position:absolute; + right:0 +} + +::selection +{ + background-color:var(--lighter-gray)!important; + color:var(--font-color)!important +} + +a.minimal,button.minimal +{ + color:var(--font-color) +} + +body ::-webkit-scrollbar-thumb +{ + background:var(--blue-accent) +} + +body ::-webkit-scrollbar-thumb:hover +{ + background:var(--blue-accent) +} + +body ::-webkit-scrollbar-thumb:window-inactive +{ + background:var(--blue-accent) +} + +body ::-webkit-scrollbar-track +{ + background:var(--menu-gray) +} + +hr +{ + margin:0 +} + +@media(orientation:portrait) { + .performer-card-image + { + height:25vh + } +} + +.card.performer-card +{ + padding:0 +} + +.fa-mars +{ + display:none +} + +.fa-transgender-alt +{ + display:none +} + +.fa-venus +{ + display:none +} + +.performer-card__age +{ + color:var(--font-color); + text-align:center +} + +.slick-list .gallery-card +{ + width:min-content +} + +.slick-slide .card +{ + height:min-content +} + +.slick-track +{ + margin-bottom:1rem; + top:0 +} + +.tag-sub-tags,.studio-child-studios +{ + display:none +} + +@media (max-width: 576px) { + .slick-list .scene-card,.slick-list .studio-card + { + width:44vw!important + } +} + +.card-popovers +{ + justify-content:space-around; + margin-bottom:2px; + margin-top:2px +} + +.card-section +{ + height:100%; + padding:0 .2rem +} + +.scene-specs-overlay +{ + bottom:.2rem; + right:.2rem +} + +.scene-studio-overlay +{ + line-height:.8rem; + max-width:50%; + right:.2rem; + top:.2rem +} + +@media (min-width: 1200px),(max-width: 575px) { + .scene-performers .performer-card + { + width:47vw + } + + .scene-performers .performer-card-image + { + height:22.5rem + } +} + +#queue-viewer .current +{ + background-color:var(--menu-gray) +} + +#scene-edit-details .edit-buttons-container +{ + background-color:var(--background-color) +} + +.edit-buttons>button +{ + margin-left:1px +} + +.scene-card__details,.gallery-card__details +{ + margin-bottom:0!important +} + +.setting-section .setting>div:last-child +{ + display:flex; + justify-content:center; + text-align:right +} + +span.scene-card__date +{ + display:flex; + font-size:.8em; + justify-content:flex-end; + margin-right:.2rem +} + +@media (min-width: 576px) and (min-height: 600px) { + #tasks-panel .tasks-panel-queue + { + background-color:var(--background-color) + } +} + +.gender-icon +{ + display:none +} + +.job-table.card +{ + background-color:var(--menu-gray) +} + +.scraper-table tr:nth-child(2n) +{ + background-color:var(--lighter-gray) +} + +a.marker-count +{ + display:none +} + +a[target='_blank'] +{ + display:none +} + +button.collapse-button.btn-primary:not(:disabled):not(.disabled):hover,button.collapse-button.btn-primary:not(:disabled):not(.disabled):focus,button.collapse-button.btn-primary:not(:disabled):not(.disabled):active +{ + color:var(--font-color) +} + +@media(max-width: 576px) { + .grid-card + { + width:47vw + } +} + +.TruncatedText +{ + text-align:center; + white-space:pre-line; + word-break:break-word +} + +.gallery-card +{ + width:min-content!important +} + +.gallery-card-image +{ + max-height:240px!important; + width:auto!important +} + +.grid-card .progress-bar +{ + background-color:var(--lighter-gray); + bottom:0 +} + +.grid-card a .card-section-title +{ + color:var(--font-color); + display:flex; + justify-content:center +} + +.ml-2.mb-2.d-none.d-sm-inline-flex +{ + display:none!important +} + +.tag-card +{ + padding:0; + width:auto!important +} + +body +{ + color:var(--font-color); + padding:3.6rem 0 0 +} + +div.mb-2 +{ + height:auto +} + +@media (max-width: 575.98px) and (orientation: portrait) { + body + { + padding:0 + } +} + +@media (min-width: 768px) { + .offset-md-3 + { + border-left:1px solid var(--blue-accent) + } +} + +.card +{ + background-color:var(--menu-gray); + padding:0 +} + +.container,.container-fluid,.container-xl,.container-lg,.container-md,.container-sm +{ + padding-left:0; + padding-right:0 +} + +.d-flex.justify-content-center.mb-2.wrap-tags.filter-tags +{ + margin:0!important +} + +.input-control,.input-control:focus,.input-control:disabled +{ + background-color:var(--lighter-gray) +} + +.input-control,.text-input +{ + border:1px solid var(--blue-accent); + color:var(--font-color) +} + +.navbar-buttons>.mr-2,.card hr +{ + margin:0!important +} + +.preview-button .fa-icon +{ + color:var(--font-color) +} + +.rating-banner +{ + display:none!important +} + +.scene-card-preview,.gallery-card-image,.tag-card-image,.image-card-preview +{ + width:100% +} + +.slick-dots li button:before +{ + content:"." +} + +.slick-dots li.slick-active button:before +{ + color:var(--blue-accent); + opacity:.75 +} + +.tag-item +{ + background-color:var(--lighter-gray); + border:1px solid var(--blue-accent); + color:var(--font-color) +} + +.tag-item .btn +{ + color:var(--font-color) +} + +.text-input,.text-input:focus,.text-input[readonly],.text-input:disabled +{ + background-color:var(--lighter-gray) +} + +.top-nav +{ + border-bottom:1px solid var(--blue-accent); + padding:0 2rem!important +} + +a.nav-utility,button[title='Help'],.nav-menu-toggle +{ + margin-left:.5rem +} + +button.brand-link,.top-nav .navbar-buttons .btn +{ + height:40px +} + +div.react-select__control +{ + background-color:var(--lighter-gray); + border-color:var(--blue-accent)!important; + color:var(--font-color) +} + +div.react-select__control .react-select__multi-value,div.react-select__multi-value__label,div.react-select__multi-value__remove +{ + background-color:var(--menu-gray); + color:var(--font-color)!important +} + +div.react-select__menu,div.dropdown-menu +{ + background-color:var(--menu-gray); + border:1px solid var(--blue-accent); + color:var(--font-color) +} + +div.react-select__multi-value +{ + border:1px solid var(--blue-accent); + border-radius:999px +} + +div.react-select__multi-value__label +{ + border-bottom-left-radius:999px; + border-top-left-radius:999px; + padding-right:8px +} + +div.react-select__multi-value__remove +{ + border-bottom-right-radius:999px; + border-top-right-radius:999px; + padding-left:0 +} + +div.react-select__multi-value__remove:hover +{ + background-color:var(--red-delete) +} + +div.react-select__placeholder +{ + color:var(--font-color) +} + +div[id='settings-menu-container'] +{ + padding-top:.5rem +} + +div[role='group'].ml-auto.btn-group>div +{ + margin-right:.5rem; + margin-top:.5rem +} + +@media (max-width: 575.98px) and (orientation: portrait) { + .container,.container-fluid,.container-xl,.container-lg,.container-nd,.container-sm + { + padding-top:3.5rem!important + } + + .top-nav + { + bottom:unset; + top:auto + } +} + +.grid-card a .card-section-title +{ + display:flex; + justify-content:center +} + +.markdown blockquote,.markdown pre +{ + background-color:var(--lighter-gray) +} + +.markdown code +{ + background-color:transparent; + color:var(--font-color) +} + +.markdown table tr:nth-child(2n) +{ + background-color:var(--lighter-gray) +} + +.details-list>*:nth-child(4n), .details-list>*:nth-child(4n - 1) { + background-color: var(--menu-gray); +} +dl.details-list { + grid-column-gap:0; +} +dt { + padding-right: .5rem; +} +dd { + margin-bottom: 0; + padding-left: .5rem; + border-left: 1px solid var(--blue-accent); +} +#performer-page .performer-image-container .performer { + border-radius:var(--menu-rounding); + border: 0!important; +} +.recommendations-container-edit .recommendation-row { + background-color: var(--menu-gray); + border-radius: 1rem; + border:1px solid var(--blue-accent); + margin-bottom: 10px; +} +.recommendations-container-edit.recommendations-container>div>div:first-of-type { + margin-top: calc(1rem + 10px); +} + diff --git a/themes/Theme-NeonDark/Theme-NeonDark.yml b/themes/Theme-NeonDark/Theme-NeonDark.yml new file mode 100644 index 00000000..623f5e8a --- /dev/null +++ b/themes/Theme-NeonDark/Theme-NeonDark.yml @@ -0,0 +1,6 @@ +name: Theme - NeonDark +description: NeonDark Theme for Stash by Dankonite +version: 1.0 +ui: + css: + - Theme-NeonDark.css diff --git a/themes/Theme-Night/Theme-Night.css b/themes/Theme-Night/Theme-Night.css new file mode 100644 index 00000000..c6777617 --- /dev/null +++ b/themes/Theme-Night/Theme-Night.css @@ -0,0 +1,189 @@ +/* +Night theme Version 0.1. +*/ + +body { + color: #bb0009; + background-color: #000000; + +} + +.bg-dark { + background-color: #1a1a1b!important; +} + +.card { + background-color: #30404d; + border-radius: 3px; + box-shadow: 0 0 0 1px rgba(16, 22, 26, .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, .3); +} + +.bg-secondary { + background-color: #313437 !important; +} + +.text-white { + color: #bb0009 !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, .15); +} + +.btn-secondary { + color: #bb0009; + background-color: rgba(0, 0, 0, .15); +} + +.btn-primary { + color: #bb0009; + background-color: #bb0009; +} + +a { + color: hsla(0, 0%, 100%, .45); +} + +.btn.active { + background-color: #2f3335; + color: #bb0009; +} + +minimal.w-100.active.btn.btn-primary { + background-color: #bb0009; + color: #bb0009; +} + +.btn-primary { + color: #fff; + background-color: #1a1a1b; + border-color: #374242; +} + +.nav-tabs .nav-link.active { + color: #bb0009; +} + +.nav-tabs .nav-link.active:hover { + border-bottom-color: #bb0009; + outline: 0; +} + +.btn-primary.btn.donate.minimal { + display: none; +} + +.btn-primary.btn.help-button.minimal { + display: none; +} + +.changelog { + display: none; +} + +.nav-tabs .nav-link { + outline: 0; + color #bb0009; +} + +.input-control, +.input-control:focus { + background-color: rgba(16, 22, 26, .3); +} + +#performer-page .image-container .performer { + background-color: rgba(0, 0, 0, .45); + box-shadow: 0 0 2px rgba(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; +} + +.nav-pills .nav-link.active, +.nav-pills .show>.nav-link { + background-color: #1a1a1b; +} + + + +.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"]::-moz-range-track { + background: hsla(0, 0%, 100%, .25); +} + +input[type="range"]::-moz-range-thumb { + background: #bcbcbc; +} + +div.react-select__control { + background-color: hsla(0, 0%, 39.2%, .4); + color: #182026; + border-color: #394b59; + cursor: pointer; +} + +.scene-wall-item-text-container { + background: radial-gradient(farthest-corner at 50% 50%, rgba(50, 50, 50, .5) 50%, #323232 100%); + color: #bb0009; +} + +.btn-link { + font-weight: 500; + color: #bb0009; + text-decoration: none; +} + +button.minimal.brand-link.d-none.d-md-inline-block.btn.btn-primary { + text-transform: uppercase; + font-weight: bold; + color: #bb0009 +} + +a.minimal { + text-transform: uppercase; + font-weight: bold; + color: #bb0009 +} +a:hover { + color: hsla(0, 0%, 100%, .7); +} + +option { + background-color: #1a1a1b; +} +.scrubber-tags-background { + background-color: #202351; +} + +.btn-primary.btn.settings-button.minimal { + color: #007dd0; +} + +button.minimal.btn.btn-primary { + color: #007dd0; +} + +.btn-primary.btn.logout-button.minimal { + color: #00bb2f; +} + +.scrubber-viewport { + background-color: #1f062d; +} diff --git a/themes/Theme-Night/Theme-Night.yml b/themes/Theme-Night/Theme-Night.yml new file mode 100644 index 00000000..4c7e39f4 --- /dev/null +++ b/themes/Theme-Night/Theme-Night.yml @@ -0,0 +1,6 @@ +name: Theme - Night +description: Night Theme for Stash (unknown author) +version: 0.1 +ui: + css: + - Theme-Night.css diff --git a/themes/plex/README.md b/themes/Theme-Plex/README.md similarity index 80% rename from themes/plex/README.md rename to themes/Theme-Plex/README.md index 64c6bb24..386bbbbe 100644 --- a/themes/plex/README.md +++ b/themes/Theme-Plex/README.md @@ -10,11 +10,11 @@ The Plex Theme will only change the look and feel of the Stash interface. It wil ## Install -1. Open User Interface Configuration panel in settings. (http://localhost:9999/settings?tab=interface) +1. Open User Interface Configuration panel in settings. (http://localhost:9999/settings?tab=plugins) -2. Tick/Enable Custom CSS ✅ +2. Find the Theme in the listing, in the default Community repo -3. Copy & Paste [CSS Code](https://github.com/stashapp/CommunityScripts/blob/main/themes/plex/plex.css) to the Custom CSS text area. +3. Click Install ### Optional - Host Backgrounds Locally @@ -24,6 +24,6 @@ _These steps are optional, by default this theme uses the Github hosted image li 2. Place `background.png` and `noise.png` in `~/.stash` on macOS / Linux or `C:\Users\YourUsername\.stash` on Windows. Then edit the `background-image: url("")` attributes like below: -The [body](https://github.com/stashapp/CommunityScripts/blob/main/themes/plex/plex.css#L7) one `background-image: url("./background.png");` +The [body](https://github.com/stashapp/CommunityScripts/blob/main/themes/Theme-Plex/plex.css#L7) one `background-image: url("./background.png");` -The [root](https://github.com/stashapp/CommunityScripts/blob/main/themes/plex/plex.css#L18) one `background: rgba(0, 0, 0, 0) url("./noise.png") repeat scroll 0% 0%;` +The [root](https://github.com/stashapp/CommunityScripts/blob/main/themes/Theme-Plex/plex.css#L18) one `background: rgba(0, 0, 0, 0) url("./noise.png") repeat scroll 0% 0%;` diff --git a/themes/plex/plex.css b/themes/Theme-Plex/Theme-Plex.css similarity index 100% rename from themes/plex/plex.css rename to themes/Theme-Plex/Theme-Plex.css diff --git a/themes/Theme-Plex/Theme-Plex.yml b/themes/Theme-Plex/Theme-Plex.yml new file mode 100644 index 00000000..b6983933 --- /dev/null +++ b/themes/Theme-Plex/Theme-Plex.yml @@ -0,0 +1,6 @@ +name: Theme - Plex +description: Plex Theme for Stash by Fidelio 2020 +version: 1.0.5 +ui: + css: + - Theme-Plex.css diff --git a/themes/Theme-Pulsar/Theme-Pulsar.css b/themes/Theme-Pulsar/Theme-Pulsar.css new file mode 100644 index 00000000..5574024d --- /dev/null +++ b/themes/Theme-Pulsar/Theme-Pulsar.css @@ -0,0 +1,1787 @@ +/* StashApp Pulsar Theme - Fonzie 2020-21 v1.8.1 */ +/* ---------------------------------------------------- */ +/* --------- Updated to Stash version 0.12.0 ---------- */ + +/* + Bug Fixes: Overlap of Help & Ssettings" buttons in the navbar, as well + as the Identify task + + Complete overhaul of the Settings page + + Bug Fix: Background-color in the navigation bar + + Adjustments to version 0.10.0 which includes moving the movie-, image- + and gallery-counter to the bottom of the performer image when you hover + over the card, and increasing the size of the star rating in the highest + zoom level. + + +*/ + + + +/* ===================== General ===================== */ + +body { + background-image:url("https://i.imgur.com/gQtSoev.jpg"); /* Aphonus */ +/* background-image:url("https://i.imgur.com/6BBd6aa.jpg"); /* Plex */ +/* background-image:url("https://i.imgur.com/xAzxryr.jpg"); /* Almora */ +/* background-image:url("https://i.imgur.com/0iN75zD.jpg"); /* Dacirus */ +/* background-image:url("https://i.imgur.com/g5ECcdD.jpg"); /* Drionope */ +/* background-image:url("https://i.imgur.com/dhVsc3d.jpg"); /* Elein */ +/* background-image:url("https://i.imgur.com/B5hdvQG.jpg"); /* FreePhion */ +/* background-image:url("https://i.imgur.com/LcSat6V.jpg"); /* Lilac */ +/* background-image:url("https://i.imgur.com/kn9wixj.jpg"); /* Nolrirus */ +/* background-image:url("https://i.imgur.com/190rDim.jpg"); /* Ongion */ +/* background-image:url("https://i.imgur.com/IpvdJVn.jpg"); /* PurpleRough */ +/* background-image:url("https://i.imgur.com/hAHylub.jpg"); /* Tesioria */ +/* background-image:url("https://i.imgur.com/QKiFSvE.jpg"); /* Ichix */ +/* background-image:url("https://i.imgur.com/8cIqGWj.jpg"); /* SeaGreen */ +/* background-image:url("https://i.imgur.com/WNXNwV3.jpg"); /* BrownBlur */ +/* background-image:url("./custom/background.jpg"); /* Local Background */ + + font-family:Helvetica, Verdana; + width: 100%; + height: 100%; + padding: 0 0 0; + background-size: cover; + background-repeat: no-repeat; + background-color:#127aa5; + background-attachment: fixed; + background-position: center; + color: #f9fbfd; +} + +h1,h2,h3,h4,h5,h6 { font-family:Helvetica, Verdana;} +:root { + --HeaderFont: Helvetica, "Helvetica Neue", "The Sans", "Segoe UI"; + --std-txt-shadow: 2px 2px 1px #000; + --light-txt-shadow: 1px 2px 1px #222; + --white: #ffffff; + --stars: url("https://i.imgur.com/YM1nCqo.png"); +} + + +/* --- The Home button in the top left corner of each page. Remove the last 3 lines if you don't like the logo --- */ +button.minimal.brand-link.d-none.d-md-inline-block.btn.btn-primary, +button.minimal.brand-link.d-inline-block.btn.btn-primary { + text-transform: uppercase; + font-weight: bold; + margin-left:1px; + background-image:url("./favicon.ico"); + padding-left:40px; + background-repeat: no-repeat; +} + +/* --- Makes the background of the Navigation Bar at the Top half-transparent --- */ +nav.bg-dark {background: rgba(10, 20, 25, 0.50)!important;} +.bg-dark {background:none !important;background-color:none !Important} +.form-group .bg-dark {background: rgba(10, 20, 25, 0.20)!important;} + +.navbar-buttons.navbar-nav a.nav-utility {margin-right:9px} + +/* --- The space between the Navigation Bar and the rest of the page --- */ +.main { margin-top:18px } +.top-nav { padding: .13rem 1rem; } + + +/* --- Changes how the Bar at the top of the page behaves --- */ +.fixed-bottom, .fixed-top { position: relative !important; top:0px !important} + + +/* The pagination at the top and at the bottom of the Scenes/Performer/Images/... pages; +transparent background, rounded corners, etc. */ +.filter-container, .operation-container { + background-color: rgba(0, 0, 0, .22); + box-shadow: none; + margin-top: 6px; + border-radius: 5px; + padding: 5px; +} + + +/* --- Changes the space between the button in the top right corner of the page --- */ +.order-2 button { margin-left: 4px } + +/* --- Space between the items in the Nav bar --- */ +.nav-link > .minimal { margin: 0px;} + + +/* Each item on the Scenes/Performers/Tags/... pages */ +.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.30), rgba(35, 40, 45,0.22), rgba(160, 160, 165,0.21), rgba(50, 60, 65,0.30)); + background-color: rgba(16, 20, 25, .25); + box-shadow: 2px 2px 6px rgba(0, 0, 0, .55); + /* --- Increases the rounded borders of each item on the Scenes/Performers/... pages for 6px in 10px --- */ + border-radius: 10px; +} + +/* --- Removes the glowing shimmer effect on the start page & the settings for readability purpose --- */ +.mx-auto.card, .changelog-version.card { + background-image: none !important; + background-color: rgba(16, 20, 25, .40) !important; +} + +/* --- Color that is used within .card secments --- */ +.text-muted { color: #f0f0f0 !important} + + +.bg-secondary { + background: none; + background-color: rgba(10, 25, 30, .62) !important; +} + +.text-white { color: #f0f0f0 } +.border-secondary { border-color: #2f3335 } + +.btn-secondary.filter-item.col-1.d-none.d-sm-inline.form-control { + background-color: rgba(0, 0, 0, .08); +} + +/* --- Changes the color and the background of the buttons and elements in the toolbar (Search, Sort by, # of Items, etc.) --- */ +.btn-secondary { + color: #f2f2f2; + background-color: rgba(0, 0, 0, .08); + border-color: #3c3f45; +} + +a { color: hsla(0, 10%, 95%, .75);} + + + +/* --- Changes the color of the active page in the Navgation Bar --- */ +.btn-primary:not(:disabled):not(.disabled).active, +.btn-primary:not(:disabled):not(.disabled):active, +.show>.btn-primary.dropdown-toggle { + color: #fff; + background-color: rgba(22, 50, 60, .75); + border-color: #fff; +} + +/* --- No border of the active element in the Navgation Bar --- */ +.btn-primary.focus, +.btn-primary:focus, +.btn-primary:not(:disabled):not(.disabled).active:focus, +.btn-primary:not(:disabled):not(.disabled):active:focus, +.show>.btn-primary.dropdown-toggle:focus {box-shadow: none;} + +.btn-primary:not(:disabled):not(.disabled).active, +.btn-primary:not(:disabled):not(.disabled):active, +.show>.btn-primary.dropdown-toggle { + color: #fff; + border-color: #eee; +} + +.container-fluid,.container-lg,.container-md,.container-sm,.container-xl { + width: 100%; + margin-right: 0px; + margin-left: 0px; +} + + + + + +/* ===================== Performer ========================= */ + + +/* --- 0.90 - Section moves Movie-, Image- & Gallery-Count to the bottom of the performer image when hovered over --- */ + +.performer-card .card-popovers .movie-count, +.performer-card .card-popovers .image-count, +.performer-card .card-popovers .gallery-count +{ + z-index:300; + position:absolute; + top:-270%; + opacity:0.0; +} + +/* --- Highlight the bottom of the performer card when hovered over --- */ +.performer-card.grid-card:hover { + background-image: linear-gradient(130deg, rgba(50, 60, 75,0.25), rgba(150, 155, 160,0.32), rgba(35, 40, 45,0.26), rgba(160, 160, 165,0.27), rgba(50, 60, 65,0.37)); + background-color: rgba(62, 72, 80, .26); +} + +/* --- When hovered over blend them in ---*/ +.performer-card.grid-card:hover .card-popovers .movie-count, +.performer-card.grid-card:hover .card-popovers .image-count, +.performer-card.grid-card:hover .card-popovers .gallery-count {opacity: 1.0;transition: opacity .7s;} + +/* --- 3 items gets a shadow ---*/ +.performer-card .card-section .movie-count span, +.performer-card .card-section .movie-count button.minimal, +.performer-card .card-section .image-count span, +.performer-card .card-section .image-count button.minimal, +.performer-card .card-section .gallery-count span, +.performer-card .card-section .gallery-count button.minimal +{text-shadow: 2px 2px 1px #000, 1px 1px 1px #000, 4px 4px 5px #333, 9px 0px 5px #333, -3px 2px 4px #333, -7px 0px 5px #333, +10px 2px 5px #000, 4px 14px 5px #333, 9px 0px 3px #333, -7px 2px 4px #333, -17px 0px 5px #333, -1px -9px 5px #333, 3px -8px 6px #444; +} + +.performer-card .card-section .movie-count .svg-inline--fa.fa-w-16 { + box-shadow: 1px 1px 1px rgba(0, 0, 0, .99), 1px 1px 3px rgba(0,0,0, .70), -5px 2px 5px rgba(0, 0, 0, .55); +} + +/* --- Positioning of the 3 items ---*/ +.performer-card .card-popovers .movie-count {left:0.2%;} +.performer-card .card-popovers .image-count {left:32.8%} +.performer-card .card-popovers .gallery-count {right:1.3%} + +.performer-card .movie-count a.minimal:hover:not(:disabled), .performer-card .movie-count button.minimal:hover:not(:disabled), +.performer-card .image-count a.minimal:hover:not(:disabled), .performer-card .image-count button.minimal:hover:not(:disabled), +.performer-card .gallery-count a.minimal:hover:not(:disabled), .performer-card .gallery-count button.minimal:hover:not(:disabled) +{ + background-color:rgba(20,80,110,0.92); + color:#fff; +} + +/* --- Affects the Scenes- and Tags-Counter --- */ +a.minimal:hover:not(:disabled), button.minimal:hover:not(:disabled) {background: rgba(138,155,168,.25);color:#fff;} +div.performer-card div.card-popovers +{ + margin-bottom:-3px; + margin-left:1%; + margin-top:-4px; + margin-right: -3px; + justify-content: flex-end; + text-align:right; +} + +div.card-section hr {display:none} + + +/* --- Changes the width of the Performer Card from 280px to a dynamic system and therefore the size of the image --- */ +/* --- 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 } + + +/* --- 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} */ +.performer-card-image, .justify-content-center .card-image { min-height:240px; height: calc((112px + 19vw / 3.6) * 1.5); max-height: 345px;} +.performer-card-image, .justify-content-center .card-image { min-height:240px; height: calc((100px + 11.2vw / 1.92) * 1.5); max-height: 345px;} + +@media (max-width: 575px), (min-width: 1200px) { +.scene-performers .performer-card-image { height: auto; } +.scene-performers .performer-card { width: auto; } +} + + +/* --- Fixes an issue of the card when watching a scene --- */ +.image-section { display: cover;} + +/* --- The name of the Performer. Different font, less space to the left & to the top, Text-Shadow --- */ +.text-truncate, .card.performer-card .TruncatedText { + margin-left:-1.5%; + margin-top: -2px; + width: 120%; + font-family: var(--HeaderFont); + font-size: 112%; + line-height:130%; + font-weight:bold; + text-shadow: var(--std-txt-shadow); +} + +/* --- Makes the Performer Name smaller when the screen is too small --- */ +@media (max-width: 1200px) { .card.performer-card .TruncatedText { font-size: 104%; } } + + + +/* --- Moves the Flag icon from the right side of the card to the left and makes the Flag image a little bit bigger --- */ +.performer-card .flag-icon { + height: 2rem; + left: 0.6rem; + bottom: 0.10rem; + width: 28px; +} + +/* --- Age and # of Scenes move from the left side to the right of the card --- */ +.performer-card .text-muted {text-align:right;margin-top:-2px;margin-bottom:1px;width:44%;margin-left:56%} + + +/* --- Minimum height for the section in case Age and Nationality is missing and elements would overlap --- */ +.performer-card .card-section {min-height:82px} + +/* --- "removes" the term 'old.' from "xx years old." when the resolution gets to small --- */ +@media (max-width: 1700px) { +div.card.performer-card .text-muted {text-align:right;margin-top:-2px;margin-bottom:1px;margin-right:-33px; height:20px; max-height:20px; overflow: hidden; +} +} + +/* --- To prevent overlapping in the performer card when watching a scene --- */ +@media (max-width: 2000px) { +.tab-content div.card.performer-card .text-muted {margin-top:22px;margin-right:-3px} +.tab-content .performer-card.card .rating-1, +.tab-content .performer-card.card .rating-2, +.tab-content .performer-card.card .rating-3, +.tab-content .performer-card.card .rating-4, +.tab-content .performer-card.card .rating-5 {bottom: 53px !important;} +} + + +/* --- Text Shadow for the "Stars in x scenes" link --- */ +div.card.performer-card div.text-muted a {text-shadow: 1px 2px 2px #333} + +/* --- Makes the card section (Name, Age, Flag, # of scenes) more compact --- */ +.card-section { margin-bottom: -7px !important; padding: .5rem 0.7rem 0 !important;} +.card-section span {margin-bottom:3px} +@media (max-width: 1500px) { .card-section span {font-size:13px} } + +div.card-section hr {display:none} + + + + +/* --- Changes regarding the Favorite <3 --- */ +.performer-card .favorite { + color: #f33; + -webkit-filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .95)); + filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .95)); + right: 3px; + top: 5px; +} + + + +/* --- Turns the Rating Banner in the top left corner into a Star Rating under the performer name --- */ +.performer-card.card .rating-1, .performer-card.card .rating-2, .performer-card.card .rating-3, +.performer-card.card .rating-4, .performer-card.card .rating-5 +{ + background:none; + background-size: 97px 18px; + background-image:var(--stars); + -webkit-transform:rotate(0deg); + transform:rotate(0deg); + padding:0; + padding-bottom:1px; + box-shadow: 0px 0px 0px rgba(0, 0, 0, .00); + left:6px; + width:97px; + height:18px; + text-align:left; + position:absolute; + top:auto; + bottom: 34px; + font-size:0.001rem; +} + +/* --- Display only X amount of stars -- */ +div.performer-card.card .rating-banner.rating-1 {width:20px} +div.performer-card.card .rating-banner.rating-2 {width:39px} +div.performer-card.card .rating-banner.rating-3 {width:59px} +div.performer-card.card .rating-banner.rating-4 {width:78px} +div.performer-card.card .rating-banner.rating-5 {width:97px} + + +.performer-card .btn {padding: .375rem .013rem} +.performer-card .btn {padding: .34rem .25rem} +.performer-card .fa-icon {margin: 0 2px} +.performer-card .card-popovers .fa-icon {margin-right: 4px} +.performer-card .svg-inline--fa.fa-w-18, .performer-card .svg-inline--fa.fa-w-16 {height: 0.88em} +.performer-card .favorite .svg-inline--fa.fa-w-16 {height:1.5rem} + + +.performer-card .card-popovers .btn-primary { + margin: 0 0px 0 6px; +} + + + +/* --- PerformerTagger Changes --- */ + +.PerformerTagger-performer { + background-image: linear-gradient(130deg, rgba(50, 60, 75,0.25), rgba(150, 155, 160,0.32), rgba(35, 40, 45,0.26), rgba(160, 160, 165,0.27), rgba(50, 60, 65,0.37)); + background-color: rgba(16, 20, 25, .23); + box-shadow: 2px 2px 6px rgba(0, 0, 0, .70); + border-radius: 8px; + margin: 1.1%; + } + +.tagger-container .input-group-text {background:none;border:0;margin-right:5px;padding-left:0} +.PerformerTagger-details { margin-left: 1.25rem; width:23.5rem;} + +.tagger-container .btn-link{text-shadow: 1px 2px 3px #000;} +.tagger-container, .PerformerTagger { max-width: 1850px;} + +.PerformerTagger-header h2 { + font-family: Helvetica, "Helvetica Neue", "Segoe UI" !important; + font-size: 2rem; + line-height:130%; + font-weight:bold; + text-shadow: 2px 2px 1px #000 !important +} + +.PerformerTagger-thumb {height: 50px;} + +.modal-backdrop { background-color: rgba(16, 20, 25, .25);} +.modal-backdrop.show { opacity: 0.1; } + +.performer-create-modal { max-width: 1300px; font-family: Helvetica, "Helvetica Neue", "Segoe UI" !important; } +.performer-create-modal .image-selection .performer-image { height: 95%; } +.performer-create-modal .image-selection {height: 485px;} + +.performer-create-modal .no-gutters .TruncatedText { + font-family: var(--HeaderFont); + font-size: 115%; + padding-top:2px; + line-height:120%; + font-weight:bold; + text-shadow: var(--std-txt-shadow); +} +.performer-create-modal-field strong {margin-left: 6px} +.modal-footer {border-top: 0} + + + + + + +/* ========================= Performer Page ================================= */ +/* === The page that you see when you click on the picture of a Performer === */ + +/* --- The picture of the Performer on the left. 3D effect thanks to background shadows and more rounded corners --- */ +#performer-page .performer-image-container .performer +{ + background-color: rgba(0, 0, 0, .48); + box-shadow: 6px 6px 11px rgba(0, 10, 10, .62); + border-radius: 14px !important; +} + +/* --- Without this the shadow at the bottom from the previous Selector will not be correctly displayed --- */ +.performer-image-container {padding-bottom: 11px} + + +/* --- The following 15 Selectors change the way the details box is displayed --- */ +#performer-details-tabpane-details .text-input, #performer-details-tabpane-details .text-input:disabled, +#performer-details-tabpane-details .text-input[readonly] {background-color: rgba(16,22,26,0.0);} +#performer-details-tabpane-details a { text-shadow: var(--light-txt-shadow)} + +.text-input, input.form-control-plaintext { background-color:none;} +#performer-details .input-control, .text-input {box-shadow: none;} + +div.react-select__control, #performer-details-tabpane-details {background-color: rgba(15,20,30,0.26); max-width:1000px} +#performer-details-tabpane-details {border-radius: 10px} +#performer-details-tabpane-edit {max-width:1000px} + +div.react-select__control .css-12jo7m5 {text-shadow: none; } + +@media (min-width: 1200px) { + #performer-details-tabpane-details td { padding: 9px; } + table#performer-details tbody tr td:nth-child(1), td:first-child {padding-left: 22px; width: 185px;} +} +@media (max-width: 1200px) { + table#performer-details tbody tr td:nth-child(1), td:first-child {padding-left: 11px; } + #performer-page .performer-head { margin-bottom: 1rem; } + #performer-page { margin: 0 -6px 0 -15px; } +} +#performer-details-tabpane-details tr:nth-child(odd) { background-color: rgba(16,22,26,0.1); } +table#performer-details {color:#FFF; text-shadow: 1px 1px 1px #000;} + + + +/* --- Changes the way the name of the performer is displayed --- */ +.performer-head h2 {font-family: var(--HeaderFont); font-weight:bold; text-shadow: 2px 2px 2px #111 } + +/* --- Leave some space between the name and the Fav/Link/Twitter/IG icons --- */ +#performer-page .performer-head .name-icons {margin-left: 22px} + +/* --- Highlighter for active Details/Scenes/Images/Edit/Operations --- */ +.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { + background-color: rgba(5,30,35,0.46); +} + + +/* --- Changes the display of Performer Details Tab in the 0.9 version are arranged --- */ +#performer-details-tabpane-details dl.row, dl.details-list dt, dl.details-list dd{ margin:0 0px;padding: 8px 10px 9px 14px} +#performer-details-tabpane-details dl.row:nth-child(odd), +#performer-details-tabpane-details dl.details-list dt:nth-of-type(odd), +#performer-details-tabpane-details dl.details-list dd:nth-of-type(odd) { background-color: rgba(16,22,26,0.1);} +#performer-details-tabpane-details dt.col-xl-2, +#performer-details-tabpane-details dl.details-list dt { text-shadow: var(--std-txt-shadow); font-weight: normal;} +#performer-details-tabpane-details ul.pl-0 {margin-bottom: 0rem;} +#performer-details-tabpane-details dl.details-list { grid-column-gap: 0} + + +/* --- Resets the fields in Performer Edit Tab in the 0.5 developmental version back to way it was in the 0.5 version --- */ +#performer-edit {margin:0 0 0 10px} +#performer-edit .col-sm-auto, #performer-edit .col-sm-6, #performer-edit .col-md-auto, #performer-edit .col-lg-6, #performer-edit .col-sm-4, #performer-edit .col-sm-8 { width: 100%;max-width: 100%; flex: 0 0 100%; } +#performer-edit .col-sm-auto div, #performer-edit label.form-label { float:left; width:17%;} +#performer-edit .col-sm-auto div, #performer-edit label.form-label { font-weight:normal; color: #FFF; text-shadow: var(--std-txt-shadow); } + +#performer-edit select.form-control, #performer-edit .input-group, #performer-edit .text-input.form-control { float:right; width:83%; } +#performer-edit .form-group, .col-12 button.mr-2 {margin-bottom: 0.35rem} +#performer-edit .mt-3 label.form-label { float:none; width:auto; } + +#performer-edit select.form-control, #performer-edit .input-group, #performer-edit .text-input.form-control {width: 100%;} +#performer-edit textarea.text-input {min-height: 9ex;} + +#performer-edit .form-group:nth-child(17) .text-input.form-control {width:85%;} + +@media (max-width: 750px) { +#performer-edit .col-sm-auto div, #performer-edit label.form-label { float:left; width:22%;} +#performer-edit select.form-control, #performer-edit .input-group, #performer-edit .text-input.form-control { float:right; width:78%; } +} + +@media (max-width: 500px) { +#performer-edit .col-sm-auto div, #performer-edit label.form-label { float:left; width:60%;} +#performer-edit li.mb-1, +#performer-edit select.form-control, +#performer-edit .input-group, #performer-edit .text-input.form-control { float:left; width:89%; } +} + +#performer-edit .form-group .mr-2 {margin-right:0!important} + + + + + + +/* ======================= Scenes ======================== */ + + +/* --- Remove the comments if you don't want to see the Description Text of the scenes --- */ +/* .card-section p {display:none} */ + + +/* --- Remove the comments if you don't want to see the Resolution of the Video (480p, 540p, 720p, 1080p) --- */ + .overlay-resolution {display:none} + + + +/* --- The name of the Scene. Different font, less space to the left and to the top, Text-Shadow --- */ +h5.card-section-title, .scene-tabs .scene-header { + font-family: var(--HeaderFont); + font-size: 1.25rem; + font-weight:bold; + line-height:132%; + text-shadow: var(--std-txt-shadow); +} +.scene-tabs .scene-header { font-size: 24px; margin-bottom:16px } +.scene-tabs .studio-logo { margin-top: 0} + +#TruncatedText .tooltip-inner {width:365px; max-width:365px} +.tooltip-inner { font-family: var(--HeaderFont); + background-color: rgba(16, 20, 25, .99); + box-shadow: 2px 2px 6px rgba(0, 0, 0, .55); + font-weight:bold;font-size:14px;} + +/* --- Removes the horizontal line that separates the date/description text from the Tags/Performer/etc. icons --- */ +.scene-card.card hr, .scene-card.card>hr{ border-top: 0px solid rgba(0,0,0,.1); } + + +/* --- Changes regarding the Scene Logo --- */ +.scene-studio-overlay { + opacity: .80; + top: -1px; + right: 2px; +} + +/* --- The Resolution and the Time/Length of the video in the bottom right corner to make it easier to read --- */ +.scene-specs-overlay { + font-family: Arial, Verdana,"Segoe UI" !important; + bottom:1px; + color: #FFF; + font-weight: bold; + bottom:1.4%; + letter-spacing: 0.035rem; + text-shadow: 2px 2px 1px #000, 4px 4px 5px #444, 7px 0px 5px #444, -3px 2px 5px #444, -5px 0px 5px #444, -1px -4px 5px #444, 3px -2px 6px #444; +} +.overlay-resolution {color:#eee;} + +/* --- Changes the spaces between the items on the Scenes page --- */ +.zoom-0 {margin: 4px 0.50% 10px} + + +.scene-card-link {height:195px; overflow:hidden;} + + +/* --- Tightens the space between the Tags-, Performer-, O-Counter-, Gallery- and Movie-Icons --- */ +.btn-primary { margin:0 -3px 0 -9px} + +/* --- 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, .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 {width:22px} +.scene-card.card .rating-2 {width:43px} +.scene-card.card .rating-3 {width:65px} +.scene-card.card .rating-4 {width:86px} +.scene-card.card .rating-5 {background:none; width:108px} +.rating-1, .rating-2, .rating-3, .rating-4, .scene-card.card .rating-5 { + background:none; + background-image:var(--stars); + height:20px; + background-size: 108px 20px; +} + +.scene-card.card .rating-banner { + padding:0; + left:5px; + top:89%; + background-position: left; + font-size: .01rem; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); +} + + +.scene-card.zoom-0.grid-card.card .rating-banner {top: 87%} +.scene-card.zoom-2.grid-card.card .rating-banner {top: 90%} +.scene-card.zoom-3.grid-card.card .rating-banner {top: 92%} + +.scene-card.zoom-3.grid-card.card .rating-1, .scene-card.zoom-3.grid-card.card .rating-2, .scene-card.zoom-3.grid-card.card .rating-3, .scene-card.zoom-3.grid-card.card .rating-4, .scene-card.zoom-3.grid-card.card .rating-5 { + background:none; + background-image:var(--stars); + height:28px; + background-size: 151px 28px; +} + +.scene-card.zoom-3.grid-card.card .rating-1 {width:30px} +.scene-card.zoom-3.grid-card.card .rating-2 {width:60px} +.scene-card.zoom-3.grid-card.card .rating-3 {width:91px} +.scene-card.zoom-3.grid-card.card .rating-4 {width:121px} +.scene-card.zoom-3.grid-card.card .rating-5 {width:151px} + + + +/* --- Improves how the Preview Videos in the Wall View are displayed --- */ +.wall-item-container {width: 100%; background-color: rgba(0, 0, 0, .10); overflow:hidden } +.wall-item-media { height:100%; background-color: rgba(0, 0, 0, .0);overflow:hidden } +.wall-item-anchor { width: 102%; overflow:hidden } +.wall-item-text {margin-bottom:0px; color: #111; text-shadow: 1px 1px 1px #fff } + + +.scene-popovers .fa-icon {margin-right: 2px;} + +/* --- Changes the Organized Button color when watching a video. Organized = Green, Not Organized = Red --- */ +.organized-button.not-organized { color: rgba(207,10,20,.8); } +.organized-button.organized { color: #06e62e;} + + +/* --- Changes the font in the File Info section --- */ +div.scene-file-info .TruncatedText, div.scene-file-info .text-truncate { + margin-left:-1.5%; + margin-top: -1px; + width: 120%; + font-family: var(--HeaderFont); + font-size: 110%; + line-height:120%; + font-weight:bold; + text-shadow: var(--std-txt-shadow); +} + + +#scene-edit-details .pl-0 { + padding-left: 10px!important; +} + + +/* Zoom 0 */ +.zoom-0 { width:290px} +.zoom-0 .video-section {height:181px;} +.zoom-0 .scene-card-preview-image, .zoom-0 .scene-card-preview { height:195px; } +.zoom-0 .scene-card-preview, .zoom-0 .scene-card-preview-video, .zoom-0 .scene-card-video { + width: 290px; + min-height:181px; + max-height: 200px; +} + +/* 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((234px + 24vw / 3.84)/1.63);max-height: 258px} +.zoom-1 .scene-card-preview-image, .zoom-1 .scene-card-preview { height:98%; max-height: 260px} + +.zoom-1 .scene-card-preview, .zoom-1 .scene-card-preview-video, .zoom-1 .scene-card-video { + min-width: 300px; width: calc(228px + 17vw / 1.92);max-width: 470px; + height:calc((234px + 26vw / 3.84)/1.63); + max-height: 265px; +} + +/* Zoom 2 */ +.zoom-2 { min-width: 350px; width: calc(315px + 26vw / 3.84);max-width: 495px} +.zoom-2 .video-section {height:calc((334px + 26vw / 3.84) /1.63);max-height:295px} +.zoom-2 .scene-card-preview-image, .zoom-2 .scene-card-preview { height:calc((334px + 26vw / 3.84) /1.63); max-height:292px} + +.zoom-2 .scene-card-preview, .zoom-2 .scene-card-preview-video, .zoom-2 .scene-card-video { + min-width: 350px; width: calc(332px + 28vw / 3.84);max-width: 530px; + height:calc((335px + 28vw / 3.84) /1.63); + max-height: 298px; +} + + +/* Zoom 3 */ +.zoom-3 { min-width: 400px; width: calc(530px + 18vw / 5.76);max-width: 590px} +.zoom-3 .video-section {height:375px;} +.zoom-3 .scene-card-preview-image, .zoom-3 .scene-card-preview { height:395px; } +.zoom-3 .scene-card-preview, .zoom-3 .scene-card-preview-video, .zoom-3 .scene-card-video { + width: 600px; + min-height:385px; + max-height: 400px; +} + + +.zoom-0 .video-section, .zoom-1 .video-section, .zoom-2 .video-section, .zoom-3 .video-section +{object-fit: cover !important;overflow:hidden;} + +.zoom-0 .scene-card-preview, .zoom-0 .scene-card-preview-video, .zoom-0 .scene-card-video, +.zoom-1 .scene-card-preview, .zoom-1 .scene-card-preview-video, .zoom-1 .scene-card-video, +.zoom-2 .scene-card-preview, .zoom-2 .scene-card-preview-video, .zoom-2 .scene-card-video, +.zoom-3 .scene-card-preview, .zoom-3 .scene-card-preview-video, .zoom-3 .scene-card-video { + object-fit: cover !important; + margin-top:-2%; + margin-left:-6px; + transform: scale(1.04); +} + +/* --- Shrink the Player Height just a little bit to avoid the scroll bar --- */ +#jwplayer-container { height: calc(99.5vh - 4rem);} +.scene-tabs { max-height: calc(99vh - 4rem); } + +div.tagger-container .btn-link { + font-family: var(--HeaderFont); + font-size: 110%; + color: #ddf; + text-shadow: var(--std-txt-shadow); +} + + +/* --- Changes the color of the scrape button when editing a scene --- */ +.scrape-url-button{background-color: rgba(20,120,20,.50);} +.scrape-url-button:hover{background-color: rgba(20,150,20,.65);} +.scrape-url-button:disabled { background-color: rgba(30,00,00,.40); } + + +.scene-tabs .scene-header {margin-top: 0;margin-bottom: 15px} +.scene-tabs h1.text-center {margin-bottom: 30px} + +#queue-viewer .current {background-color: rgba(25,60,40,0.40);} +#queue-viewer .mb-2:hover, #queue-viewer .my-2:hover {background-color: rgba(15,20,30,0.28);} + +#scene-edit-details .edit-buttons-container { + background-color: rgba(0,0,0,0.0); + position: relative; + margin-bottom:15px; +} + +#scene-edit-details .form-group {margin-bottom:0.65rem;} + + + + + +/* ============== Studio ================= */ + + +.studio-card { padding: 0 4px 14px;} + +.studio-details input.form-control-plaintext { background-color: rgba(16,22,26,.0); } +.studio-details .react-select__control--is-disabled { background: none; border:0} + +.studio-details .form-group, .studio-details td { padding: 8px; } +.studio-details table td:nth-child(1) {color:#FFF; text-shadow: 1px 1px 1px #000;} + +.studio-card-image {max-height: 175px; height:175px} +.studio-card-image {min-width: 260px; width: calc(244px + 19vw / 3.8); max-width: 360px; margin: 0 1px;} +.studio-card .card-section { margin-top: 22px;} + +@media (min-width: 1200px) { +.pl-xl-5, .px-xl-5 { + padding-left: 1rem!important; + padding-right: 1rem!important; +} } + +.no-gutters .TruncatedText, .tag-card .TruncatedText, div.card.studio-card .TruncatedText, .tagger-container .TruncatedText { + font-family: var(--HeaderFont); + font-size: 125%; + line-height:125%; + font-weight:bold; + text-shadow: var(--std-txt-shadow); +} + +.no-gutters .TruncatedText {font-size: 115%;} + +/* --- The following 15 Selectors modify the info box on the left after clicking on a movie --- */ +.studio-details .text-input, #performer-details-tabpane-details .text-input:disabled, +.studio-details .text-input[readonly] {background-color: rgba(16,22,26,0.0);} + +.text-input, input.form-control-plaintext { background-color:none;} +.studio-details .input-control, .text-input {box-shadow: none;} + +.studio-details table { margin-top: 20px; background-color: rgba(15,20,30,0.20); border-radius: 10px; margin-bottom:20px;} +.studio-details .form-group {background-color: rgba(15,20,30,0.20); margin:0;} + +.studio-details table div.react-select__control {background: none; border: 0px;margin:0} +.studio-details table .css-1hwfws3 { padding:0px; } + +.studio-details .form-group, .movie-details td { padding: 8px; } +.studio-details .form-group td:nth-child(1), +.studio-details table tbody tr td:nth-child(1), td:first-child {padding-left: 12px; width: 130px;} + +.studio-details table tr:nth-child(odd) { background-color: rgba(16,22,26,0.1); } +.studio-details .form-group, .studio-details table td:nth-child(1) {color:#FFF; text-shadow: 1px 1px 1px #000;} + + +.studio-card.card .rating-1, .studio-card.card .rating-2, .studio-card.card .rating-3, +.studio-card.card .rating-4, .studio-card.card .rating-5 +{ + background:none; + height: 25px; + background-size: 135px 25px; + background-image:var(--stars); + -webkit-transform:rotate(0deg); + transform:rotate(0deg); + padding:0; + padding-bottom:1px; + box-shadow: 0px 0px 0px rgba(0, 0, 0, .00); + left:10px; + text-align:left; + position:absolute; + top:auto; + bottom: 24% !important; + font-size:0.001rem; +} + +.studio-card.card .rating-5{width:135px;} +.studio-card.card .rating-4{width:109px;} +.studio-card.card .rating-3{width:81px;} +.studio-card.card .rating-2{width:55px;} +.studio-card.card .rating-1{width:28px;} + +div.studio-card.card .card-popovers { margin-top:-34px;margin-right:-7px} +.studio-card.card .card-section div:nth-child(2) {margin-bottom:6px;margin-top:-3px;} + +div.studio-details dl.details-list {grid-column-gap:0} +.studio-details dt, .studio-details dd {padding: 6px 0 8px 8px} + + + + + + + +/* ============== TAGS =============== */ + +.tag-card.card hr, .tag-card.card>hr{border-top: 0px solid rgba(0,0,0,0.0)} + +.tag-card {margin: 4px 0.5% 10px; padding:0px;} + + +@media (min-width: 1200px){ +.row.pl-xl-5, .row.px-xl-5 { + padding-left: 0.2rem!important; + padding-right: 0.2rem!important; +} +} + +.tag-card.zoom-0 { + min-width: 230px; width: calc(205px + 18vw / 1.1); max-width: 354px; + min-height:168px; height:auto; +/* height:calc(130px + 14vw / 1.1); max-height:250px;*/ +} +.tag-card.zoom-0 .tag-card-image { min-height: 100px; max-height: 210px; height: calc(95px + 15vw / 1.1)} + +.tag-card.zoom-1 { + min-width: 260px; width: calc(238px + 25vw / 2.3); max-width: 460px; + min-height:193px; height:auto; max-height:335px; +} +.tag-card.zoom-1 .tag-card-image { min-height: 120px; max-height: 260px; height: calc(100px + 19vw / 2.3);} + +.tag-card.zoom-2 { + min-width: 290px; width: calc(280px + 38vw / 2.45); max-width: 650px; + min-height:170px; height:auto; max-height:505px; +} +.tag-card.zoom-2 .tag-card-image { min-height: 175px; max-height: 435px; height: calc(120px + 26vw / 2.45);} + +#tags .card {padding:0 0 10px 0; } +.tag-card-header {height:190px;overflow:hidden;} + +.zoom-0 .tab-pane .card-image { height:210px } +.zoom-0 .tag-card-image, .zoom-1 .tag-card-image, .zoom-2 .tag-card-image { +zoom: 101%; +object-fit: cover; +overflow:hidden; +width: 101%; +margin-top: -2px; +margin-left: -1%; +} + +.tag-card .scene-popovers, .tag-card .card-popovers { + width:60%; + margin-left:40%; + justify-content: flex-end; + float:right; + margin-bottom: 15px; + margin-top:-34px; + padding-left:17px; +} + +.tag-sub-tags,.tag-parent-tags {margin-bottom:8px} + + +/* --- Moves the Tag name into the Tag Picture --- */ +.tag-details .text-input[readonly] {background-color: rgba(0,0,0,.0)} +.tag-details .table td:first-child {display:none} +.tag-details .logo {margin-bottom: 12px;} + +.tag-details .form-control-plaintext, .tag-details h2 { + margin-top:-76px; + margin-left:0%; + font-weight: bold; + font-family: Helvetica, "Helvetica Neue", "Segoe UI" !important; + letter-spacing: 0.11rem; + font-size:44px; + text-shadow: 2px 2px 3px #111, 4px 4px 4px #282828, 6px 1px 4px #282828, -3px 3px 3px #444, -2px -2px 4px #282828; + text-align:center; +} +@media (max-width: 1300px) {.tag-details .form-control-plaintext {font-size:26px; margin-top:-50px;}} + +.tag-details .logo { min-width:300px} + + + + + +/* ============== MOVIES ============== */ + +/* --- Changes the width of the items so only the front cover is displayed. Also replaces the ratings banner with a star rating --- */ + +.movie-card .text-truncate, div.card.movie-card .TruncatedText { + font-size: 17px !important; + font-family: var(--HeaderFont); + text-shadow: var(--std-txt-shadow); + font-weight: bold; + max-width:210px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +div.movie-card.grid-card.card .card-section p {margin-bottom:-8px} +div.movie-card.grid-card.card .card-section {margin-bottom: -0px !important} +div.movie-card.grid-card.card .card-popovers { + padding-top:35px; + margin-bottom:-11px; + width:60%; + margin-left:40%; + justify-content:flex-end; + float:right; +} + +div.movie-card .card-section span {position:absolute;margin-top:-3px;margin-bottom:6px} + + + +.movie-card-header {height:320px} + +.movie-card-header .rating-banner { + font-size: .001rem; + padding: 8px 41px 6px; + line-height: 1.1rem; + transform: rotate(0deg); + left: 3px; + top: 317px !important; + height: 25px; + background-size: 135px 25px; + background-position: left; +} + +.movie-card-header .rating-1 {width:28px} +.movie-card-header .rating-2 {width:55px} +.movie-card-header .rating-3 {width:83px} +.movie-card-header .rating-4 {width:110px} +.movie-card-header .rating-5 {width:138px} + +.movie-card-header .rating-5 { + background:none; + background-image:var(--stars); + height: 25px; + background-size: 135px 25px; +} + +.movie-card-image { + height:345px; + max-height: 345px; + width:240px; +} + + + + +/* --- The following 15 Selectors modify the info box on the left after clicking on a movie --- */ +.movie-details .text-input, #performer-details-tabpane-details .text-input:disabled, +.movie-details .text-input[readonly] {background-color: rgba(16,22,26,0.0);} + +.text-input, input.form-control-plaintext { background-color:none;} +.movie-details .input-control, .text-input {box-shadow: none;} + +.movie-details table { margin-top: 20px; background-color: rgba(15,20,30,0.20); border-radius: 10px 10px 0px 0px; margin-bottom:0;} +.movie-details .form-group {background-color: rgba(15,20,30,0.20); margin:0;} + +.movie-details table div.react-select__control {background: none; border: 0px;margin:0} +.movie-details table .css-1hwfws3 { padding:0px; } + +.movie-details .form-group, .movie-details td { padding: 8px; } +.movie-details .form-group td:nth-child(1), +.movie-details table tbody tr td:nth-child(1), td:first-child {padding-left: 12px; width: 120px;} + +.movie-details table tr:nth-child(odd) { background-color: rgba(16,22,26,0.1); } +.movie-details .form-group, .movie-details table td:nth-child(1) {color:#FFF; text-shadow: 1px 1px 1px #000;} + + + +/* --- 0.60 dev adjustments --- */ +.studio-details .studio-details, .movie-details .movie-details {background-color: rgba(15,20,30,0.20); border-radius: 10px; margin-bottom:15px; } +.movie-details .movie-details dt.col-3 {padding:4px 0 4px 16px; width: 120px;} +.movie-details .movie-details dd.col-9 {padding:4px 16px 4px 3px;} +.studio-details dl.details-list dt:nth-of-type(odd), +.studio-details dl.details-list dd:nth-of-type(odd), +.movie-details dl.details-list dt:nth-of-type(odd), +.movie-details dl.details-list dd:nth-of-type(odd), +.movie-details dl.row:nth-child(odd) { background-color: rgba(16,22,26,0.1); margin-right:0px} +.movie-details dl.details-list { grid-column-gap: 0} +.studio-details h2, .movie-details .movie-details h2 { font-family: var(--HeaderFont);font-weight:bold;text-shadow: var(--std-txt-shadow);padding:7px 0 5px 12px;} + +.movie-details .movie-images {margin:0 5px 20px 5px;} +.movie-details .movie-images img {border-radius: 14px; max-height:580px;} +.movie-details .movie-image-container{ + margin:0.3rem; + margin-right:0.8rem; + background-color: rgba(0, 0, 0, .48); + box-shadow: 6px 6px 11px rgba(0, 10, 10, .62); +} + +form#movie-edit { margin-bottom:15px} + + + + + +/* ============== IMAGES ============== */ + +div.image-card .rating-banner { + font-size: .002rem; + padding: 8px 41px 6px; + line-height: 1.1rem; + transform: rotate(0deg); + left: 3px; + top: 72% !important; + height: 25px; + background-size: 135px 25px; + background-position: left; +} + +div.image-card .rating-1 {width:28px} +div.image-card .rating-2 {width:55px} +div.image-card .rating-3 {width:83px} +div.image-card .rating-4 {width:110px} +div.image-card .rating-5 {width:138px} + +div.image-card .rating-5 { + background:none; + background-image:var(--stars); + height: 25px; + background-size: 135px 25px; +} + +div.image-card .scene-popovers, div.image-card .card-popovers { + margin-top: -2px; + justify-content: flex-end; +} +div.image-card hr, .scene-card.card>hr{ + border-top: 0px solid rgba(0,0,0,.1); +} + + + + + + + +/* ============== GALLERIES ============== */ + +div.gallery-card hr, .scene-card.card>hr{ + border-top: 0px solid rgba(0,0,0,.1); +} + +div.gallery-card .rating-banner { + font-size: .002rem; + padding: 8px 4px 6px; + line-height: 1.1rem; + transform: rotate(0deg); + left: 3px; + top: 70% !important; + height: 25px; + background-size: 135px 25px; + background-position: left; +} + +div.gallery-card .rating-1 {width:28px !important} +div.gallery-card .rating-2 {width:55px !important} +div.gallery-card .rating-3 {width:83px !important} +div.gallery-card .rating-4 {width:110px} +div.gallery-card .rating-5 {width:137px} + +div.gallery-card .rating-5 { + background:none; + background-image:var(--stars); + height: 25px; + background-size: 135px 25px; +} + +div.gallery-card .scene-popovers, div.gallery-card .card-popovers { + margin-bottom: -8px; + margin-top: -48px; + justify-content: flex-end; +} + + + + + + + + +/* ============== MISC ============== */ + +/* --- When comments are removed the first paginationIndex ("1-x of XXX - time - size") will disappear --- */ +/* .paginationIndex:first-of-type {display:none} */ + + +.svg-inline--fa.fa-w-18 {width: 1.4em;} + +/* --- Makes the Zoom Slider on the Scenes, Images, Galleries and Tags pages longer and therefore easier to use --- */ +input[type=range].zoom-slider{ max-width:140px;width:140px; } + +/* --- Changes the zoom slider color --- */ +input[type=range]::-webkit-slider-runnable-track {background-color: #88afcc !important;} + + +.tag-details .logo { + background-color: rgba(0, 0, 0, .48); + box-shadow: 3px 3px 5px rgba(0, 0, 0, .42); + border-radius: 9px !important; +} + +.search-item { + background-color: none; + background-color: rgba(16,22,26,0.27); +} + +.btn-secondary.disabled, .btn-secondary:disabled { + background-color: none; + background-color: rgba(16,22,26,0.67); +} + +/* --- Edit & Delete buttons when clicking on a studio, tag or movie --- */ +.details-edit {margin-left:3%} + +/* --- Adds a text shadow to the statistics on the startpage --- */ +.stats .title { + text-shadow: 2px 2px 4px #282828; +} + + +.popover { + padding:2px; + background-color: rgba(5,30,35,0.85); + box-shadow: 3px 3px 6px rgba(20, 20, 20, .8); +} +.hover-popover-content { + background-image: linear-gradient(160deg, rgba(230,255,240,0.80), rgba(120,130,155, 0.45), rgba(180,190,225, 0.45), rgba(120,130,165, 0.55), rgba(255,235,235,0.70)); + background-color: rgba(205,210,225,0.31) !important; +} + +.tag-item { + font: normal 13px "Lucida Grande", sans-serif, Arial, Verdana; + background-image: linear-gradient(210deg, rgba(30,95,140,0.36), rgba(10,60,95, 0.45), rgba(20,65,105, 0.88), rgba(5,90,140,0.35)); + background-color: rgba(20,80,110,0.9); + color: #fff; + letter-spacing: 0.07rem; + line-height: 18px; + margin: 3px 3px; + padding: 6px 8px; +} + +/* --- Adjust the lengths of the Performer, Movies and Tags fields while editing a scene while the scene plays --- */ +#scene-edit-details .col-sm-9 { + flex: 0 0 100%; + max-width: 100%; +} + +/* --- Cuts the name of Performers, Movies and Tags short if they go longer than the length of the field --- */ +div.react-select__control .react-select__multi-value { + max-width: 285px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + + + + +.input-control, .input-control:disabled, .input-control:focus, .modal-body div.react-select__control, .modal-body .form-control { + background: rgba(15,15,20,0.36); +} + + +.scraper-table tr:nth-child(2n) { background: rgba(15,15,20,0.18);} + +.nav-pills .nav-link.active, .nav-pills .show>.nav-link { background: rgba(15,15,20,0.50);} + + +.btn-secondary:not(:disabled):not(.disabled).active, +.btn-secondary:not(:disabled):not(.disabled):active, +.show>.btn-secondary.dropdown-toggle { background: rgba(15,15,20,0.50);} + + +/* --- Background when searching for a scene in Tagger view --- */ +.search-result { background: rgba(0,0,0,0.22);} +.selected-result { background: rgba(25,120,25,0.28);} +.search-result:hover { background: rgba(12,62,75,0.35);} + + +.markdown table tr:nth-child(2n) {background: rgba(25,20,25,0.20);} +.markdown code, .markdown blockquote, .markdown pre {background: rgba(25,20,25,0.30);} + + +/* --- Changes the size of the Custom CSS field in the settings --- */ +#configuration-tabs-tabpane-interface textarea.text-input { min-width:60ex; max-width:55vw !important; min-height:50ex;} + + +div.dropdown-menu,div.react-select__menu{background-color:rgba(35,37,44,0.55);color:#f5f8fa} + +div.dropdown-menu .dropdown-item, div.dropdown-menu .react-select__option, div.react-select__menu .dropdown-item, div.react-select__menu .react-select__option +{color:#f5f8fa;background-color:rgba(35,37,44,0.55);} + +div.dropdown-menu .dropdown-item:focus,div.dropdown-menu .dropdown-item:hover,div.dropdown-menu .react-select__option--is-focused,div.react-select__menu .dropdown-item:focus,div.react-select__menu .dropdown-item:hover,div.react-select__menu .react-select__option--is-focused{background-color:rgba(24,130,195,0.85)} + + +.toast-container { + left: 74%; + top: 1rem; +} + +/* --- Settings / About adjustments --- */ +#configuration-tabs-tabpane-about .table {width:100%} +#configuration-tabs-tabpane-about .table td {padding-top:18px} + + + +/* Folder when doing selective scan or configuration */ +.input-group .form-control {color: #c9e0e7; } + + + +/* --- Overhaul of the Popoup Edit Boxes --- */ +@media (min-width: 576px) { + #setting-dialog .modal-content .modal-body textarea {min-height:350px; height:75vh !important} + .modal-dialog {max-width: 880px} + .modal-dialog .modal-content .form-group .multi-set {width:82%;margin-top:12px; flex: 0 0 82%; max-width:82%;} + .modal-dialog .modal-content .form-group .col-9 {flex: 0 0 82%;max-width: 82%;} + .modal-dialog .modal-content .col-3 { flex: 0 0 18%; max-width: 18%;} + .modal-dialog .modal-content .form-group > .form-label {margin-top:0px;flex: 0 0 18%; max-width: 18%;text-shadow: var(--std-txt-shadow);} + .modal-dialog .modal-content .form-group {display: flex; flex-wrap: wrap;} + .modal-dialog .modal-content .btn-group>.btn:not(:first-child), .btn-group>.btn-group:not(:first-child) {margin-left: 2px} + .modal-dialog .modal-content .form-label[for~="movies"], + .modal-dialog .modal-content .form-label[for~="tags"], + .modal-dialog .modal-content .form-label[for~="performers"] {margin-top:48px;} + .modal-dialog .modal-content .button-group-above {margin-left:9px} + .modal-dialog .scraper-sources.form-group h5 {margin-top:20px} + .modal-dialog .modal-content .field-options-table {width:98%} + + .modal-dialog.modal-lg .modal-content .form-group {display: inline;} +} + + +div.modal-body b, .form-label h6 {text-shadow: var(--std-txt-shadow);} + +.modal-body .btn-primary:not(:disabled):not(.disabled).active, .modal-body .btn-primary:not(:disabled):not(.disabled):active { +color: #fff; + background-color: #008558; + border-color: #0d5683; +} + +.modal-body .btn-primary { + color: #fff; + background-color: #666; + border-color: #666; +} + + +/* --- several Performer and Scene Scaping changes --- */ +.modal-content, .modal-lg, .modal-xl { + max-width: 1400px; + width:100%; +} + +.modal-header, .modal-body, .modal-footer { background: rgba(50,90,105,0.96);} +.modal-body {padding-bottom:2rem;} +.performer-create-modal {max-width:1300px;} + +.modal-body .col-form-label, .modal-body .col-6, .modal-footer, .modal-header .col-form-label {text-shadow: var(--std-txt-shadow);} + +.modal-body .col-6 strong {font-weight: normal; font-size:14px} +.modal-body .no-gutters {margin-bottom: 8px} + +.modal-body .dialog-container .col-lg-3 { + flex: 0 0 12%; + max-width: 12%; + text-shadow: var(--std-txt-shadow); +} + +.modal-body .dialog-container .offset-lg-3{margin-left:12%;} +.modal-body .dialog-container .col-lg-9{flex:0 0 88%; max-width:88%;} + + + + + +.input-group-prepend div.dropdown-menu +{ + background: rgba(50,90,105,0.94); + padding:15px; + box-shadow: 2px 2px 6px rgba(0, 0, 0, .70); +} + +.saved-filter-list .dropdown-item-container .dropdown-item { + margin-top:3px; +} +.set-as-default-button {margin-top: 8px;} + +.grid-card .card-check { top:.9rem;width: 1.5rem;} + +.btn-group>.btn-group:not(:last-child)>.btn, .btn-group>.btn:not(:last-child):not(.dropdown-toggle) + {border-left: 1px solid #394b59;} +.btn-group>.btn-group:not(:first-child), .btn-group>.btn:not(:first-child) {border-right: 1px solid #394b59;} + + +div.gallery-card.grid-card.card p div.TruncatedText, +div.movie-card.grid-card.card hr, div.movie-card.grid-card.card p {display:none} + + + +/* --- Spacing out the paginationIndex --- */ +.paginationIndex {color:#f3f3f3;margin-bottom:8px} +.paginationIndex .scenes-stats, .images-stats {margin-top:-3px; color:#9999a9} +.paginationIndex .scenes-stats:before, .images-stats:before +{ + font-size: 16px; + margin-left:18px; + margin-right:12px; + color:#ccc; + content: "-"; +} + + + + + + + + + +/* ============== SETTINGS ============== */ + +#settings-container { + padding-left:230px; + background-image: none !important; + background-color: rgba(16, 20, 25, .40) !important; + box-shadow: 2px 2px 7px rgb(0 0 0 / 75%); + border-radius: 10px; + padding-top:25px; + min-height:450px; +} + +#settings-container .card { + margin-bottom:25px; + background-image: none !important; + background-color: rgba(16, 20, 25, .00); + box-shadow: 0px 0px 0px rgb(0 0 0 / 75%); + border-radius: 0px; +} + +#settings-container .bg-dark {background-color: rgba(16, 20, 25, .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} + +#configuration-tabs-tabpane-tasks h6 { margin-top:3.5em; font-weight:bold; margin-bottom:1em; } +#configuration-tabs-tabpane-tasks h5 { margin-top:2.0em; 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} + +.job-table.card { + margin-top:-32px !important; + background-color: rgba(16, 20, 25, .20) !important; + border-radius: 10px !important; +} + + +.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} + +.loading-indicator {opacity:80%; zoom:2} + + + + +/* --- Settings - Tasks ---- */ + + +#configuration-tabs-tabpane-tasks>.form-group .card { + padding: 20px; + margin: 4px 0.40% 14px; + background-image: none; + background-color: rgba(16, 20, 25, .00); + 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: .25rem; + padding-top: 0rem; + position: relative; + top: 0rem; + z-index: 2; +} +} + +#tasks-panel hr {border-top: 0px solid rgba(140,142,160,.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(.55rem); + padding-bottom: calc(.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 } + + + + + + +/* --- Checkboxes instead of Switches ---*/ + +.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 {margin-bottom:0.8em} +.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 .sub-heading { + font-size:.9rem; + margin-top:0.5rem; + margin-bottom:3rem; +} + + +/* --- Settings - Interface ---- */ + + +@media (min-width: 768px) { +.offset-md-3 {margin-left: 1%;} +#settings-menu-container {margin-left:1%; z-index:9; 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} + #configuration-tabs-tabpane-interface .setting-section:first-child h3 { font-size: 1.55rem;} +} + +@media (min-width: 1200px) { + .offset-md-3 {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; + z-index:9; + width:205px; + } +} + +@media (max-width: 768px) { + .offset-md-3 {margin-left: 1%;} + #settings-menu-container {margin-left:1%; z-index:9;width:180px; padding-top:25px;} + #settings-container { padding-left: 180px;} + .setting-section h1, #tasks-panel h1 { max-width:300px;} +} + +@media (max-width: 576px) { + .offset-sm-3 {margin-left: 1%;} + #settings-menu-container {margin-left:1%;z-index:9;width:160px; padding-top:25px;} + #settings-container {padding-left: 10px;} +} + +@media (max-width: 1004px) { + .setting-section h1, #tasks-panel h1 { max-width:400px;} + .job-table.card {margin-top:2px !important;} +} + + + + +.markdown table tr:nth-child(2n), +.modal-body .nav-link:hover, +#settings-menu-container .nav-link:hover {background-color: rgba(10, 20, 20, .15)} + + + +@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;} + + #settings-container #stash-table {margin-top:25px} + #configuration-tabs-tabpane-interface .setting-section:first-child .card { margin-top: -5px; margin-left: -1%} + + #language .input-control { width:250px} + + #configuration-tabs-tabpane-interface .setting-section:first-child .card > .setting div:nth-child(1) { width:255px} + + + #configuration-tabs-tabpane-interface .setting-section:first-child .card .setting div:nth-child(2) { width:68%;padding-top:6px} + #configuration-tabs-tabpane-interface .setting-section:first-child .card .setting div .sub-heading {margin-top:-28px; margin-left:255px;width:700px} + + #configuration-tabs-tabpane-interface #language {margin-bottom:15px} + #configuration-tabs-tabpane-library #stashes .sub-heading {margin-top:-26px; margin-left:235px;width:700px} + +} + + + +#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} + + +#configuration-tabs-tabpane-interface .setting-section:nth-child(1) h1 {display:none} + +#configuration-tabs-tabpane-interface .setting-section .setting-group>.setting:not(:first-child) h3 { + font-size: 1rem; + margin-left:2em; +} + +#configuration-tabs-tabpane-interface .setting-section .setting-group .setting>div:last-child { + margin-right: 95% !important; + margin-left:0px; + margin-top:-32px; +} + +.setting-section .setting>div:first-child {max-width:415px} + +#configuration-tabs-tabpane-interface .setting-section .setting>div:last-child { + min-width: 20px; + text-align: left; + width:38%; + +} + +#configuration-tabs-tabpane-interface h3 {font-size:1.25em} + +#wall-preview .input-control {width:160px} + +.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; +} + +#configuration-tabs-tabpane-interface .setting-section:nth-child(7) .setting {margin-left:15px !important} +#configuration-tabs-tabpane-interface .setting-section:nth-child(7) .setting:nth-child(1) {margin-left: 0px !important;} + + +#settings-dlna h5 {margin-bottom:70px} +#settings-dlna .form-group h5{margin-left:255px;margin-top:-30px} + +#configuration-tabs-tabpane-metadata-providers #stash-boxes .sub-heading {margin-top:-28px; margin-left:235px;width:700px;font-size:14px} + +.scraper-table tr:nth-child(2n) {background-color: rgba(16, 20, 25, .12)} + + + +/* --- Library ---*/ +.stash-row .col-md-2 {padding-left:4%} +#configuration-tabs-tabpane-library .setting-section .setting {padding:0} + + + +#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; + +} + +#configuration-tabs-tabpane-tasks .setting-section .collapsible-section .setting div:last-child { + margin-right: 95% !important; + margin-left: -12px; + margin-top: -15px; +} + + + +#configuration-tabs-tabpane-system .setting-section .sub-heading {margin-bottom: 1.2rem} + + diff --git a/themes/Theme-Pulsar/Theme-Pulsar.yml b/themes/Theme-Pulsar/Theme-Pulsar.yml new file mode 100644 index 00000000..fc9ae174 --- /dev/null +++ b/themes/Theme-Pulsar/Theme-Pulsar.yml @@ -0,0 +1,6 @@ +name: Theme - Pulsar +description: Plex Theme for Stash by Fonzie 2020-21 +version: 1.8.1 +ui: + css: + - Theme-Pulsar.css diff --git a/themes/Theme-PulsarLight/Theme-PulsarLight.css b/themes/Theme-PulsarLight/Theme-PulsarLight.css new file mode 100644 index 00000000..baa47ff2 --- /dev/null +++ b/themes/Theme-PulsarLight/Theme-PulsarLight.css @@ -0,0 +1,1830 @@ +/* Light Pulsar Theme - Fonzie 2021 v0.3.1 */ +/* ---------------------------------------------------- */ +/* --------- Updated to Stash version 0.12.0 ---------- */ + +/* + Bug Fixes: Overlap of Help & Ssettings" buttons in the navbar, as well + as the Identify task + + Complete overhaul of the Settings page + + Bug Fix: Background-color in the navigation bar + + Adjustments to version 0.10.0 which includes moving the movie-, image- + and gallery-counter to the bottom of the performer image when you hover + over the card, and increasing the size of the star rating in the highest + zoom level. +*/ + + +/* ===================== 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-attachment: fixed; + background-position: center; + color: #f9fbfd; + color:#000; +} + +h1, h2, h3{ color:#fff;} + +:root { + --HeaderFont: Helvetica, "Helvetica Neue", "The Sans", "Segoe UI"; + --std-txt-shadow: 2px 2px 1px #000; + --light-txt-shadow: 1px 1px 3px #555; + --white: #ffffff; + --stars: url("https://i.imgur.com/YM1nCqo.png"); + --fourTwo: 0.35; +} + + +/* --- The Home button in the top left corner of each page. Remove the last 3 lines if you don't like the logo --- */ +button.minimal.brand-link.d-none.d-md-inline-block.btn.btn-primary, +button.minimal.brand-link.d-inline-block.btn.btn-primary { + text-transform: uppercase; + font-weight: bold; + margin-left:1px; + background-image:url("./favicon.ico"); + padding-left:40px; + background-repeat: no-repeat; +} + +/* --- 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} +.bg-dark {background:none !important;background-color:none !Important} +.form-group .bg-dark {background: rgba(10, 20, 25, 0.20)!important;} + +.navbar-buttons.navbar-nav a.nav-utility {margin-right:9px} + + +/* --- The space between the Navigation Bar and the rest of the page --- */ +.main { margin-top:18px } +.top-nav { padding: .13rem 1rem; } + + +/* --- Changes how the Bar at the top of the page behaves --- */ +.fixed-bottom, .fixed-top { position: relative !important; top:0px !important} + + +/* The pagination at the top and at the bottom of the Scenes/Performer/Images/... pages; +transparent background, rounded corners, etc. */ +.filter-container, .operation-container { + background-color: rgba(100, 150, 160, .35); + box-shadow: none; + margin-top: 6px; + border-radius: 5px; + padding: 5px; +} + + +/* --- Changes the space between the button in the top right corner of the page --- */ +.order-2 button { margin-left: 4px } + +/* --- Space between the items in the Nav bar --- */ +.nav-link > .minimal { margin: 0px;} + + +/* Each item on the Scenes/Performers/Tags/... pages */ +.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.30), rgba(35, 40, 45,0.20), rgba(160, 160, 165,0.21), rgba(70, 80, 85,0.27)); + background-color: rgba(106, 120, 125, .25); + box-shadow: 2px 2px 6px rgba(0, 0, 0, .55); + /* --- Increases the rounded borders of each item on the Scenes/Performers/... pages for 6px in 10px --- */ + border-radius: 10px; +} + +/* --- Removes the glowing shimmer effect on the start page & the settings for readability purpose --- */ +.mx-auto.card, .changelog-version.card { + background-image: none !important; + background-color: rgba(16, 20, 25, .40) !important; +} + +/* --- Color that is used within .card secments --- */ +.text-muted { color: #eee !important; text-shadow: 1px 1px 2px #000;} + + +.bg-secondary { + background: none; + background-color: rgba(10, 25, 30, .3) !important; +} + +.text-white { color: #333 } +.border-secondary { border-color: #2f3335 } + +.btn-secondary.filter-item.col-1.d-none.d-sm-inline.form-control { + background-color: rgba(0, 0, 0, .08); +} + +/* --- Changes the color and the background of the buttons and elements in the toolbar (Search, Sort by, # of Items, etc.) --- */ +.btn-secondary { + color: #eef; + background-color: rgba(45, 45, 45, .28); + border-color: #3c3f45; +} +.btn-toolbar .btn-secondary { color: #404049; background-color: rgba(130, 130, 140, .28);} + + +a { color: hsla(0, 10%, 10%, .85);} + + + +/* --- Changes the color of the active page in the Navgation Bar --- */ +.btn-primary:not(:disabled):not(.disabled).active, +.btn-primary:not(:disabled):not(.disabled):active, +.show>.btn-primary.dropdown-toggle { + color: #fff; + background-color: rgba(15, 150, 205, .6); + border-color: #fff; +} + +/* --- No border of the active element in the Navgation Bar --- */ +.btn-primary.focus, +.btn-primary:focus, +.btn-primary:not(:disabled):not(.disabled).active:focus, +.btn-primary:not(:disabled):not(.disabled):active:focus, +.show>.btn-primary.dropdown-toggle:focus {box-shadow: none;} + +.btn-primary:not(:disabled):not(.disabled).active, +.btn-primary:not(:disabled):not(.disabled):active, +.show>.btn-primary.dropdown-toggle { + color: #fff; + border-color: #eee; + text-shadow: 1px 1px 2px #333; + } + +.container-fluid,.container-lg,.container-md,.container-sm,.container-xl { + width: 100%; + margin-right: 0px; + margin-left: 0px; +} + + + + + +/* ===================== Performer ========================= */ + + +/* --- 0.90 - Section moves Movie-, Image- & Gallery-Count to the bottom of the performer image when hovered over --- */ +.performer-card .card-popovers .movie-count, +.performer-card .card-popovers .image-count, +.performer-card .card-popovers .gallery-count +{ + z-index:300; + position:absolute; + top:-270%; + opacity:0.0; +} + +/* --- Highlight the bottom of the performer card when hovered over --- */ +.performer-card.grid-card:hover { + background-image: linear-gradient(130deg, rgba(50, 60, 75,0.25), rgba(150, 155, 160,0.32), rgba(35, 40, 45,0.26), rgba(160, 160, 165,0.27), rgba(50, 60, 65,0.37)); + background-color: rgba(102, 112, 120, .25); +} + +/* --- When hovered over blend them in ---*/ +.performer-card.grid-card:hover .card-popovers .movie-count, +.performer-card.grid-card:hover .card-popovers .image-count, +.performer-card.grid-card:hover .card-popovers .gallery-count {opacity: 1.0;transition: opacity .7s;} + +/* --- 3 items gets a shadow ---*/ +.performer-card .card-section .movie-count span, +.performer-card .card-section .movie-count button.minimal, +.performer-card .card-section .image-count span, +.performer-card .card-section .image-count button.minimal, +.performer-card .card-section .gallery-count span, +.performer-card .card-section .gallery-count button.minimal +{text-shadow: 2px 2px 1px #000, 1px 1px 1px #000, 4px 4px 5px #333, 9px 0px 5px #333, -3px 2px 4px #333, -7px 0px 5px #333, -1px -6px 5px #333, 3px -2px 6px #444;} + +/* --- Positioning of the 3 items ---*/ +.performer-card .card-popovers .movie-count {left:0.2%;} +.performer-card .card-popovers .image-count {left:32.8%} +.performer-card .card-popovers .gallery-count {right:1.3%} + +.performer-card .movie-count a.minimal:hover:not(:disabled), .performer-card .movie-count button.minimal:hover:not(:disabled), +.performer-card .image-count a.minimal:hover:not(:disabled), .performer-card .image-count button.minimal:hover:not(:disabled), +.performer-card .gallery-count a.minimal:hover:not(:disabled), .performer-card .gallery-count button.minimal:hover:not(:disabled) +{ + background-color:rgba(20,80,110,0.92); + color:#fff; +} + +/* --- Affects the Scenes- and Tags-Counter --- */ +a.minimal:hover:not(:disabled), button.minimal:hover:not(:disabled) {background: rgba(138,155,168,.45);color:#fff;} +div.performer-card div.card-popovers +{ + margin-bottom:-3px; + margin-left:3%; + margin-top:-4px; + margin-right: -1px; + justify-content: flex-end; + text-align:right; +} + +div.card-section hr {display:none} + + + +/* --- Changes the width of the Performer Card from 280px to a dynamic system and therefore the size of the image --- */ +/* --- 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 } + + +/* --- 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} */ +.performer-card-image, .justify-content-center .card-image { min-height:240px; height: calc((112px + 19vw / 3.6) * 1.5); max-height: 345px;} +.performer-card-image, .justify-content-center .card-image { min-height:240px; height: calc((100px + 11.2vw / 1.92) * 1.5); max-height: 345px;} + +@media (max-width: 575px), (min-width: 1200px) { +.scene-performers .performer-card-image { height: auto; } +.scene-performers .performer-card { width: auto; } +} + + +/* --- Fixes an issue of the card when watching a scene --- */ +.image-section { display: cover;} + +/* --- The name of the Performer. Different font, less space to the left & to the top, Text-Shadow --- */ +.text-truncate, .card.performer-card .TruncatedText { + margin-left:-1.5%; + margin-top: -2px; + width: 120%; + font-family: var(--HeaderFont); + font-size: 112%; + line-height:130%; + font-weight:bold; + text-shadow: var(--std-txt-shadow); +} + +/* --- Makes the Performer Name smaller when the screen is too small --- */ +@media (max-width: 1200px) { .card.performer-card .TruncatedText { font-size: 104%; } } + + + +/* --- Moves the Flag icon from the right side of the card to the left and makes the Flag image a little bit bigger --- */ +.performer-card .flag-icon { + height: 2rem; + left: 0.6rem; + bottom: 0.10rem; + width: 28px; +} + +/* --- Age and # of Scenes move from the left side to the right of the card --- */ +/* --- Also makes sure that when playing a scenes "XX years old in this scene" doesn't overlap with the star rating --- */ +.performer-card .text-muted {text-align:right;margin-top:-2px;margin-bottom:1px;width:46%;margin-left:54%} + + + +/* --- "removes" the term 'old.' from "xx years old." when the resolution gets to small --- */ +@media (max-width: 1520px) { +div.card.performer-card .text-muted {text-align:right;margin-top:-2px;margin-bottom:1px;margin-right:-33px;max-height:20px;overflow:hidden;} +} + +/* --- To prevent overlapping in the performer card when watching a scene --- */ +@media (max-width: 2000px) { +.tab-content div.card.performer-card .text-muted {margin-top:22px;margin-right:-3px} +.tab-content .performer-card.card .rating-1, +.tab-content .performer-card.card .rating-2, +.tab-content .performer-card.card .rating-3, +.tab-content .performer-card.card .rating-4, +.tab-content .performer-card.card .rating-5 {bottom: 53px !important;} +} + + +/* --- Text Shadow for the "Stars in x scenes" link --- */ +div.card.performer-card div.text-muted a {text-shadow: 1px 2px 2px #333} + +/* --- Minimum height for the section in case Age is missing and elements would overlap --- */ +.performer-card .card-section {min-height:82px} + +/* --- Makes the card section (Name, Age, Flag, # of scenes) more compact --- */ +.card-section { margin-bottom: -8px !important; padding: .5rem 0.7rem 0 !important;} +.card-section span {margin-bottom:3px} +@media (max-width: 1500px) { .card-section span {font-size:11px} } + +div.card-section hr {display:none} + + + + +/* --- Changes regarding the Favorite <3 --- */ +.performer-card .favorite { + color: #f33; + -webkit-filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .95)); + filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .95)); + right: 3px; + top: 5px; +} + + + +/* --- Turns the Rating Banner in the top left corner into a Star Rating under the performer name --- */ +.performer-card.card .rating-1, .performer-card.card .rating-2, .performer-card.card .rating-3, +.performer-card.card .rating-4, .performer-card.card .rating-5 +{ + background:none; + background-size: 97px 18px; + background-image:var(--stars); + -webkit-transform:rotate(0deg); + transform:rotate(0deg); + padding:0; + padding-bottom:1px; + box-shadow: 0px 0px 0px rgba(0, 0, 0, .00); + left:6px; + width:97px; + height:18px; + text-align:left; + position:absolute; + top:auto; + bottom: 34px; + font-size:0.001rem; +} + +/* --- Display only X amount of stars -- */ +div.performer-card.card .rating-banner.rating-1 {width:20px} +div.performer-card.card .rating-banner.rating-2 {width:39px} +div.performer-card.card .rating-banner.rating-3 {width:59px} +div.performer-card.card .rating-banner.rating-4 {width:78px} +div.performer-card.card .rating-banner.rating-5 {width:97px} + + +.performer-card .btn {padding: .34rem .013rem} +.performer-card .fa-icon {margin: 0 2px} +.performer-card .card-popovers .fa-icon {margin-right: 3px} +.performer-card .svg-inline--fa.fa-w-18, .performer-card .svg-inline--fa.fa-w-16 {height: 0.88em} +.performer-card .favorite .svg-inline--fa.fa-w-16 {height:1.5rem} + + +.performer-card .card-popovers .btn-primary { + margin: 0 2px 0 11px; +} + + + +/* --- PerformerTagger Changes --- */ + +.PerformerTagger-performer { + background-image: linear-gradient(130deg, rgba(50, 60, 75,0.25), rgba(150, 155, 160,0.32), rgba(35, 40, 45,0.26), rgba(160, 160, 165,0.27), rgba(50, 60, 65,0.37)); + background-color: rgba(16, 20, 25, .23); + box-shadow: 2px 2px 6px rgba(0, 0, 0, .70); + border-radius: 8px; + margin: 1.1%; + } + +.tagger-container .input-group-text {background:none;border:0;margin-right:5px;padding-left:0} +.PerformerTagger-details { margin-left: 1.25rem; width:23.5rem;} + +.tagger-container .btn-link{text-shadow: 1px 2px 3px #000;} +.tagger-container, .PerformerTagger { max-width: 1850px;} + +.PerformerTagger-header h2 { + font-family: Helvetica, "Helvetica Neue", "Segoe UI" !important; + font-size: 2rem; + line-height:130%; + font-weight:bold; + text-shadow: 2px 2px 1px #000 !important +} + +.PerformerTagger-thumb {height: 145px;} +.PerformerTagger-performer-search button.col-6 {width:300px !important; flex-basis:100%;flex: 0 0 100%; + max-width: 100%;} +.PerformerTagger-performer .performer-card {height:252px !important;} + +.modal-backdrop { background-color: rgba(16, 20, 25, .25);} +.modal-backdrop.show { opacity: 0.1; } + +.performer-create-modal { max-width: 1300px; font-family: Helvetica, "Helvetica Neue", "Segoe UI" !important; } +.performer-create-modal .image-selection .performer-image { height: 95%; } +.performer-create-modal .image-selection {height: 485px;} + +.performer-create-modal .no-gutters .TruncatedText { + font-family: var(--HeaderFont); + font-size: 115%; + padding-top:2px; + line-height:120%; + font-weight:bold; + text-shadow: var(--std-txt-shadow); +} +.performer-create-modal-field strong {margin-left: 6px} +.modal-footer {border-top: 0} + + + + + + +/* ========================= Performer Page ================================= */ +/* === The page that you see when you click on the picture of a Performer === */ + +/* --- The picture of the Performer on the left. 3D effect thanks to background shadows and more rounded corners --- */ +#performer-page .performer-image-container .performer +{ + background-color: rgba(0, 0, 0, .48); + box-shadow: 6px 6px 11px rgba(0, 10, 10, .62); + border-radius: 14px !important; +} + +/* --- Without this the shadow at the bottom from the previous Selector will not be correctly displayed --- */ +.performer-image-container {padding-bottom: 11px} + + +/* --- The following 15 Selectors change the way the details box is displayed --- */ +#performer-details-tabpane-details .text-input, #performer-details-tabpane-details .text-input:disabled, +#performer-details-tabpane-details .text-input[readonly] {background-color: rgba(200,220,246,0.0);} +#performer-details-tabpane-details a { text-shadow: var(--light-txt-shadow)} + +.text-input, input.form-control-plaintext { background-color:none;} +#performer-details .input-control, .text-input {box-shadow: none;} + +div.react-select__control, #performer-details-tabpane-details { + background-color: rgba(225,230,250,0.36); + border:1px solid #999; + max-width:1000px; + box-shadow: 6px 6px 12px rgba(0, 10, 10, .22); +} +#performer-details-tabpane-details {border-radius: 10px} +#performer-details-tabpane-edit {max-width:1000px} + +div.react-select__control .css-12jo7m5 {text-shadow: none; } + +@media (min-width: 1200px) { + #performer-details-tabpane-details td { padding: 9px; } + table#performer-details tbody tr td:nth-child(1), td:first-child {padding-left: 22px; width: 185px;} +} +@media (max-width: 1200px) { + table#performer-details tbody tr td:nth-child(1), td:first-child {padding-left: 11px; } + #performer-page .performer-head { margin-bottom: 1rem; } + #performer-page { margin: 0 -6px 0 -15px; } +} +#performer-details-tabpane-details tr:nth-child(odd) { background-color: rgba(16,22,26,0.1); } +table#performer-details {color:#FFF; text-shadow: 1px 1px 1px #000;} + + + +/* --- Changes the way the name of the performer is displayed --- */ +.performer-head h2 {font-family: var(--HeaderFont); font-weight:bold; text-shadow: 2px 2px 2px #111 } + +/* --- Leave some space between the name and the Fav/Link/Twitter/IG icons --- */ +#performer-page .performer-head .name-icons {margin-left: 22px} + +/* --- Highlighter for active Details/Scenes/Images/Edit/Operations --- */ +.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { + background-color: rgba(135,160,165,0.5); +} + +/* --- Changes the display of Performer Details Tab in the 0.9 version are arranged --- */ +#performer-details-tabpane-details dl.row, dl.details-list dt, dl.details-list dd{ margin:0 0px;padding: 8px 10px 9px 14px} +#performer-details-tabpane-details dl.row:nth-child(odd), +#performer-details-tabpane-details dl.details-list dt:nth-of-type(odd), +#performer-details-tabpane-details dl.details-list dd:nth-of-type(odd) { background-color: rgba(16,22,26,0.1);} +#performer-details-tabpane-details dt.col-xl-2, +#performer-details-tabpane-details dl.details-list dt { text-shadow: var(--light-txt-shadow); font-weight: normal;} +#performer-details-tabpane-details ul.pl-0 {margin-bottom: 0rem;} +#performer-details-tabpane-details dl.details-list { grid-column-gap: 0} + + +/* --- Resets the fields in Performer Edit Tab in the 0.5 developmental version back to way it was in the 0.5 version --- */ +#performer-edit {margin:0 0 0 10px} +#performer-edit .col-sm-auto, #performer-edit .col-sm-6, #performer-edit .col-md-auto, #performer-edit .col-lg-6, #performer-edit .col-sm-4, #performer-edit .col-sm-8 { width: 100%;max-width: 100%; flex: 0 0 100%; } +#performer-edit .col-sm-auto div, #performer-edit label.form-label { float:left; width:17%;} +#performer-edit .col-sm-auto div, #performer-edit label.form-label { font-weight:normal; color: #FFF; text-shadow: var(--std-txt-shadow); } + +#performer-edit select.form-control, #performer-edit .input-group, #performer-edit .text-input.form-control { float:right; width:83%; } +#performer-edit .form-group, .col-12 button.mr-2 {margin-bottom: 0.35rem} +#performer-edit .mt-3 label.form-label { float:none; width:auto; } + +#performer-edit select.form-control, #performer-edit .input-group, #performer-edit .text-input.form-control {width: 100%;} +#performer-edit textarea.text-input {min-height: 9ex;} + +#performer-edit .form-group:nth-child(17) .text-input.form-control {width:85%;} + +@media (max-width: 750px) { +#performer-edit .col-sm-auto div, #performer-edit label.form-label { float:left; width:22%;} +#performer-edit select.form-control, #performer-edit .input-group, #performer-edit .text-input.form-control { float:right; width:78%; } +} + +@media (max-width: 500px) { +#performer-edit .col-sm-auto div, #performer-edit label.form-label { float:left; width:60%;} +#performer-edit li.mb-1, +#performer-edit select.form-control, +#performer-edit .input-group, #performer-edit .text-input.form-control { float:left; width:89%; } +} + +#performer-edit .form-group .mr-2 {margin-right:0!important} + + + + + +/* ======================= Scenes ======================== */ + + +/* --- Remove the comments if you don't want to see the Description Text of the scenes --- */ +/* .card-section p {display:none} */ + + +/* --- Remove the comments if you don't want to see the Resolution of the Video (480p, 540p, 720p, 1080p) --- */ +/* .overlay-resolution {display:none} */ + + + +/* --- The name of the Scene. Different font, less space to the left and to the top, Text-Shadow --- */ +h5.card-section-title, .scene-tabs .scene-header { + font-family: var(--HeaderFont); + font-size: 1.25rem; + font-weight:bold; + line-height:132%; + text-shadow: var(--std-txt-shadow); +} +.scene-tabs .scene-header { font-size: 24px; margin-bottom:25px } + + +#TruncatedText .tooltip-inner {width:365px; max-width:365px} +.tooltip-inner { font-family: var(--HeaderFont); + background-color: rgba(16, 20, 25, .99); + box-shadow: 2px 2px 6px rgba(0, 0, 0, .55); + font-weight:bold;font-size:14px;} + +/* --- Removes the horizontal line that separates the date/description text from the Tags/Performer/etc. icons --- */ +.scene-card.card hr, .scene-card.card>hr{ border-top: 0px solid rgba(0,0,0,.1); } + + +/* --- Changes regarding the Scene Logo --- */ +.scene-studio-overlay { + opacity: .80; + top: -3px; + right: 2px; +} + +/* --- The Resolution and the Time/Length of the video in the bottom right corner to make it easier to read --- */ +.scene-specs-overlay { + font-family: Arial, Verdana,"Segoe UI" !important; + bottom:1px; + color: #FFF; + font-weight: bold; + letter-spacing: 0.035rem; + text-shadow: 2px 2px 1px #000, 4px 4px 5px #444, 7px 0px 5px #444, -3px 2px 5px #444, -5px 0px 5px #444, -1px -4px 5px #444, 3px -2px 6px #444; +} +.overlay-resolution {color:#eee;} + +/* --- Changes the spaces between the items on the Scenes page --- */ +.zoom-0 {margin: 4px 0.50% 10px; !important } + + +.scene-card-link {height:195px; overflow:hidden;} + + +/* --- Tightens the space between the Tags-, Performer-, O-Counter-, Gallery- and Movie-Icons --- */ +.btn-primary { margin:0 -3px 0 -9px} + +/* --- 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, .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 {width:22px} +.scene-card.card .rating-2 {width:43px} +.scene-card.card .rating-3 {width:65px} +.scene-card.card .rating-4 {width:86px} +.scene-card.card .rating-5 {background:none; width:108px} +.rating-1, .rating-2, .rating-3, .rating-4, .scene-card.card .rating-5 { + background:none; + background-image:var(--stars); + height:20px; + background-size: 108px 20px; +} + +.scene-card.card .rating-banner { + padding:0; + left:5px; + top:89%; + background-position: left; + font-size: .01rem; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); +} + + +.zoom-0.card .scene-card.card .rating-banner {top: 81%} +.zoom-2.card .scene-card.card .rating-banner {top: 91%} +.zoom-3.card .scene-card.card .rating-banner {top: 92%} + + + +/* --- Improves how the Preview Videos in the Wall View are displayed --- */ +.wall-item-container {width: 100%; background-color: rgba(0, 0, 0, .10); overflow:hidden } +.wall-item-media { height:100%; background-color: rgba(0, 0, 0, .0);overflow:hidden } +.wall-item-anchor { width: 102%; overflow:hidden } +.wall-item-text {margin-bottom:0px; color: #111; text-shadow: 1px 1px 1px #fff } + + +.scene-popovers .fa-icon {margin-right: 2px;} + +/* --- Changes the Organized Button color when watching a video. Organized = Green, Not Organized = Red --- */ +.organized-button.not-organized { color: rgba(207,10,20,.8); } +.organized-button.organized { color: #06e62e;} + + +/* --- Changes the font in the File Info section --- */ +div.scene-file-info .TruncatedText, div.scene-file-info .text-truncate { + margin-left:-1.5%; + margin-top: -1px; + width: 120%; + font-family: var(--HeaderFont); + font-size: 110%; + line-height:120%; + font-weight:bold; + text-shadow: var(--std-txt-shadow); +} + + +#scene-edit-details .pl-0 { + padding-left: 10px!important; +} + + +/* Zoom 0 */ +.zoom-0 { width:290px} +.zoom-0 .video-section {height:181px;} +.zoom-0 .scene-card-preview-image, .zoom-0 .scene-card-preview { height:195px; } +.zoom-0 .scene-card-preview, .zoom-0 .scene-card-preview-video, .zoom-0 .scene-card-video { + width: 290px; + min-height:181px; + max-height: 200px; +} + +/* 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);max-height: 258px} +.zoom-1 .scene-card-preview-image, .zoom-1 .scene-card-preview { height:100%; max-height: 260px} + +/* +.zoom-1 .scene-card-preview-image, .zoom-1 .scene-card-preview { height:calc((237px + 24vw / 3.84)/1.65); max-height: 260px} +*/ +.zoom-1 .scene-card-preview, .zoom-1 .scene-card-preview-video, .zoom-1 .scene-card-video { + min-width: 300px; width: calc(228px + 17vw / 1.92);max-width: 470px; + height:calc((234px + 26vw / 3.84)/1.65); + max-height: 265px; +} + +/* 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} +.zoom-2 .scene-card-preview-image, .zoom-2 .scene-card-preview { height:calc((313px + 26vw / 3.84) /1.65); max-height:292px} + +.zoom-2 .scene-card-preview, .zoom-2 .scene-card-preview-video, .zoom-2 .scene-card-video { + min-width: 350px; width: calc(330px + 28vw / 3.84);max-width: 530px; + height:calc((310px + 28vw / 3.84) /1.65); + max-height: 298px; +} + + +/* Zoom 3 */ +.zoom-3 { min-width: 400px; width: calc(530px + 18vw / 5.76);max-width: 590px} +.zoom-3 .video-section {height:375px;} +.zoom-3 .scene-card-preview-image, .zoom-3 .scene-card-preview { height:395px; } +.zoom-3 .scene-card-preview, .zoom-3 .scene-card-preview-video, .zoom-3 .scene-card-video { + width: 600px; + min-height:385px; + max-height: 400px; +} + + +.zoom-0 .video-section, .zoom-1 .video-section, .zoom-2 .video-section, .zoom-3 .video-section +{object-fit: cover !important;overflow:hidden;} + +.zoom-0 .scene-card-preview, .zoom-0 .scene-card-preview-video, .zoom-0 .scene-card-video, +.zoom-1 .scene-card-preview, .zoom-1 .scene-card-preview-video, .zoom-1 .scene-card-video, +.zoom-2 .scene-card-preview, .zoom-2 .scene-card-preview-video, .zoom-2 .scene-card-video, +.zoom-3 .scene-card-preview, .zoom-3 .scene-card-preview-video, .zoom-3 .scene-card-video { + object-fit: cover !important; + margin-top:-2%; + margin-left:-6px; + transform: scale(1.04); +} + +/* --- Shrink the Player Height just a little bit to avoid the scroll bar --- */ +#jwplayer-container { height: calc(99.5vh - 4rem);} + + +div.tagger-container .btn-link { + font-family: var(--HeaderFont); + font-size: 110%; + color: #ddf; + text-shadow: var(--std-txt-shadow); +} + +#scene-edit-details .edit-buttons-container { + background-color: rgba(0,0,0,0.0); + position: relative; + margin-bottom:15px; +} + +#scene-edit-details .form-group {margin-bottom:0.65rem;} + + + + + + +/* ============== Studio ================= */ + + +.studio-card { padding: 0 4px 14px;} + +.studio-details input.form-control-plaintext { background-color: rgba(16,22,26,.0); } +.studio-details .react-select__control--is-disabled { background: none; border:0} + +.studio-details .form-group, .studio-details td { padding: 8px; } +.studio-details table td:nth-child(1) {color:#FFF; text-shadow: 1px 1px 1px #000;} + +.studio-card-image {max-height: 175px; height:175px} +.studio-card-image {min-width: 260px; width: calc(238px + 19vw / 3.8); max-width: 360px; margin: 0 6px;} +.studio-card .card-section { margin-top: 22px;} +.studio-card .card-section div {color:#FFF} +.studio-card .card-popovers {width:63%;margin-left:37%} + +@media (min-width: 1200px) { +.pl-xl-5, .px-xl-5 { + padding-left: 1rem!important; + padding-right: 1rem!important; +} } + +.no-gutters .TruncatedText, .tag-card .TruncatedText, div.card.studio-card .TruncatedText, .tagger-container .TruncatedText { + font-family: var(--HeaderFont); + font-size: 125%; + line-height:125%; + font-weight:bold; + text-shadow: var(--std-txt-shadow); +} + +.no-gutters .TruncatedText {font-size: 115%;} + +/* --- The following 15 Selectors modify the info box on the left after clicking on a movie --- */ +.studio-details .text-input, #performer-details-tabpane-details .text-input:disabled, +.studio-details .text-input[readonly] {background-color: rgba(16,22,26,0.0);} + +.text-input, input.form-control-plaintext { background-color:none;} +.studio-details .input-control, .text-input {box-shadow: none;} + +.studio-details table { margin-top: 20px; background-color: rgba(15,20,30,0.20); border-radius: 10px; margin-bottom:20px;} +.studio-details .form-group, .studio-details .row {background-color: rgba(15,20,30,0.20); margin:0;} +.studio-details .no-gutters {background: none !important; } + +.studio-details table div.react-select__control {background: none; border: 0px;margin:0} +.studio-details table .css-1hwfws3 { padding:0px; } + +.studio-details .form-group, .movie-details td { padding: 8px; } +.studio-details .form-group td:nth-child(1), +.studio-details table tbody tr td:nth-child(1), td:first-child {padding-left: 12px; width: 130px;} + +.studio-details table tr:nth-child(odd) { background-color: rgba(16,22,26,0.1); } +.studio-details .form-group, .studio-details table td:nth-child(1) {color:#FFF; text-shadow: 1px 1px 1px #000;} + + +.studio-card.card .rating-1, .studio-card.card .rating-2, .studio-card.card .rating-3, +.studio-card.card .rating-4, .studio-card.card .rating-5 +{ + background:none; + height: 25px; + background-size: 135px 25px; + background-image:var(--stars); + -webkit-transform:rotate(0deg); + transform:rotate(0deg); + padding:0; + padding-bottom:1px; + box-shadow: 0px 0px 0px rgba(0, 0, 0, .00); + left:10px; + text-align:left; + position:absolute; + top:auto; + bottom: 24% !important; + font-size:0.001rem; +} + +.studio-card.card .rating-5{width:135px;} +.studio-card.card .rating-4{width:109px;} +.studio-card.card .rating-3{width:81px;} +.studio-card.card .rating-2{width:55px;} +.studio-card.card .rating-1{width:28px;} + +div.studio-card.card .card-popovers { margin-top: -34px;} +.studio-card.card .card-section div:nth-child(2) {margin-bottom:6px;margin-top:-3px;} + +.studio-details dl.details-list{ grid-column-gap: 0} +.studio-details dt, .studio-details dd {padding: 6px 0 8px 8px} + + + + + + + + + +/* ============== TAGS =============== */ + +.tag-card.card hr, .tag-card.card>hr{ border-top: 0px solid rgba(0,0,0,.1); } + +.tag-card { margin: 4px 0.5% 10px; padding:0px;} + + +@media (min-width: 1200px){ +.row.pl-xl-5, .row.px-xl-5 { + padding-left: 0.2rem!important; + padding-right: 0.2rem!important; +} +} + +.tag-card.zoom-0 { + min-width: 230px; width: calc(200px + 18vw / 1.1); max-width: 350px; + min-height:168px; height:auto; +} +.tag-card.zoom-0 .tag-card-image { min-height: 100px; max-height: 210px; height: calc(95px + 15vw / 1.1);} + +.tag-card.zoom-1 { + min-width: 260px; width: calc(238px + 25vw / 2.3); max-width: 460px; + min-height:193px; height:auto; +} +.tag-card.zoom-1 .tag-card-image { min-height: 120px; max-height: 240px; height: calc(100px + 19vw / 2.3);} + +.tag-card.zoom-2 { + min-width: 290px; width: calc(280px + 38vw / 2.45); max-width: 650px; + min-height:170px; height:auto; max-height:485px; +} +.tag-card.zoom-2 .tag-card-image { min-height: 175px; max-height: 440px; height: calc(120px + 30vw / 2.45);} + + +#tags .card {padding:0 0 10px 0; } +.tag-card-header {height:190px;overflow:hidden;} + +.zoom-0 .tag-card-image, .zoom-1 .tag-card-image, .zoom-2 .tag-card-image { +zoom: 101%; +object-fit: cover; +overflow:hidden; +width: 101%; +margin-top: -2px; +margin-left: -1%; +} + +.tag-card .scene-popovers, .tag-card .card-popovers { + width:60%; + margin-left:40%; + justify-content: flex-end; + float:right; + margin-bottom: 15px; + margin-top:-34px; + padding-left:17px; +} + +.tag-sub-tags, .tag-parent-tags {margin-bottom:9px; color:#FFF} +.tag-sub-tags a, .tag-parent-tags a {color:#FFF; text-shadow: var(--std-txt-shadow)} + +.zoom-0 .tab-pane .card-image { height:210px } + + +/* --- Moves the Tag name into the Tag Picture --- */ +.tag-details .text-input[readonly] {background-color: rgba(0,0,0,.0);} +.tag-details .table td:first-child {display:none} +.tag-details .logo {margin-bottom: 12px;} + +.tag-details .form-control-plaintext, .tag-details h2 { + margin-top:-76px; + margin-left:0%; + font-weight: bold; + font-family: Helvetica, "Helvetica Neue", "Segoe UI" !important; + letter-spacing: 0.11rem; + font-size:44px; + text-shadow: 2px 2px 3px #111, 4px 4px 4px #282828, 6px 1px 4px #282828, -3px 3px 3px #444, -2px -2px 4px #282828; + text-align:center; +} +@media (max-width: 1300px) {.tag-details .form-control-plaintext {font-size:26px; margin-top:-50px;}} + +.tag-details .logo { min-width:300px} + + + + + +/* ============== MOVIES ============== */ + +/* --- Changes the width of the items so only the front cover is displayed. Also replaces the ratings banner with a star rating --- */ + +.movie-card .text-truncate, div.card.movie-card .TruncatedText { + font-size: 17px !important; + font-family: var(--HeaderFont); + text-shadow: var(--std-txt-shadow); + font-weight: bold; + max-width:210px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +div.movie-card.grid-card.card .card-section p {margin-bottom:-8px} +div.movie-card.grid-card.card .card-section {margin-bottom: -0px !important} +div.movie-card.grid-card.card .card-popovers { + padding-top:35px; + margin-bottom:-11px; + width:60%; + margin-left:40%; + justify-content:flex-end; + float:right; +} + +div.movie-card .card-section span {position:absolute;margin-top:-3px;margin-bottom:6px;color:#FFF} + + + +.movie-card-header {height:320px} + +.movie-card-header .rating-banner { + font-size: .002rem; + padding: 8px 41px 6px; + line-height: 1.1rem; + transform: rotate(0deg); + left: 3px; + top: 77% !important; + height: 25px; + background-size: 135px 25px; + background-position: left; +} + +.movie-card-header .rating-1 {width:28px} +.movie-card-header .rating-2 {width:55px} +.movie-card-header .rating-3 {width:83px} +.movie-card-header .rating-4 {width:110px} +.movie-card-header .rating-5 {width:138px} + +.movie-card-header .rating-5 { + background:none; + background-image:var(--stars); + height: 25px; + background-size: 135px 25px; +} + +.movie-card-image { + height:345px; + max-height: 345px; + width: 240px; +} + + + + +/* --- The following 15 Selectors modify the info box on the left after clicking on a movie --- */ +.movie-details .text-input, #performer-details-tabpane-details .text-input:disabled, +.movie-details .text-input[readonly] {background-color: rgba(16,22,26,0.0);} + +.text-input, input.form-control-plaintext { background-color:none;} +.movie-details .input-control, .text-input {box-shadow: none;} + +.movie-details table { margin-top: 20px; background-color: rgba(15,20,30,0.20); border-radius: 10px 10px 0px 0px; margin-bottom:0;} +.movie-details .form-group {background-color: rgba(15,20,30,0.20); margin:0;} + +.movie-details table div.react-select__control {background: none; border: 0px;margin:0} +.movie-details table .css-1hwfws3 { padding:0px; } + +.movie-details .form-group, .movie-details td { padding: 8px; } +.movie-details .form-group td:nth-child(1), +.movie-details table tbody tr td:nth-child(1), td:first-child {padding-left: 12px; width: 120px;} + +.movie-details table tr:nth-child(odd) { background-color: rgba(16,22,26,0.1); } +.movie-details .form-group, .movie-details table td:nth-child(1) {color:#FFF; text-shadow: 1px 1px 1px #000;} + + + +/* --- 0.60 dev adjustments --- */ +.studio-details .studio-details, .movie-details .movie-details {background-color: rgba(15,20,30,0.20); border-radius: 10px; margin-bottom:15px; } +.movie-details .movie-details dt.col-3 {padding:4px 0 4px 16px; width: 120px;} +.movie-details .movie-details dd.col-9 {padding:4px 16px 4px 3px;} +.studio-details dl.details-list dt:nth-of-type(odd), +.studio-details dl.details-list dd:nth-of-type(odd), +.movie-details dl.details-list dt:nth-of-type(odd), +.movie-details dl.details-list dd:nth-of-type(odd), +.movie-details dl.row:nth-child(odd) { background-color: rgba(16,22,26,0.1); margin-right:0px; padding-left:14px;margin-bottom:5px} +.movie-details dl.details-list dt, .movie-details dl.details-list dd {padding-left: 7px;} +.movie-details dl.details-list { grid-column-gap: 0} +.studio-details h2, .movie-details .movie-details h2 { font-family: var(--HeaderFont);font-weight:bold;text-shadow: var(--std-txt-shadow);padding:7px 0 5px 12px;} + +.movie-details .movie-images {margin:0 5px 20px 5px;} +.movie-details .movie-images img {border-radius: 14px; max-height:580px;} +.movie-details .movie-image-container{ + margin:0.3rem; + margin-right:0.8rem; + background-color: rgba(0, 0, 0, .48); + box-shadow: 6px 6px 11px rgba(0, 10, 10, .62); +} + +form#movie-edit { margin-bottom:15px} + + + + + + +/* ============== IMAGES ============== */ + +div.image-card .rating-banner { + font-size: .002rem; + padding: 8px 41px 6px; + line-height: 1.1rem; + transform: rotate(0deg); + padding: 0; + left: 3px; + top: 72% !important; + height: 25px; + background-size: 135px 25px; + background-position: left; +} + +div.image-card .rating-1 {width:28px} +div.image-card .rating-2 {width:55px} +div.image-card .rating-3 {width:83px} +div.image-card .rating-4 {width:110px} +div.image-card .rating-5 {width:138px} + +div.image-card .rating-5 { + background:none; + background-image:var(--stars); + height: 25px; + background-size: 135px 25px; +} + +div.image-card .scene-popovers, div.image-card .card-popovers { + margin-top: -2px; + justify-content: flex-end; +} +div.image-card hr, .scene-card.card>hr{ + border-top: 0px solid rgba(0,0,0,.1); +} + + + + + + + +/* ============== GALLERIES ============== */ + +div.gallery-card hr, .scene-card.card>hr{ + border-top: 0px solid rgba(0,0,0,.1); +} + +div.gallery-card .rating-banner { + font-size: .002rem; + padding: 8px 41px 6px; + line-height: 1.1rem; + transform: rotate(0deg); + padding: 0; + left: 3px; + top: 70% !important; + height: 25px; + background-size: 135px 25px; + background-position: left; +} + +div.gallery-card .rating-1 {width:28px} +div.gallery-card .rating-2 {width:55px} +div.gallery-card .rating-3 {width:83px} +div.gallery-card .rating-4 {width:110px} +div.gallery-card .rating-5 {width:138px} + +div.gallery-card .rating-5 { + background:none; + background-image:var(--stars); + height: 25px; + background-size: 135px 25px; +} + +div.gallery-card .scene-popovers, div.gallery-card .card-popovers { + margin-bottom: -8px; + margin-top: -24px; + justify-content: flex-end; +} + + + + + + + + +/* ============== MISC ============== */ + +.svg-inline--fa.fa-w-18 {width: 1.4em;} + +/* --- Makes the Zoom Slider on the Scenes, Images, Galleries and Tags pages longer and therefore easier to use --- */ +input[type=range].zoom-slider{ max-width:140px;width:140px; } + +/* --- Changes the zoom slider color --- */ +input[type=range]::-webkit-slider-runnable-track {background-color: #88afcc !important;} + + +.tag-details .logo { + background-color: rgba(0, 0, 0, .48); + box-shadow: 3px 3px 5px rgba(0, 0, 0, .42); + border-radius: 9px !important; +} + +.search-item { + background-color: none; + background-color: rgba(16,22,26,0.27); +} + +.btn-secondary.disabled, .btn-secondary:disabled { + background-color: none; + background-color: rgba(16,22,26,0.67); +} + +/* --- Edit & Delete buttons when clicking on a studio, tag or movie --- */ +.details-edit {margin-left:3%} + +/* --- Adds a text shadow to the statistics on the startpage --- */ +.stats .title { + color:#fff; + text-shadow: 2px 2px 4px #282828; +} + + +.popover { + padding:2px; + background-color: rgba(5,30,35,0.85); + box-shadow: 3px 3px 6px rgba(20, 20, 20, .8); +} +.hover-popover-content { + background-image: linear-gradient(160deg, rgba(230,255,240,0.80), rgba(120,130,155, 0.45), rgba(180,190,225, 0.45), rgba(120,130,165, 0.55), rgba(255,235,235,0.70)); + background-color: rgba(205,210,225,0.31) !important; +} + +.tag-item { + font: normal 13px "Lucida Grande", sans-serif, Arial, Verdana; + background-image: linear-gradient(210deg, rgba(30,95,140,0.36), rgba(10,60,95, 0.45), rgba(20,65,105, 0.83), rgba(5,90,140,0.35)); + background-color: rgba(60,120,230,0.8); + color: #fff; + letter-spacing: 0.07rem; + line-height: 18px; + margin: 3px 3px; + padding: 6px 8px; +} + +/* --- Adjust the lengths of the Performer, Movies and Tags fields while editing a scene while the scene plays --- */ +#scene-edit-details .col-sm-9 { + flex: 0 0 100%; + max-width: 100%; +} + +/* --- Cuts the name of Performers, Movies and Tags short if they go longer than the length of the field --- */ +div.react-select__control .react-select__multi-value { + max-width: 285px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + + + + +/* --- several Performer and Scene Scaping changes --- */ +.modal-content, .modal-lg, .modal-xl { + max-width: 1400px; + width:100%; +} + +.modal-header, .modal-body, .modal-footer { background: rgba(10,120,170,0.94);} +.performer-create-modal {max-width:1300px;} + +.modal-body .col-form-label, .modal-body .col-6, .modal-footer, .modal-header .col-form-label {text-shadow: var(--std-txt-shadow);} + +.modal-body .col-6 strong {font-weight: normal; font-size:14px} +.modal-body .no-gutters {margin-bottom: 8px} + +.modal-body .dialog-container .col-lg-3 { + flex: 0 0 12%; + max-width: 12%; + text-shadow: var(--std-txt-shadow); +} + +.modal-body .dialog-container .offset-lg-3{margin-left:12%;} +.modal-body .dialog-container .col-lg-9{flex:0 0 88%; max-width:88%;} + + +.input-control, .input-control:disabled, .input-control:focus, .modal-body div.react-select__control, .modal-body .form-control { + background: rgba(15,15,20,0.36); +} + + +.scraper-table tr:nth-child(2n) { background: rgba(15,15,20,0.18);} + +.nav-pills .nav-link.active, .nav-pills .show>.nav-link { background: rgba(15,15,20,0.50);} + + +.btn-secondary:not(:disabled):not(.disabled).active, +.btn-secondary:not(:disabled):not(.disabled):active, +.show>.btn-secondary.dropdown-toggle { background: rgba(15,15,20,0.50);} + + +/* --- Background when searching for a scene in Tagger view --- */ +.search-result { background: rgba(0,0,0,0.21);} +.selected-result { background: rgba(25,95,25,0.24); color:#fff} +/*.search-result:hover { background: rgba(12,62,75,0.25);}*/ +.search-result:hover { background: rgba(25,122,25,0.33);} + + +.markdown table tr:nth-child(2n) {background: rgba(25,20,25,0.20);} +.markdown code, .markdown blockquote, .markdown pre {background: rgba(25,20,25,0.30);} + + +/* --- Changes the size of the Custom CSS field in the settings --- */ +#configuration-tabs-tabpane-interface textarea.text-input { min-width:60ex; max-width:55vw !important; min-height:50ex;} + + +div.dropdown-menu,div.react-select__menu{background-color:rgba(35,37,44,0.55);color:#f5f8fa} + +div.dropdown-menu .dropdown-item, div.dropdown-menu .react-select__option, div.react-select__menu .dropdown-item, div.react-select__menu .react-select__option +{color:#f5f8fa;background-color:rgba(35,37,44,0.55);} + +div.dropdown-menu .dropdown-item:focus,div.dropdown-menu .dropdown-item:hover,div.dropdown-menu .react-select__option--is-focused,div.react-select__menu .dropdown-item:focus,div.react-select__menu .dropdown-item:hover,div.react-select__menu .react-select__option--is-focused{background-color:rgba(24,130,195,0.85)} + + +.toast-container { + left: 74%; + top: 1rem; +} + +/* --- Settings / About adjustments --- */ +#configuration-tabs-tabpane-about .table {width:100%} +#configuration-tabs-tabpane-about .table td {padding-top:18px} + + +#queue-viewer .current { + background-color: rgba(15,20,30,0.30); +} + +/* Folder when doing selective scan or configuration */ +.input-group .form-control {color: #d9f0f7; } + + +div.modal-body b, .form-label h6 {text-shadow: var(--std-txt-shadow);} + + +.modal-body .btn-primary:not(:disabled):not(.disabled).active, .modal-body .btn-primary:not(:disabled):not(.disabled):active { +color: #fff; + background-color: #008558; + border-color: #0d5683; +} + +.modal-body .btn-primary { + color: #fff; + background-color: #666; + border-color: #666; +} + +.input-group-prepend div.dropdown-menu +{ + background: rgba(50,90,105,0.94); + padding:15px; + box-shadow: 2px 2px 6px rgba(0, 0, 0, .70); +} + +.saved-filter-list .dropdown-item-container .dropdown-item {margin-top:3px;} +.set-as-default-button {margin-top: 8px;} + + + +/* --- Specific Light Modifications --- */ + +a.minimal, button.minimal { + color: #fff; + text-shadow: 1px 1px 2px #000; +} + +.top-nav a.minimal, .top-nav button.minimal { + color: #333; + text-shadow: 1px 1px 2px #ddd; +} + +.top-nav { box-shadow: 2px 2px 6px rgba(120, 150, 160, .55)} + + +.pagination .btn:last-child {border-right: 1px solid #202b33;} +.pagination .btn:first-child {border-left: 1px solid #202b33;} + +.nav-tabs .nav-link { color: #000038;} + + +.scene-card .card-section {color:#fff;text-shadow: 0px 0px 1px #111;} +.changelog-version, .tab-content {color: #fff} +.tab-content .bg-dark {color:#fff} + +#performer-details-tabpane-details {color: #000} +.scraper-table a {color:#dde} +.image-tabs, .gallery-tabs, .scene-tabs { + background-image: linear-gradient(130deg, rgba(60, 70, 85,0.21), rgba(150, 155, 160,0.30), rgba(35, 40, 45,0.22), rgba(160, 160, 165,0.21), rgba(50, 60, 65,0.30)); + background-color: rgba(106, 120, 125, .29); +} + +.table-striped.table-bordered, .table-striped.table-bordered a {color:#000} + +.nav-tabs .nav-link.active { color: #2866d0;} + +.PerformerScrapeModal-list .btn-link { color: #a9d0ff;} + +.tab-content .scene-file-info a {color: #cde} + +.grid-card .card-check { top:.9rem;width: 1.5rem;} +.LoadingIndicator .spinner-border, .LoadingIndicator-message { color:#37e} + + +.btn-group>.btn-group:not(:last-child)>.btn, .btn-group>.btn:not(:last-child):not(.dropdown-toggle), +.pagination .btn-group>.btn:first-child:not(.dropdown-toggle) {border-left: 1px solid #394b59;} +.btn-group>.btn-group:not(:first-child), .btn-group>.btn:not(:first-child) {border-right: 1px solid #394b59;} + + +div.gallery-card.grid-card.card p div.TruncatedText, +div.movie-card.grid-card.card hr, div.movie-card.grid-card.card p {display:none} + + +/* --- Spacing out the paginationIndex --- */ +.paginationIndex {color:#f3f3f3;margin-bottom:8px} +.paginationIndex .scenes-stats, .images-stats {margin-top:-3px; color:#aaaab9} +.paginationIndex .scenes-stats:before, .images-stats:before +{ + font-size: 16px; + margin-left:18px; + margin-right:12px; + color:#ccc; + content: "-"; +} + +/* --- Overhaul of the Popoup Edit Boxes --- */ +@media (min-width: 576px) { + #setting-dialog .modal-content .modal-body textarea {min-height:350px; height:75vh !important} + .modal-dialog {max-width: 880px} + .modal-dialog .modal-content .form-group .multi-set {width:82%;margin-top:12px; flex: 0 0 82%; max-width:82%;} + .modal-dialog .modal-content .form-group .col-9 {flex: 0 0 82%;max-width: 82%;} + .modal-dialog .modal-content .col-3 { flex: 0 0 18%; max-width: 18%;} + .modal-dialog .modal-content .form-group > .form-label {margin-top:0px;flex: 0 0 18%; max-width: 18%;text-shadow: var(--std-txt-shadow);} + .modal-dialog .modal-content .form-group {display: flex; flex-wrap: wrap;} + .modal-dialog .modal-content .btn-group>.btn:not(:first-child), .btn-group>.btn-group:not(:first-child) {margin-left: 2px} + .modal-dialog .modal-content .form-label[for~="movies"], + .modal-dialog .modal-content .form-label[for~="tags"], + .modal-dialog .modal-content .form-label[for~="performers"] {margin-top:48px;} + .modal-dialog .modal-content .button-group-above {margin-left:9px} + .modal-dialog .scraper-sources.form-group h5 {margin-top:20px} + .modal-dialog .modal-content .field-options-table {width:98%} + + .modal-dialog.modal-lg .modal-content .form-group {display: inline;} +} + + + + + + + +/* ============== SETTINGS ============== */ + + + +#settings-container { + padding-left:230px; + background-image: none !important; + background-color: rgba(16, 20, 25, .40) !important; + box-shadow: 2px 2px 7px rgb(0 0 0 / 75%); + border-radius: 10px; + padding-top:25px; + min-height:450px; +} + +#settings-container .card { + margin-bottom:25px; + background-image: none !important; + background-color: rgba(16, 20, 25, .00); + box-shadow: 0px 0px 0px rgb(0 0 0 / 75%); + border-radius: 0px; +} + +#settings-container .bg-dark {background-color: rgba(16, 20, 25, .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} + +#configuration-tabs-tabpane-tasks h6 { margin-top:3.5em; font-weight:bold; margin-bottom:1em; } +#configuration-tabs-tabpane-tasks h5 { margin-top:2.0em; 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} + +.loading-indicator {opacity:80%; zoom:2} + + + + +/* --- Settings - Tasks ------------------------------------------------------------------------------------- */ + + +#configuration-tabs-tabpane-tasks>.form-group .card { + padding: 20px; + margin: 4px 0.40% 14px; + background-image: none; + background-color: rgba(16, 20, 25, .00); + 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: .25rem; + padding-top: 0rem; + position: relative; + top: 0rem; + z-index: 2; +} +} + +#tasks-panel hr {border-top: 0px solid rgba(140,142,160,.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(.55rem); + padding-bottom: calc(.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, .20) !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:.9rem; + margin-top:0.5rem; + margin-bottom:3rem; +} + +@media (min-width: 768px) { +.offset-md-3 {margin-left: 1%;} +#settings-menu-container {margin-left:1%; z-index:9; 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) { + .offset-md-3 {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; + z-index:9; + width:205px; + } +} + +@media (max-width: 768px) { + .offset-md-3 {margin-left: 1%;} + #settings-menu-container {margin-left:1%; z-index:9;width:180px; padding-top:25px;} + #settings-container { padding-left: 180px;} + .setting-section h1, #tasks-panel h1 { max-width:300px;} +} + +@media (max-width: 576px) { + .offset-sm-3 {margin-left: 1%;} + #settings-menu-container {margin-left:1%;z-index:9;width:160px; padding-top:25px;} + #settings-container {padding-left: 10px;} +} + +@media (max-width: 1004px) { + .setting-section h1, #tasks-panel h1 { max-width:400px;} + .job-table.card {margin-top:2px !important;} +} + + + + +.markdown table tr:nth-child(2n), +.modal-body .nav-link:hover, +#settings-menu-container .nav-link:hover {background-color: rgba(10, 20, 20, .15)} + + + +@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;} + + #settings-container #stash-table {margin-top:25px} + #configuration-tabs-tabpane-interface .setting-section:first-child .card { margin-top: -5px; margin-left: -1%} + + #language .input-control { width:250px} + #configuration-tabs-tabpane-interface .setting-section:first-child h3 { font-size: 1.55rem;} + + #configuration-tabs-tabpane-interface .setting-section:first-child .card > .setting div:nth-child(1) { width:255px} + + + #configuration-tabs-tabpane-interface .setting-section:first-child .card .setting div:nth-child(2) { width:68%;padding-top:6px} + #configuration-tabs-tabpane-interface .setting-section:first-child .card .setting div .sub-heading {margin-top:-28px; margin-left:255px;width:700px} + + #configuration-tabs-tabpane-interface #language {margin-bottom:15px} + #configuration-tabs-tabpane-library #stashes .sub-heading {margin-top:-26px; margin-left:235px;width:700px} + +} + + + +#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} + + +#configuration-tabs-tabpane-interface .setting-section:nth-child(1) h1 {display:none} + +#configuration-tabs-tabpane-interface .setting-section .setting-group>.setting:not(:first-child) h3 { + font-size: 1rem; + margin-left:2em; +} + +#configuration-tabs-tabpane-interface .setting-section .setting-group .setting>div:last-child { + margin-right: 95% !important; + margin-left:0px; + margin-top:-32px; +} + +.setting-section .setting>div:first-child {max-width:415px} + +#configuration-tabs-tabpane-interface .setting-section .setting>div:last-child { + min-width: 20px; + text-align: left; + width:38%; + +} + +#configuration-tabs-tabpane-interface h3 {font-size:1.25em} + +#wall-preview .input-control {width:160px} + +.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; +} + +#configuration-tabs-tabpane-interface .setting-section:nth-child(7) .setting {margin-left:15px !important} +#configuration-tabs-tabpane-interface .setting-section:nth-child(7) .setting:nth-child(1) {margin-left: 0px !important;} + + +#settings-dlna h5 {margin-bottom:70px} +#settings-dlna .form-group h5{margin-left:255px;margin-top:-30px} + +#configuration-tabs-tabpane-metadata-providers #stash-boxes .sub-heading {margin-top:-28px; margin-left:235px;width:700px;font-size:14px} + +.scraper-table tr:nth-child(2n) {background-color: rgba(16, 20, 25, .12)} + + + +/* Library */ + +.stash-row .col-md-2 {padding-left:4%} +#configuration-tabs-tabpane-library .setting-section .setting {padding:0} + + + +#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; + +} + +#configuration-tabs-tabpane-tasks .setting-section .collapsible-section .setting div:last-child { + margin-right: 95% !important; + margin-left: -12px; + margin-top: -15px; +} + + +#configuration-tabs-tabpane-system .setting-section .sub-heading {margin-bottom: 1.2rem} + + diff --git a/themes/Theme-PulsarLight/Theme-PulsarLight.yml b/themes/Theme-PulsarLight/Theme-PulsarLight.yml new file mode 100644 index 00000000..12bd3dd9 --- /dev/null +++ b/themes/Theme-PulsarLight/Theme-PulsarLight.yml @@ -0,0 +1,6 @@ +name: Theme - PulsarLight +description: Plex Theme for Stash by Fonzie 2021 +version: 0.3.1 +ui: + css: + - Theme-PulsarLight.css From 176a50e47c05ee41a3a101074a4a1ffe0fb1b948 Mon Sep 17 00:00:00 2001 From: Scruffy Nerf Date: Mon, 1 Jan 2024 13:30:20 -0500 Subject: [PATCH 2/2] update readme for themes --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 8fc2cef6..f5511aae 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ We're beginning to review plugins and the rest and patch them to work, but it's We'll update the table below as we do this... We will also be rearranging things a bit, and updating documentation (including this page) -## Plugins and Themes will no longer be listed here. +## Plugins will no longer be listed individually here... Category|Triggers|Plugin Name|Description|Minimum Stash version|Updated for v24| --------|-----------|-----------|-----------|---------------------|----- @@ -42,9 +42,8 @@ Reporting||[TagGraph](plugins/tagGraph)|Creates a visual of the Tag relations.|v ## Themes -Theme Name|Description |Updated for v24| -----------|--------------------------------------------|---- -[Plex](themes/plex) |Theme inspired by the popular Plex Interface|:x: +# A Variety of Themes are now available to be one click installed via the Plugin Setting page in your Stash +We welcome new themes, as well as patches to existing themes. ## Utility Scripts