cosmo: tweaked colors to match metro better

[bootswatch] / cosmo / bootswatch.less

// Cosmo 2.2.1
// Bootswatch
// -----------------------------------------------------


// TYPOGRAPHY
// -----------------------------------------------------

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');

body {
        font-weight: 300;
}

h1 {
        font-size: 50px;
}

h2, h3 {
        font-size: 26px;
}

h4 {
        font-size: 14px;
}

h5, h6 {
        font-size: 11px;
}

blockquote {

        padding: 10px 15px;
        background-color: @grayLighter;
        border-left-color: @gray;

        &.pull-right {
                padding: 10px 15px;
                border-right-color: @gray;
        }

        small {
                color: @gray;
        }
}

.muted {
        color: @gray;
}

// SCAFFOLDING
// -----------------------------------------------------

// NAVBAR
// -----------------------------------------------------

.navbar {

        .navbar-inner {
                background-image: none;
                .box-shadow(none);
                .border-radius(0);
        }

        .brand {

                &:hover {
                        color: @navbarLinkColorHover;
                }
        }

        .nav > .active > a,
        .nav > .active > a:hover,
        .nav > .active > a:focus {
                .box-shadow(none);
                background-color: @navbarLinkBackgroundHover;
        }

        .nav li.dropdown.open > .dropdown-toggle,
        .nav li.dropdown.active > .dropdown-toggle,
        .nav li.dropdown.open.active > .dropdown-toggle {
                color: @white;

                &:hover {
                        color: @grayLighter;
                }
        }

        .navbar-search .search-query {
                line-height: normal;
        }

        &-inverse {

                .brand,
                .nav > li > a {
                        text-shadow: none;
                }

                .brand:hover,
                .nav > .active > a,
                .nav > .active > a:hover,
                .nav > .active > a:focus {
                        background-color: @navbarInverseLinkBackgroundHover;
                        .box-shadow(none);
                        color: @white;
                }

                .navbar-search .search-query {
                        color: @grayDarker;
                }
        }
}

div.subnav {

        background-color: @grayLight;
        background-image: none;
        .box-shadow(none);
        border-color: transparent;
        .border-radius(0);

        .nav {
                background-color: transparent;
        }

        .nav > li > a {
                border-color: transparent;
        }

        .nav > .active > a {
                border-color: transparent;
                background-color: transparent;
                // border-left-width: 2px;
                .box-shadow(none);
                color: @grayDarker;

                &:hover {
                        background-color: @black;
                        color: @white;
                }
        }

        &-fixed {
                top: @navbarHeight;
        }
}

// NAV
// -----------------------------------------------------

.nav {

        .open .dropdown-toggle,
        & > li.dropdown.open.active > a:hover {
                color: @blue;
        }

}

.nav-tabs {

        & > li > a {
                .border-radius(0);
        }

        &.nav-stacked {

                & > li > a:hover {
                        background-color: @blue;
                        color: @white;
                }

                & > .active > a,
                & > .active > a:hover {
                        background-color: @white;
                        color: @gray;
                }

                & > li:first-child > a,
                & > li:last-child > a {
                        .border-radius(0);
                }
        }
}

.nav-pills {

        & > li > a {
                background-color: @grayLight;
                .border-radius(0);
                color: @black;

                &:hover {
                        background-color: @black;
                        color: @white;
                }
        }

        & > .disabled > a,
        & > .disabled > a:hover {
                background-color: @grayLighter;
                color: @grayDark;
        }
}

.nav-list {

        & > li > a {
                color: @grayDarker;

                &:hover {
                        background-color: @blue;
                        color: @white;
                        text-shadow: none;
                }
        }

        .nav-header {
                color: @grayDarker;
        }

        .divider {
                background-color: @gray;
                border-bottom: none;
        }
}

.pagination {

        ul {

                .box-shadow(none);

                & > li > a,
                & > li > span {
                        margin-right: 6px;
                        color: @grayDarker;

                        &:hover {
                                background-color: @grayDarker;
                                color: @white;
                        }
                }

                & > li:last-child > a,
                & > li:last-child > span {
                        margin-right: 0;
                }

                & > .active > a,
                & > .active > span { 
                        color: @white;
                }

                & > .disabled > span,
                & > .disabled > a,
                & > .disabled > a:hover {
                        background-color: @grayLighter;
                        color: @grayDark;
                }
        }
}

.pager {

        li > a,
        li > span {
                background-color: @grayLight;
                border: none;
                .border-radius(0);
                color: @grayDarker;

                &:hover {
                        background-color: @grayDarker;
                        color: @white;
                }
        }

        .disabled > a,
        .disabled > a:hover,
        .disabled > span {
                background-color: @grayLighter;
                color: @grayDark;
        }

}

