ORIENT/modules/backend/models/brandsettings/custom.less

167 lines
3.7 KiB
Plaintext

//
// Coded variables
//
// @logo-image
// @brand-primary
// @brand-secondary
// @brand-accent
//
.br-p { color: @brand-primary; }
.br-s { color: @brand-secondary; }
.br-a { color: @brand-accent; }
.br-p-s10 { color: saturate(@brand-primary, 10%); }
.br-s-s10 { color: saturate(@brand-secondary, 10%); }
.br-a-s10 { color: saturate(@brand-accent, 10%); }
.br-p-s20 { color: saturate(@brand-primary, 20%); }
.br-s-s20 { color: saturate(@brand-secondary, 20%); }
.br-a-s20 { color: saturate(@brand-accent, 20%); }
.bg-p { background-color: @brand-primary; }
.bg-s { background-color: @brand-secondary; }
.bg-a { background-color: @brand-accent; }
.bg-p-s10 { background-color: saturate(@brand-primary, 10%); }
.bg-s-s10 { background-color: saturate(@brand-secondary, 10%); }
.bg-a-s10 { background-color: saturate(@brand-accent, 10%); }
.bg-p-s20 { background-color: saturate(@brand-primary, 20%); }
.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%);
//
// 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
//
.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-white when not (@logo-image = '') {
background-image: url('@{logo-image}');
height: 170px !important;
}
//
// Popover
//
div.control-popover {
.popover-head {
background: @custom-dark-accent;
}
&.placement-bottom .popover-head:before {
border-bottom-color: @custom-dark-accent;
}
&.placement-left .popover-head:before {
border-left-color: @custom-dark-accent;
}
&.placement-right .popover-head:before {
border-right-color: @custom-dark-accent;
}
}
//
// Popup
//
.modal-header {
background: @custom-dark-accent;
}
//
// List
//
table.table.data {
tbody {
tr.active td {
&:first-child {
border-left: 3px solid @brand-accent;
}
}
}
}
//
// Fancy Layout
//
.fancy-layout .form-tabless-fields {
background: @brand-accent;
.loading-indicator-container .loading-indicator {
background: @brand-accent;
}
}
.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;
}
}
> 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
//
div.control-componentlist {
background-color: @custom-dark-secondary;
&.droppable {
background-color: lighten(@custom-dark-secondary, 20%);
}
}
.fancy-layout {
.control-tabs, &.control-tabs {
&.primary-tabs {
> div > ul.nav-tabs {
&.component-area {
background: @custom-dark-secondary;
}
}
}
}
}