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

Refit backend brand settings to latest UI changes

This commit is contained in:
Samuel Georges 2016-04-16 04:43:34 +10:00
parent cafd5d7ffa
commit 9fd0681ee7
3 changed files with 53 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -424,7 +424,7 @@
.sidenav-tree ul.top-level > li > ul li a i{position:absolute;left:16px;top:18px;font-size:22px}
.sidenav-tree ul.top-level > li > ul li a span{display:block;line-height:150%}
.sidenav-tree ul.top-level > li > ul li a span.header{color:#ffffff;font-size:15px;margin-bottom:5px}
.sidenav-tree ul.top-level > li > ul li a span.description{color:#bdc3c7;font-size:13px}
.sidenav-tree ul.top-level > li > ul li a span.description{color:rgba(255,255,255,0.6);font-size:13px}
.sidenav-tree ul.top-level > li > ul li:hover a,.sidenav-tree ul.top-level > li > ul li.active a{opacity:1;filter:alpha(opacity=100)}
.sidenav-tree ul.top-level > li > ul li.active a{color:rgba(255,255,255,0.91)}
.sidenav-tree ul.top-level > li > ul li.active a span.header{color:#ffffff}
@ -929,9 +929,9 @@ body.outer .layout > .layout-row > .layout-cell .outer-form-container .horizonta
.fancy-layout .form-tabless-fields:after{clear:both}
.fancy-layout .form-tabless-fields label{text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:0}
.fancy-layout .form-tabless-fields input[type=text]{background:transparent;border:none;color:#ffffff;font-size:35px;font-weight:100;height:auto;padding:0}
.fancy-layout .form-tabless-fields input[type=text]::-moz-placeholder{color:#f4c69e;opacity:1}
.fancy-layout .form-tabless-fields input[type=text]:-ms-input-placeholder{color:#f4c69e}
.fancy-layout .form-tabless-fields input[type=text]::-webkit-input-placeholder{color:#f4c69e}
.fancy-layout .form-tabless-fields input[type=text]::-moz-placeholder{color:rgba(255,255,255,0.5);opacity:1}
.fancy-layout .form-tabless-fields input[type=text]:-ms-input-placeholder{color:rgba(255,255,255,0.5)}
.fancy-layout .form-tabless-fields input[type=text]::-webkit-input-placeholder{color:rgba(255,255,255,0.5)}
.fancy-layout .form-tabless-fields input[type=text]:focus,.fancy-layout .form-tabless-fields input[type=text]:hover{background-color:rgba(255,255,255,0.1)}
.fancy-layout .form-tabless-fields .form-group{padding-bottom:0}
.fancy-layout .form-tabless-fields .form-group.is-required > label:after{display:none}

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

@ -40,7 +40,7 @@
@color-sidebarnav-tree-group: #ecf0f1;
@color-sidebarnav-tree-group-bg: rgba(0,0,0,.15);
@color-sidebarnav-tree-inactive-header: #ffffff;
@color-sidebarnav-tree-inactive-desc: #BDC3C7;
@color-sidebarnav-tree-inactive-desc: rgba(255,255,255,.6);
@color-sidebarnav-tree-inactive-text: #ffffff;
@color-sidebarnav-tree-active-header: #ffffff;
@color-sidebarnav-tree-inactive-bg: transparent;
@ -110,7 +110,7 @@
@color-fancy-form-label: rgba(255, 255, 255, .5);
@color-fancy-form-text: #ffffff;
@color-fancy-form-text-selection: #d35400;
@color-fancy-form-placeholder: #f4c69e;
@color-fancy-form-placeholder: rgba(255, 255, 255, .5);
@color-fancy-form-inactive-tab: #b9530f;
@color-sortable-caret: #999999;

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

@ -27,14 +27,29 @@
.bg-s-s20 { background-color: saturate(@brand-secondary, 20%); }
.bg-a-s20 { background-color: saturate(@brand-accent, 20%); }
@custom-dark-accent: mix(black, saturate(@brand-accent, 20%), 25%);
@custom-dark-secondary: mix(black, saturate(@brand-secondary, 5%), 15%);
//
// Edge cases
// Sidenav Tree
//
.sidenav-tree ul.top-level > li > div.group:before {
border-top-color: @brand-secondary;
}
//
// Outside Layout
//
body.outer {
background: @custom-dark-secondary;
}
body.outer .layout > .layout-row.layout-head {
background: mix(black, saturate(@custom-dark-secondary, 5%), 27%);
}
//
// Logos
//
@ -47,53 +62,25 @@
height: 170px !important;
}
/*
//
// Outside Layout
//
@color-outer-bg: @secondary-color-dark;
@color-outer-header: mix(black, saturate(@secondary-color-dark, 5%), 27%);
body.outer {
background: @color-outer-bg;
}
body.outer .layout > .layout-row.layout-head {
background: @color-outer-header;
}
//
// Side navigation bar
//
@color-sidebarnav-bg: @secondary-color-light;
#layout-sidenav {
background-color: @color-sidebarnav-bg;
}
//
// Popover
//
@color-popover-head-bg: @primary-color-dark;
div.control-popover {
.popover-head {
background: @color-popover-head-bg;
background: @custom-dark-accent;
}
&.placement-bottom .popover-head:before {
border-bottom-color: @color-popover-head-bg;
border-bottom-color: @custom-dark-accent;
}
&.placement-left .popover-head:before {
border-left-color: @color-popover-head-bg;
border-left-color: @custom-dark-accent;
}
&.placement-right .popover-head:before {
border-right-color: @color-popover-head-bg;
border-right-color: @custom-dark-accent;
}
}
@ -101,118 +88,68 @@ div.control-popover {
// Popup
//
@color-popup-header-bg: @primary-color-dark;
.modal-header {
background: @color-popup-header-bg;
background: @custom-dark-accent;
}
//
// List
//
@color-list-stripe-active: @primary-color-light;
@color-list-active-sort: @primary-color-dark;
table.table.data {
tbody {
tr.active td {
&:first-child {
border-left: 3px solid @color-list-stripe-active;
border-left: 3px solid @brand-accent;
}
}
}
}
//
// Breadcrumb
// Fancy Layout
//
@color-breadcrumb-background: mix(rgb(43,43,43), @secondary-color-dark, 50%);
.fancy-layout .form-tabless-fields {
background: @brand-accent;
.control-breadcrumb {
background-color: @color-breadcrumb-background;
.loading-indicator-container .loading-indicator {
background: @brand-accent;
}
}
//
// Fancy layout
//
@color-fancy-form-tabless-fields-bg: @primary-color-light;
@color-fancy-master-tabs-bg: @primary-color-dark;
@color-fancy-form-inactive-tab: mix(black, desaturate(@primary-color-dark, 14.5%), 5%);
@color-fancy-form-placeholder: lighten(@primary-color-light, 30%);
.fancy-layout {
.control-tabs, &.control-tabs {
&.master-tabs {
> div > div.tabs-container {
background: @color-fancy-master-tabs-bg;
}
}
&.secondary-tabs {
&.content-tabs {
&.primary-collapsed {
> div > ul.nav-tabs {
background: @color-fancy-form-tabless-fields-bg;
}
}
}
}
&.primary-tabs {
> div > ul.nav-tabs {
&.master-area {
background: @color-fancy-form-tabless-fields-bg;
}
}
}
&.master-tabs {
> div > div.tabs-container > ul.nav-tabs > li {
a > span.title {
background-color: @color-fancy-form-inactive-tab;
//
// Disabled: See BrandSettings::makeTabSvg()
//
//&:before, &:after {
// background-image: url(~'@{tab-svg}');
//}
}
&.active {
a > span.title {
background-color: @color-fancy-form-tabless-fields-bg;
}
}
}
.fancy-layout .control-tabs.master-tabs,
.fancy-layout.control-tabs.master-tabs {
> div > div.tabs-container > ul.nav-tabs > li.active a > span.title {
&, &:before, &:after {
background: @brand-accent;
}
}
.form-tabless-fields {
&,
.loading-indicator-container .loading-indicator {
background: @color-fancy-form-tabless-fields-bg;
}
input[type=text]::-webkit-input-placeholder {
color: @color-fancy-form-placeholder;
> div > div.tabs-container > ul.nav-tabs > li a > span.title {
&, &:before, &:after {
background-color: mix(black, saturate(@brand-accent, 20%), 31%);
}
}
> div > div.tabs-container {
background-color: @custom-dark-accent;
}
}
.control-filelist ul li.active > a:after {
background: @brand-accent;
}
//
// Component List
//
@color-component-list-bg: @secondary-color-dark;
div.control-componentlist {
background-color: @color-component-list-bg;
background-color: @custom-dark-secondary;
&.droppable {
background-color: lighten(@color-component-list-bg, 20%);
background-color: lighten(@custom-dark-secondary, 20%);
}
}
@ -221,92 +158,9 @@ div.control-componentlist {
&.primary-tabs {
> div > ul.nav-tabs {
&.component-area {
background: @color-component-list-bg;
background: @custom-dark-secondary;
}
}
}
}
}
//
// File List
//
@color-list-active-border: @primary-color-light;
.control-filelist {
ul li.active a:after {
background: @color-list-active-border;
}
}
.control-assetlist {
ul li.active a.link:after {
background: @color-list-active-border;
}
}
.nav.selector-group {
li {
&.active {
border-color: @color-list-active-border;
}
}
}
//
// TreeView
//
.control-treeview {
ol {
> li {
&.active {
> div {
&:after {
background: @color-list-active-border;
}
}
}
}
}
}
//
// Sidenav Tree
//
@color-sidebarnav-bg: @secondary-color-light;
@color-sidebarnav-tree-group-bg: @secondary-color-dark;
@color-sidebarnav-tree-inactive-bg: mix(white, @secondary-color-light, 7%);
@color-sidebarnav-tree-active-bg: @secondary-color-light;
@color-sidebarnav-tree-active-marker: @primary-color-light;
.sidenav-tree {
background: @color-sidebarnav-bg;
ul.top-level > li {
> div.group h3 {
background: @color-sidebarnav-tree-group-bg;
}
> ul li {
a {
background: @color-sidebarnav-tree-inactive-bg;
}
&.active a {
background: @color-sidebarnav-tree-active-bg;
&:before {
background: @color-sidebarnav-tree-active-marker;
}
}
&:hover a {
background: @color-sidebarnav-tree-active-bg;
}
}
}
}
*/