mirror of
https://github.com/YunoHost/SSOwat.git
synced 2024-09-03 20:06:27 +02:00
Add theming support, add vapor theme
This commit is contained in:
Lukas Fülling
Alexandre Aubin
parent
23af640c8c
commit
d33cd97556
10 changed files with 328 additions and 152 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1 +1,4 @@
|
|||
*.swp
|
||||
.idea
|
||||
*.iml
|
||||
.DS_Store
|
||||
|
|
@ -173,3 +173,7 @@ Array of regular expressions to be matched against URLS **and** URIs and their r
|
|||
#### default_language
|
||||
|
||||
Language code used by default in views (**default**: `en`)
|
||||
|
||||
#### theme
|
||||
|
||||
Can be either `default` or `vapor`.
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
"portal_scheme": "https",
|
||||
"portal_domain": "example.com",
|
||||
"portal_path": "/ssowat/",
|
||||
"theme": "default",
|
||||
"domains": [
|
||||
"example.com",
|
||||
"example.org"
|
||||
|
|
|
|||
|
|
@ -54,7 +54,8 @@ function get_config()
|
|||
skipped_urls = {},
|
||||
ldap_attributes = {"uid", "givenname", "sn", "cn", "homedirectory", "mail", "maildrop"},
|
||||
allow_mail_authentication = true,
|
||||
default_language = "en"
|
||||
default_language = "en",
|
||||
theme = "default"
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -586,6 +586,7 @@ function get_data_for(view)
|
|||
data['flash_fail'] = {flashs["fail"]}
|
||||
data['flash_win'] = {flashs["win"] }
|
||||
data['flash_info'] = {flashs["info"]}
|
||||
data['theme_name'] = ""..conf["theme"]
|
||||
|
||||
return data
|
||||
end
|
||||
|
|
|
|||
|
|
@ -790,151 +790,6 @@ input.btn {
|
|||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
6 = Colors
|
||||
========================================================================== */
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Internet Explorer
|
||||
========================================================================== */
|
||||
|
|
|
|||
|
|
@ -262,14 +262,12 @@ domReady(function(){
|
|||
portalStyle.setAttribute("href", '/ynhpanel.css');
|
||||
document.getElementsByTagName("head")[0].insertBefore(portalStyle, null);
|
||||
|
||||
// Custom style from theme's id specified in config
|
||||
if (response.theme) {
|
||||
// Custom style from theme id specified in config
|
||||
var portalThemeStyle = document.createElement("link");
|
||||
portalThemeStyle.setAttribute("rel", "stylesheet");
|
||||
portalThemeStyle.setAttribute("type", "text/css");
|
||||
portalThemeStyle.setAttribute("href", '/yunohost/sso/assets/themes/'+ response.theme +'/css/ynhpanel.css');
|
||||
document.getElementsByTagName("head")[0].insertBefore(portalThemeStyle, null);
|
||||
};
|
||||
|
||||
|
||||
// Bind YNH Button
|
||||
|
|
|
|||
148
portal/assets/themes/default.css
Normal file
148
portal/assets/themes/default.css
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
/* ==========================================================================
|
||||
Default Theme
|
||||
|
||||
0 = Colors
|
||||
========================================================================== */
|
||||
|
||||
/* ==========================================================================
|
||||
0 = Colors
|
||||
========================================================================== */
|
||||
|
||||
.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;
|
||||
}
|
||||
167
portal/assets/themes/vapor.css
Normal file
167
portal/assets/themes/vapor.css
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
/* ==========================================================================
|
||||
Vaporwave theme
|
||||
========================================================================== */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background: rgb(205, 118, 255) !important;
|
||||
background: -moz-linear-gradient(45deg, rgb(205, 118, 255) 0%, rgb(93, 150, 168) 100%) !important;
|
||||
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgb(205, 118, 255)), color-stop(100%, rgb(93, 150, 168))) !important;
|
||||
background: -webkit-linear-gradient(45deg, rgb(205, 118, 255) 0%, rgb(93, 150, 168) 100%) !important;
|
||||
background: -o-linear-gradient(45deg, rgb(205, 118, 255) 0%, rgb(93, 150, 168) 100%) !important;
|
||||
background: -ms-linear-gradient(45deg, rgb(205, 118, 255) 0%, rgb(93, 150, 168) 100%) !important;
|
||||
background: linear-gradient(45deg, rgb(205, 118, 255) 0%, rgb(93, 150, 168) 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C82BFF', endColorstr='#0C76A8', GradientType=1) !important;
|
||||
}
|
||||
|
||||
.messages.danger { background: #c0392b80; }
|
||||
.messages.warning { background: #e67e2280; }
|
||||
.messages.success { background: #27ae6080; }
|
||||
.messages.info { background: #2980b980; }
|
||||
|
||||
a, small, span,
|
||||
.ynh-wrapper.footer a,
|
||||
.user-menu a,
|
||||
.user-container.user-container-info span,
|
||||
input.btn.classic-btn.large-btn {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
.form-group input::placeholder,
|
||||
.form-group input::-ms-input-placeholder,
|
||||
.form-group input:-ms-input-placeholder {
|
||||
color: #f4f4f4 !important;
|
||||
}
|
||||
|
||||
form.login-form input {
|
||||
color: #222 !important;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active,
|
||||
a:focus,
|
||||
.form-group input,
|
||||
input.btn.classic-btn.large-btn:hover,
|
||||
.ynh-wrapper.footer a:hover {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.ynh-wrapper.footer a:before {
|
||||
color: #cc45ee !important;
|
||||
}
|
||||
|
||||
.ynh-wrapper.footer nav {
|
||||
border-color: #cc45ee !important;
|
||||
}
|
||||
|
||||
.listing-apps li a span,
|
||||
.listing-apps li a:hover span,
|
||||
.listing-apps li a:active span,
|
||||
.listing-apps li a:focus span {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.listing-apps li,
|
||||
.listing-apps li a {
|
||||
transition: all 0.3s ease-in-out, background 0ms; /* fix gray flicker on initial load */
|
||||
border: none transparent !important;
|
||||
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1),
|
||||
-2px -2px 3px 0 rgba(0, 0, 0, 0.1) inset;
|
||||
}
|
||||
|
||||
.listing-apps li:hover,
|
||||
.listing-apps li a:hover {
|
||||
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0),
|
||||
-2px -2px 3px 0 rgba(0, 0, 0, 0) inset;
|
||||
}
|
||||
|
||||
.btn.large-btn.classic-btn,
|
||||
.btn.large-btn.validate-btn {
|
||||
background: rgba(200, 200, 200, 0.4) !important;
|
||||
}
|
||||
|
||||
.btn.large-btn.classic-btn:hover,
|
||||
.btn.large-btn.validate-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.4) !important;
|
||||
}
|
||||
|
||||
/* There are no colors, there is only vapor! */
|
||||
.bluebg,
|
||||
.purplebg,
|
||||
.orangebg,
|
||||
.redbg,
|
||||
.greenbg,
|
||||
.darkbluebg,
|
||||
.lightbluebg,
|
||||
.yellowbg,
|
||||
.lightpinkbg,
|
||||
.pinkbg,
|
||||
.turquoisebg,
|
||||
.lightyellow,
|
||||
.lightgreen,
|
||||
.purpledarkbg,
|
||||
.form-group input,
|
||||
.form-group label,
|
||||
a.btn:hover,
|
||||
.btn.large-btn {
|
||||
background: rgba(200, 200, 200, 0.2) !important;
|
||||
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 {
|
||||
background: rgba(200, 200, 200, 0.4) !important;
|
||||
}
|
||||
|
|
@ -13,9 +13,7 @@
|
|||
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="assets/css/ynh-style.css">
|
||||
{{#theme}}
|
||||
<link rel="stylesheet" href="assets/themes/{{theme}}/css/ynh-style.css">
|
||||
{{/theme}}
|
||||
<link rel="stylesheet" href="assets/themes/{{theme_name}}.css">
|
||||
|
||||
<!-- Icons -->
|
||||
<link rel="shortcut icon" href="assets/icons/favicon.ico">
|
||||
|
|
|
|||
Loading…
Reference in a new issue