readme fix

Unraid loginpage stuff

.github/pull_request_template.md

@@ -0,0 +1,3 @@
+## Thank you for the PR!
+
+### Please remember to add a before and after screenshot(s) on any css changes! 

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "python.pythonPath": "C:\\Users\\Marius\\AppData\\Local\\Programs\\Python\\Python37\\python.exe"
+}

CSS/addons/README.md

@@ -0,0 +1,8 @@
+# CSS Addons
+
+## [Organizr](https://github.com/gilbN/theme.park/tree/master/CSS/addons/organizr/)
+
+## [Radarr](https://github.com/gilbN/theme.park/tree/master/CSS/addons/radarr)
+
+## [Sonarr](https://github.com/gilbN/theme.park/tree/master/CSS/addons/sonarr)
+

CSS/addons/organizr/README.md

@@ -0,0 +1,3 @@
+# Organizr Addons
+
+## [Glass](https://github.com/gilbN/theme.park/tree/master/CSS/addons/organizr/glass)

CSS/addons/organizr/glass/README.md

@@ -0,0 +1,112 @@
+# Organizr - Glass addon
+
+## Installation
+
+* [Full](https://github.com/gilbN/theme.park/tree/master/CSS/addons/organizr/glass#Full)
+* [Login - Lockscreen only](https://github.com/gilbN/theme.park/tree/master/CSS/addons/organizr/glass#login---lockscreen-only)
+
+
+
+***
+### `Tip!` 
+ If you're on Docker use the `php-fpm` tag to speed up load times, like so: `organizrtools/organizr-v2:php-fpm` 
+
+***
+
+### NOTE 
+**Firefox:** `From version 70: this feature is behind the layout.css.backdrop-filter.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.`
+
+
+## Full
+
+1. Set the Organizr theme to either Aquamarine, Hotline or Space Gray
+
+2. Import the `glass-base.css` and root variables in the Custom Theme CSS box like below.
+  Replace `--main-bg-color` with a wallpaper you have uploaded to Organizr
+ 
+```css
+@import "https://gilbn.github.io/theme.park/CSS/addons/organizr/glass/glass-base.css"; 
+:root {
+    --main-bg-color: url(https://gilbn.github.io/theme.park/CSS/addons/organizr/glass/example.jpg) center center/cover no-repeat fixed;
+    --mobile-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+
+    --link-color: #fff;
+    --custom-buttons-color: radial-gradient(ellipse at center, #3F51B5 0%, #009688 100%) center center/cover no-repeat fixed;
+    --hompage-item-hover: radial-gradient(ellipse at center, rgba(0, 150, 136, 0.33) 0%, #b53f3f73 100%) center center/cover no-repeat fixed;
+    --notification-box-line: #000;
+
+    --div-background-color-10: rgba(0, 0, 0, 0.15);
+    --div-background-color-15: rgba(0, 0, 0, 0.25);
+    --div-background-color-25: rgba(0, 0, 0, 0.35);
+    --div-background-color-35: rgba(0, 0, 0, 0.45);
+}
+```
+
+On mobile the background is replaced with `--mobile-bg-color`. Find a background you like here https://cssgradient.io/gradient-backgrounds/ or just set it to a regualar color e.g. `#1f1f1f`
+
+Here are the other theme colors if you want to use that instead:
+
+<img src="https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/aquamarine_banner.png" width="600px" />
+
+`--mobile-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;`
+
+<img src="https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/hotline_banner.png" width="600px" />
+
+` --mobile-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;`
+
+<img src="https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/spacegray_banner.png" width="600px" />
+
+`--mobile-bg-color: radial-gradient( ellipse at center,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;`
+
+<img src="https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/dark_banner.png" width="600px" />
+
+`--mobile-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;`
+
+<img src="https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/plex_banner.png" width="600px" />
+
+`--mobile-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed;`
+
+### Replace the variables if you have a dark background.
+
+* Light blur colors for dark backgrounds.
+
+```css
+    --div-background-color-10: rgba(255, 255, 255, 0.10);
+    --div-background-color-15: rgba(255, 255, 255, 0.15);
+    --div-background-color-25: rgba(255, 255, 255, 0.25);
+    --div-background-color-35: rgba(255, 255, 255, 0.35);
+```
+
+* Dark blur colors for bright backgrounds
+```css
+    --div-background-color-10: rgba(0, 0, 0, 0.15);
+    --div-background-color-15: rgba(0, 0, 0, 0.25);
+    --div-background-color-25: rgba(0, 0, 0, 0.35);
+    --div-background-color-35: rgba(0, 0, 0, 0.45);
+```
+
+## Login - Lockscreen only
+
+If you just want the login and lockscreen css, just add this in custom CSS:
+
+```css
+@import "https://gilbn.github.io/theme.park/CSS/addons/organizr/glass/glass-login.css"; 
+```
+
+You can change the blur background color by adding the variables above. The default is dark.
+```css
+@import "https://gilbn.github.io/theme.park/CSS/addons/organizr/glass/glass-login.css";
+:root {
+    --div-background-color-10: rgba(255, 255, 255, 0.10);
+    --div-background-color-15: rgba(255, 255, 255, 0.15);
+    --div-background-color-25: rgba(255, 255, 255, 0.25);
+    --div-background-color-35: rgba(255, 255, 255, 0.35);
+}
+```
+
+# Screenshots
+
+![](https://raw.githubusercontent.com/gilbN/theme.park/master/CSS/addons/organizr/glass/screenshots/login.png)
+![](https://raw.githubusercontent.com/gilbN/theme.park/master/CSS/addons/organizr/glass/screenshots/lockscreen.png)
+![](https://raw.githubusercontent.com/gilbN/theme.park/master/CSS/addons/organizr/glass/screenshots/homepage.jpg)
+![](https://raw.githubusercontent.com/gilbN/theme.park/master/CSS/addons/organizr/glass/screenshots/settings.jpg)

CSS/addons/organizr/glass/glass-base.css

@@ -0,0 +1,710 @@
+/* Set the Organizr theme to either Aquamarine or Hotline */
+/* Import the glass-base.css and root variables in the Custom Theme CSS box like below */
+/* 
+
+@import "https://gilbn.github.io/theme.park/CSS/addons/organizr/glass-base.css"; 
+:root {
+    --main-bg-color: url(https://domain.com/your/hosted/wallpaper.jpg) center center/cover no-repeat fixed;
+    --mobile-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+
+    --link-color: #fff;
+    --custom-buttons-color: radial-gradient(ellipse at center, #3F51B5 0%, #009688 100%) center center/cover no-repeat fixed;
+    --hompage-item-hover: radial-gradient(ellipse at center, rgba(0, 150, 136, 0.33) 0%, #b53f3f73 100%) center center/cover no-repeat fixed;
+    --notification-box-line: #000;
+
+    --div-background-color-10: rgba(0, 0, 0, 0.15);
+    --div-background-color-15: rgba(0, 0, 0, 0.25);
+    --div-background-color-25: rgba(0, 0, 0, 0.35);
+    --div-background-color-35: rgba(0, 0, 0, 0.45);
+}
+
+*/
+
+/* Replace the variables if you have a dark background  */
+/* Light colors for dark backgrounds */
+/*
+    --div-background-color-10: rgba(255, 255, 255, 0.1);
+    --div-background-color-15: rgba(255, 255, 255, 0.15);
+    --div-background-color-25: rgba(255, 255, 255, 0.25);
+    --div-background-color-35: rgba(255, 255, 255, 0.35);
+*/
+/* Dark blur colors for bright backgrounds */
+/*
+    --div-background-color-10: rgba(0, 0, 0, 0.15);
+    --div-background-color-15: rgba(0, 0, 0, 0.25);
+    --div-background-color-25: rgba(0, 0, 0, 0.35);
+    --div-background-color-35: rgba(0, 0, 0, 0.45);
+	
+*/
+
+/*Settings */
+.feeds li>div i {
+    color: black !important;
+}
+.row-in i {
+    font-size: 24px;
+    color: black;
+}
+.profile-social-icons a {
+    color: #eee;
+}
+ .btn-info.btn-outline {
+    color: #eee !important;
+}
+ .btn-info.btn-outline:hover {
+    background: var(--div-background-color-15);
+    color: #fff;
+}
+.content-wrap {
+    background: var(--div-background-color-15) !important;
+	border-radius: 0 0 15px 15px;
+}
+.content-wrap section.content-current {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background: rgba(0, 0, 0, 0);
+	border-radius: 0 0 15px 15px;
+}
+.panel-blue .panel-heading, .panel-info .panel-heading {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background: transparent;
+
+}
+.panel .table {
+    background: transparent !important;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+
+}
+.sttabs nav ul {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+	border-radius: 15px 15px 0 0;
+
+}
+.sttabs nav {
+    background: var(--div-background-color-25);
+	border-radius: 15px 15px 0 0;
+}
+#settings-main-system-settings-anchor > .sttabs nav ul li{
+	border-radius: 15px;
+}
+.tab-content>.active {
+    background: transparent;
+}
+.bg-title {
+    background: var(--div-background-color-10);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+
+}
+.white-box {
+    background: transparent;
+}
+.white-popup-block {
+    background: var(--div-background-color-10) !important;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+}
+
+.user-bg {
+	border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+}
+
+#internal-Settings .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover {
+    padding-top: 10px;
+}
+/* Nav bar
+.navbar-header {
+    background: transparent !important;
+}
+*/
+@media (min-width: 768px) {
+.navbar-static-top {
+    background: var(--main-bg) !important;
+}
+}
+/* Dropdown */
+.dropdown-menu {
+    background: var(--div-background-color-25);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+
+}
+.open>.dropdown-menu {
+    display: block;
+	border-radius: 15px;
+}
+.navbar-top-links .dropdown-user {
+    border-radius: 15px;
+}
+#plexRecent  .recent-filter {
+        background: var(--div-background-color-25) !important;
+		border-radius: 15px;
+}
+/* Side bar */
+.sidebar {
+    background: var(--div-background-color-15) !important;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    box-shadow: none;
+
+}
+.sidebar-head {
+    background: transparent !important;
+}
+
+/*Calendar */
+ .fc-toolbar {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background: var(--div-background-color-15) !important;
+
+}
+.fc-view {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background: var(--div-background-color-15) !important;
+	border-bottom-right-radius: 15px;
+    border-bottom-left-radius: 15px;
+}
+.fc-popover {
+    background: var(--div-background-color-25);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+
+}
+#homepageOrdercalendar .fc-toolbar {
+	border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+
+}
+ .fc-row, .fc-unthemed {
+	border-bottom-right-radius: 15px;
+    border-bottom-left-radius: 15px;
+}
+/* Calendar mobile*/
+.fc th.fc-widget-header {
+    padding-left: 5px;
+}
+/*Error page */
+.error-body {
+    padding-top: 15%;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    height: -webkit-fill-available;
+    margin-top: -10%;
+
+}
+
+
+/* notify - popup */
+.iziToast.update-notify.iziToast-layout2, .iziToast.success-notify.iziToast-layout2 {
+    border: none;
+    background: var(--div-background-color-25) !important;
+    border-bottom: transparent;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+
+}
+.iziToast.warning-notify.iziToast-layout2 {
+    background: var(--div-background-color-25);
+    border: 1px solid transparent;
+    border-bottom: transparent;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+
+}
+.iziToast:after {
+    background: transparent !important;
+}
+.mfp-container {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+
+}
+.mfp-zoom-out.mfp-ready.mfp-bg {
+    opacity: 1 !important;
+    background: var(--main-bg-color) !important;
+}
+.mfp-wrap {
+    background: var(--main-bg-color);
+}
+.main-email-panel .panel-body {
+    background: var(--div-background-color-25) !important;
+	border-bottom-right-radius: 15px !important;
+	border-bottom-left-radius: 15px !important;
+}
+.white-popup-block {
+     background: var(--div-background-color-25) !important;
+}
+.white-popup .panel-footer {
+    background: var(--div-background-color-25);
+    border-top: 1px solid #fff;
+    border-bottom-right-radius: 15px;
+    border-bottom-left-radius: 15px;
+}
+.panel>.table-responsive:last-child>.table:last-child, .panel>.table:last-child {
+    border-bottom-right-radius: 15px;
+    border-bottom-left-radius: 15px;
+}
+/* Homepage downloader */
+
+#homepageOrderdownloader {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background: var(--div-background-color-15);
+    padding: 10px;
+	border-radius: 15px;
+
+}
+#homepageOrderdownloader .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover {
+    padding-top: 14px;
+}
+#homepageOrderdownloader .nav-tabs>li>a {
+    padding-top: 14px;
+}
+
+/* Homepage card */
+.nowPlayingItem > .white-box > .el-card-item {
+    background: var(--div-background-color-15) !important;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+	border-radius: 15px;
+
+}
+.active-tab-Homepage .white-popup .panel-body, .white-popup>.col-md-6>.white-box:nth-child(2) {
+    background: var(--div-background-color-25) !important;
+	border-bottom-right-radius: 15px;
+	border-bottom-left-radius: 15px;
+}
+#plexStreams .el-element-overlay .el-card-item .el-overlay-1 img, #plexStreams .el-element-overlay:hover .el-card-item:hover .el-overlay-1:hover img:hover {
+    border-top-right-radius: 15px;
+    border-top-left-radius: 15px;
+}
+.el-element-overlay .el-card-item .el-overlay-1 {
+    border-top-right-radius: 15px;
+    border-top-left-radius: 15px;
+}
+.el-element-overlay .el-card-item .el-overlay {
+    border-top-right-radius: 15px;
+    border-top-left-radius: 15px;
+}
+.white-popup .panel-heading, .white-popup>.col-md-6>.white-box:first-child {
+    background: var(--div-background-color-25) !important;
+	border-top-right-radius: 15px;
+	border-top-left-radius: 15px;
+}
+
+
+.label-info {
+    background: var(--div-background-color-25);
+}
+
+#plexRecent, #homepageOrderplexplaylist, #homepageOrdercalendar, #homepageOrderembyrecent, #ombi-requests, #homepageOrderdeluge, #homepageOrdernzbget, #homepageOrdertransmission, #homepageOrderrTorrent, #homepageOrderjdownloader, #homepageOrdersabnzbd,#homepageOrderqBittorrent  {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background: var(--div-background-color-15);
+    margin: 5px;
+    border-radius: 15px;
+
+}
+.bg-info {
+    background-color: transparent !important;
+}
+/* Health checks */
+.card-body {
+    background: var(--div-background-color-25) !important;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+
+}
+.bg-inverse .healthPosition {
+    background: var(--div-background-color-25) !important;
+    -webkit-backdrop-filter: saturate(180%) blur(30px);
+    backdrop-filter: saturate(180%) blur(30px);
+
+}
+
+/* Unifi cards */
+.unifiCards .panel-wrapper.collapse.in {
+    background: var(--div-background-color-15);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+	border-bottom-right-radius: 15px;
+	border-bottom-left-radius: 15px;
+
+}
+.unifiCards .panel-heading {
+    background: var(--div-background-color-35) !important;
+    color: #fff !important;
+    border-color: transparent !important;
+    text-align: inherit !important;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+	border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+	border-bottom: 0px;
+}
+
+.unifiCards .panel-warning .panel-heading, .unifiCards .panel-success .panel-heading {
+	border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+	border-bottom-right-radius: 0px;
+	border-bottom-left-radius: 0px;
+}
+#allUnifi .unifiCards .panel .panel-warning {
+	border-radius: 15px !important;
+
+}
+.unifiCards	.ti-close:before {
+	content: "\f111";
+	font-family: FontAwesome;
+	font-size: 20px;
+	color: rgba(255, 69, 58, 1);
+	}
+.unifiCards	.ti-minus:before {
+	content: "\f111";
+	font-family: FontAwesome;
+	font-size: 20px;
+	color: rgba(255, 204, 0, 1);
+	}
+.unifiCards	.ti-plus:before {
+	content: "\f111";
+	font-family: FontAwesome;
+	font-size: 20px;
+	color: rgba(40, 205, 65, 1);
+    }
+/* Custom HTML */    
+    #homepageOrdercustomhtmlTwo, #homepageOrdercustomhtml {
+        -webkit-backdrop-filter: blur(10px);
+        backdrop-filter: blur(10px);
+        background: var(--div-background-color-15);
+        border-radius: 15px;
+        padding-left: 10px;
+        padding-right: 10px;
+        margin-bottom: 5px;
+    }    
+/* Invite */
+#invite-area .bg-org {
+    background: var(--div-background-color-15) !important;
+	border-radius: 15px;
+}
+#new-invite-area .white-popup .panel-body,#new-invite-area .white-popup>.col-md-6>.white-box:nth-child(2) {
+    background: var(--div-background-color-15) !important;
+	border-bottom-right-radius: 15px;
+    border-bottom-left-radius: 15px;
+}
+.white-popup .panel-body, .white-popup>.col-md-6>.white-box:nth-child(2) {
+    background: var(--div-background-color-15) !important;
+	border-bottom-right-radius: 15px;
+    border-bottom-left-radius: 15px;
+}
+
+/* Email users */
+.email-div .panel-body {
+    border-radius: 0px !important;
+}
+/* Speedtest popup */
+
+#speedtest-area .white-popup .panel-footer {
+	background: var(--div-background-color-25) !important;
+	border-bottom-right-radius: 15px;
+    border-bottom-left-radius: 15px;
+}
+#speedtest-area .white-popup .panel-body,#speedtest-area .white-popup>.col-md-6>.white-box:nth-child(2) {
+	border-bottom-right-radius: 0px !important;
+    border-bottom-left-radius: 0px !important;
+}
+/* Modal */
+.modal-content, .modal-header, .modal-footer, .modal-body {
+    background: var(--div-background-color-10) !important;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+	border-color: transparent;
+}
+.modal-body {
+	border-bottom-left-radius: 15px;
+	border-bottom-right-radius: 15px;
+}
+.modal-header {
+	border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+}
+
+.modal-open .modal {
+    background: var(--main-bg-color);
+}
+.modal-content {
+    border-radius: 15px;
+    box-shadow: none;
+}
+/* loginpage sidemenu */
+@media (max-width: 480px) {
+   #wrapper .login-register > .login-box > .white-box {
+     background: transparent !important;
+     margin-top: auto !important;
+     width: 100% !important;
+    -webkit-backdrop-filter: blur(0px) !important;
+    backdrop-filter: blur(0px) !important;
+
+
+   }
+   }
+
+@media (max-width: 480px) {
+   .login-box.login-sidebar {
+    background: var(--div-background-color-15) !important;
+    -webkit-backdrop-filter:  blur(10px);
+    backdrop-filter:  blur(10px);
+
+}
+}
+
+/* logo */
+	.white-box .visible-xs {
+		display: block!important;
+	}
+	.loginLogo {
+    border: 0;
+    margin-top: -60%;
+    transform: translateY(-10%);
+	}
+	@media (max-width: 480px) {
+		.loginLogo {
+		margin-top: -10% !important;
+		}
+	}
+	.blockUI {
+		opacity: 1 !important;
+		background-color: transparent !important;
+	}
+	.blockMsg {
+		background: rgba(0, 0, 0, 0.9) !important;
+		border: none !important;
+	}
+	
+    .login-register > .login-box > .white-box {
+    background: var(--div-background-color-25) !important;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    }
+
+
+    .login-register {
+		
+        height: 100%;
+        position: fixed;
+    }
+
+	.slideInRight {
+		-webkit-animation-name: none;
+		animation-name: none;
+	}
+
+	.login-register  .login-box  .white-box  .bg-org {
+		background-color: transparent !important;
+    }
+
+	/*2FA login button*/
+	.panel-wrapper .panel-body > .btn-warning, .btn-warning.disabled {
+        background: var(--div-background-color-15) !important;
+        border: 1px solid #ffc36d00 !important;
+        }
+
+        /*2FA animation header*/
+        .panel-warning .panel-heading, .panel-yellow .panel-heading {
+        color: #fff;
+        border-radius: 3px;
+        background-color: rgba(0, 0, 0, 0.3);
+        border-color: #00000000;
+        }
+
+        /*oAuth Successful*/
+        .panel-green .panel-heading, .panel-success .panel-heading {
+        color: #53e69d;
+        text-align: center;
+        text-transform: uppercase;
+        border-radius: 3px;
+        background-color: transparent;
+        border-color: transparent;
+        }
+
+	/*Login sidebar*/
+	.login-box.login-sidebar,
+	#login-panels .panel-body,
+	#login-panels .panel {
+		background: transparent;
+	}
+	
+    #login-panels  .form-control ,  #login-panels .btn {
+    background: rgba(255, 255, 255, 0.35);
+    color: white;
+    border-radius: 25px;
+    border: none;
+    }
+  /*  #login-panels {
+    height: 44px;
+    }*/
+    #login-panles .btn-info.disabled.focus .btn-info.disabled:focus .btn-info.disabled:hover .btn-info.focus .btn-info:focus .btn-info:hover .btn:hover {
+    background: rgba(255,255, 255, 0.65);
+    border:none;
+
+    }
+	/*Center login Box*/
+	.login-sidebar {
+		position: relative;
+		right: initial;
+	}
+
+	#lockScreen .white-box {
+		width: 400px;
+		height: 345px;
+	}
+	.login-sidebar .white-box {
+		width: 100%;
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	#lockScreen .white-box {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		background: var(--div-background-color-25);
+		-webkit-box-shadow: none;
+		box-shadow: none;
+		-webkit-backdrop-filter: blur(10px);
+		backdrop-filter: blur(10px);
+		border-radius: 15px;
+    }
+    .form-control::placeholder {
+        color: white;
+    }
+    #login-username-Input, #login-password-Input {
+            text-align: center;
+    }
+    .panel .panel-heading .panel-title, label, span, .fa-lock:before {
+    color: #ffffff;
+    }
+	/* Lock screen */ 
+	#lockScreen .form-material .form-control, .form-material .form-control:focus {
+		background: rgba(255, 255, 255, 0.35);
+		border-radius: 25px;
+		padding: inherit;
+		text-align: center;
+	}
+	 #lockScreen  .btn-info {
+		background: rgba(255, 255, 255, 0.35);
+		border-radius: 25px;
+	 }
+
+/* Extra */
+.cbutton {
+    background-color: var(--div-background-color-25) !important;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+	border-radius: 15px !important;
+	border: none !important;
+	padding: 4px !important;
+
+}
+.cbutton:hover {
+    background: var(--div-background-color-25) !important;
+    -webkit-backdrop-filter: saturate(180%) blur(30px) !important;
+    backdrop-filter: saturate(180%) blur(30px)!important;
+    opacity: 1 !important;
+
+}
+
+/* Debug modal */
+.mdi-package-variant-closed:before {
+    content: "\F3D7";
+    color: black;
+}
+.mdi-receipt:before {
+    content: "\F449";
+	color: black;
+}
+.debugModal .modal-body{
+    border-bottom-left-radius: 0px !important;
+	border-bottom-right-radius: 0px !important;
+}
+.debugModal .modal-footer {
+    background: var(--div-background-color-10) !important;
+    border-bottom-left-radius: 15px !important;
+	border-bottom-right-radius: 15px !important;
+}
+#debugPreInfo .slimScrollDiv, #debugResults .slimScrollDiv {
+	background: var(--div-background-color-15);
+}
+/* Swal popup */
+.swal-overlay--show-modal .swal-modal {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background: var(--div-background-color-25);
+    border-radius: 15px;
+}
+.swal-title {
+    color: white;
+}
+.swal-overlay--show-modal {
+    background: var(--main-bg-color);
+}
+
+/* Mobile*/
+@media (max-width: 480px) {
+#page-wrapper {
+    background: var(--mobile-bg-color)  !important;
+  background-size: cover;
+  background-repeat: no-repeat;
+    width: 100%;
+  height: 100%;
+}
+#side-menu {
+    -webkit-backdrop-filter: blur(10px) !important;
+    backdrop-filter: blur(10px) !important;
+}	
+.navbar-header {
+    background: var(--div-background-color-25)    !important;
+	    -webkit-backdrop-filter: blur(10px) !important;
+    backdrop-filter: blur(10px) !important;
+}
+.navbar-default {
+    background: var(--mobile-bg-color);
+    border-color: #e7e7e7;
+}
+
+#internal-Settings {
+    -webkit-backdrop-filter: blur(10px) !important;
+    backdrop-filter: blur(10px) !important;
+    background: var(--mobile-bg-color) !important;
+}
+.mfp-zoom-out.mfp-ready.mfp-bg {
+    opacity: 1 !important;
+    background: var(--mobile-bg-color) !important;
+}
+.mfp-wrap {
+    background: var(--mobile-bg-color)!important;
+}
+.modal-open .modal {
+    background: var(--mobile-bg-color)!important;
+}
+#page-wrapper {
+    background: var(--mobile-bg-color) !important;
+}
+#internal-Settings, #preloader, .preloader, .active-tab-Settings, .error-page {
+    background: var(--mobile-bg-color) !important;
+}
+html {
+    background: var(--mobile-bg-color) !important;
+}
+}

