Update style of log in page and headertags/v18.0.0beta1
@return (0.2126 * $-local-red + 0.7152 * $-local-green + 0.0722 * $-local-blue) / 255; | @return (0.2126 * $-local-red + 0.7152 * $-local-green + 0.0722 * $-local-blue) / 255; | ||||
} | } | ||||
@mixin faded-background { | |||||
background-image: linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%); | |||||
} | |||||
@mixin faded-background-image { | |||||
@if ($color-primary == #0082C9) { | |||||
background-image: $image-login-background, linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%); | |||||
} @else { | |||||
@include faded-background; | |||||
background-size: contain; | |||||
} | |||||
} | |||||
$has-custom-logo: variable_exists('theming-logo-mime') and $theming-logo-mime != ''; | $has-custom-logo: variable_exists('theming-logo-mime') and $theming-logo-mime != ''; | ||||
$invert: luma($color-primary) > 0.6; | $invert: luma($color-primary) > 0.6; | ||||
background-image: $image-logo; | background-image: $image-logo; | ||||
} | } | ||||
#body-user #header, #body-settings #header, #body-public #header { | |||||
@include faded-background; | |||||
} | |||||
/* override styles for login screen in guest.css */ | /* override styles for login screen in guest.css */ | ||||
@if ($has-custom-logo) { | @if ($has-custom-logo) { | ||||
// custom logo | // custom logo | ||||
#theming-preview { | #theming-preview { | ||||
background-image: $image-login-background; | background-image: $image-login-background; | ||||
background-color: $color-primary; | background-color: $color-primary; | ||||
@include faded-background-image; | |||||
} | } | ||||
} @else { | } @else { | ||||
#theming-preview { | |||||
background-image: $image-login-background; | |||||
background-color: $color-primary; | |||||
} | |||||
#theming-preview { | |||||
background-image: $image-login-background; | |||||
background-color: $color-primary; | |||||
@include faded-background-image; | |||||
} | |||||
} | } | ||||
@if variable_exists('theming-logoheader-mime') and $theming-logoheader-mime != '' { | @if variable_exists('theming-logoheader-mime') and $theming-logoheader-mime != '' { | ||||
} | } | ||||
} @else { | } @else { | ||||
#body-login { | #body-login { | ||||
background-color: $color-primary; | |||||
@include faded-background-image; | |||||
} | } | ||||
} | } | ||||
text-align: center; | text-align: center; | ||||
background-color: #0082c9; | background-color: #0082c9; | ||||
background-image: url('../img/background.png?v=2'); | background-image: url('../img/background.png?v=2'); | ||||
background-image: url('../img/background.png?v=2'), linear-gradient(40deg, #0082c9 0%, rgba(28,175,255,1) 100%); | |||||
background-position: 50% 50%; | background-position: 50% 50%; | ||||
background-repeat: no-repeat; | |||||
background-size: cover; | |||||
background-repeat: repeat; | |||||
background-size: 275px, contain; | |||||
background-attachment: fixed; /* fix background gradient */ | background-attachment: fixed; /* fix background gradient */ | ||||
min-height: 100%; /* fix sticky footer */ | min-height: 100%; /* fix sticky footer */ | ||||
height: auto; | height: auto; | ||||
#remember_login { | #remember_login { | ||||
margin: 18px 5px 0 16px !important; | margin: 18px 5px 0 16px !important; | ||||
} | } | ||||
.remember-login-container, | |||||
.lost-password-container { | .lost-password-container { | ||||
display: inline-block; | display: inline-block; | ||||
margin: 10px 0; | margin: 10px 0; | ||||
text-align: center; | text-align: center; | ||||
width: 100%; | width: 100%; | ||||
text-shadow: 0 0 2px rgba(0, 0, 0, .4); /* better readability on bright background */ | |||||
} | } | ||||
.lost-password-container #lost-password, | |||||
.lost-password-container #lost-password-back { | |||||
#lost-password, | |||||
#lost-password-back, | |||||
#reset-password-wrapper + a { | |||||
display: inline-block; | display: inline-block; | ||||
font-weight: normal; | |||||
font-weight: normal !important; | |||||
padding: 12px; | padding: 12px; | ||||
margin-top: -6px; | |||||
color: #fff; | color: #fff; | ||||
cursor: pointer; | cursor: pointer; | ||||
text-shadow: 0 0 2px rgba(0, 0, 0, .4); /* better readability on bright background */ | |||||
} | |||||
#lost-password { | |||||
margin-top: -6px; | |||||
} | } | ||||
#forgot-password { | #forgot-password { | ||||
padding: 11px; | padding: 11px; |
z-index: 2000; | z-index: 2000; | ||||
height: $header-height; | height: $header-height; | ||||
background-color: var(--color-primary); | background-color: var(--color-primary); | ||||
background-image: linear-gradient(40deg, var(--color-primary) 0%, rgba(28,175,255,1) 100%); | |||||
box-sizing: border-box; | box-sizing: border-box; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
} | } | ||||
text-overflow: initial; | text-overflow: initial; | ||||
width: auto; | width: auto; | ||||
overflow: hidden; | overflow: hidden; | ||||
background-color: var(--color-primary); | |||||
padding: 0 5px; | padding: 0 5px; | ||||
z-index: 2; | z-index: 2; | ||||
} | } |
body { | body { | ||||
background-color: var(--color-main-background); | background-color: var(--color-main-background); | ||||
background-color: linear-gradient(40deg, var(--color-main-background) 0%, rgba(28,175,255,1) 100%); | |||||
font-weight: normal; | font-weight: normal; | ||||
/* bring the default font size up to 14px */ | /* bring the default font size up to 14px */ | ||||
font-size: .875em; | font-size: .875em; |