Browse Source

up

tags/v0.1
root 1 year ago
parent
commit
5aa73c1d09
3 changed files with 245 additions and 0 deletions
  1. +26
    -0
      custom_overlay.css
  2. +179
    -0
      custom_portal.css
  3. +40
    -0
      custom_portal.js

+ 26
- 0
custom_overlay.css View File

@@ -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;
}

+ 179
- 0
custom_portal.css View File

@@ -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;
}

+ 40
- 0
custom_portal.js View File

@@ -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
}
*/

Loading…
Cancel
Save