diff --git a/README.md b/README.md index 1ca7875..262c74f 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ This repository contains plugin and utility scripts created by the Stash community and hosted on the official GitHub repo. There is also [a list of third-party plugins on our wiki page](https://github.com/stashapp/stash/wiki/Plugins-&--Scripts). ## How To Install -To download a plugin, either clone the git repo, or download the files directly. +To download a plugin, either clone the git repo, or download the files directly. It is recommended that plugins are placed in their own subdirectory of your `plugins` directory. The `plugins` directory should be created as a subdirectory in the directory containing your `config.yml` file. This will be in `$HOME/.stash` by default. @@ -26,6 +26,12 @@ Scanning|Scene.Create
Gallery.Create
Image.Create|[defaultDataForPath] Scanning|Scene.Create
Gallery.Create|[filenameParser](plugins/filenameParser)|Tries to parse filenames, primarily in {studio}.{year}.{month}.{day}.{performer1firstname}.{performer1lastname}.{performer2}.{title} format, into the respective fields|v0.10 Reporting||[TagGraph](plugins/taggrap)|Creates a visual of the Tag relations.|v0.7 +## Themes + +Theme Name|Description | +----------|--------------------------------------------| +[Plex](themes/plex) |Theme inspired by the popular Plex Interface| + ## Utility Scripts Category|Plugin Name|Description|Minimum Stash version diff --git a/themes/plex/README.md b/themes/plex/README.md new file mode 100644 index 0000000..64c6bb2 --- /dev/null +++ b/themes/plex/README.md @@ -0,0 +1,29 @@ +![plex theme logo](https://user-images.githubusercontent.com/63812189/79496351-dddbf780-7fda-11ea-9e68-46d0eeb4e92f.png) + +![plex theme preview](https://user-images.githubusercontent.com/1358708/178891502-c71e4278-0378-4154-91a6-07e1a8eaa1df.png) + +This is a community created theme for Stash inspired by the popular 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 we will be happy to hear from you on our [Discord server](https://discord.gg/2TsNFKt)! You can also submit a PR to share improvements with others! + +The Plex Theme will only change the look and feel of the Stash interface. It will not affect any other data, so you are all safe and sound! :heart: + +## 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](https://github.com/stashapp/CommunityScripts/blob/main/themes/plex/plex.css) to the Custom CSS text area. + +### Optional - Host Backgrounds Locally + +_These steps are optional, by default this theme uses the Github hosted image links._ + +1. Download [background.png](https://user-images.githubusercontent.com/63812189/79506691-4af78900-7feb-11ea-883e-87b8e05ceb1c.png) and [noise.png](https://user-images.githubusercontent.com/63812189/79506696-4c28b600-7feb-11ea-8176-12a46454d87a.png) + +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 [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%;` diff --git a/themes/plex/plex.css b/themes/plex/plex.css new file mode 100644 index 0000000..0eb2166 --- /dev/null +++ b/themes/plex/plex.css @@ -0,0 +1,204 @@ +/* +Originally created by Fidelio 2020 +StashApp Plex Theme - v1.0.5 +*/ + +body { + background-image: url("https://user-images.githubusercontent.com/63812189/79506691-4af78900-7feb-11ea-883e-87b8e05ceb1c.png"); + width: 100%; + height: 100%; + background-size: cover; + background-repeat: no-repeat; + background-color: #3f4245; + background-attachment: fixed; + background-position: center; +} + +#root { + background: rgba(0, 0, 0, 0) url("https://user-images.githubusercontent.com/63812189/79506696-4c28b600-7feb-11ea-8176-12a46454d87a.png") repeat scroll 0% 0%; + position: absolute; + width: 100%; + height: 100%; + z-index: 2; +} + +* { + scrollbar-color: hsla(0, 0%, 100%, .2) transparent; +} + +.bg-dark { + background-color: #1f2326!important; +} + +.job-table.card, +.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: #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); +} + +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: #1f2326; + border-color: #374242; +} + +.nav-tabs .nav-link.active { + color: #eee; +} + +.nav-tabs .nav-link.active:hover { + border-bottom-color: #eee; + outline: 0; +} + +.nav-tabs .nav-link { + outline: 0; +} + +.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: #1f2326; +} + +.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: #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: #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: #1f2326; +} +.folder-list .btn-link { + color: #2c2e30; +} + +#performer-scraper-popover { + z-index: 10; +} + +#tasks-panel .tasks-panel-queue { + background: rgba(0, 0, 0, 0); +} + +div.react-select__menu-portal { + z-index: 2; +}