CSS/addons/organizr/glass/glass-login.css

@@ -0,0 +1,192 @@
+:root {
+    --div-background-color-10: rgba(0, 0, 0, 0.15);
+    --div-background-color-15: rgba(0, 0, 0, 0.25);
+    --div-background-color-25: rgba(0, 0, 0, 0.35);
+    --div-background-color-35: rgba(0, 0, 0, 0.45);
+}
+
+/* Replace the variables if you have a dark background  */
+/* Light colors for dark backgrounds */
+/*
+    --div-background-color-10: rgba(255, 255, 255, 0.1);
+    --div-background-color-15: rgba(255, 255, 255, 0.15);
+    --div-background-color-25: rgba(255, 255, 255, 0.25);
+    --div-background-color-35: rgba(255, 255, 255, 0.35);
+*/
+/* Dark blur colors for bright backgrounds */
+/*
+    --div-background-color-10: rgba(0, 0, 0, 0.15);
+    --div-background-color-15: rgba(0, 0, 0, 0.25);
+    --div-background-color-25: rgba(0, 0, 0, 0.35);
+    --div-background-color-35: rgba(0, 0, 0, 0.45);
+	
+*/
+
+/* loginpage sidemenu */
+@media (max-width: 480px) {
+   #wrapper .login-register > .login-box > .white-box {
+     background: transparent !important;
+     margin-top: auto !important;
+     width: 100% !important;
+    -webkit-backdrop-filter: blur(0px) !important;
+    backdrop-filter: blur(0px) !important;
+
+
+   }
+   }
+
+@media (max-width: 480px) {
+   .login-box.login-sidebar {
+    background: var(--div-background-color-15) !important;
+    -webkit-backdrop-filter:  blur(10px);
+    backdrop-filter:  blur(10px);
+
+}
+}
+
+/* logo */
+	.white-box .visible-xs {
+		display: block!important;
+	}
+	.loginLogo {
+    border: 0;
+    margin-top: -60%;
+    transform: translateY(-10%);
+	}
+	@media (max-width: 480px) {
+		.loginLogo {
+		margin-top: -10% !important;
+		}
+	}
+	.blockUI {
+		opacity: 1 !important;
+		background-color: transparent !important;
+	}
+	.blockMsg {
+		background: rgba(0, 0, 0, 0.9) !important;
+		border: none !important;
+	}
+	
+    .login-register > .login-box > .white-box {
+    background: var(--div-background-color-25) !important;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    }
+
+
+    .login-register {
+		
+        height: 100%;
+        position: fixed;
+    }
+
+	.slideInRight {
+		-webkit-animation-name: none;
+		animation-name: none;
+	}
+
+	.login-register  .login-box  .white-box  .bg-org {
+		background-color: transparent !important;
+    }
+
+	/*2FA login button*/
+	.panel-wrapper .panel-body > .btn-warning, .btn-warning.disabled {
+        background: var(--div-background-color-15) !important;
+        border: 1px solid #ffc36d00 !important;
+        }
+
+        /*2FA animation header*/
+        .panel-warning .panel-heading, .panel-yellow .panel-heading {
+        color: #fff;
+        border-radius: 3px;
+        background-color: rgba(0, 0, 0, 0.3);
+        border-color: #00000000;
+        }
+
+        /*oAuth Successful*/
+        .panel-green .panel-heading, .panel-success .panel-heading {
+        color: #53e69d;
+        text-align: center;
+        text-transform: uppercase;
+        border-radius: 3px;
+        background-color: transparent;
+        border-color: transparent;
+        }
+
+	/*Login sidebar*/
+	.login-box.login-sidebar,
+	#login-panels .panel-body,
+	#login-panels .panel {
+		background: transparent;
+	}
+	
+    #login-panels  .form-control ,  #login-panels .btn {
+    background: rgba(255, 255, 255, 0.35);
+    color: white;
+    border-radius: 25px;
+    border: none;
+    }
+  /*  #login-panels {
+    height: 44px;
+    }*/
+    #login-panles .btn-info.disabled.focus .btn-info.disabled:focus .btn-info.disabled:hover .btn-info.focus .btn-info:focus .btn-info:hover .btn:hover {
+    background: rgba(255,255, 255, 0.65);
+    border:none;
+
+    }
+	/*Center login Box*/
+	.login-sidebar {
+		position: relative;
+		right: initial;
+	}
+
+	#lockScreen .white-box {
+		width: 400px;
+		height: 345px;
+	}
+	.login-sidebar .white-box {
+		width: 100%;
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	#lockScreen .white-box {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		background: var(--div-background-color-25);
+		-webkit-box-shadow: none;
+		box-shadow: none;
+		-webkit-backdrop-filter: blur(10px);
+		backdrop-filter: blur(10px);
+		border-radius: 15px;
+    }
+    .form-control::placeholder {
+        color: white;
+    }
+    #login-username-Input, #login-password-Input {
+            text-align: center;
+    }
+    .panel .panel-heading .panel-title, label, span, .fa-lock:before {
+    color: #ffffff;
+    }
+	/* Lock screen */ 
+	#lockScreen .form-material .form-control, .form-material .form-control:focus {
+		background: rgba(255, 255, 255, 0.35);
+		border-radius: 25px;
+		padding: inherit;
+		text-align: center;
+	}
+	 #lockScreen  .btn-info {
+		background: rgba(255, 255, 255, 0.35);
+		border-radius: 25px;
+		border: 1px solid transparent;
+	 }
+	 #lockScreen .btn-info:hover {
+		 border: 1px solid transparent;
+	 }
+	

