// Slate 3.3.5 // Bootswatch // ----------------------------------------------------- .btn-shadow(@color) { #gradient > .vertical-three-colors(lighten(@color, 6%), @color, 60%, darken(@color, 4%)); filter: none; } .btn-shadow-inverse(@color) { #gradient > .vertical-three-colors(darken(@color, 24%), darken(@color, 18%), 40%, darken(@color, 16%)); filter: none; } // Navbar ===================================================================== .navbar { .btn-shadow(@navbar-default-bg); border: 1px solid rgba(0, 0, 0, 0.6); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); .navbar-nav > li > a { border-right: 1px solid rgba(0, 0, 0, 0.2); border-left: 1px solid rgba(255, 255, 255, 0.1); &:hover { .btn-shadow-inverse(@navbar-default-bg); border-left-color: transparent; } } &-inverse { .btn-shadow(@navbar-inverse-bg); .badge { background-color: @navbar-inverse-link-active-bg; } .navbar-nav > li > a { &:hover { .btn-shadow-inverse(@navbar-inverse-bg); } } } .nav .open > a { border-color: transparent; } &-nav > li.active > a { border-left-color: transparent; } &-form { margin-left: 5px; margin-right: 5px; } } // Buttons ==================================================================== .btn, .btn:hover { border-color: rgba(0, 0, 0, 0.6); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } .btn-default { .btn-shadow(@btn-default-bg); &:hover { .btn-shadow-inverse(@btn-default-bg); } } .btn-primary { .btn-shadow(@btn-primary-bg); &:hover { .btn-shadow-inverse(@btn-primary-bg); } } .btn-success { .btn-shadow(@btn-success-bg); &:hover { .btn-shadow-inverse(@btn-success-bg); } } .btn-info { .btn-shadow(@btn-info-bg); &:hover { .btn-shadow-inverse(@btn-info-bg); } } .btn-warning { .btn-shadow(@btn-warning-bg); &:hover { .btn-shadow-inverse(@btn-warning-bg); } } .btn-danger { .btn-shadow(@btn-danger-bg); &:hover { .btn-shadow-inverse(@btn-danger-bg); } } .btn-link, .btn-link:hover { border-color: transparent; } // Typography ================================================================= h1, h2, h3, h4, h5, h6 { text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); } .text-primary, .text-primary:hover { color: @brand-primary; } .text-success, .text-success:hover { color: @brand-success; } .text-danger, .text-danger:hover { color: @brand-danger; } .text-warning, .text-warning:hover { color: @brand-warning; } .text-info, .text-info:hover { color: @brand-info; } // Tables ===================================================================== .table { .success, .warning, .danger, .info { color: #fff; } &-bordered tbody { tr.success, tr.warning, tr.danger { td, &:hover td { border-color: @table-border-color; } } } } .table-responsive > .table { background-color: @table-bg; } // Forms ====================================================================== input, textarea { color: @input-color; } .has-warning { .help-block, .control-label, .radio, .checkbox, .radio-inline, .checkbox-inline, &.radio label, &.checkbox label, &.radio-inline label, &.checkbox-inline label, .form-control-feedback { color: @brand-warning; } .form-control, .form-control:focus { border-color: @brand-warning; } .input-group-addon { background-color: @body-bg; border: none; } } .has-error { .help-block, .control-label, .radio, .checkbox, .radio-inline, .checkbox-inline, &.radio label, &.checkbox label, &.radio-inline label, &.checkbox-inline label, .form-control-feedback { color: @brand-danger; } .form-control, .form-control:focus { border-color: @brand-danger; } .input-group-addon { background-color: @body-bg; border: none; } } .has-success { .help-block, .control-label, .radio, .checkbox, .radio-inline, .checkbox-inline, &.radio label, &.checkbox label, &.radio-inline label, &.checkbox-inline label, .form-control-feedback { color: @brand-success; } .form-control, .form-control:focus { border-color: @brand-success; } .input-group-addon { background-color: @body-bg; border: none; } } legend { color: #fff; } .input-group-addon { border-color: rgba(0, 0, 0, 0.6); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); .btn-shadow(@btn-default-bg); color: @btn-default-color; } // Navs ======================================================================= .nav { .open > a, .open > a:hover, .open > a:focus { border-color: rgba(0, 0, 0, 0.6); } } .nav-pills { & > li > a { .btn-shadow(@btn-default-bg); border: 1px solid rgba(0, 0, 0, 0.6); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); &:hover { .btn-shadow-inverse(@btn-default-bg); border: 1px solid rgba(0, 0, 0, 0.6); } } & > li.active > a, & > li.active > a:hover { background-color: none; .btn-shadow-inverse(@btn-default-bg); border: 1px solid rgba(0, 0, 0, 0.6); } & > li.disabled > a, & > li.disabled > a:hover { .btn-shadow(@btn-default-bg); } } .pagination { & > li > a, & > li > span { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); .btn-shadow(@btn-default-bg); &:hover { .btn-shadow-inverse(@btn-default-bg); } } & > li.active > a, & > li.active > span { .btn-shadow-inverse(@btn-default-bg); } & > li.disabled > a, & > li.disabled > a:hover, & > li.disabled > span, & > li.disabled > span:hover { background-color: transparent; .btn-shadow(@btn-default-bg); } } .pager { & > li > a { .btn-shadow(@btn-default-bg); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); &:hover { .btn-shadow-inverse(@btn-default-bg); } } & > li.disabled > a, & > li.disabled > a:hover { background-color: transparent; .btn-shadow(@btn-default-bg); } } .breadcrumb { border: 1px solid rgba(0, 0, 0, 0.6); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); .btn-shadow(@btn-default-bg); } // Indicators ================================================================= .alert { .alert-link, a { color: #fff; text-decoration: underline; } .close { color: @close-color; text-decoration: none; } } // Progress bars ============================================================== // Containers ================================================================= a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: @thumbnail-border; } a.list-group-item { &.active, &.active:hover, &.active:focus { border-color: @list-group-border; } &-success { &.active { background-color: @state-success-bg; } &.active:hover, &.active:focus { background-color: darken(@state-success-bg, 5%); } } &-warning { &.active { background-color: @state-warning-bg; } &.active:hover, &.active:focus { background-color: darken(@state-warning-bg, 5%); } } &-danger { &.active { background-color: @state-danger-bg; } &.active:hover, &.active:focus { background-color: darken(@state-danger-bg, 5%); } } } .jumbotron { border: 1px solid rgba(0, 0, 0, 0.6); } .panel-primary, .panel-success, .panel-danger, .panel-warning, .panel-info { .panel-heading { border-color: #000; } }