up

custom_overlay.css

@@ -0,0 +1,26 @@
+/*
+===============================================================================
+ This file may contain extra CSS rules loaded on all apps page (*if* the app
+ nginx's conf does include the appropriate snippet) for the small YunoHost
+ button in bottom-right corner + portal overlay.
+
+ The yunohost button corresponds to : #ynh-overlay-switch
+ The yunohost portal overlay / iframe corresponds to : #ynh-overlay
+
+ BE CAREFUL that you should *not* add too-general rules that apply to
+ non-yunohost elements (for instance all 'a' or 'p' elements...) as it will
+ likely break app's rendering
+===============================================================================
+*/
+
+#ynh-overlay-switch {
+  /* FIXME : idk if this is an issue or not to have /yunohost/sso hard-coded here */
+  background-image: url("/yunohost/sso/assets/img/logo-ynh.svg");
+  border-color: #eee;
+  background-color: #eee;
+}
+
+#ynh-overlay-switch:hover {
+  border-color: #ccc;
+  background-color: #ccc;
+}

custom_portal.css

@@ -0,0 +1,179 @@
+/*
+===============================================================================
+ This file contain extra CSS rules to customize the YunoHost user portal and
+ can be used to customize app tiles, buttons, etc...
+===============================================================================
+*/
+
+body {
+   background: #fff;
+}
+
+#ynh-logo {
+  background-image: url("../../img/logo-ynh.svg");
+}
+
+.login-form .form-group {
+  border: 1px solid #bbb;
+}
+
+.user-container,
+.user-menu a,
+.link-btn,
+.footer a {
+   color: #555;
+}
+
+.user-menu a:hover,
+.footer a:hover {
+   color: #000;
+}
+
+.form-text:disabled:hover {
+   background: #797b83;
+}
+
+.link-btn,
+.link-btn:hover {
+   background: none;
+}
+
+
+.bluebg {
+    background: #3498DB!important;
+}
+.bluebg:hover:after,
+.bluebg:focus:after,
+.bluebg:hover:before,
+.bluebg:focus:before {
+    background: #16527A!important;
+}
+
+.purplebg {
+    background: #9B59B6!important;
+}
+.purplebg:hover:after,
+.purplebg:focus:after,
+.purplebg:hover:before,
+.purplebg:focus:before {
+    background: #532C64!important;
+}
+
+.redbg {
+    background: #E74C3C!important;
+}
+.redbg:hover:after,
+.redbg:focus:after,
+.redbg:hover:before,
+.redbg:focus:before {
+    background: #921E12!important;
+}
+
+.orangebg {
+    background: #F39C12!important;
+}
+.orangebg:hover:after,
+.orangebg:focus:after,
+.orangebg:hover:before,
+.orangebg:focus:before {
+    background: #7F5006!important;
+}
+
+.greenbg {
+    background: #2ECC71!important;
+}
+.greenbg:hover:after,
+.greenbg:focus:after,
+.greenbg:hover:before,
+.greenbg:focus:before {
+    background: #176437!important;
+}
+
+.darkbluebg {
+    background: #34495E!important;
+}
+.darkbluebg:hover:after,
+.darkbluebg:focus:after,
+.darkbluebg:hover:before,
+.darkbluebg:focus:before {
+    background: #07090C!important;
+}
+
+.lightbluebg {
+    background: #6A93D4!important;
+}
+.lightbluebg:hover:after,
+.lightbluebg:focus:after,
+.lightbluebg:hover:before,
+.lightbluebg:focus:before {
+    background: #2B5394!important;
+}
+
+.yellowbg {
+    background: #F1C40F!important;
+}
+.yellowbg:hover:after,
+.yellowbg:focus:after,
+.yellowbg:hover:before,
+.yellowbg:focus:before {
+    background: #796307!important;
+}
+
+
+.lightpinkbg {
+    background: #F76F87!important;
+}
+.lightpinkbg:hover:after,
+.lightpinkbg:focus:after,
+.lightpinkbg:hover:before,
+.lightpinkbg:focus:before {
+    background: #DA0C31!important;
+}
+
+/* Following colors are not used yet */
+.pinkbg {
+    background: #D66D92!important;
+}
+.pinkbg:hover:after,
+.pinkbg:focus:after,
+.pinkbg:hover:before,
+.pinkbg:focus:before {
+    background: #992B52!important;
+}
+
+.turquoisebg {
+    background: #1ABC9C!important;
+}
+.turquoisebg:hover:after,
+.turquoisebg:focus:after,
+.turquoisebg:hover:before,
+.turquoisebg:focus:before {
+    background: #0B4C3F!important;
+}
+.lightyellow {
+    background: #FFC973!important;
+}
+.lightyellow:hover:after,
+.lightyellow:focus:after,
+.lightyellow:hover:before,
+.lightyellow:focus:before {
+    background: #F39500!important;
+}
+.lightgreen {
+    background: #B5F36D!important;
+}
+.lightgreen:hover:after,
+.lightgreen:focus:after,
+.lightgreen:hover:before,
+.lightgreen:focus:before {
+    background: #77CF11!important;
+}
+.purpledarkbg {
+    background: #8E44AD!important;
+}
+.purpledarkbg:hover:after,
+.purpledarkbg:focus:after,
+.purpledarkbg:hover:before,
+.purpledarkbg:focus:before {
+    background: #432051!important;
+}

custom_portal.js

@@ -0,0 +1,40 @@
+/*
+===============================================================================
+ This JS file may be used to customize the YunoHost user portal *and* also
+ will be loaded in all app pages if the app nginx's conf does include the
+ appropriate snippet.
+
+ You can monkeypatch init_portal (loading of the user portal) and
+ init_portal_button_and_overlay (loading of the button and overlay...) to do
+ custom stuff
+===============================================================================
+*/
+
+var app_tile_colors = ['redbg','purpledarkbg','darkbluebg','orangebg','greenbg', 'yellowbg','lightpinkbg','pinkbg','turquoisebg','lightbluebg', '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]);
+}
+
+// Monkeypatch init_portal to customize the app tile style
+init_portal_original = init_portal;
+init_portal = function()
+{
+    init_portal_original();
+    Array.each(document.getElementsByClassName("app-tile"), set_app_tile_style);
+}
+
+/*
+ * Monkey patching example to do custom stuff when loading inside an app
+ *
+init_portal_button_and_overlay_original = init_portal_button_and_overlay;
+init_portal_button_and_overlay = function()
+{
+    init_portal_button_and_overlay_original();
+    // Custom stuff to do when loading inside an app
+}
+*/