diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 7771b3931..0c954cb50 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -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} diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less index 8db02f968..02500a1a3 100644 --- a/modules/backend/assets/less/core/variables.less +++ b/modules/backend/assets/less/core/variables.less @@ -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; diff --git a/modules/backend/models/brandsettings/custom.less b/modules/backend/models/brandsettings/custom.less index d79cfda1a..3a34c52ce 100644 --- a/modules/backend/models/brandsettings/custom.less +++ b/modules/backend/models/brandsettings/custom.less @@ -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; - } - } - } -} - -*/ \ No newline at end of file