move styling of tiles to custom.js

portal/assets/js/ynhpanel.js

@@ -324,7 +324,8 @@ function init_portal()
   });
 
   Array.each(document.getElementsByClassName("app-tile"), function(el) {
-        set_app_tile_style(el);
+        // Set first-letter data attribute.
+        el.querySelector('.first-letter').innerHTML = el.getAttribute("data-appname").substring(0, 2);
         // handle app links so they work both in plain info page and in the info iframe called from ynhpanel.js
         window.addEvent(el, 'click', function(event) {
             // if asked to open in new tab
@@ -342,17 +343,6 @@ function init_portal()
   });
 }
 
-var app_tile_colors = ['redbg','purpledarkbg','darkbluebg','orangebg','greenbg','darkbluebg','purpledarkbg','yellowbg','lightpinkbg','pinkbg','turquoisebg','yellowbg','lightbluebg','purpledarkbg', 'bluebg'];
-function set_app_tile_style(el)
-{
-    // Select a color value from the App label
-    randomColorNumber = parseInt(el.textContent, 36) % app_tile_colors.length;
-    // Add color class.
-    el.classList.add(app_tile_colors[randomColorNumber]);
-    // Set first-letter data attribute.
-    el.querySelector('.first-letter').innerHTML = el.getAttribute("data-appname").substring(0, 2);
-}
-
 function tweak_portal_when_in_iframe()
 {
     // Set class to body to show we're in overlay

portal/assets/themes/default/custom.js

@@ -0,0 +1,11 @@
+var app_tile_colors = ['redbg','purpledarkbg','darkbluebg','orangebg','greenbg','darkbluebg','purpledarkbg','yellowbg','lightpinkbg','pinkbg','turquoisebg','yellowbg','lightbluebg','purpledarkbg', 'bluebg'];
+
+function set_app_tile_style(el)
+{
+    // Select a color value from the App label
+    randomColorNumber = parseInt(el.textContent, 36) % app_tile_colors.length;
+    // Add color class.
+    el.classList.add(app_tile_colors[randomColorNumber]);
+}
+
+Array.each(document.getElementsByClassName("app-tile"), set_app_tile_style);

portal/assets/themes/vapor/custom.css

@@ -85,20 +85,7 @@ input.btn.classic-btn.large-btn:hover,
 }
 
 /* There are no colors, there is only vapor! */
-.bluebg,
-.purplebg,
-.orangebg,
-.redbg,
-.greenbg,
-.darkbluebg,
-.lightbluebg,
-.yellowbg,
-.lightpinkbg,
-.pinkbg,
-.turquoisebg,
-.lightyellow,
-.lightgreen,
-.purpledarkbg,
+.app-tile,
 .form-group input,
 .form-group label,
 a.btn:hover,
@@ -107,61 +94,9 @@ a.btn:hover,
     border: none;
 }
 
-.bluebg:hover:after,
-.bluebg:focus:after,
-.bluebg:hover:before,
-.bluebg:focus:before,
-.purplebg:hover:after,
-.purplebg:focus:after,
-.purplebg:hover:before,
-.purplebg:focus:before,
-.orangebg:hover:after,
-.orangebg:focus:after,
-.orangebg:hover:before,
-.orangebg:focus:before,
-.redbg:hover:after,
-.redbg:focus:after,
-.redbg:hover:before,
-.redbg:focus:before,
-.greenbg:hover:after,
-.greenbg:focus:after,
-.greenbg:hover:before,
-.greenbg:focus:before,
-.darkbluebg:hover:after,
-.darkbluebg:focus:after,
-.darkbluebg:hover:before,
-.darkbluebg:focus:before,
-.lightbluebg:hover:after,
-.lightbluebg:focus:after,
-.lightbluebg:hover:before,
-.lightbluebg:focus:before,
-.yellowbg:hover:after,
-.yellowbg:focus:after,
-.yellowbg:hover:before,
-.yellowbg:focus:before,
-.lightpinkbg:hover:after,
-.lightpinkbg:focus:after,
-.lightpinkbg:hover:before,
-.lightpinkbg:focus:before,
-.pinkbg:hover:after,
-.pinkbg:focus:after,
-.pinkbg:hover:before,
-.pinkbg:focus:before,
-.turquoisebg:hover:after,
-.turquoisebg:focus:after,
-.turquoisebg:hover:before,
-.turquoisebg:focus:before,
-.lightyellow:hover:after,
-.lightyellow:focus:after,
-.lightyellow:hover:before,
-.lightyellow:focus:before,
-.lightgreen:hover:after,
-.lightgreen:focus:after,
-.lightgreen:hover:before,
-.lightgreen:focus:before,
-.purpledarkbg:hover:after,
-.purpledarkbg:focus:after,
-.purpledarkbg:hover:before,
-.purpledarkbg:focus:before {
+.app-tile:hover:after,
+.app-tile:focus:after,
+.app-tile:hover:before,
+.app-tile:focus:before {
     background: rgba(200, 200, 200, 0.4) !important;
 }