CSS/addons/radarr/README.md

@@ -0,0 +1,54 @@
+# Radarr 4K logo
+
+Add a 4K logo to your Radarr css. 
+
+### Desktop
+![](desktop.png)
+![](v3-desktop.png)
+
+### Mobile
+![](mobile.png)
+![](v3-mobile.png)
+
+
+## Setup
+
+#### Nginx
+Examples of how to add it:
+
+```nginx
+proxy_set_header Accept-Encoding "";
+sub_filter
+'</head>'
+'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/radarr/THEME.css">
+<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/addons/radarr/radarr-4k-logo.css">
+</head>';
+sub_filter_once on;
+```
+
+#### Apache
+
+```nginx
+AddOutputFilterByType SUBSTITUTE text/html
+   Substitute 's|</head> '<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/radarr/THEME.css"><link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/addons/radarr/radarr-4k-logo.css">
+</head>';|'
+```
+
+#### Caddy
+
+```nginx
+filter rule {
+    content_type text/html.*
+    search_pattern </head>
+    replacement "<link rel='stylesheet' type='text/css' href='https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/<THEME>.css'><link rel='stylesheet' type='text/css' href='https://gilbn.github.io/theme.park/CSS/addons/radarr/radarr-4k-logo.css'></head>"
+}
+```
+
+#### Stylus
+
+Just add another import line.
+
+```css
+@import "https://gilbn.github.io/theme.park/CSS/themes/radarr/THEME.css";
+@import "https://gilbn.github.io/theme.park/CSS/addons/radarr/radarr-4k-logo.css";
+```

CSS/addons/radarr/radarr-4k-logo.css

@@ -0,0 +1,73 @@
+/* Desktop */
+@media (min-width: 752px) {
+    .navbar-brand>img {
+        display:none !important; 
+        }
+    .navbar > .container-fluid .navbar-brand:before {
+        background-image: url("https://gilbn.github.io/theme.park/CSS/addons/radarr/radarr4k.png");
+        display: inline-block;
+        width: 128px; 
+        height: 128px;
+        content:"";
+        background-size:  cover;
+        -webkit-background-size:  cover;
+        -moz-background-size:  cover;
+        -o-background-size: cover;
+        }
+    }
+    /* Mobile */
+    @media (max-width: 767px) {
+    .navbar-brand  .visible-xs img {
+        display: none !important;
+        } 
+    .navbar-brand .visible-xs  {
+        display: inline !important;
+        }     
+    .navbar > .container-fluid .navbar-brand:before {
+        background-image: url("https://gilbn.github.io/theme.park/CSS/addons/radarr/radarr4k.png");
+        display: inline-block;
+        width: 32px; 
+        height: 32px;
+        content:"";
+        background-size:  cover;
+        -webkit-background-size:  cover;
+        -moz-background-size:  cover;
+        -o-background-size: cover;
+        margin-bottom: -12px;
+        }
+    }
+
+/* Radarr V3*/
+@media (min-width: 752px) {
+    .PageHeader-logoFull-2z6pD  {
+        display: none !important;
+    }
+    .PageHeader-logoContainer-3bOb3:before {
+        background-image: url("https://gilbn.github.io/theme.park/CSS/addons/radarr/radarr4k-v3.png");
+        display: inline-block;
+        width: 148px; 
+        height: 48px;
+        content:"";
+        background-size:  cover;
+        -webkit-background-size:  cover;
+        -moz-background-size:  cover;
+        -o-background-size: cover;
+    }    
+} 
+
+@media (max-width: 767px) {
+    .PageHeader-logo-2y8vm  {
+        display: none !important;
+    }   
+    .PageHeader-logoContainer-3bOb3:before {
+        background-image: url("https://gilbn.github.io/theme.park/CSS/addons/radarr/radarr-v3-mobile.png");
+        display: inline-block;
+        width: 32px; 
+        height: 32px;
+        content:"";
+        background-size:  cover;
+        -webkit-background-size:  cover;
+        -moz-background-size:  cover;
+        -o-background-size: cover;
+    } 
+}

CSS/addons/sonarr/README.md

@@ -0,0 +1,54 @@
+# Sonarr 4K logo
+
+Add a 4K logo to your Sonarr css. 
+
+### Desktop
+![](desktop.png)
+![](v3-desktop.png)
+
+### Mobile
+![](mobile.png)
+![](v3-mobile.png)
+
+
+## Setup
+
+#### Nginx
+Examples of how to add it:
+
+```nginx
+proxy_set_header Accept-Encoding "";
+sub_filter
+'</head>'
+'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/sonarr/THEME.css">
+<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k-logo.css">
+</head>';
+sub_filter_once on;
+```
+
+#### Apache
+
+```nginx
+AddOutputFilterByType SUBSTITUTE text/html
+   Substitute 's|</head> '<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/sonarr/THEME.css"><link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k-logo.css">
+</head>';|'
+```
+
+#### Caddy
+
+```nginx
+filter rule {
+    content_type text/html.*
+    search_pattern </head>
+    replacement "<link rel='stylesheet' type='text/css' href='https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/<THEME>.css'><link rel='stylesheet' type='text/css' href='https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k-logo.css'></head>"
+}
+```
+
+#### Stylus
+
+Just add another import line.
+
+```css
+@import "https://gilbn.github.io/theme.park/CSS/themes/sonarr/THEME.css";
+@import "https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k-logo.css";
+```

CSS/addons/sonarr/sonarr-4k-logo.css

@@ -0,0 +1,95 @@
+/* Desktop */
+@media (min-width: 752px) {
+    .navbar-brand>img {
+        display:none !important; 
+        }
+    .navbar > .container-fluid .navbar-brand:before {
+        background-image: url("https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k.png");
+        display: inline-block;
+        width: 128px; 
+        height: 128px;
+        content:"";
+        background-size:  cover;
+        -webkit-background-size:  cover;
+        -moz-background-size:  cover;
+        -o-background-size: cover;
+        }
+    }
+
+    /* Mobile */
+    @media (max-width: 1200px) {
+    .navbar-brand  .visible-xs img, .logo-text {
+        display: none !important;
+        } 
+    .navbar-brand .visible-xs  {
+        display: inline !important;
+        }     
+    .navbar > .container-fluid .navbar-brand:before {
+        background-image: url("https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k.png");
+        display: inline-block;
+        width: 64px; 
+        height: 64px;
+        content:"";
+        background-size:  cover;
+        -webkit-background-size:  cover;
+        -moz-background-size:  cover;
+        -o-background-size: cover;
+        margin-bottom: -12px;
+        }
+    }
+
+    @media (max-width: 767px) {
+    .navbar-brand  .visible-xs img {
+        display: none !important;
+        } 
+    .navbar-brand .visible-xs  {
+        display: inline !important;
+        }     
+    .navbar > .container-fluid .navbar-brand:before {
+        background-image: url("https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k.png");
+        display: inline-block;
+        width: 32px; 
+        height: 32px;
+        content:"";
+        background-size:  cover;
+        -webkit-background-size:  cover;
+        -moz-background-size:  cover;
+        -o-background-size: cover;
+        margin-bottom: -12px;
+        }
+    }
+
+/* Sonarr V3*/
+@media (min-width: 752px) {
+    .PageHeader\/logo\/2y8vm  {
+        display: none !important;
+    }
+    .PageHeader\/logoContainer\/3bOb3:before {
+        background-image: url("https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k.png");
+        display: inline-block;
+        width: 32px; 
+        height: 32px;
+        content:"";
+        background-size:  cover;
+        -webkit-background-size:  cover;
+        -moz-background-size:  cover;
+        -o-background-size: cover;
+    }    
+} 
+
+@media (max-width: 767px) {
+    .PageHeader\/logo\/2y8vm   {
+        display: none !important;
+    }   
+    .PageHeader\/logoContainer\/3bOb3:before {
+        background-image: url("https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k.png");
+        display: inline-block;
+        width: 32px; 
+        height: 32px;
+        content:"";
+        background-size:  cover;
+        -webkit-background-size:  cover;
+        -moz-background-size:  cover;
+        -o-background-size: cover;
+    } 
+}

CSS/addons/unraid/login-page/alien/alien _wallpaper.css

