From d33cd97556886b6a579419f6a1b2d42cfe7c16f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20F=C3=BClling?= Date: Tue, 12 Feb 2019 20:18:19 +0100 Subject: [PATCH] Add theming support, add vapor theme --- .gitignore | 3 + README.md | 4 + conf.json.example | 1 + config.lua | 3 +- helpers.lua | 1 + portal/assets/css/ynh-style.css | 145 --------------------------- portal/assets/js/ynhpanel.js | 4 +- portal/assets/themes/default.css | 148 +++++++++++++++++++++++++++ portal/assets/themes/vapor.css | 167 +++++++++++++++++++++++++++++++ portal/header.ms | 4 +- 10 files changed, 328 insertions(+), 152 deletions(-) create mode 100644 portal/assets/themes/default.css create mode 100644 portal/assets/themes/vapor.css 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}} +