// Cosmo 2.3.2 // Bootswatch // —————————————————–
// TYPOGRAPHY // —————————————————–
body {
font-weight: 300; background: @bodyBackground; //url('../img/light.png') repeat right top;
}
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;
}
.text-warning { color: @orange; } a.text-warning:hover { color: darken(@orange, 10%); }
.text-error { color: @red; } a.text-error:hover { color: darken(@red, 10%); }
.text-info { color: @purple; } a.text-info:hover { color: darken(@purple, 10%); }
.text-success { color: @green; } a.text-success:hover { color: darken(@green, 10%); }
// 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 {
margin: 0 1px; background: @grayLight none; .box-shadow(none); border: none; .border-radius(0); .nav { background-color: transparent; } .nav > li > a { border-color: transparent; } .nav > .active > a, .nav > .active > a:hover { border-color: transparent; background-color: @black; color: @white; .box-shadow(none); } &-fixed { top: @navbarHeight + 1; margin: 0; }
}
// NAV // —————————————————–
.nav {
.open .dropdown-toggle, & > li.dropdown.open.active > a:hover { color: @blue; }
}
.nav-tabs {
& > li > a { .border-radius(0); } li > a:hover, li.active > a, li.active > a:hover { border-color: transparent; background-color: @blue; color: @white; } li.disabled > a { color: @textColor; } .open .dropdown-toggle { background-color: #060606; border-color: transparent; }
}
.tabs-below, .tabs-left, .tabs-right {
& > .nav-tabs > li > a{ .border-radius(0); border: 0px; }
}
.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); }
}
.btn-large {
padding: 22px 30px;
}
.btn-small {
padding: 2px 10px;
}
.btn-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, input, input, input, input, input, input, input, input, input, input, input, input, input {
color: @grayDarker;
}
.control-group {
&.warning { .control-label, .help-block, .help-inline { color: @orange; } input, select, textarea { border-color: @orange; color: @grayDarker; } } &.error { .control-label, .help-block, .help-inline { color: @red; } input, select, textarea { border-color: @red; color: @grayDarker; } } &.success { .control-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; .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; color: @black; &-success { background-color: @green; } &-important { background-color: @red; } &-info { background-color: @purple; } &-inverse { background-color: @black; }
}
// MISC // —————————————————–
a:hover {
text-decoration: none;
}
.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 {
background-color: @grayLighter; background-image: none; .border-radius(0);
}
.modal {
.border-radius(0); &-header { border-bottom: none; } &-footer { border-top: none; background-color: transparent; }
}
.popover {
.border-radius(0); &-title { border-bottom: none; color: @white; }
}
// MEDIA QUERIES // —————————————————–