@@ -0,0 +1,263 @@
+@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css";
+@import "https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap";
+@import "https://fonts.googleapis.com/css?family=VT323";
+:root {
+    --main-bg-color: radial-gradient(ellipse at center,#0f7 0,rgba(0,255,119,0) 100%) center center/cover no-repeat fixed;
+    --logo: url(https://gilbn.github.io/unraid_themes/alien/logo/nostromo3.png) center no-repeat;
+    --text-color: #37f592;
+    --input-color: #37f592;
+    --link-color: #37f592;
+    --link-color-hover: #68ffff;
+    --case-color: #37f592;
+    --button-text-color: #37f592;
+    --button-text-color-hover: #000;
+    --button-color: #37f592;
+    --button-color2: #0C833D;
+    --button-color-hover: #68ffff;
+    --button-color2-hover: #68ffff;
+    --input-font: 'Share Tech Mono', monospace;
+    --text-font: 'Share Tech Mono', monospace;   /*'VT323', 'Share Tech Mono'*/
+    --div-background-color-15: rgba(0, 255, 111, 0.03);
+    --text-shadow: 0 0 8px;
+    --box-shadow: 0 0 15px;
+
+    /* Replace the variables if you have a dark background  */
+    /* Light colors for dark backgrounds */
+    /*
+        --div-background-color-10: rgba(255, 255, 255, 0.1);
+        --div-background-color-15: rgba(255, 255, 255, 0.15);
+        --div-background-color-25: rgba(255, 255, 255, 0.25);
+        --div-background-color-35: rgba(255, 255, 255, 0.35);
+    https://www.transparenttextures.com/patterns/hexellence.png
+    https://www.transparenttextures.com/patterns/gplay.png
+    https://www.transparenttextures.com/patterns/simple-horizontal-light.png
+    https://www.colourlovers.com/palette/3428762/Fallout?widths=1
+
+    https://codepen.io/lbebber/pen/XJRdrV/ CRT KEY FRAMES
+    https://brennan.io/2017/06/14/alien-computer-card/
+    https://www.cssmatic.com/noise-texture
+
+    https://codepen.io/somethingformed/pen/raWJXV
+
+    */
+    /*
+    #!/bin/bash
+    sed -i -e '\@<style>@i\    <link rel="stylesheet" href="https:\/\/gilbn.github.io\/customfiles\/fallout.css">' /usr/local/emhttp/login.php
+    # add video background
+    sed -i -e '\@<body>@a\ div class="background-wrap"><video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> <source src="https:\/\/gilbn.github.io\/customfiles\/VaultTecCRTLoop.mp4" type="video\/mp4">Video not supported<\/video><\/div>' /usr/local/emhttp/login.php
+    */
+
+    
+}
+
+@media (max-width: 500px) {
+    #login {
+        -webkit-backdrop-filter: blur(0px);
+        backdrop-filter: blur(0px);
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: 100%;
+        width: 100%;
+        border-radius: none !important;
+    }
+    .background-wrap,#video-bg-elem  {display: none;}
+}
+
+html {
+    background: var(--main-bg-color) !important;
+}
+
+body {
+    background: var(--main-bg-color) !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+@media only screen and (max-width: 768px) {
+    #login {
+        min-width: 300px;
+    }
+}
+/*FOR VIDEO BACKGROUND*/
+.background-wrap {
+    position: fixed;
+    z-index: -1000;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+}
+#video-bg-elem {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-height: 100%;
+    min-width: 100%;
+}
+/*TEXT COLOR*/
+#login h1,
+#login h2,
+#login .error {
+    color: var(--text-color) !important;
+    text-shadow: var(--text-shadow) var(--text-color);
+    font-size: 20px;
+}
+#login a {
+    color: var(--link-color);
+    text-shadow: var(--text-shadow) var(--text-color);
+}
+#login a:hover {
+    color: var(--link-color-hover);
+    text-shadow: var(--text-shadow) var(--text-color);
+}
+#login input {
+    color: var(--input-color);
+    text-shadow: 0 0 5px var(--text-color);
+}
+#login ::placeholder {
+    color: var(--input-color);
+    text-shadow: 0 0 5px var(--text-color);
+}
+#login ::-webkit-input-placeholder {
+    color: var(--input-color);
+    text-shadow: 0 0 5px var(--text-color);
+}
+#login ::-moz-placeholder {
+    color: var(--input-color);
+    text-shadow: 0 0 5px var(--text-color);
+}
+#login :-ms-input-placeholder {
+    color: var(--input-color);
+    text-shadow: 0 0 5px var(--text-color);
+}
+#login :-moz-placeholder {
+    color: var(--input-color);
+    text-shadow: 0 0 5px var(--text-color);
+}
+#login input:focus::-webkit-input-placeholder {
+    color: transparent !important;
+    text-shadow: 0 0 0px transparent;
+}
+#login input:focus:-moz-placeholder {
+    color: transparent !important;
+    text-shadow: 0 0 0px transparent;
+}
+#login input:focus::-moz-placeholder {
+    color: transparent !important;
+    text-shadow: 0 0 0px transparent;
+}
+#login input:focus:-ms-input-placeholder {
+    color: transparent !important;
+    text-shadow: 0 0 0px transparent;
+}
+
+/*TEXT FONT*/
+#login h1,
+#login h2,
+#login a,
+#login .button,
+#login .error {
+    font-family: var(--text-font);
+    -webkit-font-smoothing: none;
+    line-height: 1.2;
+}
+
+/* CASE COLOR */
+#login [class^='case-'],
+#login [class*=' case-'] {
+    font-family: cases!important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    color: var(--case-color);
+    text-shadow: var(--text-shadow) var(--text-color);
+}
+/*INPUT FORMS*/
+#login [type=text],
+#login [type=password] {
+    font-family: var(--input-font);
+    background-color: rgba(0, 0, 0, 0.25);
+    border: 2px solid transparent;
+    text-transform: uppercase;
+    border-radius: 5px;
+}
+#login [type=text]:active,
+#login [type=text]:focus,
+#login [type=password]:active,
+#login [type=password]:focus {
+    font-family: var(--input-font);
+    background-color: rgba(0, 0, 0, 0.25);
+    border: 2px solid transparent;
+    text-transform: uppercase;
+
+}
+
+
+/*BUTTON*/
+#login .button {
+    color: var(--button-text-color);
+    text-shadow: var(--text-shadow) var(--text-color);
+    background: linear-gradient(90deg, var(--button-color2) 0, var(--button-color)) 0 0 no-repeat, linear-gradient(90deg, var(--button-color2) 0, var(--button-color)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color2) 0, var(--button-color2)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color) 0, var(--button-color)) 100% 100% no-repeat;
+    background: -webkit-gradient(linear, left top, right top, from(var(--button-color2)), to(var(--button-color))) 0 0 no-repeat, -webkit-gradient(linear, left top, right top, from(var(--button-color2)), to(var(--button-color))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color2)), to(var(--button-color2))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color)), to(var(--button-color))) 100% 100% no-repeat;
+    background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
+}
+#login .button:hover {
+    color: var(--button-text-color-hover);
+    text-shadow: var(--text-shadow) var(--button-color-hover);
+    box-shadow: var(--box-shadow) var(--button-color-hover);
+    background-color: var(--button-color-hover);
+    background: -webkit-gradient(linear, left top, right top, from(var(--button-color2-hover)), to(var(--button-color-hover)));
+    background: linear-gradient(90deg, var(--button-color2-hover) 0, var(--button-color-hover));
+}
+
+
+#login {
+    background: var(--div-background-color-15) !important;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    padding-top: 1rem;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) !;
+    -ms-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    margin: 0 !important;
+    text-transform: uppercase;
+    min-width: 300px;
+}
+
+#login .angle:after {
+    display: none;
+}
+#login .wordmark {
+    display: none;
+}
+
+#login .logo {
+    background: var(--logo);
+    background-size: contain;
+    padding: 2rem;
+    border-radius: 0;
+    margin: 0rem 1rem 0rem 1rem;
+}
+#login .error {
+    animation-name: shake;
+    animation-duration: .8s;
+}
+/*LOGIN BOX SHADOW*/
+.shadow {
+    -webkit-box-shadow: inset 0px 0px 0px 2px var(--text-color);
+    box-shadow: inset 0px 0px 0px 2px var(--text-color);
+}

CSS/addons/unraid/login-page/alien/retro-terminal/amber.css

