diff options
Diffstat (limited to '2/cyborg/bootswatch.less')
| -rwxr-xr-x | 2/cyborg/bootswatch.less | 599 |
1 files changed, 599 insertions, 0 deletions
diff --git a/2/cyborg/bootswatch.less b/2/cyborg/bootswatch.less new file mode 100755 index 00000000..4633be2a --- /dev/null +++ b/2/cyborg/bootswatch.less @@ -0,0 +1,599 @@ +// Cyborg 2.3.2 +// Bootswatch +// ----------------------------------------------------- + + +// TYPOGRAPHY +// ----------------------------------------------------- + +@import url('//fonts.googleapis.com/css?family=Droid+Sans:400,700'); + +label, input, button, select, textarea, +.navbar .search-query:-moz-placeholder, +.navbar .search-query::-webkit-input-placeholder { + font-family: 'Droid Sans', sans-serif; + color: @gray; +} + +code, pre { + background-color: @grayLighter; +} + +blockquote { + border-left: 5px solid @grayDark; + + &.pull-right { + border-right: 5px solid @grayDark; + } +} + +// SCAFFOLDING +// ----------------------------------------------------- + +html { + min-height: 100%; +} + +body { + min-height: 100%; + #gradient > .vertical (@bodyBackground, #252A30); +} + +.page-header { + border-bottom: 1px solid @grayDark +} + +hr { + border-bottom: none; +} + +// NAVBAR +// ----------------------------------------------------- + +.navbar { + + .navbar-inner { + .border-radius(0); + .box-shadow(none); + border-bottom: 1px solid @grayDark; + } + + .brand { + padding: 15px 20px 15px; + color: @grayLighter; + font-weight: normal; + text-shadow: none; + } + + .nav > li > a { + padding: 15px 15px 14px; + border-bottom: 1px solid transparent; + } + + .nav > li > a:hover, + .nav > .active > a, + .nav > .active > a:hover { + border-bottom: 1px solid @blue; + } + + .nav > .active > a, + .nav > .active > a:hover, + .nav > .active > a:focus { + .box-shadow(none); + } + + .navbar-text { + margin-bottom: 1px; + padding: 15px 15px 14px; + line-height: inherit; + } + + .divider-vertical { + margin: 0; + border-left: 1px solid @grayDark; + border-right-width: 0; + } + + .search-query, + .search-query:focus, + .search-query.focused { + .border-radius(1px); + background-color: @grayDark; + line-height: normal; + color: @grayLight; + text-shadow: none; + .placeholder(@gray); + } + + &-inverse { + + } +} + +@media (max-width: @navbarCollapseWidth) { + + .navbar .nav-collapse { + + .nav li > a { + border: none; + color: @grayLighter; + font-weight: normal; + text-shadow: none; + + &:hover { + border: none; + background-color: @blue; + } + } + + .nav .active > a { + border: none; + background-color: @blue; + } + + .dropdown-menu a:hover { + background-color: @blue; + } + + .navbar-form, + .navbar-search { + border-top: none; + border-bottom: none; + } + + .nav-header { + color: rgba(128, 128, 128, 0.6); + } + } + + .navbar-inverse .nav-collapse { + + .nav li > a:hover { + background-color: #111; + } + + .nav .active > a { + background-color: #111; + } + + .nav li.dropdown.open > .dropdown-toggle, + .nav li.dropdown.active > .dropdown-toggle, + .nav li.dropdown.open.active > .dropdown-toggle { + background-color: #111; + } + } +} + +div.subnav { + + margin: 0 1px; + background-color: @grayDarker; + background-image: none; + border: none; + border-bottom: 1px solid @grayDark; + + .nav > li > a, + .nav > li:first-child > a, + .nav > li:first-child > a:hover { + padding: 11px 12px; + border: none; + background-color: @grayDarker; + color: @grayLight; + } + + .nav > li > a:hover, + .nav > li.active > a, + .nav > li.active > a:hover, + .nav > li:first-child > a:hover { + padding: 11px 12px; + background: transparent; + border: none; + border-bottom: 1px solid @blue; + color: @white; + } + + .nav li.nav-header { + text-shadow: none; + } + + + + + &-fixed { + top: @navbarHeight; + margin: 0; + } +} + +// NAV +// ----------------------------------------------------- + +.nav-tabs { + + border-bottom: 1px solid @grayDark; + + 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; + } +} + +.nav-pills { + + li > a:hover { + background-color: @blue; + color: @white; + } + + li.disabled > a { + color: @textColor; + } + + .open .dropdown-toggle { + background-color: #060606; + } + + .dropdown-menu li > a:hover { + border: none; + } +} + +.nav-list { + + li > a { + text-shadow: none; + } + + li > a:hover { + background-color: @blue; + color: @white; + } + + .nav-header { + text-shadow: none; + } + + .divider { + background-color: transparent; + border-bottom: 1px solid @grayDark; + } +} + +.nav-stacked { + + li > a { + border: 1px solid @grayDark !important; + } + + li > a:hover, + li.active > a { + background-color: @blue; + color: @white; + } +} + +.tabbable { + .nav-tabs, + .nav-tabs li.active > a { + border-color: @grayDark; + } +} + +.breadcrumb { + + background-color: transparent; + background-image: none; + border-width: 0; + .box-shadow(none); + font-size: 14px; + + li { + text-shadow: none; + } + + li > a { + color: @blue; + text-shadow: none; + } +} + +.pagination { + + ul { + .box-shadow(none); + } + + ul > li > a:hover, + ul > .active > a, + ul > .active > span { + // color: @white; + } + + ul > .disabled > a, + ul > .disabled > a:hover, + ul > .disabled > span, + ul > .disabled > span:hover { + background-color: rgba(0, 0, 0, 0.2); + } +} + +.pager { + + li > a, + li > span { + background-color: @bodyBackground; + border: none; + + &:hover { + background-color: @blue; + } + } + + .disabled a, + .disabled a:hover { + background-color: @bodyBackground; + } + +} + +// BUTTONS +// ----------------------------------------------------- + +.btn { + .box-shadow(1px 1px 2px #111); + .buttonBackground(darken(@gray, 20%), darken(@gray, 30%)); + color: @white; + text-shadow: none; + + &:hover { + text-shadow: none; + color: @white; + } +} + +.btn-primary { + .buttonBackground(@blueDark, darken(@blueDark, 10%)); +} + +.btn-warning { + .buttonBackground(lighten(@orange, 10%), @orange); +} + +.btn-danger { + .buttonBackground(lighten(@red, 10%), @red); +} + +.btn-success { + .buttonBackground(lighten(@green, 10%), @green); +} + +.btn-info { + .buttonBackground(darken(@gray, 40%), darken(@gray, 50%)); +} + +.btn-inverse { + .buttonBackground(lighten(@purple, 5%), @purple); +} + +.btn .caret { + border-top: 4px solid black; + opacity: 0.3; +} + +.btn-group > .dropdown-menu > li > a:hover { + border-bottom: 0; +} + +.btn.disabled, .btn[disabled] { + background-color: @grayLight; +} + +// FORMS +// ----------------------------------------------------- + +input, textarea, select { + border-width: 2px; + .border-radius(1px); +} + +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"], .uneditable-input { + color: @grayDark; +} + +input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input { + border-color: #444; +} + +input:focus, +textarea:focus, +input.focused, +textarea.focused { + border-color: rgba(82,168,236,1); + outline: 0; + outline: thin dotted \9; /* IE6-9 */ +} + +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus, +select:focus { + .box-shadow(none); // override for file inputs + .tab-focus(); +} + +legend, label { + color: @textColor; + border-bottom: 0px solid #222; +} + +.form-actions { + border-top: 1px solid #222; +} + +// TABLES +// ----------------------------------------------------- + +.table { + + .border-radius(1px); + + tbody tr.success td { + background-color: @green; + color: @white; + } + + tbody tr.error td { + background-color: @red; + color: @white; + } + + tbody tr.info td { + background-color: @blue; + color: @white; + } + + tbody tr.warning td { + background-color: @orange; + color: @white; + } +} + +// DROPDOWNS +// ----------------------------------------------------- + +.dropdown-menu { + .box-shadow(0 2px 4px rgba(0, 0, 0, 0.8)); +} + +// ALERTS, LABELS, BADGES +// ----------------------------------------------------- + +.alert, +.alert .alert-heading, +.alert-success, +.alert-success .alert-heading, +.alert-danger, +.alert-error, +.alert-danger .alert-heading, +.alert-error .alert-heading, +.alert-info, +.alert-info .alert-heading { + color: @grayLighter; + text-shadow: none; + border: none; +} + +.alert { + h1, h2, h3, h4, h5, h6 { + color: @grayLighter; + } +} + +.label { + color: @grayLighter; +} + +.label, .alert { background-color: darken(@gray, 20%); } + +.label:hover { background-color: darken(@gray, 30%); } + +.label-important, +.alert-danger, +.alert-error { background-color: @red; } + +.label-important:hover { background-color: darken(@red, 10%); } + +.label-warning, .alert-warning { background-color: darken(@orange, 10%); } + +.label-warning:hover { background-color: darken(@orange, 20%); } + +.label-success, .alert-success { background-color: darken(@green, 3%); } + +.label-success:hover { background-color: darken(@green, 13%); } + +.label-info, .alert-info { background-color: darken(@blueDark, 10%); } + +.label-info:hover { background-color: darken(@blueDark, 20%); } + +.badge-inverse, +.label-inverse, +.alert-inverse { background-color: darken(@purple, 10%); } + +.label-inverse:hover { background-color: darken(@purple, 20%); } + +// MISC +// ----------------------------------------------------- + +.well, .hero-unit { + .border-radius(1px); +} + +.well, .hero-unit { + border-top: solid 1px lighten(@grayDark, 5%); + .box-shadow(0 2px 4px rgba(0,0,0,.8)); +} + +.thumbnail { + border-color: @grayDark; +} + +.progress { + background-color: #060606; + background-image: none; + .border-radius(0); +} + +.modal { + .border-radius(1px); + border-top: solid 1px lighten(@grayDark, 5%); + background-color: @grayDark; +} + +.modal-header { + border-bottom: 1px solid @grayDark; +} + +.modal-footer { + background-color: @grayDark; + border-top: 1px solid @grayDark; + .border-radius(0 0 6px 6px); + .box-shadow(none); +} + +.footer { + border-top: 1px solid @grayDark; +} + +// MEDIA QUERIES +// ----------------------------------------------------- + +@media (max-width: 768px) { + div.subnav .nav > li + li > a, + div.subnav .nav > li:first-child > a { + border-top: 1px solid @grayDark; + border-left: 1px solid @grayDark; + } + + .subnav .nav > li + li > a:hover, + .subnav .nav > li:first-child > a:hover { + border-bottom: 0; + background-color: @blue; + } +} |