diff options
Diffstat (limited to 'superhero/bootswatch.less')
-rwxr-xr-x | superhero/bootswatch.less | 612 |
1 files changed, 612 insertions, 0 deletions
diff --git a/superhero/bootswatch.less b/superhero/bootswatch.less new file mode 100755 index 00000000..5afb0d61 --- /dev/null +++ b/superhero/bootswatch.less @@ -0,0 +1,612 @@ +// Bootswatch.less +// Swatch: Superhero +// ----------------------------------------------------- + +// TYPOGRAPHY +// -------------------------------------------------- + +@import url(http://fonts.googleapis.com/css?family=Oswald); +@import url(http://fonts.googleapis.com/css?family=Noticia+Text); + +h1, h2, h3, h4, h5, h6, legend, .navbar .brand, +.navbar .nav > li > a, +h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { + font-family: 'Oswald', sans-serif; + color: @orange; + text-shadow: -1px 1px 0 darken(@orange, 30%); +} + +h1, h2, legend, .navbar .brand, +.navbar .nav > li > a { + text-shadow: -2px 2px 0 darken(@orange, 30%); +} + +h1 { + line-height: 55px; +} + +// SCAFFOLDING +// -------------------------------------------------- + +code, pre { + background-color: lighten(@blue, 8%); + border: none; + color: @textColor; +} + +.prettyprint { + border: none; + text-decoration: none; +} + +blockquote { + border-left: 5px solid @blue; +} + +blockquote.pull-right { + border-right: 5px solid @blue; +} + +// NAVBAR +// -------------------------------------------------- + +.navbar .nav > li.active > a { + color: @orange; +} + +.navbar .brand:hover, +.navbar .nav > li > a:hover, +.navbar .nav > li.active > a:hover, +.navbar .nav > li.dropdown.open > a, +.navbar .nav > li.dropdown.open > a:hover { + position: relative; + top: 1px; + left: -1px; + color: @orange; + text-shadow: -1px 1px 0 darken(@orange, 30%); +} + +body { + background-color: @blueDark; +} + + +.navbar .navbar-inner { + .box-shadow(none); + background-image: none; +} + +.navbar .brand { + padding: 25px 20px 15px; + font-size: 30px; +} + +.navbar .nav > li > a { + padding: 27px 20px 13px; + line-height: 30px; + font-size: 22px; +} + +.navbar-search { + padding-top: 20px; +} + +.navbar-search .search-query { + font-family: @baseFontFamily; + font-size: @baseFontSize; + line-height: @baseLineHeight; + color: @textColor; + background-color: @blue; + .box-shadow(none); + border: none; +} + + +.navbar .divider-vertical { + height: 70px; +} + +.dropdown .caret { + margin-top: 14px; + opacity: 1; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 6px solid lighten(@blue, 10%); +} + +.navbar .nav .dropdown-toggle .caret, +.navbar .nav .open.dropdown .caret { + border-top-color: @textColor; +} + +.navbar .dropdown-menu::before { + border: none; +} + +.navbar .dropdown-menu::after { + left: 20px; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid lighten(@blue, 10%); +} + +.navbar [class^="icon-"], .navbar [class*=" icon-"] { + vertical-align: 20%; +} + +.navbar .btn-navbar { + background-color: @blue; + border-color: transparent; +} + +.navbar .nav-collapse.collapse { + background-color: @blue; + .border-radius(4px); + + li > a { + color: @textColor; + } + + li > a:hover { + color: @textColor; + background-color: lighten(@blue, 10%); + } +} + +.navbar .nav-collapse.collapse > .nav > li > a { + color: @orange; +} + +.subnav.subnav-fixed { + top: 70px; +} + +div.subnav { + background-color: @blue; + background-image: none; + border: none; + + .nav > li > a, + .nav > li.active > a { + border-left: none; + border-right: none; + color: @textColor; + } + + .nav > li > a:hover, + .nav > li.active > a:hover { + background-color: lighten(@blue, 10%); + } +} + +div.subnav .nav > li:first-child > a, +div.subnav .nav > li:first-child > a:hover, +div.subnav .nav > li.active:first-child > a, +div.subnav .nav > li.active:first-child > a:hover { + .border-radius(4px 0 0 4px); +} + +div.subnav .nav > li.active > a, +div.subnav .nav > li.active > a:hover { + color: @white; + background-color: @orange; + background-image: none; + .box-shadow(none); +} + +div.subnav.subnav-fixed { + .box-shadow(none); + + .nav > li > a, + .nav > li.active > a, + .nav > li > a:hover, + .nav > li.active > a:hover { + border-color: transparent; + padding-left: 12px; + padding-right: 12px; + .border-radius(0); + } + + + .nav > li > a:hover, + .nav > li.active > a:hover { + color: @white; + } +} + +.dropdown-menu { + background-color: lighten(@blue, 10%); + border: none; + + a { + color: @textColor; + } + + .divider { + border-bottom: none; + background-color: @blue; + } +} + +// TABLES +// ----------------------------------------------------- + +.table { + background-color: darken(@blue, 3%); +} + +.table th, .table td, .table tbody + tbody { + border-top: none; +} + +.table-bordered { + border: none; + th + th, + td + td, + th + td, + td + th { + border-left: none; + } + // Prevent a double border + thead:first-child tr:first-child th, + tbody:first-child tr:first-child th, + tbody:first-child tr:first-child td { + border-top: none; + } +} + +.table-striped { + tbody { + tr:nth-child(odd) td, + tr:nth-child(odd) th { + background-color: @blue; + } + } +} + +.table { + tbody tr:hover td, + tbody tr:hover th { + background-color: lighten(@blue, 5%); + } +} + +// BUTTONS +// -------------------------------------------------- + +.btn, +.btn:hover { + text-shadow: none; + background-image: none; + .box-shadow(-2px 2px 0 darken(@white, 80%)); + border: none; +} + +.btn-warning { + background-color: @yellow; + + &:hover { + background-color: darken(@yellow, 10%); + } +} + +.btn-primary, .btn-primary:hover { + .box-shadow(-2px 2px 0 darken(@primaryButtonBackground, 30%)); +} + +.btn-warning, .btn-warning:hover { + .box-shadow(-2px 2px 0 darken(@yellow, 30%)); +} + +.btn-danger, .btn-danger:hover { + .box-shadow(-2px 2px 0 darken(#ee5f5b, 30%)); +} + +.btn-success, .btn-success:hover { + .box-shadow(-2px 2px 0 darken(#62c462, 30%)); +} + +.btn-info, .btn-info:hover { + .box-shadow(-2px 2px 0 darken(#5bc0de, 40%)); +} + +.btn-inverse, .btn-inverse:hover { + .box-shadow(-2px 2px 0 darken(#454545, 20%)); +} + + +.btn-primary.dropdown-toggle, .btn-primary.dropdown-toggle:hover { + .box-shadow(0 2px 0 darken(@primaryButtonBackground, 30%)); +} + +.btn-warning.dropdown-toggle, .btn-warning.dropdown-toggle:hover { + .box-shadow(0 2px 0 darken(@yellow, 30%)); +} + +.btn-danger.dropdown-toggle, .btn-danger.dropdown-toggle:hover { + .box-shadow(0 2px 0 darken(#ee5f5b, 30%)); +} + +.btn-success.dropdown-toggle, .btn-success.dropdown-toggle:hover { + .box-shadow(0 2px 0 darken(#62c462, 40%)); +} + +.btn-info.dropdown-toggle, .btn-info.dropdown-toggle:hover { + .box-shadow(0 2px 0 darken(#5bc0de, 40%)); +} + +.btn-inverse.dropdown-toggle, .btn-inverse.dropdown-toggle:hover { + .box-shadow(0 2px 0 darken(#454545, 20%)); +} + +.btn.active, +.btn:active { + position: relative; + top: 1px; + left: -1px; + .box-shadow(-1px 1px 0 darken(@white, 70%)) +} + +.btn.disabled, +.btn.disabled.active, +.btn.disabled:active, +.btn[disabled] { + .box-shadow(none); + text-shadow: none; + top: 0; + left: 0; +} + +[class^="icon-"], [class*=" icon-"] { + vertical-align: -13%; +} + +// NAVIGATION +// -------------------------------------------------- + +.nav-list { + padding: 0 15px; +} + +.nav-list > li > a, .nav-list .nav-header { + text-shadow: none; + color: @textColor; +} + +.nav-list .active > a, .nav-list .active > a:hover { + text-shadow: none; + color: @white; +} + +.nav-list li > a:hover { + background-color: lighten(@blue, 10%); +} + +.nav-tabs, .nav-tabs.nav-stacked > li > a { + border-color: transparent; +} + +.nav-tabs { + > li > a { + background-color: @blue; + color: @textColor; + } + + li.active > a, + li.active > a:hover, + &.nav-stacked > li.active > a:hover { + color: @white; + background-color: @orange; + border-color: transparent; + } + + li > a:hover, + &.nav-stacked > li > a:hover { + background-color: lighten(@blue, 10%); + border-color: transparent; + } +} + +.nav-pills > li > a { + color: @textColor; + background-color: @blue; +} + +.nav-pills > li:hover > a { + background-color: lighten(@blue, 10%); + border-color: transparent; +} + +.nav-tabs .open .dropdown-toggle, +.nav-pills .open .dropdown-toggle, +.nav > .open.active > a:hover { + background-color: lighten(@blue, 10%); + border-color: transparent; +} + +.dropdown.open .dropdown-menu > li > a:hover, +.dropdown.open .dropdown-menu > li.active > a:hover { + background-color: @orange; + color: @white; +} + +.tabbable .nav-tabs, +.tabbable .nav-tabs > li.active > a, +.tabbable .nav-tabs > li > a:hover, +.tabbable .nav-tabs > li.active > a:hover { + border-color: transparent; +} + +.breadcrumb { + background-color: @blue; + background-image: none; + border: none; + .box-shadow(none); + + li { + text-shadow: none; + } + + .divider { + color: @textColor; + } +} + +.pagination ul { + + background-color: @blue; + background-image: none; + border-color: transparent; + + li > a { + border: none; + color: @textColor; + } + + li.active > a, + li.active > a:hover { + background: @orange; + color: @white; + } + + li > a:hover { + background: lighten(@blue, 10%); + } + + li.disabled > a, + li.disabled > a:hover { + background: darken(@blue, 5%); + } +} + +.pager a { + color: @textColor; + background-color: @blue; + border-color: transparent; + + &:hover { + background: lighten(@blue, 10%); + } +} + +// FORMS +// -------------------------------------------------- + +input, button, select, textarea { + font-family: 'Noticia Text', serif; +} + +legend { + border-bottom: none; +} + +label { + color: @textColor; + line-height: 15px; +} + +.help-block { + color: @textColor; + opacity: 0.6; +} + +.form-actions { + background-color: transparent; + border-top: none; +} + +// Warning +.control-group.warning { + .formFieldState(lighten(@warningText, 10%), lighten(@warningText, 10%), @warningBackground); +} +// Error +.control-group.error { + .formFieldState(lighten(@errorText, 10%), lighten(@errorText, 10%), @errorBackground); +} +// Success +.control-group.success { + .formFieldState(lighten(@successText, 10%), lighten(@successText, 10%), @successBackground); +} + +// MISCELLANEOUS +// -------------------------------------------------- + +hr, .page-header { + border-bottom: none; +} + +footer.footer { + border-top: 1px solid darken(@blueDark, 5%); +} + +.well { + background-color: @blue; + border: none; + .box-shadow(none); +} + +.progress { + background-color: darken(@blueDark, 5%); + background-image: none; + .box-shadow(none); + + .bar { + .box-shadow(none); + } +} + +.thumbnail { + border: none; + background: @blue; + .border-radius(3px); +} + +.label { + background-color: @blue; + color: @textColor; +} + +.label-important { + background-color: @errorText; +} + +.label-warning { + background-color: @orange; +} + +.label-success { + background-color: @successText; +} + +.label-info { + background-color: @infoText; +} + +.alert { + background-color: @blue; + border: none; + color: @textColor; + text-shadow: none; + + a { + color: lighten(@orange, 12%); + } +} + +.alert .alert-heading { + color: @orange; +} + +.alert-success { + background-color: @successText; +} + +.alert-danger, +.alert-error { + background-color: @errorText; +} + +.alert-info { + background-color: @infoText; +} + |