@@ -0,0 +1,31 @@
+/*_____________________AMBER_THEME______________________*/
+/*--body-before:#ffb52a1a; /* This is the background that flickers, background uses a transparency of 10%, SET IT TO BLACK TO REMOVE FLICKER! */
+/*--body-after: #ffb52a33; /* This is the background that creates the crt lines, background uses a transparency of 20% */
+/*--custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
+
+@import url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css);
+:root {
+--main-bg-color:black;
+--body-before:#ffb52a1a;
+--body-after: #ffb52a33;
+--logo: url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/alien/logo/nostromoyellow.png) center no-repeat;
+--text-color: #ffb52a;
+--input-color: #ffb52a;
+--link-color: #ffb52a;
+--link-color-hover: #ff6868;
+--case-color: #ffb52a;
+--button-text-color: #ffb52a;
+--button-text-color-hover: #000;
+--button-color: #ffb52a;
+--button-color-hover: #ff6868;
+--selection-color: #ff6868;
+--custom-text-header:#ffb52a;
+--custom-text-header-shadow:#ffb52a;
+--custom-text-header-animation: textflicker;
+--input-font: 'Share Tech Mono', monospace;
+--text-font: 'Share Tech Mono', monospace;
+--loginbox-background-color: transparent;
+--text-shadow: 0 0 8px;
+--text-shadow-color: #ffb52a;
+--box-shadow: 0 0 15px;
+}

CSS/addons/unraid/login-page/alien/retro-terminal/blue.css

@@ -0,0 +1,31 @@
+/*_____________________BLUE_THEME______________________*/
+/*--body-before:#70d7f61a; /* This is the background that flickers, background uses a transparency of 10%, SET IT TO BLACK TO REMOVE FLICKER! */
+/*--body-after: #70d7f61a; /* This is the background that creates the crt lines, background uses a transparency of 20% */
+/*--custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
+
+@import url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css);
+:root {
+--main-bg-color:black;
+--body-before:#70d7f61a;
+--body-after: #70d7f633;
+--logo: url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/alien/logo/nostromoblue.png) center no-repeat;
+--text-color: #70d7f6;
+--input-color: #70d7f6;
+--link-color: #70d7f6;
+--link-color-hover: #8f2809;
+--case-color: #70d7f6;
+--button-text-color: #70d7f6;
+--button-text-color-hover: #000;
+--button-color: #70d7f6;
+--button-color-hover: #8f2809;
+--selection-color: #8f2809;
+--custom-text-header:#70d7f6;
+--custom-text-header-shadow:#70d7f6;
+--custom-text-header-animation: textflicker;
+--input-font: 'Share Tech Mono', monospace;
+--text-font: 'Share Tech Mono', monospace;
+--loginbox-background-color: transparent;
+--text-shadow: 0 0 8px;
+--text-shadow-color: #70d7f6;
+--box-shadow: 0 0 15px;
+}

CSS/addons/unraid/login-page/alien/retro-terminal/green.css

@@ -0,0 +1,31 @@
+/*_____________________GREEN_THEME______________________*/
+/* --body-before:#00ff771a; /* This is the background that flickers, background uses a transparency of 10% */
+/* --body-after: #00ff7733; /* This is the background that creates the crt lines, background uses a transparency of 20% */
+/* --custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
+
+@import url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css);
+:root {
+--main-bg-color:black;
+--body-before:#00ff771a;
+--body-after: #00ff7733;
+--logo: url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/alien/logo/nostromogreen.png) center no-repeat;
+--text-color: #37f592;
+--input-color: #37f592;
+--link-color: #37f592;
+--link-color-hover: #68ffff;
+--case-color: #37f592;
+--button-text-color: #37f592;
+--button-text-color-hover: #000;
+--button-color: #37f592;
+--button-color-hover: #68ffff;
+--selection-color: #68ffff;
+--custom-text-header:#37f592;
+--custom-text-header-shadow:#37f592;
+--custom-text-header-animation: textflicker;
+--input-font: 'Share Tech Mono', monospace;
+--text-font: 'Share Tech Mono', monospace;
+--loginbox-background-color: transparent;
+--text-shadow: 0 0 8px;
+--text-shadow-color: #37f592;
+--box-shadow: 0 0 15px;
+}

CSS/addons/unraid/login-page/alien/retro-terminal/js/custom_text_header.js

@@ -0,0 +1,14 @@
+
+ //Custom Text Header //
+
+// Needs to be inside <section id="login" class="shadow">
+
+let custom_text_header = `
+<div class="custom-text-header"> <pre>                     __                             ___       __  
+   ____  ____  _____/ /__________  ____ ___  ____  / (_)___  / /__
+  / __ \\/ __ \\/ ___/ __/ ___/ __ \\/ __ '__ \\/ __ \\/ / / __ \\/ //_/
+ / / / / /_/ (__  ) /_/ /  / /_/ / / / / / / /_/ / / / / / / ,&lt;   
+/_/ /_/\\____/____/\\__/_/   \\____/_/ /_/ /_/\\____/_/_/_/ /_/_/|_|  
+                                                                 </pre> </div>
+`;
+document.getElementById("login").innerHTML += custom_text_header

CSS/addons/unraid/login-page/alien/retro-terminal/red.css

@@ -0,0 +1,31 @@
+/*_____________________RED_THEME______________________*/
+/*--body-before:#70d7f61a; /* This is the background that flickers, background uses a transparency of 10%, SET IT TO BLACK TO REMOVE FLICKER! */
+/*--body-after: #70d7f61a; /* This is the background that creates the crt lines, background uses a transparency of 20% */
+/*--custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
+
+@import url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css);
+:root {
+--main-bg-color: black;
+--body-before: #ff00001a;
+--body-after: #ff000033;
+--logo: url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/alien/logo/nostromored.png) center no-repeat;
+--text-color: #e22828;
+--input-color: #e22828;
+--link-color: #e22828;
+--link-color-hover: #ffffff;
+--case-color: #e22828;
+--button-text-color: #e22828;
+--button-text-color-hover: #000;
+--button-color: #e22828;
+--button-color-hover: #ffffff;
+--selection-color: #ffffff;
+--custom-text-header: #e22828;
+--custom-text-header-shadow: #e22828;
+--custom-text-header-animation: textflicker;
+--input-font: 'Share Tech Mono', monospace;
+--text-font: 'Share Tech Mono', monospace;
+--loginbox-background-color: transparent;
+--text-shadow: 0 0 8px;
+--text-shadow-color: #e22828;
+--box-shadow: 0 0 15px;
+}

CSS/addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css

@@ -0,0 +1,384 @@
+@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css";
+@import "https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap";
+@import "https://fonts.googleapis.com/css?family=VT323";
+
+/*___FONTS___*/
+
+/* 'VT323', 'Share Tech Mono' */
+
+
+    /* Replace the variables if you have a dark background  */
+    /* Light colors for dark backgrounds */
+    /*
+        --div-background-color-10: rgba(255, 255, 255, 0.1);
+        --div-background-color-15: rgba(255, 255, 255, 0.15);
+        --div-background-color-25: rgba(255, 255, 255, 0.25);
+        --div-background-color-35: rgba(255, 255, 255, 0.35);
+
+
+    https://www.transparenttextures.com/patterns/hexellence.png
+    https://www.transparenttextures.com/patterns/gplay.png
+    https://www.transparenttextures.com/patterns/simple-horizontal-light.png
+    https://www.colourlovers.com/palette/3428762/Fallout?widths=1
+    
+    https://codepen.io/meduzen/pen/zxbwRV
+    https://codepen.io/lbebber/pen/XJRdrV/ CRT KEY FRAMES
+    https://brennan.io/2017/06/14/alien-computer-card/
+    https://www.cssmatic.com/noise-texture
+
+    https://codepen.io/somethingformed/pen/raWJXV
+
+
+    ============ SOURCES =============
+    https://github.com/brenns10/alien-console
+    https://github.com/Swordfish90/cool-retro-term
+    https://github.com/andersevenrud/retro-css-shell-demo CRT INTERLACE
+    https://codepen.io/lbebber/pen/XJRdrV/ CRT KEY FRAMES
+    https://codepen.io/patrickhlauke/pen/YaoBop TEXT FLIKER
+
+    */
+    /*
+
+INSTALLATION
+
+cp -p /usr/local/emhttp/login.php /usr/local/emhttp/login.php.backup
+
+#!/bin/bash \
+theme=green \
+sed -i -e '\@<style>@i\    <link rel="stylesheet" href="https:\/\/gilbn.github.io\/theme.park\/CSS\/addons\/unraid\/login-page\/alien\/retro-terminal\/"$theme".css">' /usr/local/emhttp/login.php 
+sed -i -e '\@</body>@i\    <script type="text/javascript" src="https:\/\/gilbn.github.io\/theme.park\/CSS\/addons\/unraid\/login-page\/alien\/retro-terminal\/js\/custom_text_header.js"></script>' /usr/local/emhttp/login.php
+
+RESTORE
+cp /usr/local/emhttp/login.php.backup /usr/local/emhttp/login.php
+
+# add video background
+    sed -i -e '\@<body>@a\ div class="background-wrap"><video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> <source src="https:\/\/gilbn.github.io\/customfiles\/VaultTecCRTLoop.mp4" type="video\/mp4">Video not supported<\/video><\/div>' /usr/local/emhttp/login.php
+    */
+
+
+
+
+@media (max-width: 500px) {
+    #login {
+        -webkit-backdrop-filter: blur(0px);
+        backdrop-filter: blur(0px);
+        position: absolute;
+        padding-top: 0rem !important;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: 100%;
+        width: 100%;
+        border-radius: none !important;
+    }
+    .background-wrap,#video-bg-elem,.custom-text-header  {display: none;}
+    #login {
+        border:none !important;
+    }
+}
+
+html {background: var(--main-bg-color) !important;}
+body {background: var(--main-bg-color) !important;}
+/* CRT SCREEN FLICKER*/
+body::before {
+    content: "";
+    background: radial-gradient(ellipse at center,var(--body-before) 0,rgb(0, 0, 0) 100%) !important;
+    background-repeat: repeat-y !important;
+    background-size: 100% 4px !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    animation: flicker 0.01s infinite;
+    pointer-events: none;
+}
+/* CRT BACKGROUND WITH LINES*/
+body::after {
+    content: "";
+    background: radial-gradient(ellipse at center,var(--body-after) 0,rgba(0, 0, 0, 0.6) 80%) center center/cover no-repeat fixed, linear-gradient(#0000 0%,#0000 0%) !important;
+    background-repeat: repeat-y !important;
+    background-size: 100% 4px !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+@keyframes flicker {0% {opacity: 0.37633;}5% {opacity: 0.70002;}10% {opacity: 0.64427;}15% {opacity: 0.35591;}20% {opacity: 0.34054;}25% {opacity: 0.54917;}30% {opacity: 0.41056;}35% {opacity: 0.67637;}40% {opacity: 0.23681;}45% {opacity: 0.64945;}50% {opacity: 0.67522;}55% {opacity: 0.56049;}60% {opacity: 0.06113;}65% {opacity: 0.95766;}70% {opacity: 0.77945;}75% {opacity: 0.33817;}80% {opacity: 0.19735;}85% {opacity: 0.84337;}90% {opacity: 0.82867;}95% {opacity: 0.65512;}100% {opacity: 0.15179;}}
+
+@media only screen and (max-width: 768px) {
+    #login {
+        min-width: 300px;
+    }
+}
+/*FOR VIDEO BACKGROUND*/
+.background-wrap {
+    position: fixed;
+    z-index: -1000;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+}
+#video-bg-elem {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-height: 100%;
+    min-width: 100%;
+}
+/*TEXT COLOR*/
+#login h1,
+#login h2,
+#login .error {
+    color: var(--text-color) !important;
+    text-shadow: var(--text-shadow) var(--text-shadow-color);
+}
+#login a {
+    color: var(--link-color);
+    text-shadow: var(--text-shadow) var(--text-shadow-color);
+}
+#login a:hover {
+    color: var(--link-color-hover);
+    text-shadow: var(--text-shadow) var(--text-shadow-color);
+}
+#login input {
+    color: var(--input-color);
+    text-shadow: 0 0 5px var(--text-shadow-color);
+}
+#login ::placeholder {
+    color: var(--input-color);
+    text-shadow: 0 0 5px var(--text-shadow-color);
+}
+#login ::-webkit-input-placeholder {
+    color: var(--input-color);
+    text-shadow: 0 0 5px var(--text-shadow-color);
+}
+#login ::-moz-placeholder {
+    color: var(--input-color);
+    text-shadow: 0 0 5px var(--text-shadow-color);
+}
+#login :-ms-input-placeholder {
+    color: var(--input-color);
+    text-shadow: 0 0 5px var(--text-shadow-color);
+}
+#login :-moz-placeholder {
+    color: var(--input-color);
+    text-shadow: 0 0 5px var(--text-shadow-color);
+}
+#login input:focus::-webkit-input-placeholder {
+    color: transparent !important;
+    text-shadow: 0 0 0px transparent;
+}
+#login input:focus:-moz-placeholder {
+    color: transparent !important;
+    text-shadow: 0 0 0px transparent;
+}
+#login input:focus::-moz-placeholder {
+    color: transparent !important;
+    text-shadow: 0 0 0px transparent;
+}
+#login input:focus:-ms-input-placeholder {
+    color: transparent !important;
+    text-shadow: 0 0 0px transparent;
+}
+
+/*TEXT FONT*/
+#login h1,
+#login h2,
+#login a,
+#login .button,
+#login .error {
+    font-family: var(--text-font);
+    -webkit-font-smoothing: none;
+    line-height: 1.2;
+}
+h1 {
+    font-size: 3em;
+    margin: 0;
+}
+
+/* CASE COLOR */
+#login [class^='case-'],
+#login [class*=' case-'] {
+    font-family: cases!important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    color: var(--case-color);
+    text-shadow: var(--text-shadow) var(--text-shadow-color);
+}
+/*INPUT FORMS*/
+#login [type=text],
+#login [type=password] {
+    font-family: var(--input-font);
+    background-color: rgba(0, 0, 0, 0.25);
+    border: 2px solid transparent;
+    text-transform: uppercase;
+    border-radius: 0px;
+    border: 3px solid var(--text-color);
+    color: var(--text-color);
+}
+#login [type=text]:active,
+#login [type=text]:focus,
+#login [type=password]:active,
+#login [type=password]:focus {
+    font-family: var(--input-font);
+    background-color: rgba(0, 0, 0, 0.25);
+    text-transform: uppercase;
+}
+
+
+
+/*BUTTON*/
+#login .button {
+    color: var(--button-text-color);
+    text-shadow: var(--text-shadow) var(--text-shadow-color);
+    background: linear-gradient(90deg, var(--button-color) 0, var(--button-color)) 0 0 no-repeat, linear-gradient(90deg, var(--button-color) 0, var(--button-color)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color) 0, var(--button-color)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color) 0, var(--button-color)) 100% 100% no-repeat;
+    background: -webkit-gradient(linear, left top, right top, from(var(--button-color)), to(var(--button-color))) 0 0 no-repeat, -webkit-gradient(linear, left top, right top, from(var(--button-color)), to(var(--button-color))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color)), to(var(--button-color))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color)), to(var(--button-color))) 100% 100% no-repeat;
+    background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
+    
+}
+#login .button:hover {
+    color: var(--button-text-color-hover);
+    text-shadow: var(--text-shadow) var(--button-color-hover);
+    box-shadow: var(--box-shadow) var(--button-color-hover);
+    background-color: var(--button-color-hover);
+    background: -webkit-gradient(linear, left top, right top, from(var(--button-color-hover)), to(var(--button-color-hover)));
+    background: linear-gradient(90deg, var(--button-color-hover) 0, var(--button-color-hover));
+}
+
+/*LOGIN ID*/
+#login {
+    background: var(--loginbox-background-color) !important;
+    padding-top: 1rem;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    margin: 0 !important;
+    text-transform: uppercase;
+    min-width: 300px;
+    border-radius: 0px !important;
+    border: 3px dashed var(--text-color);
+}
+#login .angle::after {
+    display:none;
+}
+#login .wordmark svg {
+    display: none;
+}
+#login .logo {
+    background: var(--logo);
+    background-size: contain;
+    padding: 2rem;
+    border-radius: 0;
+    margin: 0rem 1rem 0rem 1rem;
+}
+logo.angle {
+    -webkit-box-shadow: inset 0px 0px 0px 2px var(--text-color) !important;
+    box-shadow: inset 0px 0px 0px 2px var(--text-color) !important;
+    border-radius: 0px !important;
+}
+#login .error {
+    animation-name: shake;
+    animation-duration: .7s;
+}
+
+/*CUSTOM HEADER*/
+.custom-text-header {
+    white-space: pre;
+    letter-spacing: 2px;
+    font-family: var(--text-font);
+    -webkit-font-smoothing: none;
+    font-weight: 900;
+    line-height: 1.5;
+    color: var(--custom-text-header) !important;
+    text-shadow: 0 0 20px var(--custom-text-header-shadow);
+    position: absolute;
+    left: 50%;
+    top: -15%;
+    transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    animation-duration: 0.01s;
+    animation-name: var(--custom-text-header-animation);
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    font-weight: 900;
+}
+.custom-text-header:after {
+    content: "";
+    position: absolute;
+    top: 111px;
+    right: -15px;
+    background-color: var(--custom-text-header);
+    vertical-align: top;
+    width: 20px;
+    height: 2px;
+    -webkit-animation: blink 1s step-end infinite;
+    animation: blink 1s step-end infinite;
+}
+@-webkit-keyframes blink {
+    0% { opacity: 1.0; }
+    50% { opacity: 0.0; }
+    100% { opacity: 1.0; }
+  }
+  
+  @keyframes blink {
+    0% { opacity: 1.0; }
+    50% { opacity: 0.0; }
+    100% { opacity: 1.0; }
+  }
+
+  @keyframes textflicker {
+    from {
+      text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
+      border: 10px 0 0 #ea36af, -2px 0 0 #75fa69;
+    }
+    to {
+      text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
+      border: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
+    }
+  }
+
+  ::selection {
+    background: var(--selection-color); /* WebKit/Blink Browsers */
+  }
+  ::-moz-selection {
+    background: var(--selection-color); /* Gecko Browsers */
+  }
+
+
+/*
+
+                     __                             ___       __  
+   ____  ____  _____/ /__________  ____ ___  ____  / (_)___  / /__
+  / __ \/ __ \/ ___/ __/ ___/ __ \/ __ `__ \/ __ \/ / / __ \/ //_/
+ / / / / /_/ (__  ) /_/ /  / /_/ / / / / / / /_/ / / / / / / ,<   
+/_/ /_/\____/____/\__/_/   \____/_/ /_/ /_/\____/_/_/_/ /_/_/|_|  
+                                                                 
+*/
+/*
+<div class="custom-text-header"> <pre>                     __                             ___       __  
+   ____  ____  _____/ /__________  ____ ___  ____  / (_)___  / /__
+  / __ \/ __ \/ ___/ __/ ___/ __ \/ __ '__ \/ __ \/ / / __ \/ //_/
+ / / / / /_/ (__  ) /_/ /  / /_/ / / / / / / /_/ / / / / / / ,&lt;   
+/_/ /_/\____/____/\__/_/   \____/_/ /_/ /_/\____/_/_/_/ /_/_/|_|  
+                                                                 </pre> </div>
+*/

