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

//
// Coded variables
//
// @logo-image
// @primary-color-light   - #e67e22
// @primary-color-dark    - #d35400
// @secondary-color-light - #34495e
// @secondary-color-dark  - #2b3e50
//

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

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

    &.placement-bottom .popover-head:before {
        border-bottom-color: @color-popover-head-bg;
    }

    &.placement-left .popover-head:before {
        border-left-color: @color-popover-head-bg;
    }

    &.placement-right .popover-head:before {
        border-right-color: @color-popover-head-bg;
    }
}

//
// Popup
//

@color-popup-header-bg: @primary-color-dark;

.modal-header {
    background: @color-popup-header-bg;
}

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

//
// Breadcrumb
//

@color-breadcrumb-background: mix(rgb(43,43,43), @secondary-color-dark, 50%);

.control-breadcrumb {
    background-color: @color-breadcrumb-background;
}

//
// 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%);

@tab-svg-part1: escape('<path d="M0,30C5,30,10,0,20,0c5,0,60,0,65,0c10,0,10,30,15,30"/>');
@tab-svg-part2: escape('<path fill="@{color-fancy-form-tabless-fields-bg}" d="M0,70c5,0,10-30,20-30c0,10,0,15,0,15v15"/>');
@tab-svg-part3: escape('<path fill="@{color-fancy-form-tabless-fields-bg}" d="M100,70c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>');
@tab-svg-part4: escape('<path fill="@{color-fancy-form-inactive-tab}" d="M0,110c5,0,10-30,20-30c0,10,0,15,0,15v15"/>');
@tab-svg-part5: escape('<path fill="@{color-fancy-form-inactive-tab}" d="M100,110c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>');

.fancy-layout {
    .control-tabs, &.control-tabs {
        &.master {
            > div > div.tabs-container {
                background: @color-fancy-master-tabs-bg;
            }
        }

        &.secondary {
            &.content-tabs {
                &.primary-collapsed {
                    > div > ul.nav-tabs {
                        background: @color-fancy-form-tabless-fields-bg;
                    }
                }
            }
        }

        &.primary {
            > div > ul.nav-tabs {
                &.master-area {
                    background: @color-fancy-form-tabless-fields-bg;
                }
            }
        }

        &.master {
            > div > div.tabs-container > ul.nav-tabs > li {
                a > span.title {
                    background-color: @color-fancy-form-inactive-tab;
                    &:before, &:after {
                        background-image: url(~'@{svg-head}@{svg-open}@{tab-svg-part1}@{tab-svg-part2}@{tab-svg-part3}@{tab-svg-part4}@{tab-svg-part5}@{svg-close}');
                    }
                }
                &.active {
                    a > span.title {
                        background-color: @color-fancy-form-tabless-fields-bg;
                    }
                }
            }
        }
    }

    .form-tabless-fields,
    .form-tabless-fields .loading-indicator-container .loading-indicator {
        background: @color-fancy-form-tabless-fields-bg;
    }
}

//
// Component List
//

@color-component-list-bg: @secondary-color-dark;

div.control-componentlist {
    background-color: @color-component-list-bg;

    &.droppable {
        background-color: lighten(@color-component-list-bg, 20%);
    }
}

.fancy-layout {
    .control-tabs, &.control-tabs {
        &.primary {
            > div > ul.nav-tabs {
                &.component-area {
                    background: @color-component-list-bg;
                }
            }
        }
    }
}

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