diff --git a/.gitignore b/.gitignore
index 1377554..37ee5ce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,4 @@
*.swp
+.idea
+*.iml
+.DS_Store
\ No newline at end of file
diff --git a/README.md b/README.md
index f5ef42c..4b2b3db 100644
--- a/README.md
+++ b/README.md
@@ -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`.
\ No newline at end of file
diff --git a/conf.json.example b/conf.json.example
index 84e5118..df02046 100644
--- a/conf.json.example
+++ b/conf.json.example
@@ -2,6 +2,7 @@
"portal_scheme": "https",
"portal_domain": "example.com",
"portal_path": "/ssowat/",
+ "theme": "default",
"domains": [
"example.com",
"example.org"
diff --git a/config.lua b/config.lua
index e2dcb55..4dea17e 100644
--- a/config.lua
+++ b/config.lua
@@ -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"
}
diff --git a/helpers.lua b/helpers.lua
index 28be041..cfaeea1 100644
--- a/helpers.lua
+++ b/helpers.lua
@@ -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
diff --git a/portal/assets/css/ynh-style.css b/portal/assets/css/ynh-style.css
index b34034a..84b743b 100644
--- a/portal/assets/css/ynh-style.css
+++ b/portal/assets/css/ynh-style.css
@@ -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
========================================================================== */
diff --git a/portal/assets/js/ynhpanel.js b/portal/assets/js/ynhpanel.js
index 2fb0ef1..6fc4c66 100644
--- a/portal/assets/js/ynhpanel.js
+++ b/portal/assets/js/ynhpanel.js
@@ -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
diff --git a/portal/assets/themes/default.css b/portal/assets/themes/default.css
new file mode 100644
index 0000000..716c15a
--- /dev/null
+++ b/portal/assets/themes/default.css
@@ -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;
+}
\ No newline at end of file
diff --git a/portal/assets/themes/vapor.css b/portal/assets/themes/vapor.css
new file mode 100644
index 0000000..326e2df
--- /dev/null
+++ b/portal/assets/themes/vapor.css
@@ -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;
+}
diff --git a/portal/header.ms b/portal/header.ms
index 351197e..6024ae2 100644
--- a/portal/header.ms
+++ b/portal/header.ms
@@ -13,9 +13,7 @@
- {{#theme}}
-
- {{/theme}}
+