From 23fc7b7a3823de5276c529cd85628fcfd1d6a88f Mon Sep 17 00:00:00 2001 From: Journey Date: Thu, 28 Feb 2019 02:20:30 -0600 Subject: [PATCH] Plex Fixes 1.2.0 release ## v1.2.0 ... (28 FEBRUARY 19) ### Changes: `+` Reverted `Rewrote theme into LESS style.` due to the fact that I wanted to bring back the `Port Number & Custom Url options`. `+` Changed how I build the style. --- .eslintrc | 2 + .gitattributes | 22 ++ .github/CONTRIBUTING.md | 160 ++++++----- .github/ISSUE_TEMPLATE.md | 7 +- .npmrc | 1 + AUTHORS | 6 + CHANGELOG.md | 6 + build/build.js | 16 -- build/files.js | 56 ---- build/style.less | 446 ------------------------------ build/template.user.css | 21 -- optionals/contract-sidebar.css | 66 +++++ optionals/expand-movie-extras.css | 17 ++ optionals/hide-cast-list.css | 5 + optionals/hide-extras.css | 5 + optionals/hide-related-lists.css | 9 + optionals/hover-cast-list.css | 12 + optionals/hover-posters.css | 72 +++++ optionals/zoom-black-bar.css | 5 + package.json | 47 ++-- style.user.css | 445 ++++++++--------------------- tools/authors | 17 ++ tools/bump-version.js | 29 ++ tools/fix-perfectionist.js | 28 ++ tools/src/style.css | 201 ++++++++++++++ tools/update-usercss.js | 48 ++++ tools/usercss-template.css | 61 ++++ tools/utils.js | 43 +++ 28 files changed, 905 insertions(+), 948 deletions(-) create mode 100644 .eslintrc create mode 100644 .gitattributes create mode 100644 .npmrc create mode 100644 AUTHORS delete mode 100644 build/build.js delete mode 100644 build/files.js delete mode 100644 build/style.less delete mode 100644 build/template.user.css create mode 100644 optionals/contract-sidebar.css create mode 100644 optionals/expand-movie-extras.css create mode 100644 optionals/hide-cast-list.css create mode 100644 optionals/hide-extras.css create mode 100644 optionals/hide-related-lists.css create mode 100644 optionals/hover-cast-list.css create mode 100644 optionals/hover-posters.css create mode 100644 optionals/zoom-black-bar.css create mode 100644 tools/authors create mode 100644 tools/bump-version.js create mode 100644 tools/fix-perfectionist.js create mode 100644 tools/src/style.css create mode 100644 tools/update-usercss.js create mode 100644 tools/usercss-template.css create mode 100644 tools/utils.js diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..3487193 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,2 @@ +root: true +extends: eslint-config-silverwind diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..0b6acf1 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,22 @@ +# Auto detect text files and perform LF normalization +* text=auto + +# Custom for Visual Studio +*.cs diff=csharp +*.sln merge=union +*.csproj merge=union +*.vbproj merge=union +*.fsproj merge=union +*.dbproj merge=union + +# Standard to msysgit +*.doc diff=astextplain +*.DOC diff=astextplain +*.docx diff=astextplain +*.DOCX diff=astextplain +*.dot diff=astextplain +*.DOT diff=astextplain +*.pdf diff=astextplain +*.PDF diff=astextplain +*.rtf diff=astextplain +*.RTF diff=astextplain diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 4cd91a1..a326934 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -1,13 +1,18 @@ # Contributing to Plex-Fixes -1. [Getting Involved](#getting-involved) -2. [How To Report style issues](#how-to-report-style-issues) -3. [Core Style Guide](#style-guide) -4. [Getting Started](#getting-started) +- [Contributing to Plex-Fixes](#contributing-to-plex-fixes) + - [Getting Involved](#getting-involved) + - [How to Report Style issues](#how-to-report-style-issues) + - [I don't know CSS](#i-dont-know-css) + - [I rock at CSS & GitHub!](#i-rock-at-css--github) + - [Style Guide](#style-guide) + - [Getting Started](#getting-started) + - [Build & test](#build--test) + - [Development Scripts](#development-scripts) ## Getting Involved -There are a number of ways to get involved with the development of this theme. Even if you've never contributed to an Open Source project before, I'm always looking for help identifying missing styles or other issues. +There are a number of ways to get involved with the development of this theme. Even if you've never contributed to an Open Source project before, we're always looking for help identifying missing styles or other issues. ## How to Report Style issues @@ -15,69 +20,100 @@ There are a number of ways to get involved with the development of this theme. E If you don't know CSS very well and have found a missing style, please include as much as possible of following information when opening an issue: -* Screenshot of the problem; include the element(s) in the console if at all possible - * To select an element, target it with your mouse then right-click and choose "Inspect Element" - * Please include both the HTML view and the element with the problem in the screenshot -* A URL to the page (if public). +- Screenshot of the problem; include the element(s) in the console if at all possible + - To select an element, target it with your mouse then right-click and choose "Inspect Element" + - Please include both the HTML view and the element with the problem in the screenshot +- A URL to the page (if public). ### I rock at CSS & GitHub! -* Follow the style guide below -* Make any needed changes, then send a pull request -* Please include a url to the page (if public) +- Follow the style guide below +- Make any needed changes, then send us a pull request +- Please include a URL to the page (if public) ## Style Guide -* Use the provided `.editorconfig` file with your code editor. Don't know what that is? Then check out http://editorconfig.org/. -* Limit to the [K&R Style](https://en.wikipedia.org/wiki/Indentation_style#K.26R), and **2 SPACE INDENTATION** (no tabs, and not more, and not less than 2 spaces). - - * K&R Example: - ```css - element[attr='value'] { - ··property: value; - } - ``` - - * **Not Allman** - ```css - element[property='value'] - { - ··property: value; - } - ``` - - * Strict space between the `selector` and the `{`: - ```css - /* good */ - element[attr='value'] { } - - /* bad */ - element[attr='value']{ } - ``` - - * 2 Space indentation - ```css - /* good */ - ··property: value; - - /* bad */ - ····property: value; - ----property: value; - ·property: value; - ``` - -* Try to wrap lines at around 80 characters. -* Try to limit the style size: - * Don't add any image URI's to the css; instead add the image into the `/images` directory; then point to using the following url: `https://raw.githubusercontent.com/StylusThemes/Plex-Fixes/master/images/`{my-image.png}. - * If possible, reduce any added selectors. Remember that Stylus requires an `!important` flag to override default styling, so a selector starting from the body isn't always necessary. - * Don't add any inline comments. If you want to make a comment, add it as a note in the commit. - * If your css definition already exists within the style, do not add it again! Add your selector to the existing definition. -* Insert any new css selectors in the available slot immediately before the style definition, or on a new line as needed. -* If you want to add a new userstyle or usercss variable, please open an issue and discuss it with me first. +- Use the provided `.editorconfig` file with your code editor. Don't know what that is? Then check out . +- Limit to the [K&R (KNF variation style)](https://en.wikipedia.org/wiki/Indentation_style#Variant:_BSD_KNF), and **2 SPACE INDENTATION** (no tabs, and not more, and not less than 2 spaces). + + - K&R - KNF Variation Example: + + ```css + element[attr='value'] { + ··property: value; + } + ``` + + - **Not Allman** + + ```css + element[property='value'] + { + ··property: value; + } + ``` + + - Strict space between the `selector` and the `{`: + + ```css + /* good */ + element[attr='value'] { } + + /* bad */ + element[attr='value']{ } + ``` + + - 2 Space indentation + + ```css + /* good */ + ··property: value; + + /* bad */ + ····property: value; + ----property: value; + ·property: value; + ``` + +- Try to wrap lines at around 80 characters. +- Try to limit the style size: + - Don't add any image URI's to the css; instead add the image into the `/images` directory; then point to using the following URL: `https://raw.githubusercontent.com/StylusThemes/Plex-Fixes/master/images/`{my-image.png}. + - If possible, reduce any added selectors. Remember that Stylus requires an `!important` flag to override default styling, so a selector starting from the body isn't always necessary. + - Don't add any inline comments. If you want to make a comment, add it as a note in the commit. + - If your css definition already exists within the style, do not add it again! Add your selector to the existing definition. +- Insert any new css selectors in the available slot immediately before the style definition, or on a new line as needed. +- If you want to add a new userstyle or usercss variable, please open an issue and discuss it with us first. ## Getting Started -* Download, fork or clone this repository. -* It's easiest to try out your changes within the Stylus editor. - * The live preview option (available soon) will make it easy to see your style changes as you make them. - * Once done, make the same changes to the `Style.css` file in the repo and save. It might be easiest to copy & paste the entire style from the Stylus editor. +- [Download](https://github.com/StylusThemes/Plex-Fixes/archive/master.zip), [fork](https://github.com/StylusThemes/Plex-Fixes/fork) or clone this repository. +- Use [node.js](http://nodejs.org/) to run `npm install`. +- Make any changes + - In `style.css` for common styles. + - In `/optionals` for different options. + +### Build & test + +- Create & change into a new branch of your local Plex-Fixes repository. +- Open the style in the Stylus editor, and make sure to have "live preview" checked for testing. +- Once you are satisfied with the changes, select all the css (Ctrl + a), copy (Ctrl + c) then paste (Ctrl + v) it into your editor. +- Run `npm run test` to test the css changes. +- Now you can add and commit the changes to your fork's branch. +- If you haven't already contributed, then run `npm run authors` to add your name to our list of contributors :smile: +- Push the changes to your branch, then submit a pull request. +- And thanks again for contributing! + +### Development Scripts + +- `npm run authors`: Runs a batch file to rebuild the `AUTHORS` file. +- `npm run clean`: Runs the perfectionist script & cleans up after it. +- `npm run eslint`: Lint the JavaScript code in the `tools` directory. +- `npm run lint`: Run eslint & stylelint scripts. +- `npm run major`: Creates a semantic major release. +- `npm run minor`: Creates a semantic minor release. +- `npm run patch`: Creates a semantic patch release. +- `npm run perfectionist`: Runs perfectionist only. CSS is not cleaned! +- `npm run stylelint`: Run stylelint on the css file. +- `npm run test`: Same as `npm run lint`. +- `npm run update`: Update development dependencies. +- `npm run usercss`: Update usercss variables using usercss template; variable data obtained from `defaults.json`. diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index b1e8fce..f40aa07 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,9 +1,12 @@ diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..43c97e7 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/AUTHORS b/AUTHORS new file mode 100644 index 0000000..333a1f3 --- /dev/null +++ b/AUTHORS @@ -0,0 +1,6 @@ +# Authors ordered by first contribution. + +Journey +The Codacy Badger + +# Generated by tools/authors.sh diff --git a/CHANGELOG.md b/CHANGELOG.md index 51cf146..97d268d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Plex Fixes Changelog +## v1.2.0 ... (28 FEBRUARY 19) + +### Changes: +`+` Reverted `Rewrote theme into LESS style.` due to the fact that I wanted to bring back the `Port Number & Custom Url options`. +`+` Changed how I build the style. + ## v1.1.1 ... (21 FEBRUARY 19) ### Additions: diff --git a/build/build.js b/build/build.js deleted file mode 100644 index 6063832..0000000 --- a/build/build.js +++ /dev/null @@ -1,16 +0,0 @@ -/* global require */ -"use strict"; - -const pkg = require( "../package.json" ), - - { - del, - createUserCss - } = require( "./files" ); - -del( "style.user.css" ) - .then( () => createUserCss( pkg.version ) ) - .then( () => console.log( "\x1b[32m%s\x1b[0m", "Plex Fixes usercss build complete" ) ) - .catch( err => { - throw err; - } ); diff --git a/build/files.js b/build/files.js deleted file mode 100644 index 77171e2..0000000 --- a/build/files.js +++ /dev/null @@ -1,56 +0,0 @@ -/* global require module */ -"use strict"; - -const fs = require( "fs" ); - -function createUserCss( version ) { - return Promise.all( - [ "./build/template.user.css", "./build/style.less" ].map( name => readFile( name ) ) - ) - .then( files => writeFile( - "style.user.css", processTemplate( files, version ) ) ); -} - -function processTemplate( files, version ) { - return files.join( "" ).replace( "[[VERSION]]", version ); -} - -function readFile( name ) { - return new Promise( ( resolve, reject ) => { - fs.readFile( name, "utf8", ( err, file ) => { - if ( err ) { - return reject( err ); - } - resolve( file ); - } ); - } ); -} - -function writeFile( name, obj ) { - return new Promise( ( resolve, reject ) => { - fs.writeFile( name, obj, "utf8", err => { - if ( err ) { - console.log( `Error writing ${name}`, err ); - return reject(); - } - resolve(); - } ); - } ); -} - -function del( name ) { - return new Promise( ( resolve, reject ) => { - fs.unlink( name, err => { - // ignore if file doesn't exist - if ( err && err.code !== "ENOENT" ) { - return reject(); - } - resolve(); - } ); - } ); -} - -module.exports = { - del, - createUserCss -}; diff --git a/build/style.less b/build/style.less deleted file mode 100644 index fdf5687..0000000 --- a/build/style.less +++ /dev/null @@ -1,446 +0,0 @@ - -@-moz-document regexp("https?://app.plex.tv/.*"), regexp("((http(s?)):\\/\\/)?[-A-Za-z0-9+&@#/%?=~_|!:,.;]+(32400)+(.*)") { - /* ++----------------------------------------------------------------------------------++ */ - /* || || */ - /* ||* Name : Plex Fixes || */ - /* || || */ - /* ||* Author : JourneyOver || */ - /* || || */ - /* ||* Created : 03 / 10 / 2017 || */ - /* || || */ - /* ||* Updated : 02 / 21 / 2019 || */ - /* || || */ - /* ||* Version : 1.1.1 || */ - /* || || */ - /* ||* Copyright : 2017-2019 || */ - /* || || */ - /* ++----------------------------------------------------------------------------------++ */ - -/*::::::::::::::::::::::::::::::::::::::::::::::::::::::: Pre 3.0.0 Fixes :::::::::::::::::::::::::::::::::::::::::::::::::::::::*/ - -a { - user-select: all !important; -} - -/*::: Main Background Image :::*/ -.background-container { - > [class^="FullPage-container-"] { - div { - > div { - background: rgba(31, 31, 31, 1); - background-image: url(IMGURL) !important; - background-position: center center; - background-size: 100% 100% !important; - - image-rendering: auto; - } - } - } -} - -/*::: Image Container :::*/ -div[class^="PrePlayArtwork-imageContainer-"], -div[class*="3dXG6"] { - position: fixed !important; - top: 0 !important; - right: 0 !important; - bottom: 0 !important; - left: 0 !important; - z-index: -1 !important; - margin: 0 !important; - width: 100% !important; - height: 100% !important; - background: #1f1f1f !important; - -webkit-animation: plexbgfadein .6s ease-in; - /*::: Image :::*/ - > div { - position: fixed !important; - width: 100% !important; - height: 100% !important; - background-repeat: no-repeat !important; - background-size: 100% 100% !important; - opacity: .25 !important; - /*::: Resizing adds extra divs :::*/ - & + div { - display: none !important; - } - } - /*::: Item Thumbnail :::*/ - & + div { - position: fixed !important; - top: 180px !important; - background-position: center !important; - } -} - -/*::: Background Fade-in :::*/ -@-webkit-keyframes plexbgfadein { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -/*::::::::::::::::::::::::::::::::::::::::::::::::::::::: NEW ADDITIONS :::::::::::::::::::::::::::::::::::::::::::::::::::::::*/ - -/*::: Max Width Of Summary Container :::*/ -div[class^="PrePlaySummary-summary-"], -div[class*="1NL8g"] { - margin-bottom: 5px; - max-width: none !important; - font-size: 15px; - /*::: Make Sure Overflow Of Summary Container is always visible :::*/ - > div { - overflow: visible !important; - max-height: none !important; - } -} - -/*::: Hide Read More Button Since It's Useless Now :::*/ -[class^="CollapsibleText-readMore-"], -[class*="1bRJm"] { - display: none !important; -} - -/*::: Hide The Go Premium Button :::*/ -[class^="NavBar-plexPassButton-"], -[class*="wVK4v"] { - display: none !important; -} - -/*::: Plex Fixes Version :::*/ -[class="version-title"] { - &::after { - white-space: pre; - content: "\A Plex Fixes Ver. 1.1.0"; - } -} - -/*::: Make Users pic square :::*/ -[class^="dropdown-poster-"] { - > div { - border-radius: 0; - } -} - -[class^="card-poster"], -[class^="AvatarImg-avatar-"], -[class*="3Op56"] { - border-radius: 0; -} - -/*::: Move dashboard down slightly :::*/ -[class^="DashboardPage-dashboardPageContent-"], -[class*="2rN8X"] { - padding: 15px 55px 60px !important; -} - -/*::: make continue watching title containers a bit smaller :::*/ -div[class*="MetadataPosterCell-continueWatchingTitleContainer-"], -div[class*="3yCAY"] { - padding: 4px 5px !important; - background-color: rgba(0, 0, 0, .35); -} - -/*::: shorten the padding on headers on dashboard to bring inline with being closer to continue watching title container :::*/ -div[class*="HubCellHeader-hubCellHeader-"], -div[class*="2pvYN"] { - padding: 4px 0 0 5px !important; -} - -/*::: Make cast pictures square :::*/ -a[class^="PrePlayCastCell-cardLink-"], -div[class^="TagPosterCard-card-"], -a[class*="Tndv5"], -div[class*="RVD0D"] { - border-radius: 0 !important; -} - -/*::: lower actors faces a bit :::*/ -div[class^="TagPosterCard-card-"], -div[class*="RVD0D"] { - [class^="PosterCardImg-imageContainer-"], - [class*="1Ar4M"] { - > div { - background-position: 100% 30% !important; - } - } -} - -/*::: Navbar height :::*/ -[class*="NavBar-container-"], -[class*="1T0BJ"] { - height: 40px; -} - -/*::: Move navbar Activity Button number :::*/ -[class*="NavBarActivityButton-label-"], -[class*="2ZN0g"] { - top: 10px; -} - -/*::: Resize navbar search box :::*/ -[class*="QuickSearchInput-container-"], -[class*="QuickSearch-container-"], -[class*="1HiCo"], -[class*="2PWkB"] { - height: 30px; -} - -/*::: Pulsate Status :::*/ -[class*="NavBarActivityButton-isActive-"] { - [class*="NavBarActivityButton-activityIcon-"] { - opacity: .1; - -webkit-animation: pulsate 5s ease-out; - -webkit-animation-iteration-count: infinite; - } -} - -@-webkit-keyframes pulsate { - 0% { - opacity: 1; - -webkit-transform: scale(1.3, 1.3); - } - 50% { - opacity: .3; - -webkit-transform: scale(.85, .85); - } - 100% { - opacity: 1; - -webkit-transform: scale(1.3, 1.3); - } -} - -if CastL == 'CLY' { -/*::: Hover effect on CAST cards :::*/ -a[class^="PrePlayCastCell-cardLink-"], -a[class*="Tndv5"] { - &:hover { - transform: scale(1.07); - > div { - transform: scale(1.07); - } - } -} -} else if CastL == 'CLH' { -/*::: Hide Cast List :::*/ -div[class^="PrePlayCastList-castList-"], -div[class*="3dQB5"] { - display: none !important; -} -} - -if ExtrasM == 'EEY' { -/*::: Expand 'Extras' display for movies (shows as grid instead of scroller) :::*/ -[class^="PrePlayExtrasList-extrasHubCell-"] { - > div { - &:nth-child(2) { - width: auto !important; - height: auto !important; - > [class^="Measure-container-"] { - > div { - > div { - width: auto !important; - height: auto !important; - > div { - display: inline-block; - position: relative !important; - margin: 10px; - transform: translate3d(10px, 10px, 0) !important; - } - } - } - } - } - } -} -} else if ExtrasM == 'EEH'{ -/*::: Hide Movie Extras (dunno if there are tv extras or not as I could never get extras for tv shows to show up) :::*/ -div[class^="PrePlayExtrasList-extrasHubCell-"], -div[class*="2NcGK"] { - display: none !important; -} -} - -if RelatedL == 'RLY' { -/*::: Hide Related List i.e Related movies|shows|Genres|People :::*/ -div[data-qa-id*="hub--movie.similar"], -div[data-qa-id*="hub--movie.same.actor."], -div[data-qa-id*="hub--tv.similar"], -div[data-qa-id*="hub--tv.same.actor"], -div[data-qa-id*="hub--tv.morefromnetwork"] { - display: none !important; -} -} - -if VARF == 'VARFY' { -/*::: Zooms in on Blu-ray rip's that haven't been cropped to remove black bars :::*/ -[class^="AudioVideoPlayerView-container"] video { - -webkit-transform: scale(1.13); -} -} - -if PosterHE == 'PHEY' { -/*::: Posters Hover Effects :::*/ -/*::: Credits to @IanCeling :::*/ - -/* Poster Shadow */ -div[class^="MetadataPosterCard-cardContainer-"] { - box-shadow: 0 6px 26px -2px #000; - transition: all 350ms; - - -webkit-perspective: 500px; - perspective: 500px; - /* Poster Hover */ - &:hover { - box-shadow: 0 0 0 0 #000; - transform: scale(.95) translateY(0); - /*::: Poster Play Button :::*/ - div[class^="MetadataPosterCardOverlay-playCircle-"] { - transform: translate(-50%, -50%) scale(1.2); - } - [class^=plex-icon-play-] { - font-size: 30px; - } - } -} - -/* Continue Watching poster hover */ -div[data-qa-id="hub--home.continue"] { - div[class^="MetadataPosterCard-cardContainer-"] { - &:hover { - transform: scale(.97) translateY(-5px); - } - } -} - -/*::: Photo Card Hover :::*/ -[class^="MetadataPhotoCell-photoContainer-"] { - transition: all 350ms; - - -webkit-perspective: 500px; - perspective: 500px; - &:hover { - transform: scale(.95) translateY(0); - } -} - -[class^="MetadataPhotoCell-photo-"] { - &:hover { - box-shadow: none; - transform: scale(1.02); - } -} - -/*::: Poster Play Button 2 :::*/ -div[class^="MetadataPosterCardOverlay-playCircle-"] { - border-radius: 50%; - width: 50px; - height: 50px; - font-size: 18px; - line-height: 48px; - color: hsla(0, 0%, 100%, .7); - box-shadow: 0 4px 16px -2px #000; - transition: all 350ms; - transform: translate(-50%, -50%) scale(.1); -} -} - -if CompactSB == 'CSY' { -/*::: kill container margin and add transition speed :::*/ -/*::: Contract the sidebar to save screen space [Expands back out on hovering over the sidebar] :::*/ -.page-container { - margin-left: 0 !important; -} - -div[role=navigation] { - div { - padding-right: 0; - a { - overflow: visible; - div { - &:nth-child(2) { - font-size: 0 !important; - } - } - } - } - div[role=header] { - font-size: 0 !important; - } -} - -[class^=SidebarContainer-sidebarContainer-] { - width: 55px !important; - max-width: 55px !important; - transition: all .5s ease !important; - &:hover { - width: 240px !important; - max-width: 240px !important; - transition: all 1.5s ease !important; - [class^=SidebarLink-title], - [class^=SidebarList-sidebarListHeader], - [class^=SidebarServerLibraries-librariesTitle] { - font-size: 12px !important; - transition: all 2s ease !important; - } - div[role=navigation] { - div { - a { - div { - &:nth-child(2) { - font-size: 12px !important; - transition: all 2s ease !important; - } - } - } - } - div[role=header] { - font-size: 12px !important; - transition: all 2s ease !important; - } - } - button[data-qa-id=serverMenuButton] { - div { - span { - font-size: 14px !important; - transition: all 2s ease !important; - } - } - } - [class^=DisclosureArrow-disclosureArrow], - [class^=SidebarLibrariesActions-actions], - [class^=SidebarLink-children] { - display: inline-block !important; - transition: all 2s ease !important; - } - } -} - -[class^=SidebarLink-title], -[class^=SidebarList-sidebarListHeader], -[class^=SidebarServerLibraries-librariesTitle] { - font-size: 0 !important; -} - -button[data-qa-id=serverMenuButton] { - div { - span { - font-size: 0 !important; - } - } -} - -[class^=DisclosureArrow-disclosureArrow-], -[class^=SidebarLibrariesActions-actions], -[class^=SidebarLink-children] { - display: none !important; -} - -[class^=SidebarLibraryItem-action] { - width: 0 !important; -} -} -} diff --git a/build/template.user.css b/build/template.user.css deleted file mode 100644 index 8c6585c..0000000 --- a/build/template.user.css +++ /dev/null @@ -1,21 +0,0 @@ -/* ==UserStyle== -@name Plex Fixes -@version [[VERSION]] -@namespace https://github.com/StylusThemes -@description Bringing back plex to pre-3.0.0 -@author StylusThemes -@homepageURL https://github.com/StylusThemes/Plex-Fixes -@supportURL https://github.com/StylusThemes/Plex-Fixes/issues -@updateURL https://raw.githubusercontent.com/StylusThemes/Plex-Fixes/master/style.user.css -@preprocessor stylus -@license CC-BY-SA-4.0 - -@var text IMGURL "Custom Background Image for Discover Page" "'http://example.com/bkgd.jpg'" - -@var select CastL "Cast List" ["CLY:Hover Effects", "CLH:Hide Cast List", "CLN:No Hover Effect & Don't Hide"] -@var select ExtrasM "Extras" ["EEY:Expand Movie Extras", "EEH:Hide Extras", "EEN:Don't Expand & Don't Hide"] -@var select RelatedL "Related Lists" ["RLY:Hide Related Lists", "RLN:Don't Hide"] -@var select PosterHE "Posters" ["PHEY:Hover Effects", "PHEN:No Hover Effects"] -@var select CompactSB "Contract The Sidebar To Save Screen Space" ["CSY:Yes", "CSN:No"] -@var select VARF "Zooms in on Blu-ray rip's that haven't been cropped to remove black bars" ["VARFN:No", "VARFY:Yes"] -==/UserStyle== */ diff --git a/optionals/contract-sidebar.css b/optionals/contract-sidebar.css new file mode 100644 index 0000000..27eed1d --- /dev/null +++ b/optionals/contract-sidebar.css @@ -0,0 +1,66 @@ +/* contract-sidebar */ +/*::: kill container margin and add transition speed :::*/ +/*::: Contract the sidebar to save screen space [Expands back out on hovering over the sidebar] :::*/ +.page-container { + margin-left: 0 !important; +} + +div[role=navigation] div a { + overflow: visible; +} + +div[role=navigation] div { + padding-right: 0; +} + +[class^=SidebarContainer-sidebarContainer-] { + width: 55px !important; + max-width: 55px !important; + transition: all .5s ease !important; +} + +[class^=SidebarContainer-sidebarContainer-]:hover { + width: 240px !important; + max-width: 240px !important; + transition: all 1.5s ease !important; +} + +[class^=SidebarLink-title], +[class^=SidebarList-sidebarListHeader], +[class^=SidebarServerLibraries-librariesTitle], +button[data-qa-id=serverMenuButton] div span, +div[role=navigation] div a div:nth-child(2), +div[role=navigation] div[role=header] { + font-size: 0 !important; +} + +[class^=SidebarContainer-sidebarContainer-]:hover [class^=SidebarLink-title], +[class^=SidebarContainer-sidebarContainer-]:hover [class^=SidebarList-sidebarListHeader], +[class^=SidebarContainer-sidebarContainer-]:hover [class^=SidebarServerLibraries-librariesTitle], +[class^=SidebarContainer-sidebarContainer-]:hover div[role=navigation] div a div:nth-child(2), +[class^=SidebarContainer-sidebarContainer-]:hover div[role=navigation] div[role=header] { + font-size: 12px !important; + transition: all 2s ease !important; +} + +[class^=SidebarContainer-sidebarContainer-]:hover button[data-qa-id=serverMenuButton] div span { + font-size: 14px !important; + transition: all 2s ease !important; +} + +[class^=DisclosureArrow-disclosureArrow-], +[class^=SidebarLibrariesActions-actions], +[class^=SidebarLink-children] { + display: none !important; +} + +[class^=SidebarContainer-sidebarContainer-]:hover [class^=DisclosureArrow-disclosureArrow], +[class^=SidebarContainer-sidebarContainer-]:hover [class^=SidebarLibrariesActions-actions], +[class^=SidebarContainer-sidebarContainer-]:hover [class^=SidebarLink-children] { + display: inline-block !important; + transition: all 2s ease !important; +} + +[class^=SidebarLibraryItem-action] { + width: 0 !important; +} diff --git a/optionals/expand-movie-extras.css b/optionals/expand-movie-extras.css new file mode 100644 index 0000000..7b3226e --- /dev/null +++ b/optionals/expand-movie-extras.css @@ -0,0 +1,17 @@ +/* expand-movie-extras */ +/*::: Expand 'Extras' display for movies (shows as grid instead of scroller) :::*/ +[class^="PrePlayExtrasList-extrasHubCell-"] > div:nth-child(2), +[class^="PrePlayExtrasList-extrasHubCell-"] > div:nth-child(2) > [class^="Measure-container-"] > div > div, +[class*="2NcGK"] > div:nth-child(2), +[class*="2NcGK"] > div:nth-child(2) > [class*="2XznZ"] > div > div { + width: auto !important; + height: auto !important; +} + +[class^="PrePlayExtrasList-extrasHubCell-"] > div:nth-child(2) > [class^="Measure-container-"] > div > div > div, +[class*="2NcGK"] > div:nth-child(2) > [class*="2XznZ"] > div > div > div { + display: inline-block; + position: relative !important; + margin: 10px; + transform: translate3d(10px, 10px, 0) !important; +} diff --git a/optionals/hide-cast-list.css b/optionals/hide-cast-list.css new file mode 100644 index 0000000..721c214 --- /dev/null +++ b/optionals/hide-cast-list.css @@ -0,0 +1,5 @@ +/* hide-cast-list */ +/*::: Hide Cast List :::*/ +div[class^="PrePlayCastList-castList-"] { + display: none !important; +} diff --git a/optionals/hide-extras.css b/optionals/hide-extras.css new file mode 100644 index 0000000..fc43a97 --- /dev/null +++ b/optionals/hide-extras.css @@ -0,0 +1,5 @@ +/* hide-extras */ +/*::: Hide Movie Extras (dunno if there are tv extras or not as I could never get extras for tv shows to show up) :::*/ +div[class^="PrePlayExtrasList-extrasHubCell-"] { + display: none !important; +} diff --git a/optionals/hide-related-lists.css b/optionals/hide-related-lists.css new file mode 100644 index 0000000..e9b9fcb --- /dev/null +++ b/optionals/hide-related-lists.css @@ -0,0 +1,9 @@ +/* hide-related-lists */ +/*::: Hide Related List i.e Related movies|shows|Genres|People :::*/ +div[data-qa-id*="hub--movie.similar"], +div[data-qa-id*="hub--movie.same.actor."], +div[data-qa-id*="hub--tv.similar"], +div[data-qa-id*="hub--tv.same.actor"], +div[data-qa-id*="hub--tv.morefromnetwork"] { + display: none !important; +} diff --git a/optionals/hover-cast-list.css b/optionals/hover-cast-list.css new file mode 100644 index 0000000..84aadd3 --- /dev/null +++ b/optionals/hover-cast-list.css @@ -0,0 +1,12 @@ +/* hover-cast-list */ +/*::: Hover effect on CAST cards :::*/ +a[class^="PrePlayCastCell-cardLink-"]:hover, +a[class^="PrePlayCastCell-cardLink-"]:hover > div, +a[class*="Tndv5"]:hover > div, +a[class*="Tndv5"]:hover { + transform: scale(1.07); + -webkit-transform: scale(1.07); + -moz-transform: scale(1.07); + -ms-transform: scale(1.07); + -o-transform: scale(1.07); +} diff --git a/optionals/hover-posters.css b/optionals/hover-posters.css new file mode 100644 index 0000000..4b2a4ac --- /dev/null +++ b/optionals/hover-posters.css @@ -0,0 +1,72 @@ +/* hover-posters */ +/*::: Posters Hover Effects :::*/ +/*::: Credits to @IanCeling :::*/ + +/* Poster Shadow */ +div[class^="MetadataPosterCard-cardContainer-"], +div[class*="2gRcQ"] { + box-shadow: 0 6px 26px -2px #000; + transition: all 350ms; + -webkit-perspective: 500px; + perspective: 500px; +} + +/* Poster Hover */ +div[class^="MetadataPosterCard-cardContainer-"]:hover, +div[class*="2gRcQ"]:hover { + box-shadow: 0 0 0 0 #000; + transform: scale(.95) translateY(0); +} + +/* Continue Watching poster hover */ +div[data-qa-id="hub--home.continue"] div[class^="MetadataPosterCard-cardContainer-"]:hover, +div[data-qa-id="hub--home.continue"] div[class*="2gRcQ"]:hover { + transform: scale(.97) translateY(-5px); + -webkit-transform: scale(.97) translateY(-5px); + -moz-transform: scale(.97) translateY(-5px); + -ms-transform: scale(.97) translateY(-5px); + -o-transform: scale(.97) translateY(-5px); +} + +/*::: Photo Card Hover :::*/ +[class^="MetadataPhotoCell-photoContainer-"], +[class*="1HkmQ"] { + transition: all 350ms; + -webkit-perspective: 500px; + perspective: 500px; +} + +[class^="MetadataPhotoCell-photoContainer-"]:hover, +[class*="1HkmQ"] { + transform: scale(.95) translateY(0); +} + +[class^="MetadataPhotoCell-photo-"]:hover, +[class*="Po3Kx"]:hover { + box-shadow: none; + transform: scale(1.02); +} + +/*::: Poster Play Button :::*/ +div[class^="MetadataPosterCardOverlay-playCircle-"], +div[class*="M67q6"] { + border-radius: 50%; + width: 50px; + height: 50px; + font-size: 18px; + line-height: 48px; + color: hsla(0, 0%, 100%, .7); + box-shadow: 0 4px 16px -2px #000; + transition: all 350ms; + transform: translate(-50%, -50%) scale(.1); +} + +div[class^="MetadataPosterCard-cardContainer-"]:hover div[class^="MetadataPosterCardOverlay-playCircle-"], +div[class*="2gRcQ"]:hover div[class*="M67q6"] { + transform: translate(-50%, -50%) scale(1.2); +} + +div[class^="MetadataPosterCard-cardContainer-"]:hover [class^=plex-icon-play-], +div[class*="2gRcQ"]:hover [class^=plex-icon-play-] { + font-size: 30px; +} diff --git a/optionals/zoom-black-bar.css b/optionals/zoom-black-bar.css new file mode 100644 index 0000000..4539340 --- /dev/null +++ b/optionals/zoom-black-bar.css @@ -0,0 +1,5 @@ +/* zoom-black-bar */ +/*::: Zooms in on Blu-ray rip's that haven't been cropped to remove black bars :::*/ +[class^="AudioVideoPlayerView-container"] video { + -webkit-transform: scale(1.13); +} diff --git a/package.json b/package.json index 26e155d..e5604ca 100644 --- a/package.json +++ b/package.json @@ -1,31 +1,38 @@ { "name": "plex-fixes", - "version": "1.1.1", + "title": "Plex Fixes", + "version": "1.2.0", "description": "Bringing back plex to pre-3.0.0", + "license": "CC-BY-SA-4.0", + "repository": "StylusThemes/Plex-Fixes", + "homepage": "https://github.com/StylusThemes/Plex-Fixes", + "main": "style.user.css", + "engines": { + "node": ">=10" + }, "devDependencies": { - "css": "^2.2.4", + "minify": "^4.1.1", + "eslint": "^5.14.1", + "eslint-config-silverwind": "^2.1.0", + "fs-extra": "^7.0.1", "perfectionist": "^2.4.0", - "postcss": "^7.0.14", - "postcss-syntax": "^0.36.2", "semver": "^5.6.0", "stylelint": "^9.10.1", "stylelint-config-standard": "^18.2.0", - "updates": "7.1.1" + "updates": "^7.2.0" }, "scripts": { - "build": "node build/build.js", - "stylelint": "stylelint style.css --fix && stylelint optionals.css --fix", - "perfectionist": "perfectionist", - "update": "updates -cu && npm install" - }, - "repository": { - "type": "git", - "url": "https://github.com/StylusThemes/Plex-Fixes.git" - }, - "author": "StylusThemes", - "license": "CC-BY-SA-4.0", - "bugs": { - "url": "https://github.com/StylusThemes/Plex-Fixes/issues" - }, - "homepage": "https://github.com/StylusThemes/Plex-Fixes" + "authors": "bash tools/authors", + "clean": "npm run perfectionist && node tools/fix-perfectionist.js", + "eslint": "eslint --quiet --color tools/*.js", + "lint": "npm run eslint && npm run stylelint", + "major": "node tools/bump-version.js major && git add . && npm version -f major", + "minor": "node tools/bump-version.js minor && git add . && npm version -f minor", + "patch": "node tools/bump-version.js patch && git add . && npm version -f patch", + "perfectionist": "perfectionist style.user.css style.user.css --indentSize 2 --maxAtRuleLength 250", + "stylelint": "stylelint --silent --color -- style.user.css", + "test": "npm run eslint && npm run stylelint", + "update": "updates -cu && npm install", + "usercss": "node tools/update-usercss.js" + } } diff --git a/style.user.css b/style.user.css index 0371291..c4c3eff 100644 --- a/style.user.css +++ b/style.user.css @@ -1,42 +1,65 @@ /* ==UserStyle== -@name Plex Fixes -@version 1.1.1 -@namespace https://github.com/StylusThemes -@description Bringing back plex to pre-3.0.0 -@author StylusThemes -@homepageURL https://github.com/StylusThemes/Plex-Fixes -@supportURL https://github.com/StylusThemes/Plex-Fixes/issues -@updateURL https://raw.githubusercontent.com/StylusThemes/Plex-Fixes/master/style.user.css -@preprocessor stylus -@license CC-BY-SA-4.0 - -@var text IMGURL "Custom Background Image for Discover Page" "'http://example.com/bkgd.jpg'" - -@var select CastL "Cast List" ["CLY:Hover Effects", "CLH:Hide Cast List", "CLN:No Hover Effect & Don't Hide"] -@var select ExtrasM "Extras" ["EEY:Expand Movie Extras", "EEH:Hide Extras", "EEN:Don't Expand & Don't Hide"] -@var select RelatedL "Related Lists" ["RLY:Hide Related Lists", "RLN:Don't Hide"] -@var select PosterHE "Posters" ["PHEY:Hover Effects", "PHEN:No Hover Effects"] -@var select CompactSB "Contract The Sidebar To Save Screen Space" ["CSY:Yes", "CSN:No"] -@var select VARF "Zooms in on Blu-ray rip's that haven't been cropped to remove black bars" ["VARFN:No", "VARFY:Yes"] +@name Plex Fixes +@version 1.2.0 +@description Bringing back plex to pre-3.0.0 +@namespace https://github.com/StylusThemes +@author StylusThemes +@homepageURL https://github.com/StylusThemes/Plex-Fixes +@supportURL https://github.com/StylusThemes/Plex-Fixes/issues +@updateURL https://raw.githubusercontent.com/StylusThemes/Plex-Fixes/master/style.user.css +@license CC-BY-SA-4.0 + +@advanced text PORT "Port Number" "32400" +@advanced text URL "Custom URL" "http://example.com/" +@advanced text IMGURL "Custom Background Image for Discover Page" "http://example.com/example.jpg" + +@advanced dropdown CastL "Cast List" { +CLY "Hover Effects" <<div,a[class^=PrePlayCastCell-cardLink-]:hover,a[class^=PrePlayCastCell-cardLink-]:hover>div{transform:scale(1.07);-webkit-transform:scale(1.07);-moz-transform:scale(1.07);-ms-transform:scale(1.07);-o-transform:scale(1.07)} EOT; +CLH "Hide Cast List" <<div:nth-child(2),[class*="2NcGK"]>div:nth-child(2)>[class*="2XznZ"]>div>div,[class^=PrePlayExtrasList-extrasHubCell-]>div:nth-child(2),[class^=PrePlayExtrasList-extrasHubCell-]>div:nth-child(2)>[class^=Measure-container-]>div>div{width:auto!important;height:auto!important}[class*="2NcGK"]>div:nth-child(2)>[class*="2XznZ"]>div>div>div,[class^=PrePlayExtrasList-extrasHubCell-]>div:nth-child(2)>[class^=Measure-container-]>div>div>div{display:inline-block;position:relative!important;margin:10px;transform:translate3d(10px,10px,0)!important} EOT; +EEH "Hide Extras" << [class^="FullPage-container-"] { - div { - > div { - background: rgba(31, 31, 31, 1); - background-image: url(IMGURL) !important; - background-position: center center; - background-size: 100% 100% !important; - - image-rendering: auto; - } - } - } +.background-container > [class^="FullPage-container-"] div > div { + background: #1f1f1f; + background-image: url(/*[[IMGURL]]*/) !important; + background-position: center center; + background-size: 100% 100% !important; + image-rendering: auto; } /*::: Image Container :::*/ @@ -73,25 +89,31 @@ div[class*="3dXG6"] { height: 100% !important; background: #1f1f1f !important; -webkit-animation: plexbgfadein .6s ease-in; - /*::: Image :::*/ - > div { - position: fixed !important; - width: 100% !important; - height: 100% !important; - background-repeat: no-repeat !important; - background-size: 100% 100% !important; - opacity: .25 !important; - /*::: Resizing adds extra divs :::*/ - & + div { - display: none !important; - } - } - /*::: Item Thumbnail :::*/ - & + div { - position: fixed !important; - top: 180px !important; - background-position: center !important; - } +} + +/*::: Image :::*/ +div[class^="PrePlayArtwork-imageContainer-"] > div, +div[class*="3dXG6"] > div { + position: fixed !important; + width: 100% !important; + height: 100% !important; + background-repeat: no-repeat !important; + background-size: 100% 100% !important; + opacity: .25 !important; +} + +/*::: Resizing adds extra divs :::*/ +div[class^="PrePlayArtwork-imageContainer-"] > div + div, +div[class*="3dXG6"] > div + div { + display: none !important; +} + +/*::: Item Thumbnail :::*/ +div[class^="PrePlayArtwork-imageContainer-"] + div, +div[class*="3dXG6"] + div { + position: fixed !important; + top: 180px !important; + background-position: center !important; } /*::: Background Fade-in :::*/ @@ -112,11 +134,13 @@ div[class*="1NL8g"] { margin-bottom: 5px; max-width: none !important; font-size: 15px; - /*::: Make Sure Overflow Of Summary Container is always visible :::*/ - > div { - overflow: visible !important; - max-height: none !important; - } +} + +/*::: Make Sure Overflow Of Summary Container is always visible :::*/ +div[class^="PrePlaySummary-summary-"] > div, +div[class*="1NL8g"] > div { + overflow: visible !important; + max-height: none !important; } /*::: Hide Read More Button Since It's Useless Now :::*/ @@ -127,25 +151,20 @@ div[class*="1NL8g"] { /*::: Hide The Go Premium Button :::*/ [class^="NavBar-plexPassButton-"], -[class*="wVK4v"] { +[class*="wVK4v"], +[class^="AccountSummary-container-"] > div:nth-of-type(1) > div, +[class*="2EbPg"] > div:nth-of-type(1) > div { display: none !important; } /*::: Plex Fixes Version :::*/ -[class="version-title"] { - &::after { - white-space: pre; - content: "\A Plex Fixes Ver. 1.1.0"; - } +[class="version-title"]::after { + white-space: pre; + content: "\A Plex Fixes - Version 1.2.0"; } /*::: Make Users pic square :::*/ -[class^="dropdown-poster-"] { - > div { - border-radius: 0; - } -} - +[class^="dropdown-poster-"] > div, [class^="card-poster"], [class^="AvatarImg-avatar-"], [class*="3Op56"] { @@ -180,14 +199,11 @@ div[class*="RVD0D"] { } /*::: lower actors faces a bit :::*/ -div[class^="TagPosterCard-card-"], -div[class*="RVD0D"] { - [class^="PosterCardImg-imageContainer-"], - [class*="1Ar4M"] { - > div { - background-position: 100% 30% !important; - } - } +div[class^="TagPosterCard-card-"] [class^="PosterCardImg-imageContainer-"] > div, +div[class^="TagPosterCard-card-"] [class*="1Ar4M"] > div, +div[class*="RVD0D"] [class^="PosterCardImg-imageContainer-"] > div, +div[class*="RVD0D"] [class*="1Ar4M"] > div { + background-position: 100% 30% !important; } /*::: Navbar height :::*/ @@ -211,12 +227,10 @@ div[class*="RVD0D"] { } /*::: Pulsate Status :::*/ -[class*="NavBarActivityButton-isActive-"] { - [class*="NavBarActivityButton-activityIcon-"] { - opacity: .1; - -webkit-animation: pulsate 5s ease-out; - -webkit-animation-iteration-count: infinite; - } +[class*="NavBarActivityButton-isActive-"] [class*="NavBarActivityButton-activityIcon-"] { + opacity: .1; + -webkit-animation: pulsate 5s ease-out; + -webkit-animation-iteration-count: infinite; } @-webkit-keyframes pulsate { @@ -234,234 +248,15 @@ div[class*="RVD0D"] { } } -if CastL == 'CLY' { -/*::: Hover effect on CAST cards :::*/ -a[class^="PrePlayCastCell-cardLink-"], -a[class*="Tndv5"] { - &:hover { - transform: scale(1.07); - > div { - transform: scale(1.07); - } - } -} -} else if CastL == 'CLH' { -/*::: Hide Cast List :::*/ -div[class^="PrePlayCastList-castList-"], -div[class*="3dQB5"] { - display: none !important; -} -} - -if ExtrasM == 'EEY' { -/*::: Expand 'Extras' display for movies (shows as grid instead of scroller) :::*/ -[class^="PrePlayExtrasList-extrasHubCell-"] { - > div { - &:nth-child(2) { - width: auto !important; - height: auto !important; - > [class^="Measure-container-"] { - > div { - > div { - width: auto !important; - height: auto !important; - > div { - display: inline-block; - position: relative !important; - margin: 10px; - transform: translate3d(10px, 10px, 0) !important; - } - } - } - } - } - } -} -} else if ExtrasM == 'EEH'{ -/*::: Hide Movie Extras (dunno if there are tv extras or not as I could never get extras for tv shows to show up) :::*/ -div[class^="PrePlayExtrasList-extrasHubCell-"], -div[class*="2NcGK"] { - display: none !important; -} -} - -if RelatedL == 'RLY' { -/*::: Hide Related List i.e Related movies|shows|Genres|People :::*/ -div[data-qa-id*="hub--movie.similar"], -div[data-qa-id*="hub--movie.same.actor."], -div[data-qa-id*="hub--tv.similar"], -div[data-qa-id*="hub--tv.same.actor"], -div[data-qa-id*="hub--tv.morefromnetwork"] { - display: none !important; -} -} - -if VARF == 'VARFY' { -/*::: Zooms in on Blu-ray rip's that haven't been cropped to remove black bars :::*/ -[class^="AudioVideoPlayerView-container"] video { - -webkit-transform: scale(1.13); -} -} - -if PosterHE == 'PHEY' { -/*::: Posters Hover Effects :::*/ -/*::: Credits to @IanCeling :::*/ - -/* Poster Shadow */ -div[class^="MetadataPosterCard-cardContainer-"] { - box-shadow: 0 6px 26px -2px #000; - transition: all 350ms; - - -webkit-perspective: 500px; - perspective: 500px; - /* Poster Hover */ - &:hover { - box-shadow: 0 0 0 0 #000; - transform: scale(.95) translateY(0); - /*::: Poster Play Button :::*/ - div[class^="MetadataPosterCardOverlay-playCircle-"] { - transform: translate(-50%, -50%) scale(1.2); - } - [class^=plex-icon-play-] { - font-size: 30px; - } - } -} - -/* Continue Watching poster hover */ -div[data-qa-id="hub--home.continue"] { - div[class^="MetadataPosterCard-cardContainer-"] { - &:hover { - transform: scale(.97) translateY(-5px); - } - } -} +/*[[CastL]]*/ -/*::: Photo Card Hover :::*/ -[class^="MetadataPhotoCell-photoContainer-"] { - transition: all 350ms; +/*[[ExtrasM]]*/ - -webkit-perspective: 500px; - perspective: 500px; - &:hover { - transform: scale(.95) translateY(0); - } -} +/*[[RelatedL]]*/ -[class^="MetadataPhotoCell-photo-"] { - &:hover { - box-shadow: none; - transform: scale(1.02); - } -} +/*[[PosterHE]]*/ -/*::: Poster Play Button 2 :::*/ -div[class^="MetadataPosterCardOverlay-playCircle-"] { - border-radius: 50%; - width: 50px; - height: 50px; - font-size: 18px; - line-height: 48px; - color: hsla(0, 0%, 100%, .7); - box-shadow: 0 4px 16px -2px #000; - transition: all 350ms; - transform: translate(-50%, -50%) scale(.1); -} -} +/*[[CompactSB]]*/ -if CompactSB == 'CSY' { -/*::: kill container margin and add transition speed :::*/ -/*::: Contract the sidebar to save screen space [Expands back out on hovering over the sidebar] :::*/ -.page-container { - margin-left: 0 !important; -} - -div[role=navigation] { - div { - padding-right: 0; - a { - overflow: visible; - div { - &:nth-child(2) { - font-size: 0 !important; - } - } - } - } - div[role=header] { - font-size: 0 !important; - } -} - -[class^=SidebarContainer-sidebarContainer-] { - width: 55px !important; - max-width: 55px !important; - transition: all .5s ease !important; - &:hover { - width: 240px !important; - max-width: 240px !important; - transition: all 1.5s ease !important; - [class^=SidebarLink-title], - [class^=SidebarList-sidebarListHeader], - [class^=SidebarServerLibraries-librariesTitle] { - font-size: 12px !important; - transition: all 2s ease !important; - } - div[role=navigation] { - div { - a { - div { - &:nth-child(2) { - font-size: 12px !important; - transition: all 2s ease !important; - } - } - } - } - div[role=header] { - font-size: 12px !important; - transition: all 2s ease !important; - } - } - button[data-qa-id=serverMenuButton] { - div { - span { - font-size: 14px !important; - transition: all 2s ease !important; - } - } - } - [class^=DisclosureArrow-disclosureArrow], - [class^=SidebarLibrariesActions-actions], - [class^=SidebarLink-children] { - display: inline-block !important; - transition: all 2s ease !important; - } - } -} - -[class^=SidebarLink-title], -[class^=SidebarList-sidebarListHeader], -[class^=SidebarServerLibraries-librariesTitle] { - font-size: 0 !important; -} - -button[data-qa-id=serverMenuButton] { - div { - span { - font-size: 0 !important; - } - } -} - -[class^=DisclosureArrow-disclosureArrow-], -[class^=SidebarLibrariesActions-actions], -[class^=SidebarLink-children] { - display: none !important; -} - -[class^=SidebarLibraryItem-action] { - width: 0 !important; -} -} +/*[[VARF]]*/ } diff --git a/tools/authors b/tools/authors new file mode 100644 index 0000000..6c9f16e --- /dev/null +++ b/tools/authors @@ -0,0 +1,17 @@ +#!/bin/bash + +# generate AUTHORS, modify .mailmap in case of duplicates +git log --reverse --format='%aN <%aE>' | perl -we ' +BEGIN { + %seen = (), @authors = (); +} +while (<>) { + next if $seen{$_}; + $seen{$_} = push @authors, $_; +} +END { + print "# Authors ordered by first contribution.\n"; + print "\n", @authors, "\n"; + print "# Generated by tools/authors.sh\n"; +} +' > "${BASH_SOURCE%/*}/../AUTHORS" diff --git a/tools/bump-version.js b/tools/bump-version.js new file mode 100644 index 0000000..ce73e8c --- /dev/null +++ b/tools/bump-version.js @@ -0,0 +1,29 @@ +#!/usr/bin/env node +"use strict"; + +const fs = require("fs-extra"); +const path = require("path"); +const semver = require("semver"); + +const pkg = require("../package.json"); +const {exit} = require("./utils"); + +const file = path.join(__dirname, "..", pkg.main); + +(async () => { + // level = patch, minor or major + const level = process.argv.pop(); + const newVersion = semver.inc(pkg.version, level); + + fs.readFile(file, "utf8") + .then(css => css.replace(pkg.version, newVersion)) + .then((css) => { + if (css.indexOf(newVersion) < 0) { + throw new Error("*** VERSION MISMATCH!! ***"); + } + return css; + }) + .then(css => fs.writeFile(file, css)) + .then(() => console.log("\x1b[32m%s\x1b[0m", `${pkg.title} usercss updated`)) + .catch(exit); +})(); diff --git a/tools/fix-perfectionist.js b/tools/fix-perfectionist.js new file mode 100644 index 0000000..74a7601 --- /dev/null +++ b/tools/fix-perfectionist.js @@ -0,0 +1,28 @@ +#!/usr/bin/env node +"use strict"; + +const fs = require("fs-extra"); +const path = require("path"); +const pkg = require("../package.json"); + +const fileName = path.join(__dirname, "..", pkg.main); + +function cleanup(css) { + return css + // Perfectionist adds comments to the end of the previous line... + // }/* comment */ => }\n\n /* comment */ + .replace(/}\/\*(([\s\S])+?)\*\/\s*/g, "}\n\n /*$1*/\n ") + .replace(/,\s\/\*/g, ",\n /*") + // Remove leading whitespace from @-moz-document entries + .replace(/\n\s{15}/g, "\n") + // Remove extra carriage returns between definitions + .replace(/\n+/g, "\n"); +} + +async function postPerfectionist() { + const css = await fs.readFile(fileName, "utf8"); + await fs.writeFile(fileName, cleanup(css)); + console.log("\x1b[32m%s\x1b[0m", `${pkg.title} usercss cleanup completed`); +} + +postPerfectionist(); diff --git a/tools/src/style.css b/tools/src/style.css new file mode 100644 index 0000000..66d8156 --- /dev/null +++ b/tools/src/style.css @@ -0,0 +1,201 @@ +@-moz-document regexp("https?://app.plex.tv/.*"), regexp("https?://.*:/*[[PORT]]*//.*"), regexp("/*[[URL]]*/.*") { +/*::::::::::::::::::::::::::::::::::::::::::::::::::::::: Pre 3.0.0 Fixes :::::::::::::::::::::::::::::::::::::::::::::::::::::::*/ + +a { + user-select: all !important; +} + +/*::: Main Background Image :::*/ +.background-container > [class^="FullPage-container-"] div > div { + background: #1f1f1f; + background-image: url(/*[[IMGURL]]*/) !important; + background-position: center center; + background-size: 100% 100% !important; + image-rendering: auto; +} + +/*::: Image Container :::*/ +div[class^="PrePlayArtwork-imageContainer-"], +div[class*="3dXG6"] { + position: fixed !important; + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + z-index: -1 !important; + margin: 0 !important; + width: 100% !important; + height: 100% !important; + background: #1f1f1f !important; + -webkit-animation: plexbgfadein .6s ease-in; +} + +/*::: Image :::*/ +div[class^="PrePlayArtwork-imageContainer-"] > div, +div[class*="3dXG6"] > div { + position: fixed !important; + width: 100% !important; + height: 100% !important; + background-repeat: no-repeat !important; + background-size: 100% 100% !important; + opacity: .25 !important; +} + +/*::: Resizing adds extra divs :::*/ +div[class^="PrePlayArtwork-imageContainer-"] > div + div, +div[class*="3dXG6"] > div + div { + display: none !important; +} + +/*::: Item Thumbnail :::*/ +div[class^="PrePlayArtwork-imageContainer-"] + div, +div[class*="3dXG6"] + div { + position: fixed !important; + top: 180px !important; + background-position: center !important; +} + +/*::: Background Fade-in :::*/ +@-webkit-keyframes plexbgfadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/*::::::::::::::::::::::::::::::::::::::::::::::::::::::: NEW ADDITIONS :::::::::::::::::::::::::::::::::::::::::::::::::::::::*/ + +/*::: Max Width Of Summary Container :::*/ +div[class^="PrePlaySummary-summary-"], +div[class*="1NL8g"] { + margin-bottom: 5px; + max-width: none !important; + font-size: 15px; +} + +/*::: Make Sure Overflow Of Summary Container is always visible :::*/ +div[class^="PrePlaySummary-summary-"] > div, +div[class*="1NL8g"] > div { + overflow: visible !important; + max-height: none !important; +} + +/*::: Hide Read More Button Since It's Useless Now :::*/ +[class^="CollapsibleText-readMore-"], +[class*="1bRJm"] { + display: none !important; +} + +/*::: Hide The Go Premium Button :::*/ +[class^="NavBar-plexPassButton-"], +[class*="wVK4v"], +[class^="AccountSummary-container-"] > div:nth-of-type(1) > div, +[class*="2EbPg"] > div:nth-of-type(1) > div { + display: none !important; +} + +/*::: Plex Fixes Version :::*/ +[class="version-title"]::after { + white-space: pre; + content: "\A Plex Fixes - Version 1.2.0"; +} + +/*::: Make Users pic square :::*/ +[class^="dropdown-poster-"] > div, +[class^="card-poster"], +[class^="AvatarImg-avatar-"], +[class*="3Op56"] { + border-radius: 0; +} + +/*::: Move dashboard down slightly :::*/ +[class^="DashboardPage-dashboardPageContent-"], +[class*="2rN8X"] { + padding: 15px 55px 60px !important; +} + +/*::: make continue watching title containers a bit smaller :::*/ +div[class*="MetadataPosterCell-continueWatchingTitleContainer-"], +div[class*="3yCAY"] { + padding: 4px 5px !important; + background-color: rgba(0, 0, 0, .35); +} + +/*::: shorten the padding on headers on dashboard to bring inline with being closer to continue watching title container :::*/ +div[class*="HubCellHeader-hubCellHeader-"], +div[class*="2pvYN"] { + padding: 4px 0 0 5px !important; +} + +/*::: Make cast pictures square :::*/ +a[class^="PrePlayCastCell-cardLink-"], +div[class^="TagPosterCard-card-"], +a[class*="Tndv5"], +div[class*="RVD0D"] { + border-radius: 0 !important; +} + +/*::: lower actors faces a bit :::*/ +div[class^="TagPosterCard-card-"] [class^="PosterCardImg-imageContainer-"] > div, +div[class^="TagPosterCard-card-"] [class*="1Ar4M"] > div, +div[class*="RVD0D"] [class^="PosterCardImg-imageContainer-"] > div, +div[class*="RVD0D"] [class*="1Ar4M"] > div { + background-position: 100% 30% !important; +} + +/*::: Navbar height :::*/ +[class*="NavBar-container-"], +[class*="1T0BJ"] { + height: 40px; +} + +/*::: Move navbar Activity Button number :::*/ +[class*="NavBarActivityButton-label-"], +[class*="2ZN0g"] { + top: 10px; +} + +/*::: Resize navbar search box :::*/ +[class*="QuickSearchInput-container-"], +[class*="QuickSearch-container-"], +[class*="1HiCo"], +[class*="2PWkB"] { + height: 30px; +} + +/*::: Pulsate Status :::*/ +[class*="NavBarActivityButton-isActive-"] [class*="NavBarActivityButton-activityIcon-"] { + opacity: .1; + -webkit-animation: pulsate 5s ease-out; + -webkit-animation-iteration-count: infinite; +} + +@-webkit-keyframes pulsate { + 0% { + opacity: 1; + -webkit-transform: scale(1.3, 1.3); + } + 50% { + opacity: .3; + -webkit-transform: scale(.85, .85); + } + 100% { + opacity: 1; + -webkit-transform: scale(1.3, 1.3); + } +} + +/*[[CastL]]*/ + +/*[[ExtrasM]]*/ + +/*[[RelatedL]]*/ + +/*[[PosterHE]]*/ + +/*[[CompactSB]]*/ + +/*[[VARF]]*/ +} diff --git a/tools/update-usercss.js b/tools/update-usercss.js new file mode 100644 index 0000000..ae260f1 --- /dev/null +++ b/tools/update-usercss.js @@ -0,0 +1,48 @@ +#!/usr/bin/env node +"use strict"; + +const fs = require("fs-extra"); +const path = require("path"); +const minify = require("minify"); + +const {exit} = require("./utils"); +const pkg = require("../package.json"); + +const files = { + style: "./tools/src/style.css", + usercss: "./style.user.css", + template: "./tools/usercss-template.css", +}; + +async function replaceVars(css) { + function extractThemeName(css) { + return css + .substring(2, css.indexOf("*/")) + .trim() + .toLowerCase(); + } + + const themes = await fs.readdir("./optionals/"); + + const styles = await Promise.all(themes.map(theme => fs.readFile("./optionals/" + theme, "utf8"))); + + styles.forEach(style => { + const name = extractThemeName(style); + css = css.replace(`{{${name}}}`, minify.css(style)); + }); + + css = css.replace("{{title}}", pkg.title); + css = css.replace("{{version}}", pkg.version); + css = css.replace("{{description}}", pkg.description); + css = css.replace("{{main}}", pkg.main); + css = css.replace("{{license}}", pkg.license); + + return css; +} + +return fs.unlink(files.usercss).catch(() => { }) + .then(() => fs.readFile(files.template, "utf8")) + .then(css => fs.readFile(files.style, "utf8").then(style => css + style)) + .then(async css => fs.writeFileSync(files.usercss, await replaceVars(css))) + .then(() => console.log("\x1b[32m%s\x1b[0m", `${pkg.title} usercss update complete`)) + .catch(exit); diff --git a/tools/usercss-template.css b/tools/usercss-template.css new file mode 100644 index 0000000..3686c4a --- /dev/null +++ b/tools/usercss-template.css @@ -0,0 +1,61 @@ +/* ==UserStyle== +@name {{title}} +@version {{version}} +@description {{description}} +@namespace https://github.com/StylusThemes +@author StylusThemes +@homepageURL https://github.com/StylusThemes/Plex-Fixes +@supportURL https://github.com/StylusThemes/Plex-Fixes/issues +@updateURL https://raw.githubusercontent.com/StylusThemes/Plex-Fixes/master/{{main}} +@license {{license}} + +@advanced text PORT "Port Number" "32400" +@advanced text URL "Custom URL" "http://example.com/" +@advanced text IMGURL "Custom Background Image for Discover Page" "http://example.com/example.jpg" + +@advanced dropdown CastL "Cast List" { +CLY "Hover Effects" << { + let val = (pkg[name.replace(/[{}]/g, "")] || name); + if (val.indexOf(domain) > -1) { + val = val.substring(domain.length, val.length); + } + css = css.replace(new RegExp(escapeRegex(name), "gi"), val); + }); + } + return css; +} + +function escapeRegex(str) { + return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); +} + +function maxSize(array) { + return array.reduce((acc, item) => Math.max(acc, item.length), 0); +} + +function pad(len, str) { + return (str || "").padEnd(len); +} + +function exit(err) { + if (err) console.error(err); + process.exit(err ? 1 : 0); +} + +module.exports = { + replaceHolders, + escapeRegex, + maxSize, + pad, + exit, +};