diff --git a/src/Umbraco.Core/Configuration/UmbracoSettings/ContentElement.cs b/src/Umbraco.Core/Configuration/UmbracoSettings/ContentElement.cs index 912582f1ef..51a39e15df 100644 --- a/src/Umbraco.Core/Configuration/UmbracoSettings/ContentElement.cs +++ b/src/Umbraco.Core/Configuration/UmbracoSettings/ContentElement.cs @@ -183,6 +183,12 @@ namespace Umbraco.Core.Configuration.UmbracoSettings get { return GetOptionalTextElement("EnablePropertyValueConverters", false); } } + [ConfigurationProperty("loginBackgroundImage")] + internal InnerTextConfigurationElement LoginBackgroundImage + { + get { return GetOptionalTextElement("loginBackgroundImage", string.Empty); } + } + string IContentSection.NotificationEmailAddress { get { return Notifications.NotificationEmailAddress; } @@ -336,5 +342,10 @@ namespace Umbraco.Core.Configuration.UmbracoSettings { get { return EnablePropertyValueConverters; } } + + string IContentSection.LoginBackgroundImage + { + get { return LoginBackgroundImage; } + } } } \ No newline at end of file diff --git a/src/Umbraco.Core/Configuration/UmbracoSettings/IContentSection.cs b/src/Umbraco.Core/Configuration/UmbracoSettings/IContentSection.cs index 5dbf9f1a33..d73b3b9e41 100644 --- a/src/Umbraco.Core/Configuration/UmbracoSettings/IContentSection.cs +++ b/src/Umbraco.Core/Configuration/UmbracoSettings/IContentSection.cs @@ -72,5 +72,6 @@ namespace Umbraco.Core.Configuration.UmbracoSettings bool EnablePropertyValueConverters { get; } + string LoginBackgroundImage { get; } } } \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/less/pages/login.less b/src/Umbraco.Web.UI.Client/src/less/pages/login.less index 166a9bfb56..9404ca288d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/pages/login.less +++ b/src/Umbraco.Web.UI.Client/src/less/pages/login.less @@ -4,9 +4,6 @@ .login-overlay { width: 100%; height: 100%; - background: @gray-1 url(../img/application/logo.png) no-repeat 25px 30px fixed !important; - background-size: 30px 30px !important; - color: @white; position: absolute; z-index: 10000; top: 0; @@ -16,34 +13,24 @@ border: none; border-radius: 0; overflow-y: auto; + background-color: @purple-d2; } - -@media only screen and (-webkit-min-device-pixel-ratio: 1.5), - only screen and (min-resolution: 144dpi) -{ - .login-overlay { - background-image: url(../img/application/logo@2x.png) !important; - } +.login-overlay__background-image { + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + width: 100%; + height: 100%; + position: absolute; + opacity: 0.05; } - -@media only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and (min-resolution: 192dpi) -{ - .login-overlay { - background-image: url(../img/application/logo@2x.png) !important; - } -} - - -@media only screen and (-webkit-min-device-pixel-ratio: 3), - only screen and (min-resolution: 3dppx), - only screen and (min-resolution: 350dpi) -{ - .login-overlay { - background-image: url(../img/application/logo@3x.png) !important; - } +.login-overlay__logo { + position: absolute; + top: 22px; + left: 25px; + z-index: 1; } .login-overlay .umb-modalcolumn { @@ -51,21 +38,56 @@ border: none; } +.login-overlay .umb-login-container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + position: relative; + z-index: 3; + box-sizing: border-box; +} + +@media (max-width: 565px) { + // making sure we don't crash into the logo + .login-overlay .umb-login-container { + padding-top: 80px; + } +} + .login-overlay .form { - position:relative; - display: block; - top: 100px; - left: 165px; - width: 370px; - text-align: right; + background: @white; + padding: 25px; + width: 500px; + margin-left: 25px; + margin-right: 25px; + margin-top: auto; + margin-bottom: auto; +} + +.login-overlay .form input[type="text"], +.login-overlay .form input[type="password"] { + height: 36px; + padding-left: 10px; + padding-right: 10px; +} + +.login-overlay .btn-success { + padding: 12px 24px; +} + +.login-overlay .form label { + font-weight: bold; } .login-overlay h1 { display: block; - text-align: right; - color: @white; - font-size: 18px; + text-align: center; + color: @black; + font-size: 24px; font-weight: bold; + margin-bottom: 20px; } .login-overlay .alert { @@ -76,62 +98,19 @@ text-align: center; } -.login-overlay .switch-view { - margin-top: 10px; +.login-overlay .external-logins form { + margin-bottom: 20px; } -@media (max-width: 767px) and (max-height: 420px) and (orientation: landscape) { - // Move form closer to top on narrow screen sizes - .login-overlay .form { - top: 50px; - } -} - -@media (max-width: 565px) { - // Remove padding on login-form on smaller devices - .login-overlay .form { - top: 60px; - right: 25px; - left: inherit; - padding-left: 25px; - padding-right:25px; - width: auto; - } -} - -@media (max-width: 339px) { - .login-overlay .form { - input[type="text"], input[type="password"] { - width: 250px; - } - } -} - -#hrOr { - height: 30px; - text-align: center; - position: relative; - padding-top: 20px; -} - -#hrOr hr { +.login-overlay .btn-social { + padding-top: 8px; + padding-bottom: 8px; margin: 0; - border: none; - background-color: @gray-3; - height: 1px; + margin-bottom: 5px; } -#hrOr div { - background-color: @black; - position: relative; - top: -16px; - border: 1px solid @gray-3; - padding: 4px; - border-radius: 50%; - width: 20px; - height: 20px; - margin: auto; - color: @gray-8; +.login-overlay .btn-social>:first-child { + line-height: 36px; } .login-overlay .text-error, diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less index 314035f1ae..9c2d5e914d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/variables.less +++ b/src/Umbraco.Web.UI.Client/src/less/variables.less @@ -42,6 +42,7 @@ @turquoise-l3: #C0F0ED; @turquoise-washed: #F3FDFC; +@purple-d2: #1D1333; @purple-d1: #2E2246; @purple: #413659; @purple-l1: #675E7A; diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.controller.js index d5687aa6b7..49db7dc191 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.controller.js @@ -81,6 +81,7 @@ $scope.externalLoginProviders = externalLoginInfo.providers; $scope.externalLoginInfo = externalLoginInfo; $scope.resetPasswordCodeInfo = resetPasswordCodeInfo; + $scope.backgroundImage = Umbraco.Sys.ServerVariables.umbracoSettings.loginBackgroundImage; $scope.activateKonamiMode = function () { if ($cookies.konamiLogin == "1") { diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.html index abf17f53df..f9b8fc72f3 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.html @@ -1,133 +1,146 @@ 
+
-
-

{{greeting}}

+ + -
+ -

- Log in below. - Log in below -

+