metro4/less/schemes/darcula.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../include/vars";
@import (once) "builder/builder";

@schemeBackground: #2B2B2B;
@schemeBackgroundSecondary: #3a3a3a;
@schemeTextColor: #ffffff;
@schemeTextColorSecondary: #BBBBBB;
@schemeControlColor: #585b5d;
@schemeControlTextColor: #ffffff;
@schemeFontFamily: @fontName;
@schemeFontSize: @fontSize;

.scheme-builder(
    @schemeBackground,
    @schemeBackgroundSecondary,
    @schemeTextColor,
    @schemeTextColorSecondary,
    @schemeControlColor,
    @schemeControlTextColor,
    @schemeFontFamily,
    @schemeFontSize
);

.navview {
    .navview-pane {
        .navview-menu {
            li {
                &.active {
                    &::before {
                        background-color: @orange;
                    }
                }
            }
        }
    }
}

@ratingOn: @light;

.rating {
    .stars {
        li {
            &.on {
                color: @ratingOn;
            }
        }
    }
    &:not(.static) .stars {
        &:hover {
            li {
                color: @ratingOn;
            }
        }
    }
}

.ribbon-menu {
    .ribbon-button, .ribbon-tool-button, .ribbon-split, .ribbon-main, .ribbon-icon-button {
        color: @schemeControlColor;
    }
}

.wizard {
    & > section, & > .section {
        &.complete {
            border-color: darken(@schemeControlColor, 50%);
            &:nth-child(1) {border-color: @schemeControlColor;}
            &:nth-child(2) {border-color: darken(@schemeControlColor, 5%);}
            &:nth-child(3) {border-color: darken(@schemeControlColor, 10%);}
            &:nth-child(4) {border-color: darken(@schemeControlColor, 15%);}
            &:nth-child(5) {border-color: darken(@schemeControlColor, 20%);}
            &:nth-child(6) {border-color: darken(@schemeControlColor, 25%);}
            &:nth-child(7) {border-color: darken(@schemeControlColor, 30%);}
            &:nth-child(8) {border-color: darken(@schemeControlColor, 35%);}
            &:nth-child(9) {border-color: darken(@schemeControlColor, 40%);}
            &:nth-child(10) {border-color: darken(@schemeControlColor, 50%);}

            &::before {
                color: @schemeControlTextColor;
            }
        }

    }
}

.master {
    .controls {
        .next, .prev {
            color: @schemeControlTextColor;

            &.disabled {
                color: @schemeControlColor!important;
            }
        }
    }
}

.table {

    color: @schemeTextColorSecondary;

    thead {
        th, td {
            color: @white;
        }
    }
}