CSS/addons/unraid/login-page/alien/retro-terminal/temp.css

@@ -0,0 +1,31 @@
+/*_____________________WHITE_THEME______________________*/
+/*--body-before:#70d7f61a; /* This is the background that flickers, background uses a transparency of 10%, SET IT TO BLACK TO REMOVE FLICKER! */
+/*--body-after: #70d7f61a; /* This is the background that creates the crt lines, background uses a transparency of 20% */
+/*--custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
+
+@import url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css);
+:root {
+--main-bg-color:black;
+--body-before:#70d7f61a;
+--body-after: #70d7f633;
+--logo: url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/alien/logo/nostromo3.png) center no-repeat;
+--text-color: #ffffff;
+--input-color: #ffffff;
+--link-color: #ffffff;
+--link-color-hover: #8f2809;
+--case-color: #ffffff;
+--button-text-color: #ffffff;
+--button-text-color-hover: #000;
+--button-color: #ffffff;
+--button-color-hover: #af0606;
+--selection-color: #8f2809;
+--custom-text-header:#ffffff;
+--custom-text-header-shadow:#ffffff;
+--custom-text-header-animation: textflicker;
+--input-font: 'Share Tech Mono', monospace;
+--text-font: 'Share Tech Mono', monospace;
+--loginbox-background-color: transparent;
+--text-shadow: 0 0 8px;
+--text-shadow-color: #ffffff;
+--box-shadow: 0 0 15px;
+}

CSS/addons/unraid/login-page/alien/retro-terminal/white.css

@@ -0,0 +1,31 @@
+/*_____________________WHITE_THEME______________________*/
+/*--body-before:#70d7f61a; /* This is the background that flickers, background uses a transparency of 10%, SET IT TO BLACK TO REMOVE FLICKER! */
+/*--body-after: #70d7f61a; /* This is the background that creates the crt lines, background uses a transparency of 20% */
+/*--custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
+
+@import url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css);
+:root {
+--main-bg-color:black;
+--body-before:#70d7f61a;
+--body-after: #70d7f633;
+--logo: url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/alien/logo/nostromo3.png) center no-repeat;
+--text-color: #ffffff;
+--input-color: #ffffff;
+--link-color: #ffffff;
+--link-color-hover: #8f2809;
+--case-color: #ffffff;
+--button-text-color: #ffffff;
+--button-text-color-hover: #000;
+--button-color: #ffffff;
+--button-color-hover: #af0606;
+--selection-color: #8f2809;
+--custom-text-header:#ffffff;
+--custom-text-header-shadow:#ffffff;
+--custom-text-header-animation: textflicker;
+--input-font: 'Share Tech Mono', monospace;
+--text-font: 'Share Tech Mono', monospace;
+--loginbox-background-color: transparent;
+--text-shadow: 0 0 8px;
+--text-shadow-color: #ffffff;
+--box-shadow: 0 0 15px;
+}

CSS/addons/unraid/login-page/fallout/fallout.css

@@ -0,0 +1,226 @@
+@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css";
+@import "https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap";
+@import "https://fonts.googleapis.com/css?family=VT323";
+:root {
+    --main-bg-color: url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/fallout/wallpaper/rocky-wall.png), url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/fallout/wallpaper/6Ua3u8.jpg) center center/cover no-repeat fixed;
+    --logo: url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/fallout/logo/vault.png) center no-repeat;
+    --text-color: #14F074;
+    --input-color: #14F074;
+    --link-color: #14F074;
+    --link-color-hover: #0C833D;
+    --case-color: #14F074;
+    --button-text-color: #14F074;
+    --button-text-color-hover: #FFFFFF;
+    --button-color: #14F074;
+    --button-color2: #0C833D;
+    --input-font: 'Share Tech Mono', monospace;
+    --text-font: 'Share Tech Mono', monospace;
+    --div-background-color-15: rgba(0, 0, 0, 0.25);
+
+    /* Replace the variables if you have a dark background  */
+    /* Light colors for dark backgrounds */
+    /*
+        --div-background-color-10: rgba(255, 255, 255, 0.1);
+        --div-background-color-15: rgba(255, 255, 255, 0.15);
+        --div-background-color-25: rgba(255, 255, 255, 0.25);
+        --div-background-color-35: rgba(255, 255, 255, 0.35);
+    https://www.transparenttextures.com/patterns/hexellence.png
+    https://www.transparenttextures.com/patterns/gplay.png
+    https://www.transparenttextures.com/patterns/simple-horizontal-light.png
+    https://www.colourlovers.com/palette/3428762/Fallout?widths=1
+    */
+    /*
+#!/bin/bash \
+sed -i -e '\@<style>@i\    <link rel="stylesheet" href="https:\/\/gilbn.github.io\/customfiles\/fallout.css">' /usr/local/emhttp/login.php
+
+# add video background
+#!/bin/bash \
+sed -i -e '\@<body>@a\ div class="background-wrap"><video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> <source src="https:\/\/gilbn.github.io\/customfiles\/VaultTecCRTLoop.mp4" type="video\/mp4">Video not supported<\/video><\/div>' /usr/local/emhttp/login.php
+    */
+}
+
+@media (max-width: 500px) {
+    #login {
+        -webkit-backdrop-filter: blur(0px);
+        backdrop-filter: blur(0px);
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: 100%;
+        width: 100%;
+        border-radius: none !important;
+    }
+    .background-wrap,#video-bg-elem  {display: none;}
+}
+
+html {
+    background: var(--main-bg-color) !important;
+}
+body {
+    background: var(--main-bg-color) !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+@media only screen and (max-width: 768px) {
+    #login {
+        min-width: 300px;
+    }
+}
+/*FOR VIDEO BACKGROUND*/
+.background-wrap {
+    position: fixed;
+    z-index: -1000;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+}
+#video-bg-elem {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-height: 100%;
+    min-width: 100%;
+}
+/*TEXT COLOR*/
+#login h1,
+#login h2,
+#login .error {
+    color: var(--text-color) !important;
+}
+#login a {
+    color: var(--link-color);
+}
+#login a:hover {
+    color: var(--link-color-hover);
+}
+#login input {
+    color: var(--input-color);
+}
+#login ::placeholder {
+    color: var(--input-color);
+}
+#login ::-webkit-input-placeholder {
+    color: var(--input-color);
+}
+#login ::-moz-placeholder {
+    color: var(--input-color);
+}
+#login :-ms-input-placeholder {
+    color: var(--input-color);
+}
+#login :-moz-placeholder {
+    color: var(--input-color);
+}
+#login input:focus::-webkit-input-placeholder {
+    color: transparent !important;
+}
+#login input:focus:-moz-placeholder {
+    color: transparent !important;
+}
+#login input:focus::-moz-placeholder {
+    color: transparent !important;
+}
+#login input:focus:-ms-input-placeholder {
+    color: transparent !important;
+}
+
+/*TEXT FONT*/
+#login h1,
+#login h2,
+#login a,
+#login .button,
+#login .error {
+    font-family: var(--text-font);
+}
+
+/* CASE COLOR */
+#login [class^='case-'],
+#login [class*=' case-'] {
+    font-family: cases!important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    color: var(--case-color);
+}
+/*INPUT FORMS*/
+#login [type=text],
+#login [type=password] {
+    font-family: var(--input-font);
+    background-color: rgba(0, 0, 0, 0.25);
+    border: 2px solid transparent;
+    text-transform: uppercase;
+    border-radius: 5px;
+}
+#login [type=text]:active,
+#login [type=text]:focus,
+#login [type=password]:active,
+#login [type=password]:focus {
+    font-family: var(--input-font);
+    background-color: rgba(0, 0, 0, 0.25);
+    border: 2px solid transparent;
+    text-transform: uppercase;
+
+}
+
+
+/*BUTTON*/
+#login .button {
+    color: var(--button-text-color);
+    background: linear-gradient(90deg, var(--button-color2) 0, var(--button-color)) 0 0 no-repeat, linear-gradient(90deg, var(--button-color2) 0, var(--button-color)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color2) 0, var(--button-color2)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color) 0, var(--button-color)) 100% 100% no-repeat;
+    background: -webkit-gradient(linear, left top, right top, from(var(--button-color2)), to(var(--button-color))) 0 0 no-repeat, -webkit-gradient(linear, left top, right top, from(var(--button-color2)), to(var(--button-color))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color2)), to(var(--button-color2))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color)), to(var(--button-color))) 100% 100% no-repeat;
+    background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
+}
+#login .button:hover {
+    color: var(--button-text-color-hover);
+    background-color: var(--button-color);
+    background: -webkit-gradient(linear, left top, right top, from(var(--button-color2)), to(var(--button-color)));
+    background: linear-gradient(90deg, var(--button-color2) 0, var(--button-color));
+}
+
+
+#login {
+    background: var(--div-background-color-15) !important;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    padding-top: 1rem;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) !;
+    -ms-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    margin: 0 !important;
+    text-transform: uppercase;
+    min-width: 300px;
+}
+
+#login .angle:after {
+    display: none;
+}
+#login .wordmark {
+    display: none;
+}
+
+#login .logo {
+    background: var(--logo);
+    background-size: contain;
+    padding: 2rem;
+    border-radius: 0;
+    margin: 0rem 1rem 0rem 1rem;
+}
+#login .error {
+    animation-name: shake;
+    animation-duration: .8s;
+}

CSS/themes/adguard/adguard-base.css