.breadcrumb {
        background-color: @grayLight;

        li {
                text-shadow: none;
        }

        .divider,
        .active {
                color: @grayDarker;
                text-shadow: none;
        }
}

// BUTTONS
// -----------------------------------------------------

.btn {

        padding: 5px 12px;
        background-image: none;
        .box-shadow(none);
        border: none;
        .border-radius(0);
        text-shadow: none;

        &.disabled {
                box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05);
        }

        &-large {
                padding: 22px 30px;
        }

        &-mini {
                padding: 2px 6px;
        }
}

.btn-group {

        & > .btn:first-child,
        & > .btn:last-child,
        & > .dropdown-toggle {
                .border-radius(0);
        }

        & > .btn + .dropdown-toggle {
                .box-shadow(none);
        }
}

// TABLES
// -----------------------------------------------------

.table {

        tbody tr.success td {
                color: @white;
        }

        tbody tr.error td {
                color: @white;
        }

        tbody tr.info td {
                color: @white;
        }

        &-bordered {
                .border-radius(0);

                thead:first-child tr:first-child th:first-child,
                tbody:first-child tr:first-child td:first-child {
                        .border-radius(0);
                }

                thead:last-child tr:last-child th:first-child,
                tbody:last-child tr:last-child td:first-child,
                tfoot:last-child tr:last-child td:first-child {
                        .border-radius(0);
                }
        }
}

// FORMS
// -----------------------------------------------------

select, textarea, input[type="text"], input[type="password"], input[type="datetime"],
input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
input[type="week"], input[type="number"], input[type="email"], input[type="url"],
input[type="search"], input[type="tel"], input[type="color"] {
        color: @grayDarker;
}

.control-group {

        &.warning {

                & > label,
                .help-block,
                .help-inline {
                        color: @orange;
                }

                input,
                select,
                textarea {
                        border-color: @orange;
                        color: @grayDarker;
                }
        }

        &.error {

                & > label,
                .help-block,
                .help-inline {
                        color: @red;
                }

                input,
                select,
                textarea {
                        border-color: @red;
                        color: @grayDarker;
                }
        }

        &.success {

                & > label,
                .help-block,
                .help-inline {
                        color: @green;
                }

                input,
                select,
                textarea {
                        border-color: @green;
                        color: @grayDarker;
                }
        }
}

legend {
        border-bottom: none;
        color: @grayDarker;
}

.form-actions {
        border-top: none;
        background-color: @grayLighter;
}

// DROPDOWNS
// -----------------------------------------------------

.dropdown-menu {
        .border-radius(0);
}

// ALERTS, LABELS, BADGES
// -----------------------------------------------------

.alert {
        .border-radius(0);
        text-shadow: none;

        &-heading, h1, h2, h3, h4, h5, h6 {
                color: @white;
        }
}

.label {
        min-width: 80px;
        min-height: 80px;
        .border-radius(0);
        font-weight: 300;
        text-shadow: none;

        &-success {
                background-color: @green;
        }

        &-important {
                background-color: @red;
        }

        &-info {
                background-color: @purple;
        }

        &-inverse {
                background-color: @black;
        }
}

.badge {

        .border-radius(0);
        font-weight: 300;
        text-shadow: none;

        &-success {
                background-color: @green;
        }

        &-important {
                background-color: @red;
        }

        &-info {
                background-color: @purple;
        }

        &-inverse {
                background-color: @black;
        }
}

// MISC
// -----------------------------------------------------

.hero-unit {
        border: none;
        .border-radius(0);
        .box-shadow(none);
}

.well {
        border: none;
        .border-radius(0);
        .box-shadow(none);
}

[class^="icon-"], [class*=" icon-"] {
        margin: 0 2px;
        vertical-align: -2px;
}

a.thumbnail {
        background-color: @grayLight;

        &:hover {
                background-color: @gray;
                border-color: transparent;
        }
}

.progress {
        height: 6px;
        .border-radius(0);
        .box-shadow(none);
        background-color: @grayLighter;
        background-image: none;

        .bar {
                background-color: @blue;
                background-image: none;
        }

        &-info {
                background-color: @purple;
        }

        &-success {
                background-color: @green;
        }

        &-warning {
                background-color: @orange;
        }

        &-danger {
                background-color: @red;
        }
}

.modal {
        .border-radius(0);

        &-header {
                border-bottom: none;
        }

        &-footer {
                border-top: none;
                background-color: transparent;
        }
}

.popover {
        .border-radius(0);
        color: @white;

        &-title {
                border-bottom: none;
                color: @white;
        }

}

// MEDIA QUERIES
// -----------------------------------------------------