mirror of
https://github.com/gilbN/theme.park.git
synced 2024-10-05 15:07:11 +02:00
added plpp themes
This commit is contained in:
parent
aa4f5e6ab7
commit
4142738569
121
CSS/themes/plpp-plex.css
Normal file
121
CSS/themes/plpp-plex.css
Normal 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
Normal file
121
CSS/themes/plpporg.css
Normal 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
63
README.md
@ -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
Normal file
BIN
Screenshots/plpp/plpp.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.8 MiB |
Loading…
Reference in New Issue
Block a user