From 36fd40fa9135b71a7e88cc75bae7bceda37fba6f Mon Sep 17 00:00:00 2001 From: Alexandre Aubin Date: Tue, 19 Mar 2019 00:29:25 +0100 Subject: [PATCH] Add default theme stuff --- .../assets/themes/default/custom_overlay.css | 14 ++ .../assets/themes/default/custom_portal.css | 145 ++++++++++++++++++ portal/assets/themes/default/custom_portal.js | 40 +++++ 3 files changed, 199 insertions(+) create mode 100644 portal/assets/themes/default/custom_overlay.css create mode 100644 portal/assets/themes/default/custom_portal.css create mode 100644 portal/assets/themes/default/custom_portal.js diff --git a/portal/assets/themes/default/custom_overlay.css b/portal/assets/themes/default/custom_overlay.css new file mode 100644 index 0000000..ce40a24 --- /dev/null +++ b/portal/assets/themes/default/custom_overlay.css @@ -0,0 +1,14 @@ +/* +=============================================================================== + 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 +=============================================================================== +*/ diff --git a/portal/assets/themes/default/custom_portal.css b/portal/assets/themes/default/custom_portal.css new file mode 100644 index 0000000..7346398 --- /dev/null +++ b/portal/assets/themes/default/custom_portal.css @@ -0,0 +1,145 @@ +/* +=============================================================================== + This file contain extra CSS rules to customize the YunoHost user portal and + can be used to customize app tiles, buttons, etc... +=============================================================================== +*/ + +.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; +} diff --git a/portal/assets/themes/default/custom_portal.js b/portal/assets/themes/default/custom_portal.js new file mode 100644 index 0000000..82422aa --- /dev/null +++ b/portal/assets/themes/default/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','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]); +} + +// 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 +} +*/