@@ -0,0 +1,460 @@
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/* 			      https://github.com/gilbN/theme.park			 */
+
+body {
+    background: var(--main-bg-color);
+    color: var(--text) !important;
+}
+
+/* Scrollbar */
+@media only screen and (min-width: 768px) {
+    html {
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+    }
+
+    body {
+        overflow-y: auto;
+        height: 100%;
+        background: var(--main-bg-color)
+    }
+}
+body *::-webkit-scrollbar-thumb {
+    background: hsla(0,0%,100%,.2);
+}
+::-webkit-scrollbar {
+    width: 14px;
+}
+
+::-webkit-scrollbar-thumb {
+    min-height: 50px;
+    border: 3px solid transparent;
+    border-radius: 8px;
+    background-color: hsla(0, 0%, 100%, .2);
+    background-clip: padding-box;
+}
+
+::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    min-height: 50px;
+    border: 3px solid transparent;
+    border-radius: 8px;
+    background-color: hsla(0, 0%, 100%, .5);
+    background-clip: padding-box;
+}
+
+/* TEXT */
+
+a {
+    color: var(--text)
+}
+
+a:hover {
+    color: var(--accent-color-hover);
+}
+
+a:-webkit-any-link:focus {
+    outline: none;
+}
+
+/* LOGIN PAGE */
+
+.login .login__form .text-center .h-6 {
+    filter: invert(1);
+}
+
+.login__form .card {
+    background: rgba(0, 0, 0, 0.08);
+    border: 1px solid rgb(0 0 0 / 0.08);
+}
+
+.login .btn-success:hover {
+    background-color: var(--button-color-hover);
+    border-color: var(--button-color-hover);
+    color: var(--text-hover);
+}
+
+.login .btn-link {
+    color: var(--text);
+}
+
+.login .btn-link:hover {
+    color: var(--text-hover);
+}
+
+.form__message--error {
+    color: #F44336;
+}
+
+/* HEADER */
+.header {
+    background: transparent;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+}
+
+.header-brand-img {
+    filter: invert(1);
+}
+
+.header .btn-outline-secondary {
+    color: var(--text);
+    background: var(--button-color);
+    border-color: var(--button-color);
+}
+
+.header .btn-outline-secondary:hover {
+    color: var(--text-hover);
+    background-color: var(--button-color-hover);
+}
+
+.nav-tabs .nav-link.active {
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+    background: transparent;
+}
+
+.header .nav-tabs .nav-link.active:hover {
+    border-color: var(--accent-color-hover) !important;
+    color: var(--accent-color-hover) !important;
+}
+
+.header a:not([href]):not([tabindex]) {
+    color: var(--text);
+    text-decoration: none;
+}
+
+.header .nav-tabs {
+    color: var(--text);
+}
+
+.header .nav-tabs .nav-link:hover:not(.disabled) {
+    border-color: var(--text-hover);
+    color: var(--text-hover);
+}
+
+/* FOOTER */
+.footer {
+    background: rgba(0, 0, 0, 0.08);
+    border-top: 1px solid rgba(255, 255, 255, 0.03);
+    color: var(--text);
+}
+
+.footer a:not(.btn) {
+    color: var(--text);
+}
+
+.footer .btn-outline-primary {
+    color: var(--button-color);
+    background-color: transparent;
+    background-image: none;
+    border-color: var(--button-color);
+}
+
+.footer .btn-outline-primary:hover {
+    color: var(--text);
+    background-color: var(--button-color-hover);
+    border-color: var(--button-color-hover);
+}
+
+/* MAIN PAGE */
+.header__row .mobile-menu {
+    background-color: transparent;
+}
+
+/* BUTTONS */
+.container .btn-outline-primary {
+    color: var(--text);
+    background-color: var(--button-color);
+    background-image: none;
+    border-color: var(--button-color);
+}
+
+.container .btn-outline-primary:hover {
+    color: var(--text-hover);
+    background-color: var(--button-color-hover);
+    border-color: var(--button-color-hover);
+}
+
+.tooltip-container {
+    background: var(--tooltip-bg);
+}
+
+/* CARDS*/
+.card {
+    background-color: rgb(255 255 255 / 8%);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--text);
+}
+
+.tooltip-custom__container {
+    background: var(--tooltip-bg);
+}
+
+.tooltip-custom__content-link {
+    color: var(--tooltip-link-color);
+}
+
+.card-wrap,
+.card-title-stats {
+    color: inherit;
+}
+
+.card-title-stats a {
+    text-decoration: underline;
+}
+
+.card-title-stats a:hover {
+    text-decoration: underline;
+    color: var(--accent-color-hover);
+}
+
+.card .icon--lightgray {
+    color: var(--text);
+}
+
+.card .logs__text {
+    color: var(--text);
+}
+
+.card .button__action {
+    background-color: transparent;
+}
+
+.card .btn-outline-danger {
+    color: #F44336;
+    background-color: transparent;
+    background-image: none;
+    border-color: #F44336;
+}
+
+.btn-outline-danger:hover {
+    color: #fff;
+    background-color: #F44336;
+    border-color: #F44336;
+}
+
+/* DROPDOWNS */
+.dropdown-menu {
+    color: var(--text);
+    background: var(--modal-bg-color);
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 40, 100, 0.12);
+    border-radius: 3px;
+}
+
+.dropdown-item {
+    color: var(--text);
+}
+
+.dropdown-item:hover,
+.dropdown-item:focus {
+    color: var(--text-hover);
+    text-decoration: none;
+    background-color: rgb(255 255 255 / 0.08);
+}
+.select__menu {
+    background: var(--modal-bg-color) !important;
+    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .5);
+}
+.select__option:hover  {
+    background: rgba(255, 255, 255, .08) !important;
+}
+.select__option  {
+    background: rgba(0, 0, 0, 0) !important;
+    border-bottom: solid rgba(255, 255, 255, .1) 1px;
+}
+.select__multi-value__remove {
+    color: black;
+}
+.basic-multi-select .select__control--is-focused, .basic-multi-select .select__control--is-focused:hover {
+    border-color: transparent !important;
+}
+
+/* SETTINGS */
+.checkbox__label-subtitle,
+.form__desc,
+.page-subtitle,
+.card-title small,
+.card-subtitle {
+    color: var(--text);
+}
+
+.dropdown-item.active,
+.dropdown-item:active {
+    background-color: rgb(0 0 0 / 25%);
+}
+
+.service__icon {
+    color: #eee;
+}
+
+/* LOGS */
+.logs__table {
+    background-color: rgb(255 255 255 / 8%);
+}
+
+.logs__text,
+.logs__row .list-unstyled li,
+.detailed-info,
+.icon--lightgray,
+.icon--gray,
+.loading__text {
+    color: var(--text)
+}
+
+.rt-tr-group.red {
+    background-color: rgb(244 67 54 / 30%);
+}
+
+.rt-tr-group.blue {
+    background-color: rgb(54 146 244 / 30%);
+}
+
+.ReactTable .rt-noData {
+    background: transparent;
+}
+
+.ReactTable .-loading,
+.ReactTable .-loading>div {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+.loading:before {
+    background-color: transparent;
+}
+
+.custom-select:focus {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+/* FORMS */
+.form-control--transparent {
+    color: var(--text);
+}
+
+.form-control--search {
+    outline: none;
+}
+
+.form-control:focus {
+    border-color: transparent;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background: #ffffff !important;
+}
+
+.icon--selected {
+    background-color: rgb(255 255 255 / 15%);
+    border: solid 1px transparent;
+}
+
+.tab__control,
+.tab__control--active {
+    color: var(--text);
+}
+
+/* BUTTONS */
+.btn-outline-secondary {
+    color: #c9c9c9;
+    border-color: #c9c9c9;
+}
+
+.btn-success,
+.btn-success.disabled,
+.btn-success:disabled {
+    background-color: var(--button-color);
+    border-color: var(--button-color);
+    color: var(--text);
+}
+
+.btn-success:hover {
+    color: var(--text-hover);
+    background-color: var(--button-color-hover);
+    border-color: var(--button-color-hover);
+}
+
+.btn-success:focus,
+.btn-success.focus {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.btn-secondary {
+    color: var(--text);
+    background-color: rgb(255 255 255 / 25%);
+    border-color: rgb(255 255 255 / 0%);
+    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
+}
+
+.btn-secondary:hover {
+    color: var(--text-hover);
+    background-color: var(--button-color-hover);
+    border-color: transparent;
+}
+
+/* MODALS */
+.modal-content {
+    background: var(--modal-bg-color);
+}
+
+.ReactModal__Overlay--after-open {
+    background-color: rgb(0 0 0 / 0.7) !important;
+}
+
+/* MOBILE */
+@media (max-width: 767px) {
+    .mobile-menu {
+        background: #1b1b1b !important;
+    }
+
+    .dropdown-menu {
+        background: #1f1f1f !important;
+    }
+
+    .ReactModal__Content {
+        background: var(--modal-bg-color) !important;
+        border: 1px solid transparent !important;
+    }
+}
+
+@media (max-width: 991px) {
+    .mobile-menu {
+        background: #1b1b1b !important;
+    }
+
+    .dropdown-menu {
+        background: #1f1f1f !important;
+    }
+}
+
+/* PLACEHOLDER TEXT */
+::placeholder {
+    color: var(--text);
+}
+
+:-moz-placeholder {
+    color: var(--text);
+}
+
+:-ms-input-placeholder {
+    color: var(--text);
+}
+
+::-webkit-input-placeholder {
+    color: var(--text);
+}

CSS/themes/adguard/aquamarine.css

@@ -0,0 +1,28 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* ADGUARD AQUAMARINE THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/adguard/adguard-base.css);
+:root {
+  --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+
+  --button-color: #009688;
+  --button-color-hover: #12afa0;
+  --accent-color:  #009688;
+  --accent-color-hover: #12afa0;
+  --tooltip-bg: #009688;
+  --tooltip-link-color: #f1c40f;
+  --text: #eee;
+  --text-hover: #fff;
+}

CSS/themes/adguard/dark.css

@@ -0,0 +1,28 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* ADGUARD DARK THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/adguard/adguard-base.css);
+:root {
+  --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+
+  --button-color: hsla(0,0%,100%,.15);
+  --button-color-hover: hsla(0,0%,100%,.30);
+  --accent-color:  rgba(255, 255, 255, 0.25);
+  --accent-color-hover: rgba(255, 255, 255, 0.45);
+  --tooltip-bg: #1f1f1f;
+  --tooltip-link-color: #f1c40f;
+  --text: #eee;
+  --text-hover: #fff;
+}

CSS/themes/adguard/hotline.css

@@ -0,0 +1,28 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* ADGUARD HOTLINE THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/adguard/adguard-base.css);
+:root {
+  --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
+
+  --button-color: hsla(0,0%,100%,.15);
+  --button-color-hover: hsla(0,0%,100%,.30);
+  --accent-color:  #F44336;
+  --accent-color-hover: #0b3161;
+  --tooltip-bg: #F44336;
+  --tooltip-link-color: #0b3161;
+  --text: #eee;
+  --text-hover: #fff;
+}

CSS/themes/adguard/organizr-dark.css

@@ -0,0 +1,28 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* ADGUARD ORGANIZR-DARK THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/adguard/adguard-base.css);
+:root {
+  --main-bg-color: #1f1f1f;
+  --modal-bg-color: #1b1b1b;
+
+  --button-color: #2cabe3;
+  --button-color-hover: rgb(44 171 227 / .8);
+  --accent-color:  #2cabe3;
+  --accent-color-hover: white;
+  --tooltip-bg: #1b1b1b;
+  --tooltip-link-color: #2cabe3;
+  --text: #eee;
+  --text-hover: #fff;
+  }

CSS/themes/adguard/plex.css

