topaLE
/
theme.park
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

added plpp themes

pull/4/head
GilbN 6 years ago
parent
aa4f5e6ab7
commit
4142738569
4 changed files with 299 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 121
      CSS/themes/plpp-plex.css
  2. 121
      CSS/themes/plpporg.css
  3. 63
      README.md
  4. BIN
      Screenshots/plpp/plpp.png

121
CSS/themes/plpp-plex.css
View File

@ -0,0 +1,121 @@
body {
background-image: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"),
url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-light.png") !important;
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
background-color: transparent;
color:hsla(0,0%,100%,.7)!important;
font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif !important;
font-size: 1.4em !important;
}
/* scroller */
::-webkit-scrollbar-corner {
background-color: rgba(0, 0, 0, .25) !important;
}
::-webkit-scrollbar {
width: 10px !important;
height: 10px !important;
background: hsla(0,0%,100%,.08) !important;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 2px !important;
border-radius: 2px !important;
background-color: rgba(0, 0, 0, .25) !important;
}
.navbar-inverse {
background-color: rgba(0, 0, 0, 0.6);
border-color: transparent;
}
.side-nav {
background-color: rgba(0, 0, 0, 0.15);
}
.navbar-inverse .navbar-nav > li > a {
color: hsla(0,0%,100%,.7);
}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
background-color: hsla(0,0%,100%,.08);
}
.nav > li.selected > a {
background-color: transparent;
color: #f9be03 !important;
}
.breadcrumb > .active {
text-transform: uppercase;
text-transform: bold;
}
.panel, .panel-default > .panel-heading, .breadcrumb > .active {
background-color: transparent;
border: transparent;
color: inherit;
font-size: 15px;
font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif !important;
line-height: 24px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
}
.panel-heading {
font-weight: bold;
}
.plpp_thumbs_Title:hover, .plpp_slider_Title:hover, .plpp_thumbs_Episode_Title:hover,
.plpp_slider_Episode_Title:hover, .plpp_thumbs_Season_Title:hover, .plpp_slider_Season_Title:hover,
.plpp_thumbs_Show_Title:hover, .plpp_slider_Show_Title:hover, .plpp_thumbs_Artist:hover, .plpp_slider_Artist:hover,
.plpp_thumbs_Year:hover, .plpp_thumbs_Episode_No:hover, .plpp_slider_Year:hover, .plpp_slider_Episode_no:hover,
.plpp_thumbs_Track_no:hover, .plpp_slider_Track_no:hover, .plpp_thumbs_Episode_Count:hover, .plpp_slider_Episode_Count:hover,
.plpp_thumbs_Track_Count:hover, .plpp_slider_Track_Count:hover, .plpp_thumbs_Dimensions:hover, .plpp_slider_Dimensions:hover,
.plpp_thumbs_Duration:hover, .plpp_slider_Duration:hover {
text-decoration: underline;
}
.img-rounded {
border-radius: 0px;
}
.img-rounded:hover {
border-radius: 0px;
box-shadow: 0 0 0 2px #cc7b19;
background: radial-gradient(farthest-corner at 50% 50%,rgba(50,50,50,.5) 50%,#323232 100%);
opacity: .4;
transition: linear .2s;
}
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
}
div.modal-content > div.modal-body > div.plpp_details_container > div.plpp_details_Thumbnail, div.plpp_details_Poster > .img-rounded {
box-shadow: none;
opacity: 1;
}
div.plpp_slider {
margin: 2px 15px 10px 2px;
}
table {
background-color: rgba(0, 0, 0, 0.25);
}
table, .table {
color: hsla(0,0%,100%,.7);
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
border-top: 1px solid rgba(255,255,255,.15);
}
.table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid rgba(255,255,255,.15);
}
.pagination > li > a, .pagination > li > span {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.25);
border: transparent;
}
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
color: #BDBDBD;
background-color: rgba(0, 0, 0, 0.25);
border: transparent;
cursor: not-allowed;
}

121
CSS/themes/plpporg.css
View File

