[checkmk-commits] GUI CSS: Decoupled styles for login from the classic theme (CMK-1171)

Module: check_mk Branch: master Commit: 1069a48351703183a39be756685aa74fa776e15d URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=1069a483517031… Author: Kenneth Okoh &lt;ko(a)mathias-kettner.de&gt; Date: Wed Mar 13 15:26:56 2019 +0100 GUI CSS: Decoupled styles for login from the classic theme (CMK-1171) Change-Id: Ie57983ab6877830b4bf4c1069887d98dca8774f2 --- web/htdocs/themes/facelift/scss/_login.scss | 188 ++++++++++++++++++++++++++++ web/htdocs/themes/facelift/scss/_main.scss | 62 --------- web/htdocs/themes/facelift/theme.scss | 2 +- 3 files changed, 189 insertions(+), 63 deletions(-) diff --git a/web/htdocs/themes/facelift/scss/_login.scss b/web/htdocs/themes/facelift/scss/_login.scss new file mode 100644 index 0000000..210fa66 --- /dev/null +++ b/web/htdocs/themes/facelift/scss/_login.scss @@ -0,0 +1,188 @@ +/* ++------------------------------------------------------------------+ +| ____ _ _ __ __ _ __ | +| / ___| |__ ___ ___| | __ | \/ | |/ / | +| | | | '_ \ / _ \/ __| |/ / | |\/| | ' / | +| | |___| | | | __/ (__| < | | | | . \ | +| \____|_| |_|\___|\___|_|\_\___|_| |_|_|\_\ | +| | +| Copyright Mathias Kettner 2012 mk(a)mathias-kettner.de | ++------------------------------------------------------------------+ + +This file is part of Check_MK. +The official homepage is at http://mathias-kettner.de/check_mk. + +check_mk is free software; you can redistribute it and/or modify it +under the terms of the GNU General Public License as published by +the Free Software Foundation in version 2. check_mk is distributed +in the hope that it will be useful, but WITHOUT ANY WARRANTY; with- +out even the implied warranty of MERCHANTABILITY or FITNESS FOR A +PARTICULAR PURPOSE. See the GNU General Public License for more de- +ails. You should have received a copy of the GNU General Public +License along with GNU Make; see the file COPYING. If not, write +to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, +Boston, MA 02110-1301 USA. + +*/ + +/*-------------------------------------------------------------------------. +| _ _ | +| | | ___ __ _(_)_ __ | +| | | / _ \ / _` | | '_ \ | +| | |__| (_) | (_| | | | | | | +| |_____\___/ \__, |_|_| |_| | +| |___/ | ++--------------------------------------------------------------------------+ +| Styling of the login page (when not HTTP Basic Auth is used) | +'-------------------------------------------------------------------------*/ + +body.login { + text-align: center; + vertical-align: middle; +} + +body.login { + div#login { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 770px; + height: 605px; + margin: auto; + background: transparent; + } + + #login_window { + position: relative; + top: 187px; + left: 10px; + width: 370px; + height: 230px; + margin: -30px auto 10px; + background: $theme-color-sidebar-background; + border: 2px solid $theme-color-table-border-dark; + border-radius: 8px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + } + + #version { + position: absolute; + top: 40px; + right: 40px; + width: 150px; + font-size: 11px; + letter-spacing: $theme-letter-spacing-table; + color: $theme-color-lightgrey; + text-align: right; + } + + div#login #version::before { + position: absolute; + top: -8px; + left: -156px; + width: 200px; + height: 30px; + background-image: url("images/mk-logo.png"); + background-position: 16px center; + background-repeat: no-repeat; + background-size: auto 24px; + content: " "; + } + + label { + color: #fff; + } + + #label_user, #label_pass { + left: 40px; + font-size: $theme-font-size-global; + letter-spacing: $theme-letter-spacing-table; + } + + #label_user, #input_user, #label_pass, #input_pass { + position: absolute; + } + + #label_user { + top: 80px; + } + + #input_user { + top: 72px; + } + + #label_pass { + top: 120px; + } + #input_pass { + top: 112px; + } + + #input_user, #input_pass { + left: 140px; + width: 171px; + height: 17px; + background-repeat: no-repeat; + border-radius: $theme-border-radius; + outline: none; + box-shadow: none; + } + +/* TODO: No important styles */ + #_login { + position: absolute; + right: 15px; + bottom: 40px; + left: 40px; + width: calc(100% - 80px); + padding: 8px 16px !important; + margin: 0; + font-weight: $theme-font-weight-bold; + border-color: $theme-color-state-warning-border !important; + } + + #login_error { + position: absolute; + bottom: 4px; + left: 92px; + z-index: 100; + width: 180px; + height: 30px; + padding: 0; + margin: 0; + color: $theme-color-white; + background-color: $theme-color-state-2-background; + background-image: none; + background-repeat: no-repeat; + border: 1px solid $theme-color-state-error-border; + border-radius: $theme-border-radius; + } + + #login_error div.error { + padding: 8px 0 0; + margin: 0; + color: $theme-color-white; + background-color: transparent; + border-style: none; + border-radius: 0; + box-shadow: 0 0 0; + } + + #foot { + position: relative; + top: 187px; + left: 10px; + width: 350px; + margin: 0 auto 10px; + font-size: 11px; + color: $theme-color-darkgrey; + text-align: center; + } + + div#login div#foot a, div#login div#foot body.main .popup_menu span, + body.main .popup_menu div#login div#foot span { + color: $theme-color-darkgrey; + } +} diff --git a/web/htdocs/themes/facelift/scss/_main.scss b/web/htdocs/themes/facelift/scss/_main.scss index dcb6e0b..0bb6881 100644 --- a/web/htdocs/themes/facelift/scss/_main.scss +++ b/web/htdocs/themes/facelift/scss/_main.scss @@ -113,68 +113,6 @@ select:not([multiple]) { margin: 0; margin-bottom: 8px; } -div#login { - background: transparent; } - div#login div#login_window { - background: $theme-color-sidebar-background; - border: 2px solid $theme-color-table-border-dark; - border-radius: 8px; - box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); } - div#login div#login_window div#login_error { - bottom: 4px; - background-image: none; - background-color: $theme-color-state-2-background; - color: $theme-color-white; - border: 1px solid $theme-color-state-error-border; - border-radius: $theme-border-radius; - left: 92px; } - div#login div#login_window div#login_error div.error { - color: $theme-color-white; } - div#login div#foot { - color: $theme-color-darkgrey; } - div#login div#foot a, div#login div#foot body.main .popup_menu span, body.main .popup_menu div#login div#foot span { - color: $theme-color-darkgrey; } - div#login #version { - color: $theme-color-lightgrey; - letter-spacing: $theme-letter-spacing-table; - top: 40px; - right: 40px; } - div#login #version::before { - content: " "; - height: 30px; - width: 200px; - position: absolute; - top: -8px; - left: -156px; - background-image: url(images/mk-logo.png); - background-size: auto 24px; - background-position: 16px center; - background-repeat: no-repeat; } - div#login #input_user, div#login #input_pass { - left: 140px; - border-radius: $theme-border-radius; - width: 171px; } - div#login #label_user, div#login #label_pass { - left: 40px; - font-size: $theme-font-size-global; - letter-spacing: $theme-letter-spacing-table; } - div#login #input_user { - top: 72px; } - div#login #label_user { - top: 80px; } - div#login #label_pass { - top: 120px; } - div#login #input_pass { - top: 112px; } - div#login #_login { - left: 40px !important; - margin: 0px; - bottom: 40px; - padding: 8px 16px !important; - font-weight: $theme-font-weight-bold; - width: calc(100% - 80px); - border-color: $theme-color-state-warning-border !important; } - table.vs_duallist a.control, table.vs_duallist body.main .popup_menu span.control, body.main .popup_menu table.vs_duallist span.control { border-style: solid; border-color: $theme-color-nuance-1; diff --git a/web/htdocs/themes/facelift/theme.scss b/web/htdocs/themes/facelift/theme.scss index e22fa20..5c2a4b1 100644 --- a/web/htdocs/themes/facelift/theme.scss +++ b/web/htdocs/themes/facelift/theme.scss @@ -12,7 +12,6 @@ @import "../classic/scss/_status.scss"; @import "../classic/scss/_bi.scss"; @import "../classic/scss/_dashboard.scss"; -@import "../classic/scss/_login.scss"; @import "../classic/scss/_logwatch.scss"; @import "../classic/scss/_prediction.scss"; @import "../classic/scss/_views.scss"; @@ -36,5 +35,6 @@ @import "scss/_variables.scss"; @import "scss/_main.scss"; +@import "scss/_login.scss"; @import "scss/_tables.scss"; @import "scss/_sidebar.scss";