metro4/less/schemes/red-mirohost.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: #212121;
@schemeBackgroundSecondary: #252525;
@schemeTextColor: #ffffff;
@schemeTextColorSecondary: #919396;
@schemeControlColor: #B00015;
@schemeControlTextColor: #ffffff;
@schemeFontFamily: 'Open Sans',sans-serif;
@schemeFontSize: @fontSize;

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

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

@ratingOn: lighten(@schemeControlColor, 10%);

.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: @dark;
    }
}

.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 {
    background-color: #F8F8F8;

    .controls {
        .next, .prev {
            &.disabled {
                color: #323232 !important;
            }
        }
        .title {
            color: @dark;
        }
    }

    input[type=text], input[type=password], input[type=tel],
    input[type=datetime-local], input[type=email], input[type=file],
    input[type=month], input[type=number],
    input[type=search], input[type=time],
    input[type=url], input[type=week], input[type=file],
    select, textarea, .file, .input, .textarea, .select {
        background-color: @white;
        color: @dark;
    }
}