diff options
author | Thomas Park <thomas@thomaspark.me> | 2012-02-14 11:06:25 -0500 |
---|---|---|
committer | Thomas Park <thomas@thomaspark.me> | 2012-02-14 11:06:25 -0500 |
commit | 12ff2812333ac044dd54b0fb73150e52839f168b (patch) | |
tree | f8725e5d89b3e7f2c9665ae707299d7d9dc8eb38 /cyborg/bootswatch.less | |
parent | 805d7d7bd5a8d9cef539b0745522223b9925c735 (diff) |
New swatch, Cyborg!
Diffstat (limited to 'cyborg/bootswatch.less')
-rwxr-xr-x | cyborg/bootswatch.less | 406 |
1 files changed, 406 insertions, 0 deletions
diff --git a/cyborg/bootswatch.less b/cyborg/bootswatch.less new file mode 100755 index 00000000..6f567cc4 --- /dev/null +++ b/cyborg/bootswatch.less @@ -0,0 +1,406 @@ +// Bootswatch.less +// Swatch: Cyborg +// ----------------------------------------------------- + +// TYPOGRAPHY +// ----------------------------------------------------- + +// Ubuntu web font +@import url('http://fonts.googleapis.com/css?family=Droid+Sans:400,700'); + +h1, h2, h3, h4, h5, .navbar .brand { + color: @grayLighter; + font-weight: normal; + text-shadow: none; +} + +.navbar { + font-size: 16px; +} + +label, input, button, select, textarea { + font-family: 'Droid Sans', sans-serif; + color: @gray; +} + +.navbar .search-query&::-moz-placeholder { + font-family: 'Droid Sans', sans-serif; + color: @gray; +} + +.navbar .search-query&:::-webkit-input-placeholder { + font-family: 'Droid Sans', sans-serif; +} + +// SCAFFOLDING +// ----------------------------------------------------- + +body { + background-color: #060606; + #gradient > .vertical (#060606, #252A30); +} + +hr { + border-top: 1px solid #222; + border-bottom: 0; +} + +.page-header { + border-bottom: 2px solid @blue +} + +// NAVBAR +// ----------------------------------------------------- + +.navbar-inner { + .border-radius(0); + @shadow: none; + .box-shadow(@shadow); + border-bottom: 2px solid @blue +} + +.navbar .nav li > a { + padding: 13px 10px 8px; + border-bottom: 3px solid rgba(0, 0, 0, 0); +} + +.navbar .brand { + padding: 12px 20px 8px; +} + +.navbar .search-query { + background: @black; + .border-radius(1px); +} + +.navbar .nav .active > a, +.navbar .nav li > a:hover, +.navbar .brand:hover { + border-bottom: 3px solid @blue +} + +// Added dividers to items +.navbar .nav > li > a { + border-left: 1px solid #222; +} + +.dropdown-menu { + background-color: #191A1A; + border-left: solid 1px rgba(256,256,256,.1); + .box-shadow(0 2px 4px rgba(0,0,0,.8)); +} + +.dropdown-menu li > a:hover { + background-color: @blue; + border-bottom: 3px solid transparent; +} + +.dropdown-menu .divider { + background-color: #222; + border-bottom: 0px solid white; +} + +.navbar .dropdown-menu::before, +.navbar .dropdown-menu::after { + display: none; +} + +.navbar .nav-collapse.collapse .nav > li > a { + border-left: 0; +} + +.navbar .nav-collapse.collapse .nav a:hover { + background-color: @blue; +} + +div.subnav { + position: static; + background-color: @grayDarker; + background-image: none; + border: 0; +} + +div.subnav.subnav-fixed { + position: relative; + left: -1px; + top: auto; +} + +div.subnav .nav li > a, +div.subnav .nav .active a { + border-left: 1px solid #222; + border-right: 0; + color: @grayLighter; + background-color: @grayDarker; +} + +.subnav .nav > li > a:hover, +.subnav .nav > li.active > a:hover, +.subnav .nav > li:first-child > a:hover { + background: transparent; + border-bottom: 2px solid @blue; + border-left: 1px solid #222; + color: @white; +} + +div.subnav .nav .dropdown.open { + + .dropdown-toggle { + border: 0; + border-left: 1px solid #222; + border-bottom: 2px solid @blue; + background-color: #060606; + } + + .dropdown-menu { + background-color: @grayDarker; + border-left: 0; + + li > a:hover { + border-bottom: 0; + background: @blue; + } + } +} + +.nav.nav-tabs .active a:hover { + background-color: @blue; + color: @white; +} + +.nav.nav-tabs .dropdown.open, +.nav.nav-pills .dropdown.open { + .dropdown-toggle { + background-color: #060606 !important; + border-top: 0; + border: 1px solid #222; + } + + .dropdown-menu li > a:hover { border-bottom: 0; } +} + +// TABLES +// ----------------------------------------------------- + +.table-bordered { + border: 1px solid #222; + + th + th, + td + td, + th + td, + td + th { + border-left: 1px solid #222; + } + // 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: 0; + } +} + +.table th, .table td { + border-top: 1px solid #222; +} + +// make shaded elements light gray +.breadcrumb, +.table-striped tbody tr:nth-child(odd) td, +.table-striped tbody tr:nth-child(odd) th { + background-color: rgba(40, 40, 40, 0.5); +} + +code, pre, pre.prettyprint { + background-color: @grayLighter; +} + +.well { + background-color: rgba(40, 40, 40, 0.5); + background-color: #131517; + border-top: solid 1px rgba(256,256,256,.1); + .box-shadow(0 2px 4px rgba(0,0,0,.8)); +} + + +.table, .well, .prettyprint, input, textarea, select { + .border-radius(1px); +} + +input, textarea, select, .uneditable-input { + color: @grayDark; +} + + +// NAVIGATION +// ----------------------------------------------------- + + +.nav-list > li > a, .nav-list .nav-header { + text-shadow: none; +} + +.nav-list li > a:hover, +.nav-tabs li > a:hover, +.nav-tabs li.active > a, +.nav-pills li > a:hover, +.nav-stacked li > a:hover, +.nav-stacked li.active > a { + background-color: @blue; + color: @white; +} + +.nav-tabs { + border-bottom: 1px solid #222; +} + +.nav-stacked > li > a, +.nav-tabs > li > a:hover, +.nav-tabs > .active > a, +.nav-tabs > .active > a:hover { + border: 1px solid #222 !important; +} + +.tabbable .nav-tabs, .thumbnail { + border-color: #222; +} + +.breadcrumb { + background-color: transparent; + background-image: none; + border-width: 0; + .box-shadow(none); + font-size: 14px; + + li > a { + color: @blue; + text-shadow: none; + } + + li.active { + text-shadow: none; + } +} + +.pagination { + ul { + .box-shadow(none); + } + + a { + border: 0; + font-size: 14px; + } + + a:hover, .active a { + background-color: @blue; + color: @white; + } +} + +// BUTTONS +// ----------------------------------------------------- + +.btn, { + border: 0; + .border-radius(3px); + .box-shadow(1px 1px 2px #111); + .buttonBackground(darken(@gray, 20%), darken(@gray, 30%)); + color: @white; + text-shadow: none; + + &:hover { + background-color: darken(@gray, 35%); + text-shadow: none; + color: @white; + } +} + +// Set the backgrounds +// ------------------------- +.btn-primary { + .buttonBackground(@blueDark, darken(@blueDark, 10%)); +} +// Warning appears are orange +.btn-warning { + .buttonBackground(lighten(@orange, 10%), @orange); +} +// Danger and error appear as red +.btn-danger { + .buttonBackground(lighten(@red, 10%), @red); +} +// Success appears as green +.btn-success { + .buttonBackground(lighten(@green, 10%), @green); +} +// Info appears as a neutral blue +.btn-info { + .buttonBackground(darken(@gray, 40%), darken(@gray, 50%)); +} + +.btn-group .btn:first-child { + -webkit-border-top-left-radius: 3px; + -moz-border-top-left-radius: 3px; + border-top-left-radius: 3px; + + -webkit-border-bottom-left-radius: 3px; + -moz-border-bottom-left-radius: 3px; + border-bottom-left-radius: 3px; +} + +.btn-group .btn:last-child, .btn-group .dropdown-toggle { + -webkit-border-top-right-radius: 3px; + -moz-border-top-right-radius: 3px; + border-top-right-radius: 3px; + + -webkit-border-bottom-right-radius: 3px; + -moz-border-bottom-right-radius: 3px; + border-bottom-right-radius: 3px; + +} + +.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 +// ----------------------------------------------------- + + +.form-actions { + background: transparent; +} + +legend, label { + color: @textColor; + border-bottom: 0px solid #222; +} + +.form-actions, .footer { + border-top: 0px solid #222; +} + + +// MISCELLANEOUS +// ----------------------------------------------------- + + +.progress { + background-color: #060606; + background-image: none; + .border-radius(0); +} + +.label { background-color: darken(@gray, 20%); } +.label-important { background-color: @red; } +.label-warning { background-color: darken(@orange, 10%); } +.label-success { background-color: darken(@green, 3%); } +.label-info { background-color: darken(@blueDark, 10%); } |