@ -0,0 +1,121 @@
body { /*
background-image: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"),
url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-light.png") !important;
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover; */
background-color: #1f1f1f;
color:hsla(0,0%,100%,.7)!important;
font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif !important;
font-size: 1.4em !important;
}
/* scroller */
::-webkit-scrollbar-corner {
background-color: rgba(0, 0, 0, .25) !important;
}
::-webkit-scrollbar {
width: 10px !important;
height: 10px !important;
background: hsla(0,0%,100%,.08) !important;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 2px !important;
border-radius: 2px !important;
background-color: rgba(0, 0, 0, .25) !important;
}
.navbar-inverse {
background-color: rgba(0, 0, 0, 0.6);
border-color: transparent;
}
.side-nav {
background-color: rgba(0, 0, 0, 0.25);
}
.navbar-inverse .navbar-nav > li > a {
color: hsla(0,0%,100%,.7);
}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
background-color: hsla(0,0%,100%,.08);
}
.nav > li.selected > a {
background-color: transparent;
color: #f9be03 !important;
}
.breadcrumb > .active {
text-transform: uppercase;
text-transform: bold;
}
.panel, .panel-default > .panel-heading, .breadcrumb > .active {
background-color: transparent;
border: transparent;
color: inherit;
font-size: 15px;
font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif !important;
line-height: 24px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
}
.panel-heading {
font-weight: bold;
}
.plpp_thumbs_Title:hover, .plpp_slider_Title:hover, .plpp_thumbs_Episode_Title:hover,
.plpp_slider_Episode_Title:hover, .plpp_thumbs_Season_Title:hover, .plpp_slider_Season_Title:hover,
.plpp_thumbs_Show_Title:hover, .plpp_slider_Show_Title:hover, .plpp_thumbs_Artist:hover, .plpp_slider_Artist:hover,
.plpp_thumbs_Year:hover, .plpp_thumbs_Episode_No:hover, .plpp_slider_Year:hover, .plpp_slider_Episode_no:hover,
.plpp_thumbs_Track_no:hover, .plpp_slider_Track_no:hover, .plpp_thumbs_Episode_Count:hover, .plpp_slider_Episode_Count:hover,
.plpp_thumbs_Track_Count:hover, .plpp_slider_Track_Count:hover, .plpp_thumbs_Dimensions:hover, .plpp_slider_Dimensions:hover,
.plpp_thumbs_Duration:hover, .plpp_slider_Duration:hover {
text-decoration: underline;
}
.img-rounded {
border-radius: 0px;
}
.img-rounded:hover {
border-radius: 0px;
box-shadow: 0 0 0 2px #cc7b19;
background: radial-gradient(farthest-corner at 50% 50%,rgba(50,50,50,.5) 50%,#323232 100%);
opacity: .4;
transition: linear .2s;
}
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
}
div.modal-content > div.modal-body > div.plpp_details_container > div.plpp_details_Thumbnail, div.plpp_details_Poster > .img-rounded {
box-shadow: none;
opacity: 1;
}
div.plpp_slider {
margin: 2px 15px 10px 2px;
}
table {
background-color: rgba(0, 0, 0, 0.25);
}
table, .table {
color: hsla(0,0%,100%,.7);
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
border-top: 1px solid rgba(255,255,255,.15);
}
.table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid rgba(255,255,255,.15);
}
.pagination > li > a, .pagination > li > span {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.25);
border: transparent;
}
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
color: #BDBDBD;
background-color: rgba(0, 0, 0, 0.25);
border: transparent;
cursor: not-allowed;
}

63
README.md
View File

@ -15,6 +15,61 @@ A collection of themes/skins for use in conjunction with [Organizr](https://gith
[Archmonger/Blackberry-Flat](https://github.com/Archmonger/Blackberry-Flat)
# PHP Library Presenter Dark/Plex Theme
Custom [PLPP](https://github.com/Tensai75/plpp) CSS to match the [Organizr](https://github.com/causefx/Organizr) theme.
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/plpp/plpp.png)
#### `plpporg.css` is a dark theme that matches Organizr.
#### `plpp-plex.css` is a Plex theme for PLPP
## Setup
<details><summary>Expand</summary>
### Subfilter
As PLPP doesn't have support for custom CSS you can get around that by using [subfilter](http://nginx.org/en/docs/http/ngx_http_sub_module.html) in Nginx.
Add this to your plex reverse proxy:
```nginx
proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/plpporg.css">
</head>';
sub_filter_once on;
```
Here is a complete example:
```nginx
# REDIRECT HTTP TRAFFIC TO https://[domain.com]
server {
listen 80;
server_name plpp.domain.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl http2;
server_name plpp.domain.com;
#SSL settings
include /config/nginx/ssl.conf
location / {
proxy_pass http://192.168.1.2:8701;
include /config/nginx/proxy.conf;
proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/plpporg.css">
</head>';
sub_filter_once on;
}
}
```
</details>
***
# Guacamole Dark/Plex Theme
Custom [Guacamole](https://guacamole.apache.org/) CSS to match the [Organizr](https://github.com/causefx/Organizr) theme.
@ -23,13 +78,11 @@ Custom [Guacamole](https://guacamole.apache.org/) CSS to match the [Organizr](ht
#### `guacorg.css` is a dark theme that matches Organizr.
#### `guacplex.css`
If you want a regular Plex theme for your *arr setup, use the **`guacplex.css`** instead.
#### `guacplex.css` is a Plex theme for Guacamole
## Setup
<details><summary>Expand</summary>
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/guacorg/guacorg2.png)
### Subfilter
@ -46,8 +99,6 @@ Add this to your plex reverse proxy:
```
Here is a complete example:
```nginx
#MONITORR CONTAINER
# REDIRECT HTTP TRAFFIC TO https://[domain.com]
server {
listen 80;

BIN
Screenshots/plpp/plpp.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

Write Preview
Loading…
Cancel
Save