@@ -0,0 +1,28 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/* 			      https://github.com/gilbN/theme.park			 */
+
+/* ADGUARD PLEX THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/adguard/adguard-base.css);
+:root {
+  --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed;
+  --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed;
+
+  --button-color: #cc7b19;
+  --button-color-hover: #e59029;
+  --accent-color:  #e5a00d;
+  --accent-color-hover: #ffc107;
+  --tooltip-bg: #1f1f1f;
+  --tooltip-link-color: #e5a00d;
+  --text: #eee;
+  --text-hover: #fff;
+}

CSS/themes/adguard/space-gray.css

@@ -0,0 +1,28 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* ADGUARD SPACE GRAY THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/adguard/adguard-base.css);
+:root {
+  --main-bg-color:  radial-gradient( ellipse at center,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient( ellipse at top,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; 
+
+  --button-color: #607D8B;
+  --button-color-hover: #81a6b7;
+  --accent-color: #607D8B;
+  --accent-color-hover: #81a6b7;
+  --tooltip-bg: #607D8B;
+  --tooltip-link-color: #f1c40f;
+  --text: #eee;
+  --text-hover: #fff;
+}

CSS/themes/bazarr/aquamarine.css

@@ -16,4 +16,9 @@
 :root {
   --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
   --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+
+  --button-color: #009688;
+  --button-color-hover: #12afa0;
+  --accent-color:  #009688;
+  --accent-color-hover: #12afa0;
 }

CSS/themes/bazarr/dark.css

@@ -14,6 +14,11 @@
 /* BAZARR DARK THEME */
 @import url(https://gilbn.github.io/theme.park/CSS/themes/bazarr/bazarr-base.css);
 :root {
-  --main-bg-color: #1f1f1f;
-  --modal-bg-color: radial-gradient(ellipse at top, #1f1f1f 0%, #1f1f1f 100%) center center/cover no-repeat fixed;
+  --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+
+  --button-color: hsla(0,0%,100%,.15);
+  --button-color-hover: hsla(0,0%,100%,.30);
+  --accent-color:  rgba(255, 255, 255, 0.25);
+  --accent-color-hover: rgba(255, 255, 255, 0.45);
 }

CSS/themes/bazarr/hotline.css

@@ -16,4 +16,9 @@
 :root {
   --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
   --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
+
+  --button-color: hsla(0,0%,100%,.15);
+  --button-color-hover: hsla(0,0%,100%,.30);
+  --accent-color:  #F44336;
+  --accent-color-hover: #0b3161;
 }

CSS/themes/bazarr/organizr-dark.css

@@ -0,0 +1,24 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* BAZARR ORGANIZR-DARK THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/bazarr/bazarr-base.css);
+:root {
+  --main-bg-color: #1f1f1f;
+  --modal-bg-color: #1b1b1b;
+
+  --button-color: #2cabe3;
+  --button-color-hover: rgb(44 171 227 / .8);
+  --accent-color:  #2cabe3;
+  --accent-color-hover: white;
+}

CSS/themes/bazarr/plex.css

@@ -16,4 +16,9 @@
 :root {
   --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed;
   --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed;
+
+  --button-color: #cc7b19;
+  --button-color-hover: #e59029;
+  --accent-color:  #e5a00d;
+  --accent-color-hover: #ffc107;
 }

CSS/themes/bazarr/space-gray.css

@@ -16,4 +16,9 @@
 :root {
   --main-bg-color:  radial-gradient( ellipse at center,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;
   --modal-bg-color: radial-gradient( ellipse at top,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; 
+
+  --button-color: #607D8B;
+  --button-color-hover: #81a6b7;
+  --accent-color: #607D8B;
+  --accent-color-hover: #81a6b7;
 }

CSS/themes/bitwarden/aquamarine.css

@@ -0,0 +1,26 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* BITWARDEN AQUAMARINE THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/bitwarden/bitwarden-base.css);
+:root {
+  --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --button-color: #009688;
+  --button-color-hover: #12afa0;
+  --accent-color:  #12afa0;
+  --accent-color-hover: #fff;
+  --text: #eee;
+  --text-hover: #fff;
+  --link-color: #12afa0;
+}

CSS/themes/bitwarden/bitwarden-base.css

@@ -0,0 +1,176 @@
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/* 			      https://github.com/gilbN/theme.park			 */
+
+img.logo {
+    filter: invert(100);
+}
+body.layout_frontend,body {
+    background: var(--main-bg-color);
+    color: var(--text);
+}
+/* LINKS */
+a {
+    color: var(--link-color);
+}
+a:hover {
+    color: var(--link-color);
+    opacity: .8;
+}
+/* TEXT */
+.text-muted,.form-check-block .form-check-label > small,.modal-header small, .table {
+    color: var(--text) !important;
+    opacity: .8;
+}
+.table-hover tbody tr:hover {
+    color: var(--text-hover);
+    background-color: rgba(255, 255, 255, .08);
+}
+h3 {
+    color:white !important;
+}
+
+/* NAVBAR */
+.navbar {
+    background-color: rgb(0 0 0 / 25%) !important;
+}
+/* CARDS */
+.card {
+    background-color: rgba(255,255,255,0.07);
+}
+app-vault-groupings .card .card-body a {
+    color: var(--text);
+}
+app-vault-groupings .card li.active > a:first-of-type, app-vault-groupings .card li.active > div a:first-of-type,app-vault-groupings .card li.active > div > .fa {
+    color: var(--accent-color);
+}
+body > app-root > app-user-layout > app-tools > div > div > div.col-9 > app-password-generator > div.card.card-password.bg-light.my-4 {
+    background-color: rgb(0 0 0 / 15%) !important;
+}
+.password-number {
+    color: var(--accent-color);
+}
+/* MODALS */
+.modal-content,.modal-footer {
+    background: var(--modal-bg-color);
+}
+.close, .close:hover {
+    color: #fff;
+}
+.close:focus {
+    outline: none;
+}
+
+/* FORMS */
+.form-control:focus {
+    box-shadow: none;
+    border-color: transparent;
+}
+.form-control {
+    color: var(--text);
+    background-color: rgb(0 0 0 / 0.25);
+    border: 1px solid transparent;
+
+}
+.form-control:disabled, .form-control[readonly] {
+    background-color: rgb(255 255 255 / 50%);
+    opacity: 1;
+}
+/* DROPDOWN MENU */
+.dropdown-menu {
+    background: var(--modal-bg-color);
+    border: 1px solid transparent;
+    box-shadow: 3px 3px 10px rgba(0, 0, 0, .2);
+}
+.dropdown-item,.dropdown-item-text {
+    color: var(--text);
+}
+.dropdown-item:hover, .dropdown-item:focus {
+    color: var(--text-hover);
+    text-decoration: none;
+    background-color: rgb(255 255 255 / 0.08);
+}
+a.text-danger:hover, a.text-danger:focus {
+    color: #dd4b39 !important;
+    background-color: rgb(255 255 255 / 0.08) !important;
+}
+.dropdown-menu .text-danger {
+    font-weight: bold !important;
+    background: rgb(0 0 0 / 20%) !important;
+}
+/* SETTINGS */
+.list-group-item.active {
+    color: var(--text);
+    background-color: rgb(255 255 255 / 10%);
+    border-left: 3px solid var(--accent-color);
+}
+.callout {
+    background-color: rgb(255 255 255 / 15%);
+}
+
+.list-group-item {
+    background-color: rgb(0 0 0 / 25%);
+    border: 1px solid rgb(255 255 255 / 8%);
+}
+/* BUTTONS */
+.btn-link {
+    color: var(--button-color);
+}
+.btn-link:hover { 
+    color: var(--button-color);
+    opacity: .8;
+    transition: 0.15s;
+}
+.btn-primary {
+    background-color: var(--button-color);
+    border-color: var(--button-color);
+}
+.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active {
+    background-color: var(--button-color);
+    opacity: .8;
+    transition: 0.15s;
+    border-color: var(--button-color)
+}
+.btn-primary:focus, .swal2-popup .swal2-actions button.swal2-confirm:focus, .btn-primary.focus, .swal2-popup .swal2-actions button.focus.swal2-confirm,
+.btn-primary:not(:disabled):not(.disabled):active:focus, .swal2-popup .swal2-actions button.swal2-confirm:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .swal2-popup .swal2-actions button.swal2-confirm:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus, .swal2-popup .swal2-actions .show > button.dropdown-toggle.swal2-confirm:focus{
+    box-shadow: none;
+}
+.btn[class*="btn-outline-"]:not(:hover), .swal2-popup .swal2-actions button[class*="btn-outline-"]:not(:hover) {
+    border-color: var(--button-color);
+    background-color: var(--button-color);
+    color: var(--text-hover);
+}
+.btn-outline-secondary:hover, .swal2-popup .swal2-actions button.swal2-cancel:hover {
+    color: var(--text-hover);
+    background-color: var(--button-color-hover);
+    border-color: var(--button-color-hover);
+}
+.btn-outline-secondary:hover:not(:disabled), .swal2-popup .swal2-actions button.swal2-cancel:hover:not(:disabled) {
+    color: var(--text-hover);
+}
+.btn-outline-primary:hover {
+    color: var(--text-hover);
+    background-color: var(--button-color-hover);
+    border-color: var(--button-color-hover);
+}
+.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
+    color: #fff;
+    background-color: var(--button-color-hover);
+    border-color: var(--button-color-hover);
+}
+.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
+    box-shadow: none;
+}
+.btn-outline-secondary:not(:disabled):not(.disabled):active, .swal2-popup .swal2-actions button.swal2-cancel:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .swal2-popup .swal2-actions button.swal2-cancel:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle, .swal2-popup .swal2-actions .show > button.dropdown-toggle.swal2-cancel {
+    color: var(--text-hover);
+    background-color: var(--button-color-hover);
+    border-color: var(--button-color-hover);
+}

CSS/themes/bitwarden/dark.css

@@ -0,0 +1,26 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* BITWARDEN DARK THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/bitwarden/bitwarden-base.css);
+:root {
+  --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+  --button-color: hsla(0,0%,100%,.15);
+  --button-color-hover: hsla(0,0%,100%,.30);
+  --accent-color:  #fff;
+  --accent-color-hover: rgba(255, 255, 255, 0.45);
+  --text: #eee;
+  --text-hover: #fff;
+  --link-hover: rgba(255, 255, 255, 0.45);
+}

CSS/themes/bitwarden/hotline.css

@@ -0,0 +1,26 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* BITWARDEN HOTLINE THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/bitwarden/bitwarden-base.css);
+:root {
+  --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --button-color: hsla(0,0%,100%,.15);
+  --button-color-hover: hsla(0,0%,100%,.30);
+  --accent-color:  #F44336;
+  --accent-color-hover: #0b3161;
+  --text: #eee;
+  --text-hover: #fff;
+  --link-hover: #F44336;
+}

CSS/themes/bitwarden/organizr-dark.css

@@ -0,0 +1,26 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* BITWARDEN ORGANIZR-DARK THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/bitwarden/bitwarden-base.css);
+:root {
+  --main-bg-color: #1f1f1f;
+  --modal-bg-color: #1b1b1b;
+  --button-color: #2cabe3;
+  --button-color-hover: rgb(44 171 227 / .8);
+  --accent-color:#2cabe3;
+  --accent-color-hover: #fff;
+  --text: #eee;
+  --text-hover: #fff;
+  --link-color: #2cabe3;
+}

CSS/themes/bitwarden/plex.css

@@ -0,0 +1,26 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/* 			      https://github.com/gilbN/theme.park			 */
+
+/* BITWARDEN PLEX THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/bitwarden/bitwarden-base.css);
+:root {
+  --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed;
+  --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed;
+  --button-color: #cc7b19;
+  --button-color-hover: #e59029;
+  --accent-color:  #e5a00d;
+  --accent-color-hover: #ffc107;
+  --text: #eee;
+  --text-hover: #fff;
+  --link-color:#fff;
+}

CSS/themes/bitwarden/space-gray.css

@@ -0,0 +1,26 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* BITWARDEN SPACE GRAY THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/bitwarden/bitwarden-base.css);
+:root {
+  --main-bg-color:  radial-gradient( ellipse at center,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient( ellipse at top,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; 
+  --button-color: #607D8B;
+  --button-color-hover: #81a6b7;
+  --accent-color: #81a6b7;
+  --accent-color-hover: #81a6b7;
+  --text: #eee;
+  --text-hover: #fff;
+  --link-color: #81a6b7;
+}

CSS/themes/calibreweb/aquamarine.css

@@ -0,0 +1,24 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* CALIBRE-WEB AQUAMARINE THEME */
+/* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/calibreweb/calibreweb-base.css);
+:root {
+  --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --color-primary: #12afa0;
+  --color-secondary: #009688;
+  --color-secondary-hover: #12afa0;
+  --color-background-mobile: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+}

CSS/themes/calibreweb/calibreweb-base.css

@@ -0,0 +1,34 @@
+ 
+  
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* "Re-skin" of CaliBlur https://github.com/leram84/layer.Cake/tree/master/caliBlur */
+/* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */
+body:not(.read-frame) {
+    background: var(--main-bg-color) !important;
+    background-image: none;
+}
+.blur-wrapper:after {
+    background: var(--modal-bg-color) !important;
+}
+body>.container-fluid {
+    background: var(--main-bg-color);
+}
+body.login:not(.read-frame), body.shelfcreate, body.shelfedit {
+    background: var(--main-bg-color) !important;
+}
+@media only screen and (max-width: 767px) {
+    .navbar-collapse.collapse {
+        background: var(--modal-bg-color) !important;
+        }
+    }

CSS/themes/calibreweb/dark.css

@@ -0,0 +1,24 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* CALIBRE-WEB DARK THEME */
+/* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/calibreweb/calibreweb-base.css);
+:root {
+  --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+  --color-primary: #F9BE03;
+  --color-secondary: #CC7B19;
+  --color-secondary-hover: #E59029;
+  --color-background-mobile: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+}

CSS/themes/calibreweb/hotline.css

@@ -0,0 +1,24 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* CALIBRE-WEB HOTLINE THEME */
+/* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/calibreweb/calibreweb-base.css);
+:root {
+  --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --color-primary: #ff6155;
+  --color-secondary: #F44336;
+  --color-secondary-hover: #0b3161;
+  --color-background-mobile: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
+}

CSS/themes/calibreweb/organizr-dark.css

@@ -0,0 +1,24 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* CALIBRE-WEB ORGANIZR-DARK THEME */
+/* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/calibreweb/calibreweb-base.css);
+:root {
+  --main-bg-color: #1f1f1f;
+  --modal-bg-color: #1b1b1b;
+  --color-primary: #2cabe3;
+  --color-secondary: #2cabe3;
+  --color-secondary-hover: rgb(44 171 227 / .8);
+  --color-background-mobile: #1f1f1f;
+}

CSS/themes/calibreweb/space-gray.css

@@ -0,0 +1,24 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* CALIBRE-WEB SPACE GRAY THEME */
+/* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/calibreweb/calibreweb-base.css);
+:root {
+  --main-bg-color:  radial-gradient( ellipse at center,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient( ellipse at top,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; 
+  --color-primary: #c3dde8;
+  --color-secondary: #81a6b7;
+  --color-secondary-hover: #607D8B;
+  --color-background-mobile: radial-gradient( ellipse at top,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;
+}

CSS/themes/deluge/aquamarine.css

@@ -16,5 +16,7 @@
 :root {
   --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
   --modal-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
-  --progress-color: #4c95af; 
+  --progress-color: #009688; 
+  --button-color: #009688;
+  --button-color-hover: #12afa0;
 }

CSS/themes/deluge/dark.css

@@ -14,7 +14,9 @@
 /* DELUGE DARK THEME */
 @import url(https://gilbn.github.io/theme.park/CSS/themes/deluge/deluge-base.css);
 :root {
-  --main-bg-color: #1f1f1f;
-  --modal-bg-color: radial-gradient(ellipse at top, #1f1f1f 0%, #1f1f1f 100%) center center/cover no-repeat fixed;
+  --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
   --progress-color: #3d3d3d;
-  }
+  --button-color: hsla(0,0%,100%,.15);
+  --button-color-hover: hsla(0,0%,100%,.30);
+}

CSS/themes/deluge/deluge-base.css

@@ -671,28 +671,31 @@
       font-size: 16px;
       font-weight: normal;
   }
+  #tbar-deluge-text * {
+    color: white !important;
+  }
   
   /* Buttons hover */
   .x-btn{
       font:normal 11px 'Roboto', tahoma, verdana, helvetica;
   }
   .x-window-bc .x-window-footer .x-btn {
-      background-color: rgba(255, 255, 255, 0.08);
+      background-color: var(--button-color);
   }
   .x-window-bc .x-window-footer .x-btn:hover {
-      background-color: rgba(255, 255, 255, 0.15);
+      background-color: var(--button-color-hover);
   }
   .x-form-file-wrap .x-btn {
       position: absolute;
       right: 0;
       z-index: 1;
-      background: rgba(255, 255, 255, 0.08);
+      background: var(--button-color);
   }
   .x-form-file-wrap:hover .x-form-file-btn:hover .x-btn:hover {
       position: absolute;
       right: 0;
       z-index: 1;
-      background: rgba(255, 255, 255, 0.15);
+      background: var(--button-color-hover);
   }
   
   .x-btn button{
@@ -2096,12 +2099,12 @@
   
   .x-progress-text {
       font-size:11px;
-      font-weight:bold;
+      font-weight:normal;
       color:#fff !important;
   }
   
   .x-progress-text-back {
-      color:#5F5F5F !important;
+      color:#fff !important;
   }
   .x-list-header {
       background-color: rgba(0, 0, 0, 0.25);