From 37b4239ba9ef7832b3f2b614d48cae01c1c6ef5f Mon Sep 17 00:00:00 2001 From: cj <72030708+Teda1@users.noreply.github.com> Date: Sun, 13 Mar 2022 16:08:53 -0600 Subject: [PATCH] Created Modern Dark (markdown) --- Modern-Dark.md | 520 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 520 insertions(+) create mode 100644 Modern-Dark.md diff --git a/Modern-Dark.md b/Modern-Dark.md new file mode 100644 index 0000000..7d8b0cc --- /dev/null +++ b/Modern-Dark.md @@ -0,0 +1,520 @@ +  +

+ Stash Plex Theme +
+ + Discord + +

+ +![](https://media.discordapp.net/attachments/644934273459290145/938694529861705728/Web_capture_3-2-2022_11319_192.168.4.144.jpeg?width=1609&height=905) +  + +This theme was inspired by Plex Interface. Installation is quick and easy so you should be ready to install it in just a few simple steps. + +Feel free to experiment with CSS and modify it to fit your needs. In case you have any issues or improvements DM me on Discord! + +  +# Install + +**1.** Open User **Interface** Configuration panel in **settings**. ( http://localhost:9999/settings?tab=interface ) + + +**2.** Tick/Enable Custom CSS ✅ + + +**3.** Copy&Paste [CSS Code](#css-code) to the Custom CSS text area. + +**4.** In your config.yml file update the value of `theme_color` property to `#191919`. + +  + + + +Enjoy! + + +  + + +# CSS Code + + + +```css +/* Modern Dark Theme by cj13 v1.0 */ + +:root { + --nav-color: #212121; + --body-color: #191919; + --card-color: #2a2a2a; + --plex-yelow: #e5a00d; + --tag-color: #555555; +} + +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) { + /*body { padding: 1rem 1rem 5rem; }*/ + .studio-card { width: 100%; height: 294px;} + .movie-card { width: 45%; } + /*.performer-card {width: 220px; }*/ + /*.card-popovers { display: none; }*/ + .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; } + a[data-rb-event-key=scene-edit-panel] { display: none; } + a[data-rb-event-key=scene-video-filter-panel] { display: none; } + .ml-auto.btn-group { display: none; } + .stats-element { flex-grow: 1; margin: auto 0rem; } + .stats { margin-left: 0px; } + .top-nav { bottom: 0; top: auto; padding-bottom: 20px; } + div[data-rb-event-key="/images"] { display: none; } + div[data-rb-event-key="/scenes/markers"] { display: none; } +} + +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; +} +``` \ No newline at end of file