Adds Nord theme-option + some fixes (#265)

* plex base badge color fix

* addons_json fixes

* pep8 formatting

* themes.json update

* update backslash note in custom_text_header.js

* fix for #255

* addon link fix

* mylar3 base init

* mylar3

* pr template link fix

* formatting

* more mylar3 stuff

* mylar3 base done..I think.prob not..

* mylar login page

* mylar3 readme

* theme.json update

* adguard form/button fixes

* url fix

* Update portainer-base.css (#262)

* Develop (#256)

* plex base badge color fix

* addons_json fixes

* pep8 formatting

* themes.json update

* update backslash note in custom_text_header.js

* Closes #255

* themes.json

* Adds mylar 3 (#261)

* plex base badge color fix

* addons_json fixes

* pep8 formatting

* themes.json update

* update backslash note in custom_text_header.js

* fix for #255

* addon link fix

* mylar3 base init

* mylar3

* pr template link fix

* formatting

* more mylar3 stuff

* mylar3 base done..I think.prob not..

* mylar login page

* mylar3 readme

* theme.json update

* themes.json

* mylar3 dockermod

* Update README.md

* Update index.html

* Update portainer-base.css

Fix for #259

Co-authored-by: GilbN <[email protected]>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: GilbN <[email protected]>

* removed json from develop

* portainer datatable searchbar bg fix

* portainer form-control importaint

* added nord style

* bazarr header fix

* unraid button fix

* nord style updates

* added .deprecated file to deprecated apps

* only add non deprecated apps to themes.json

* update theme-park.dev with new theme option

Co-authored-by: Dulanic <[email protected]>
Co-authored-by: github-actions <[email protected]>

CSS/themes/bazarr/bazarr-base.css

@@ -309,28 +309,28 @@ label,
 
 /* PAGES */
 .content-header.bg-dark {
-    background: var(--main-bg-color);
-    background-repeat: repeat, no-repeat;
-    background-attachment: fixed, fixed;
-    background-position: center center, center center;
-    background-size: auto, cover;
-    -webkit-background-size: auto, cover;
-    -moz-background-size: auto, cover;
-    -o-background-size: auto, cover;
+    background: var(--main-bg-color) !important;
+    background-repeat: repeat, no-repeat !important;
+    background-attachment: fixed, fixed !important;
+    background-position: center center, center center !important;
+    background-size: auto, cover !important;
+    -webkit-background-size: auto, cover !important;
+    -moz-background-size: auto, cover !important;
+    -o-background-size: auto, cover !important;
     border-bottom: solid 1px rgba(255, 255, 255, .1);
 
 }
 
 /* LOGIN */
 .bg-light {
     background: var(--main-bg-color) !important;
-    background-repeat: repeat, no-repeat;
-    background-attachment: fixed, fixed;
-    background-position: center center, center center;
-    background-size: auto, cover;
-    -webkit-background-size: auto, cover;
-    -moz-background-size: auto, cover;
-    -o-background-size: auto, cover;
+    background-repeat: repeat, no-repeat !important;
+    background-attachment: fixed, fixed !important;
+    background-position: center center, center center !important;
+    background-size: auto, cover !important;
+    -webkit-background-size: auto, cover !important;
+    -moz-background-size: auto, cover !important;
+    -o-background-size: auto, cover !important;
 }
 
 .auth-card {

CSS/themes/portainer/portainer-base.css

@@ -233,6 +233,17 @@ ul.sidebar .sidebar-title {
     color: var(--text);
 }
 
+.datatable .searchBar {
+    border-top: 1px solid rgba(255, 255, 255, .1);
+    border-bottom: 1px solid rgba(255, 255, 255, .1);
+    padding: 8px;
+    background: rgba(255, 255, 255, .15);
+}
+
+.datatable .searchBar:focus-within {
+    background:rgba(255, 255, 255, .25);
+    color: var(--text-hover);
+}
 
 /* TABLE */
 
@@ -424,7 +435,7 @@ fieldset[disabled] .btn-primary:hover {
 /* FORM CONTROL */
 
 .form-control {
-    background-color: rgba(255, 255, 255, 0.15);
+    background-color: rgba(255, 255, 255, 0.15) !important;
     border: 1px solid transparent;
 }
 

CSS/themes/unraid/unraid-base.css

@@ -221,7 +221,7 @@ a.button,
 .sweet-alert button,
 #template button[type=button],
 #template button {
-    color: var(--button-text);
+    color: var(--text);
     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;

CSS/variables/nord.css

@@ -0,0 +1,30 @@
+:root {
+  --main-bg-color: #2E3440;
+
+  --modal-bg-color: #3B4252;
+  --modal-header-color: #434C5E;
+  --modal-footer-color: #434C5E;
+
+  --drop-down-menu-bg: #3B4252;
+
+  --button-color: #79b8ca;
+  --button-color-hover: #79b8cacc ;
+  --button-text: #2E3440;
+  --button-text-hover: #D8DEE9;
+
+  --accent-color: 121, 184, 202;
+  --accent-color-hover: rgb(var(--accent-color),.8);
+  --link-color: #81A1C1;
+  --link-color-hover: #88C0D0;
+  --label-text-color: #222730;
+
+  --text:#D8DEE9;
+  --text-hover: #ECEFF4;
+  --text-muted: #81A1C1;
+
+  /*Specials*/
+  --arr-queue-color: #A3BE8C; /* Servarr apps + Bazarr*/
+  --plex-poster-unwatched: #D08770;
+  --petio-spinner: invert(62%) sepia(8%) saturate(998%) hue-rotate(259deg) brightness(97%) contrast(87%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+  --gitea-color-primary-dark-4: 121, 184, 202;
+  }

Resources/landing-page/css/custom.css

@@ -352,4 +352,8 @@ p {
 
 #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.hotpink-hover {
     background: linear-gradient(45deg, #fb3f62 0%, #204c80 37%, #004249 97%);
+}
+
+#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.nord-hover {
+    background: #2E3440;
 }

Resources/landing-page/js/scripts.js

@@ -73,7 +73,7 @@
 
 // load random css stylesheet
 const themes = ["aquamarine","hotline","dark","organizr-dark","dracula","overseerr",
-"plex","space-gray","hotpink","onedark"];
+"plex","space-gray","hotpink","onedark","nord"];
 var random = themes[~~(Math.random() * themes.length)];
 function injectTheme(theme,container="head") {
     if (container === "head") {
@@ -88,5 +88,19 @@ function injectTheme(theme,container="head") {
     html_element.appendChild(link);
   }
 
-  injectTheme(random);
+  // Add updated theme count. 
+  function addThemeCount() {
+  let themeJsonUrl = "https://theme-park.dev/themes.json"
+  return fetch(themeJsonUrl)
+  .then(response => {
+      return response.json();
+  }).then(json => {
+      document.getElementById("themeCount").innerHTML = `
+    theme.park contains ${Object.keys(json.applications).length} themed applications, with css <a
+                                href="https://docs.theme-park.dev/themes/addons/">addons</a> on certain themes.`  
+  })
+}
+
+injectTheme(random);
+addThemeCount();
 

index.html

@@ -21,7 +21,7 @@
     <!-- Core theme CSS (includes Bootstrap)-->
     <link href="Resources/landing-page/css/styles.css?v=1.1" rel="stylesheet" />
     <link rel="stylesheet" href="Resources/landing-page/css/jquery-bg-slideshow.css">
-    <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=1.9">
+    <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=2">
 </head>
 
 <body id="page-top">
@@ -86,8 +86,7 @@ <h1 class="text-uppercase text-white font-weight-bold">Custom themes for your fa
                 <div class="col-lg-8 text-center">
                     <h2 class="text-white mt-0">Over 40 themed applications!</h2>
                     <hr class="divider light my-4" />
-                    <p class="text-white-50 mb-1">theme.park contains 46 themed applications, with css <a
-                            href="https://docs.theme-park.dev/themes/addons/">addons</a> on certain themes. </p>
+                    <p class="text-white-50 mb-1" id=themeCount>...</p>
                     <p class="text-white-50 mb-1">Installation methods include custom <a
                             href="https://blog.linuxserver.io/2019/09/14/customizing-our-containers/">docker mods</a>
                         for <a href="https://linuxserver.io">linuxserver.io</a> containers, </p>
@@ -471,6 +470,15 @@ <h2 class="text-center mt-0">Available theme options</h2>
                         </div>
                     </a>
                 </div>
+                <div class="col-lg-4 col-sm-6 p-1">
+                    <a class="portfolio-box" href="Resources/landing-page/assets/img/nord.png">
+                        <img class="img-fluid" src="Resources/landing-page/assets/img/nord-small.jpg" alt="..." />
+                        <div class="portfolio-box-caption p-3 nord-hover">
+                            <div class="project-category text-white-50">Theme</div>
+                            <div class="project-name">Nord</div>
+                        </div>
+                    </a>
+                </div>
                 <div class="col-lg-4 col-sm-6 p-1">
                     <a class="portfolio-box" href="Resources/landing-page/assets/img/aquamarine.png">
                         <img class="img-fluid" src="Resources/landing-page/assets/img/aquamarine-small.jpg" alt="..." />
@@ -550,7 +558,7 @@ <h2 class="text-center mt-0">Available theme options</h2>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
     <!-- Core theme JS-->
-    <script src="Resources/landing-page/js/scripts.js?v=1.1"></script>
+    <script src="Resources/landing-page/js/scripts.js?v=1.2"></script>
     <script src="Resources/landing-page/js/jquery-bg-slideshow.js?v=1"></script>
     <script type="text/javascript">
         $(function () {

themes.py

@@ -86,7 +86,7 @@ def create_json(app_folders: list = None, themes: list = None, no_sub_folders=Fa
                     app: {
                         "base_css": f"https://{DOMAIN}/CSS/themes/{app}/{app}-base.css?sha={SHAS.get(f'{app}-base.css')}",
                         "addons": ADDONS["addons"][app] if app in ADDONS["addons"] else {}
-                    } for app in app_folders
+                    } for app in app_folders if not isfile(f'./CSS/themes/{app}/.deprecated')
                 }
             }
             )