// Bootswatch.less // Swatch: Amelia // ----------------------------------------------------- // TYPOGRAPHY // ----------------------------------------------------- @import url('http://fonts.googleapis.com/css?family=Cabin:400,700'); h1, h2, h3, h4, h5, h6, h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { color: @textColor; font-weight: normal; } input, button, select, textarea, .navbar-search .search-query { font-family: @baseFontFamily; } .muted { color: rgba(256, 256, 256, 0.5); } // SCAFFOLDING // ----------------------------------------------------- body { background-color: #4397A2; #gradient > .radial(lighten(#0F8790, 7%), #0F8790); } hr { border-bottom: 1px solid rgba(256, 256, 256, 0.3); } .page-header { border-bottom: 0px solid transparent; } footer.footer { border-top: 1px solid rgba(256, 256, 256, 0.3); } // NAVBAR // ----------------------------------------------------- .navbar { .navbar-inner { .border-radius(0); } .brand { padding-top: 12px; font-size: 24px; font-weight: normal; } .nav > li > a { padding-top: 17px; padding-bottom: 14px; text-shadow: none; color: @textColor; } .nav > li.active > a { color: @white; background-color: lighten(@navbarBackground, 10%); } .nav > li > a:hover, .nav > li.active > a:hover { background-color: lighten(@navbarBackground, 10%); } .navbar-search { margin-top: 10px; } .navbar-search .search-query { border: 2px solid lighten(@navbarBackground, 10%); background-color: transparent; .border-radius(0); .box-shadow(none); &:focus, &.focus { background-color: @grayLighter; border-color: @grayLighter; text-shadow: none; padding: 4px 9px; .box-shadow(none); } } } .navbar .nav > li.dropdown.open > .dropdown-menu a:hover, div.subnav .nav > li.dropdown.open > .dropdown-menu a:hover, .dropdown-menu > li > a:hover, .nav .dropdown.open > .dropdown-menu > li > a:hover { background-color: rgba(0, 57, 59, 0.9); } div.subnav { background-color: rgba(42, 99, 105, 0.9); background-image: none; border: 0px solid transparent; .border-radius(0); .box-shadow(none); .nav > li.dropdown.open > a { border-color: transparent; background-color: rgba(256, 256, 256, 0.4); } .nav > li > a { color: @textColor; border-color: transparent; } .nav > .active > a, .nav > .active > a:hover, .nav > li > a:hover, .nav > li.active > a:hover, { border-right-color: transparent; background-color: rgba(256, 256, 256, 0.4); color: @textColor; } } div.subnav-fixed { top: 50px; } .navbar .nav-collapse.collapse { li > a { color: @textColor; .border-radius(0); } li > a:hover { background-color: lighten(@navbarBackground, 10%); } .navbar-form, .navbar-search { .box-shadow(none); border-color: lighten(@navbarBackground, 10%); } .navbar-search .search-query { border: 2px solid @textColor; } } // BUTTONS // ----------------------------------------------------- .buttonBackgroundCustom(@color) { background-image: none; background-color: @color; &:hover, &:active, &.active, &.disabled, &[disabled] { background-color: darken(@color, 5%); text-shadow: none; } &:active, &.active { background-color: darken(@color, 15%); .box-shadow(none); } // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves &:active, &.active { background-color: darken(@color, 15%) e("\9"); } } .btn { padding: 12px 16px; .border-radius(0); border: 0px solid transparent; text-shadow: none; .box-shadow(none); .buttonBackgroundCustom(@grayLighter); } .btn-group .btn:first-child { margin-left: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; } .btn-group .btn:last-child, .btn-group .dropdown-toggle { -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; } .btn-group .dropdown-toggle, .btn-group.open .dropdown-toggle, .btn.open .dropdown-toggle { .box-shadow(none); } .btn-warning .caret { opacity: 0.75; border-top-color: @white; } .btn-primary { .buttonBackgroundCustom(#AD1D28); } .btn-warning { .buttonBackgroundCustom(@orange); } .btn-danger { .buttonBackgroundCustom(darken(@yellow, 3%)); } .btn-success { .buttonBackgroundCustom(@green); } .btn-info { .buttonBackgroundCustom(@purple); } .btn-inverse { .buttonBackgroundCustom(#27666D); } .btn-small { padding: 13px 16px 12px; } [class^="icon-"], [class*=" icon-"] { margin-top: 2px; margin-right: 8px; } .btn-small [class^="icon-"] { margin-top: 1px; } .add-on [class^="icon-"] { margin-left: 5px; } // TABLES // ----------------------------------------------------- .table { background-color: lighten(#147E88, 10%); } .table th, .table td, .table tbody + tbody { border-top: 0px solid transparent; } .table-bordered { .border-radius(0); border: 1px solid lighten(#147E88, 12%); th, td { border-top: 1px solid lighten(#147E88, 12%); } th + th, td + td, th + td, td + th { border-left: 1px solid lighten(#147E88, 12%); } } .table-striped { tbody { tr:nth-child(odd) td, tr:nth-child(odd) th { background-color: lighten(#147E88, 15%); } } } .table { tbody tr:hover td, tbody tr:hover th { background-color: rgba(256, 256, 256, 0.4); } } // FORMS // ----------------------------------------------------- legend, label, .help-block, .input-file { color: @textColor; border: 0px solid transparent; } input, textarea, select, .uneditable-input { border: 0px solid transparent; padding: 10px; } button { margin-left: 12px; } input, textarea, .search-query, .uneditable-input, .input-append input, .input-append .uneditable-input, .input-prepend input, .input-prepend .uneditable-input { border-color: transparent; .border-radius(0); .box-shadow(none); } .form-actions { background-color: transparent; border-top: 0px solid transparent; } .control-group.warning > label, .control-group.warning .help-inline { color: lighten(@orange, 30%); } .control-group.error > label, .control-group.error .help-inline { color: lighten(@linkColor, 10%); } .control-group.success > label, .control-group.success .help-inline { color: lighten(@green, 20%); } .input-prepend .add-on, .input-append .add-on { height: 25px; padding-top: 9px; text-shadow: none; border-color: transparent; .border-radius(0); background-color: @grayLighter; } // NAVIGATION // ----------------------------------------------------- .breadcrumb, .pager > li > a { border-color: transparent; .border-radius(0); .box-shadow(none); text-shadow: none; } .breadcrumb { background-color: #3CB9C6; background-image: none; li { text-shadow: none; } .divider { color: @linkColor; } } .pager > li > a { background-color: #3CB9C6; &:hover { background-color: #8AD5DC; } } .pagination { ul { background-color: #3CB9C6; background-image: none; } li a { border: 0px solid transparent; } .disabled a, .disabled a:hover { color: @textColor; } li a:hover { background-color: rgba(256, 256, 256, 0.4); color: @linkColor; } .active a, .active a:hover { background-color: rgba(256, 256, 256, 0.4); color: @textColor; } ul, li:first-child a, li:last-child a { .border-radius(0); } } .nav-tabs .dropdown.open > .dropdown-toggle, .nav-pills .dropdown.open > .dropdown-toggle { background-color: #8AD5DC; color: @linkColor; border-color: transparent; } .nav-tabs, .nav-pills { border-color: transparent; li > a { border-color: transparent; .border-radius(0); .box-shadow(0); } li.active > a, li:active > a, li.active > a:hover, li:active > a:hover { color: @textColor; } li.active > a, li:active > a, li > a:hover, li.active > a:hover, li:active > a:hover { background-color: #8AD5DC; border-color: transparent; text-shadow: none; } } .nav-tabs, .nav-tabs > li > a { border-bottom: 1px solid rgba(256, 256, 256, 0.5); } .nav-tabs > li > a { background-color: #3CB9C6; } .nav-tabs.nav-stacked { li > a:first-child, li > a:last-child { .border-radius(0); } li > a, li > a:hover, li.active > a, li:active > a, li.active > a:hover, li:active > a:hover { border-color: transparent; } } .nav-list { .nav-header { text-shadow: none; color: @textColor; } li > a { text-shadow: none; } li.active > a, li:active > a, li > a:hover, li.active > a:hover, li:active > a:hover { background-color: #8AD5DC; text-shadow: none; } } // MISCELLANEOUS // ----------------------------------------------------- .alert, .label, .progress, .well, pre, code { border-color: transparent; .border-radius(0); .box-shadow(none); text-shadow: none; } code, pre { background-color: rgba(256, 256, 256, 0.3); padding: 2px; } .well { background-color: #3CB9C6; background-image: none; } .label, .label:hover { background-color: @grayLighter; text-shadow: none; color: @grayDark; } .label-warning, .label-warning:hover, .alert { background-color: @orange; color: @textColor; } .label-important, .label-important:hover, .alert-error { background-color: darken(@yellow, 3%); color: @textColor; } .label-success, .label-success:hover, .alert-success { background-color: @green; color: @textColor; } .label-info, .label-info:hover, .alert-info { background-color: @purple; color: @textColor; } .alert-heading { color: @textColor; } .progress { background-image: none; background-color: #27666D; .bar { .box-shadow(none); background-image: none; background-color: @orange; } } .progress-danger .bar { background-image: none; background-color: #AD1D28; } .progress-danger.progress-striped .bar { #gradient > .striped(#AD1D28); } .progress-success .bar { background-image: none; background-color: @green; } .progress-success.progress-striped .bar { #gradient > .striped(@green); } .progress-info .bar { background-image: none; background-color: @blue; } .progress-info.progress-striped .bar { #gradient > .striped(@blue); } .thumbnail { border: 0px solid transparent; .border-radius(0); .box-shadow(none); } blockquote { border-left-color: lighten(#147E88, 12%); &.pull-right { border-right-color: lighten(#147E88, 12%); } small { color: rgba(256, 256, 256, 0.6); } }