TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve UI on sign in screen 

Fixes a weird issue where the custom logo ratio loses its transparency
This commit is contained in:
Samuel Georges 2016-05-11 05:29:34 +10:00
parent 74ad5685cd
commit bab3a0ed5c
10 changed files with 77 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
modules/backend/assets/css/october.css
View File

@ -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}

26
modules/backend/assets/less/controls/common.less
View File

@ -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);
}
}

2
modules/backend/assets/less/core/variables.less
View File

@ -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;

76
modules/backend/assets/less/layout/outerlayout.less
View File

@ -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;
}
}
}
}
*/

14
modules/backend/assets/less/layout/sidenav.less
View File

@ -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;

2
modules/backend/layouts/auth.htm
View File

@ -24,7 +24,7 @@
<div class="layout-row min-size layout-head">
<div class="layout-cell">
<h1 class="oc-logo-white"><?= e(Backend\Models\BrandSettings::get('app_name')) ?></h1>
<h1 class="oc-logo"><?= e(Backend\Models\BrandSettings::get('app_name')) ?></h1>
</div>
</div>
<div class="layout-row">

12
modules/backend/models/brandsettings/custom.less
View File

@ -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;
}
//

2
modules/cms/controllers/index/index.htm
View File

@ -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">
<div class="layout-row min-size">

2
modules/system/controllers/settings/index.htm
View File

@ -1,5 +1,5 @@
<div class="layout">
<div class="layout-cell oc-bg-logo">
<div class="layout-cell oc-logo-transparent">
<script>
$(document).ready(function(){
$('#settings-search-input').focus()

2
modules/system/partials/_settings_menu_items.htm
View File

@ -17,7 +17,7 @@
<ul>
<?php foreach ($items as $item): ?>
<li class="<?= strtolower($item->owner) == $context->owner && strtolower($item->code) == $context->itemCode ? 'active bg-p' : false ?>" data-keywords="<?= e(trans($item->keywords)) ?>">
<li class="<?= strtolower($item->owner) == $context->owner && strtolower($item->code) == $context->itemCode ? 'active' : false ?>" data-keywords="<?= e(trans($item->keywords)) ?>">
<a href="<?= $item->url ?>">
<i class="<?= $item->icon ?>"></i>
<span class="header"><?= e(trans($item->label)) ?></span>