From bab3a0ed5ccbee04cc02cdc89ab7524937de615d Mon Sep 17 00:00:00 2001 From: Samuel Georges Date: Wed, 11 May 2016 05:29:34 +1000 Subject: [PATCH] Improve UI on sign in screen Fixes a weird issue where the custom logo ratio loses its transparency --- modules/backend/assets/css/october.css | 20 +++-- .../backend/assets/less/controls/common.less | 26 ++++++- .../backend/assets/less/core/variables.less | 2 +- .../assets/less/layout/outerlayout.less | 76 +++++-------------- .../backend/assets/less/layout/sidenav.less | 14 ++++ modules/backend/layouts/auth.htm | 2 +- .../backend/models/brandsettings/custom.less | 12 +-- modules/cms/controllers/index/index.htm | 2 +- modules/system/controllers/settings/index.htm | 2 +- .../system/partials/_settings_menu_items.htm | 2 +- 10 files changed, 77 insertions(+), 81 deletions(-) diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index b6cd70e42..8a8b77a3a 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -248,7 +248,9 @@ .tooltip .tooltip-inner{text-align:left;padding:5px 8px} .tooltip.in{opacity:1;filter:alpha(opacity=100)} .oc-logo-white{background-image:url(../images/october-logo-white.svg);background-position:50% 50%;background-repeat:no-repeat;background-size:contain} -.oc-bg-logo{background-image:url(../images/october-logo-transparent.svg);background-position:50% 50%;background-repeat:no-repeat;background-size:50% auto} +.oc-logo{background-image:url(../images/october-logo.svg);background-position:50% 50%;background-repeat:no-repeat;background-size:contain} +.layout.control-tabs.oc-logo-transparent:not(.has-tabs),.layout-cell.oc-logo-transparent{background-size:50% auto;background-repeat:no-repeat;background-image:url(../images/october-logo.svg);background-position:50% 50%;position:relative} +.layout.control-tabs.oc-logo-transparent:not(.has-tabs):after,.layout-cell.oc-logo-transparent:after{content:'';display:table-cell;position:absolute;left:0;top:0;height:100%;width:100%;background:rgba(249,249,249,0.7)} .report-widget{padding:15px;background:white;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px} .report-widget h3{font-size:14px;color:#7e8c8d;text-transform:uppercase;font-weight:600;margin-top:0;margin-bottom:30px} .report-widget .height-100{height:100px} @@ -779,6 +781,7 @@ body.drag nav#layout-mainmenu.navbar ul.nav li:hover,body.drag .mainmenu-collaps body.drag nav#layout-mainmenu.navbar ul.nav li a:active .nav-label,body.drag .mainmenu-collapsed ul li a:active .nav-label,body.drag nav#layout-mainmenu.navbar ul.nav li a:focus .nav-label,body.drag .mainmenu-collapsed ul li a:focus .nav-label{text-shadow:none} #layout-sidenav{position:absolute;height:100%;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} #layout-sidenav ul{position:relative;margin:0;padding:0;height:100%;overflow:hidden} +#layout-sidenav ul:after{content:'';position:absolute;height:100%;top:0;right:0;width:10px;-webkit-box-shadow:inset -5px 0 3px rgba(0,0,0,0.1);box-shadow:inset -5px 0 3px rgba(0,0,0,0.1)} #layout-sidenav ul li{display:block;text-align:center;position:relative} #layout-sidenav ul li a{padding:20px 10px;display:block;font-size:13px;color:rgba(255,255,255,0.6);font-weight:normal;position:relative} #layout-sidenav ul li a:hover{text-decoration:none;background-color:transparent} @@ -816,11 +819,12 @@ body.display-side-panel #layout-side-panel{display:block;position:absolute;z-ind #layout-footer .tagline{float:right} #layout-footer .tagline p{color:#999999} body.outer{background:#2b3e50} -body.outer .layout > .layout-row.layout-head{text-align:center;background:#1d2d3d} -body.outer .layout > .layout-row.layout-head > .layout-cell{height:300px !important;padding:50px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;vertical-align:middle} -body.outer .layout > .layout-row.layout-head > .layout-cell h1.oc-logo-white{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;display:inline-block;width:100%;max-width:410px;height:72px} -body.outer .layout > .layout-row > .layout-cell{vertical-align:middle} -body.outer .layout > .layout-row > .layout-cell .outer-form-container{margin:0 auto;width:436px} +body.outer .layout > .layout-row.layout-head{text-align:center;background:#f9f9f9} +body.outer .layout > .layout-row.layout-head > .layout-cell{height:40%;padding:50px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;vertical-align:middle;position:relative} +body.outer .layout > .layout-row.layout-head > .layout-cell:after{content:'';display:block;width:0;height:0;border-left:35px solid transparent;border-right:35px solid transparent;border-top:25px solid #f9f9f9;border-bottom-width:0;position:absolute;bottom:-25px;left:50%;margin-left:-22px} +body.outer .layout > .layout-row.layout-head > .layout-cell h1.oc-logo{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;display:inline-block;width:100%;max-width:450px;height:170px;min-height:72px} +body.outer .layout > .layout-row > .layout-cell{vertical-align:top} +body.outer .layout > .layout-row > .layout-cell .outer-form-container{margin:0 auto;width:436px;padding:40px 0} body.outer .layout > .layout-row > .layout-cell .outer-form-container h2{font-size:18px;margin:20px 0;color:#feffff} body.outer .layout > .layout-row > .layout-cell .outer-form-container .horizontal-form{font-size:0} body.outer .layout > .layout-row > .layout-cell .outer-form-container .horizontal-form input{vertical-align:top;margin-right:9px;display:inline-block;border:none;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px} @@ -834,10 +838,10 @@ body.outer .layout > .layout-row > .layout-cell .outer-form-container .forgot-pa html.csstransitions body.outer .outer-form-container{-webkit-transition:all 0.5s ease-out;transition:all 0.5s ease-out;-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1)} html.csstransitions body.outer.preload .outer-form-container{-webkit-transform:scale(0.2,0.2);-moz-transform:scale(0.2,0.2);-ms-transform:scale(0.2,0.2);-o-transform:scale(0.2,0.2);transform:scale(0.2,0.2)} @media (max-width:768px){body.outer .layout > .layout-row.layout-head > .layout-cell{padding:50px 20px} -body.outer .layout > .layout-row > .layout-cell .outer-form-container{width:auto;padding:20px} +body.outer .layout > .layout-row > .layout-cell .outer-form-container{width:auto;padding:40px} body.outer .layout > .layout-row > .layout-cell .outer-form-container .horizontal-form input{display:block;width:100% !important;margin-bottom:20px} } - .fancy-layout .tab-collapse-icon{position:absolute;display:block;text-decoration:none;outline:none;opacity:0.6;filter:alpha(opacity=60);-webkit-transition:all 0.3s;transition:all 0.3s;font-size:12px;color:#ffffff;right:11px} +.fancy-layout .tab-collapse-icon{position:absolute;display:block;text-decoration:none;outline:none;opacity:0.6;filter:alpha(opacity=60);-webkit-transition:all 0.3s;transition:all 0.3s;font-size:12px;color:#ffffff;right:11px} .fancy-layout .tab-collapse-icon:hover{text-decoration:none;opacity:1;filter:alpha(opacity=100)} .fancy-layout .tab-collapse-icon.primary{color:#475354;bottom:-25px;z-index:100;-webkit-transform:scale(1,-1);-moz-transform:scale(1,-1);-ms-transform:scale(1,-1);-o-transform:scale(1,-1);transform:scale(1,-1)} .fancy-layout .tab-collapse-icon.primary i{position:relative;display:block} diff --git a/modules/backend/assets/less/controls/common.less b/modules/backend/assets/less/controls/common.less index 24cc76537..cc1b8ee44 100644 --- a/modules/backend/assets/less/controls/common.less +++ b/modules/backend/assets/less/controls/common.less @@ -37,9 +37,29 @@ background-size: contain; } -.oc-bg-logo { - background-image: url(../images/october-logo-transparent.svg); +.oc-logo { + background-image: url(../images/october-logo.svg); background-position: 50% 50%; background-repeat: no-repeat; - background-size: 50% auto; + background-size: contain; +} + +.layout.control-tabs.oc-logo-transparent:not(.has-tabs), +.layout-cell.oc-logo-transparent { + background-size: 50% auto; + background-repeat: no-repeat; + background-image: url(../images/october-logo.svg); + background-position: 50% 50%; + position: relative; + + &:after { + content: ''; + display: table-cell; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + background: rgba(249,249,249,0.7); + } } diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less index ff1a5b88d..ccf5abc5e 100644 --- a/modules/backend/assets/less/core/variables.less +++ b/modules/backend/assets/less/core/variables.less @@ -64,7 +64,7 @@ @color-outer-heading: #feffff; @color-outer-description: #999999; @color-outer-bg: #2b3e50; -@color-outer-header: #1d2d3d; +@color-outer-header: @body-bg; @color-outer-form-label: #666666; @color-breadcrumb-text-active: #9da3a7; diff --git a/modules/backend/assets/less/layout/outerlayout.less b/modules/backend/assets/less/layout/outerlayout.less index dde6c0ab5..61418e219 100644 --- a/modules/backend/assets/less/layout/outerlayout.less +++ b/modules/backend/assets/less/layout/outerlayout.less @@ -12,27 +12,38 @@ body.outer { background: @color-outer-header; > .layout-cell { - height: 300px!important; + height: 40%; padding: 50px 0; .box-sizing(border-box); vertical-align: middle; + position: relative; - h1.oc-logo-white { + &:after { + .triangle(down, 70px, 25px, @color-outer-header); + position: absolute; + bottom: -25px; + left: 50%; + margin-left: -22px; + } + + h1.oc-logo { .hide-text(); display: inline-block; width: 100%; - max-width: 410px; - height: 72px; + max-width: 450px; + height: 170px; + min-height: 72px; } } } > .layout-cell { - vertical-align: middle; + vertical-align: top; .outer-form-container { margin: 0 auto; width: 436px; + padding: (@padding-standard * 2) 0; h2 { font-size: 18px; @@ -122,62 +133,13 @@ html.csstransitions { > .layout-cell .outer-form-container { width: auto; - padding: @padding-standard; - + padding: @padding-standard * 2; + .horizontal-form input { display: block; - width: 100%!important; + width: 100% !important; margin-bottom: @padding-standard; } } } } - -/* - -.outer-form-container { - width: 240px; - display: inline-block; - text-align: left; - - h1 { - color: @color-outer-heading; - font-size: 39px; - font-weight: 400; - margin-bottom: 4px; - - + p { - font-size: 13px; - color: @color-outer-description; - margin-bottom: 20px; - } - } - - .form-group.combine-fields { - input:first-child { - border-bottom: 1px solid lighten(@color-form-field-border, 5%); - .border-bottom-radius(0); - } - input:last-child { - border-top: none; - .border-top-radius(0); - } - - &.october { - position: relative; - - &:after { - content: ''; - position: absolute; - display: block; - width: 145px; - height: 155px; - top: -149px; - right: -57px; - background: transparent url(../images/tree.png) no-repeat left top; - } - } - } -} - -*/ \ No newline at end of file diff --git a/modules/backend/assets/less/layout/sidenav.less b/modules/backend/assets/less/layout/sidenav.less index d1ddd6060..96a4e7f59 100644 --- a/modules/backend/assets/less/layout/sidenav.less +++ b/modules/backend/assets/less/layout/sidenav.less @@ -8,6 +8,16 @@ width: 100%; .box-sizing(border-box); + .sidenav-shadow-element() { + content: ''; + position: absolute; + height: 100%; + top: 0; + right: 0; + width: 10px; + .box-shadow(inset -5px 0 3px rgba(0,0,0,.1)); + } + ul { position: relative; margin: 0; @@ -15,6 +25,10 @@ height: 100%; overflow: hidden; + &:after { + .sidenav-shadow-element(); + } + li { display: block; text-align: center; diff --git a/modules/backend/layouts/auth.htm b/modules/backend/layouts/auth.htm index 397257d9c..08ea88ba0 100644 --- a/modules/backend/layouts/auth.htm +++ b/modules/backend/layouts/auth.htm @@ -24,7 +24,7 @@
-

+

diff --git a/modules/backend/models/brandsettings/custom.less b/modules/backend/models/brandsettings/custom.less index 4a06b6830..95ec92e68 100644 --- a/modules/backend/models/brandsettings/custom.less +++ b/modules/backend/models/brandsettings/custom.less @@ -47,20 +47,16 @@ body.outer { background: @custom-dark-secondary; } -body.outer .layout > .layout-row.layout-head { - background: mix(black, saturate(@custom-dark-secondary, 5%), 27%); -} - // // Logos // -.oc-bg-logo when not (@logo-image = '') { - background-image: linear-gradient(to bottom, rgba(249,249,249,0.7) 0%,rgba(249,249,249,0.7) 100%), url('@{logo-image}'); +.oc-logo-transparent when not (@logo-image = '') { + background-image: url('@{logo-image}') !important; } -.oc-logo-white when not (@logo-image = '') { + +.oc-logo when not (@logo-image = '') { background-image: url('@{logo-image}'); - height: 170px !important; } // diff --git a/modules/cms/controllers/index/index.htm b/modules/cms/controllers/index/index.htm index 34ce6713e..78269e0a3 100644 --- a/modules/cms/controllers/index/index.htm +++ b/modules/cms/controllers/index/index.htm @@ -15,7 +15,7 @@ data-pane-classes="layout-cell" data-max-title-symbols="15" data-title-as-file-names="true" - class="layout control-tabs master-tabs fancy-layout oc-bg-logo" + class="layout control-tabs master-tabs fancy-layout oc-logo-transparent" id="cms-master-tabs">
diff --git a/modules/system/controllers/settings/index.htm b/modules/system/controllers/settings/index.htm index 98e0456a4..46b93246b 100644 --- a/modules/system/controllers/settings/index.htm +++ b/modules/system/controllers/settings/index.htm @@ -1,5 +1,5 @@
-