git.roojs.org Git - bootswatch/blob - cyborg/bootswatch.less

   1 // Bootswatch.less
   2 // Swatch: Cyborg
   3 // -----------------------------------------------------
   4
   5 // TYPOGRAPHY
   6 // -----------------------------------------------------
   7
   8 // Ubuntu web font
   9 @import url('http://fonts.googleapis.com/css?family=Droid+Sans:400,700');
  10
  11 h1, h2, h3, h4, h5, .navbar .brand {
  12         color: @grayLighter;
  13         font-weight: normal;
  14         text-shadow: none;
  15 }
  16
  17 .navbar {
  18         font-size: 16px;
  19 }
  20
  21 label, input, button, select, textarea {
  22         font-family: 'Droid Sans', sans-serif;
  23         color: @gray;
  24 }
  25
  26 .navbar .search-query&::-moz-placeholder {
  27         font-family: 'Droid Sans', sans-serif;
  28         color: @gray;
  29 }
  30
  31 .navbar .search-query&:::-webkit-input-placeholder {
  32         font-family: 'Droid Sans', sans-serif;
  33 }
  34
  35 // SCAFFOLDING
  36 // -----------------------------------------------------
  37
  38 body {
  39         background-color: #060606;
  40         #gradient > .vertical (#060606, #252A30);
  41 }
  42
  43 hr {
  44         border-top: 1px solid #222;
  45         border-bottom: 0;
  46 }
  47
  48 .page-header {
  49   border-bottom: 2px solid @blue
  50 }
  51
  52 // NAVBAR
  53 // -----------------------------------------------------
  54
  55 .navbar-inner {
  56   .border-radius(0);
  57   @shadow: none;
  58   .box-shadow(@shadow);
  59   border-bottom: 2px solid @blue
  60 }
  61
  62 .navbar .nav li > a {
  63         padding: 13px 10px 8px;
  64         border-bottom: 3px solid rgba(0, 0, 0, 0);
  65 }
  66
  67 .navbar .brand {
  68         padding: 12px 20px 8px;
  69 }
  70
  71 .navbar .search-query {
  72         background: @black;
  73         .border-radius(1px);
  74 }
  75
  76 .navbar .nav .active > a,
  77 .navbar .nav li > a:hover,
  78 .navbar .brand:hover {
  79         border-bottom: 3px solid @blue
  80 }
  81
  82 // Added dividers to items
  83 .navbar .nav > li > a {
  84         border-left: 1px solid #222;
  85 }
  86
  87 .dropdown-menu {
  88         background-color: #191A1A;
  89         border-left: solid 1px rgba(256,256,256,.1);
  90         .box-shadow(0 2px 4px rgba(0,0,0,.8));
  91 }
  92
  93 .dropdown-menu li > a:hover {
  94         background-color: @blue;
  95         border-bottom: 3px solid transparent;
  96 }
  97
  98 .dropdown-menu .divider {
  99         background-color: #222;
 100         border-bottom: 0px solid white;
 101 }
 102
 103 .navbar .dropdown-menu::before,
 104 .navbar .dropdown-menu::after {
 105         display: none;
 106 }
 107
 108 .navbar .nav-collapse.collapse .nav > li > a {
 109         border-left: 0;
 110 }
 111
 112 .navbar .nav-collapse.collapse .nav a:hover {
 113         background-color: @blue;
 114 }
 115
 116 div.subnav {
 117         position: static;
 118         background-color: @grayDarker;
 119         background-image: none;
 120         border: 0;
 121 }
 122
 123 div.subnav.subnav-fixed {
 124         position: relative;
 125         left: -1px;
 126         top: auto;
 127 }
 128
 129 div.subnav .nav li > a,
 130 div.subnav .nav .active a {
 131         border-left: 1px solid #222;
 132         border-right: 0;
 133         color: @grayLighter;
 134         background-color: @grayDarker;
 135 }
 136
 137 .subnav .nav > li > a:hover,
 138 .subnav .nav > li.active > a:hover,
 139 .subnav .nav > li:first-child > a:hover {
 140         background: transparent;
 141         border-bottom: 2px solid @blue;
 142         border-left: 1px solid #222;
 143         color: @white;
 144 }
 145
 146 div.subnav .nav .dropdown.open {
 147
 148         .dropdown-toggle {
 149                 border: 0;
 150                 border-left: 1px solid #222;
 151             border-bottom: 2px solid @blue;
 152                 background-color: #060606;
 153         }
 154
 155         .dropdown-menu {
 156                 background-color: @grayDarker;
 157                 border-left: 0;
 158
 159                 li > a:hover {
 160                         border-bottom: 0;
 161                         background: @blue;
 162                 }
 163         }
 164 }
 165
 166 .nav.nav-tabs .active a:hover {
 167         background-color: @blue;
 168         color: @white;
 169 }
 170
 171 .nav.nav-tabs .dropdown.open,
 172 .nav.nav-pills .dropdown.open {
 173         .dropdown-toggle {
 174                 background-color: #060606 !important;
 175                 border-top: 0;
 176                 border: 1px solid #222;
 177         }
 178
 179         .dropdown-menu li > a:hover { border-bottom: 0; }
 180 }
 181
 182 // TABLES
 183 // -----------------------------------------------------
 184
 185 .table-bordered {
 186   border: 1px solid #222;
 187
 188   th + th,
 189   td + td,
 190   th + td,
 191   td + th {
 192     border-left: 1px solid #222;
 193   }
 194   // Prevent a double border
 195   thead:first-child tr:first-child th,
 196   tbody:first-child tr:first-child th,
 197   tbody:first-child tr:first-child td {
 198     border-top: 0;
 199   }
 200 }
 201
 202 .table th, .table td {
 203         border-top: 1px solid #222;
 204 }
 205
 206 // make shaded elements light gray
 207 .breadcrumb,
 208 .table-striped tbody tr:nth-child(odd) td,
 209 .table-striped tbody tr:nth-child(odd) th {
 210         background-color: rgba(40, 40, 40, 0.5);
 211 }
 212
 213 code, pre, pre.prettyprint {
 214         background-color: @grayLighter;
 215 }
 216
 217 .well {
 218         background-color: rgba(40, 40, 40, 0.5);
 219         background-color: #131517;
 220         border-top: solid 1px rgba(256,256,256,.1);
 221         .box-shadow(0 2px 4px rgba(0,0,0,.8));
 222 }
 223
 224
 225 .table, .well, .prettyprint, input, textarea, select {
 226         .border-radius(1px);
 227 }
 228
 229 input, textarea, select, .uneditable-input {
 230         color: @grayDark;
 231 }
 232
 233
 234 // NAVIGATION
 235 // -----------------------------------------------------
 236
 237
 238 .nav-list > li > a, .nav-list .nav-header {
 239         text-shadow: none;
 240 }
 241
 242 .nav-list li > a:hover,
 243 .nav-tabs li > a:hover,
 244 .nav-tabs li.active > a,
 245 .nav-pills li > a:hover,
 246 .nav-stacked li > a:hover,
 247 .nav-stacked li.active > a {
 248         background-color: @blue;
 249         color: @white;
 250 }
 251
 252 .nav-tabs {
 253         border-bottom: 1px solid #222;
 254 }
 255
 256 .nav-stacked > li > a,
 257 .nav-tabs > li > a:hover,
 258 .nav-tabs > .active > a,
 259 .nav-tabs > .active > a:hover {
 260         border: 1px solid #222 !important;
 261 }
 262
 263 .tabbable .nav-tabs, .thumbnail {
 264         border-color: #222;
 265 }
 266
 267 .breadcrumb {
 268         background-color: transparent;
 269         background-image: none;
 270         border-width: 0;
 271         .box-shadow(none);
 272         font-size: 14px;
 273
 274         li > a {
 275                 color: @blue;
 276                 text-shadow: none;
 277         }
 278
 279         li.active {
 280                 text-shadow: none;
 281         }
 282 }
 283
 284 .pagination {
 285         ul {
 286                 .box-shadow(none);
 287         }
 288
 289         a {
 290                 border: 0;
 291                 font-size: 14px;
 292         }
 293
 294         a:hover, .active a {
 295                 background-color: @blue;
 296                 color: @white;
 297         }
 298 }
 299
 300 // BUTTONS
 301 // -----------------------------------------------------
 302
 303 .btn, {
 304         border: 0;
 305         .border-radius(3px);
 306         .box-shadow(1px 1px 2px #111);
 307         .buttonBackground(darken(@gray, 20%), darken(@gray, 30%));
 308         color: @white;
 309         text-shadow: none;
 310
 311         &:hover {
 312             background-color: darken(@gray, 35%);
 313                 text-shadow: none;
 314                 color: @white;
 315         }
 316 }
 317
 318 // Set the backgrounds
 319 // -------------------------
 320 .btn-primary {
 321   .buttonBackground(@blueDark, darken(@blueDark, 10%));
 322 }
 323 // Warning appears are orange
 324 .btn-warning {
 325   .buttonBackground(lighten(@orange, 10%), @orange);
 326 }
 327 // Danger and error appear as red
 328 .btn-danger {
 329   .buttonBackground(lighten(@red, 10%), @red);
 330 }
 331 // Success appears as green
 332 .btn-success {
 333   .buttonBackground(lighten(@green, 10%), @green);
 334 }
 335 // Info appears as a neutral blue
 336 .btn-info {
 337   .buttonBackground(darken(@gray, 40%), darken(@gray, 50%));
 338 }
 339
 340 .btn-group .btn:first-child {
 341     -webkit-border-top-left-radius: 3px;
 342        -moz-border-top-left-radius: 3px;
 343             border-top-left-radius: 3px;
 344
 345     -webkit-border-bottom-left-radius: 3px;
 346        -moz-border-bottom-left-radius: 3px;
 347             border-bottom-left-radius: 3px;
 348 }
 349
 350 .btn-group .btn:last-child, .btn-group .dropdown-toggle {
 351     -webkit-border-top-right-radius: 3px;
 352        -moz-border-top-right-radius: 3px;
 353             border-top-right-radius: 3px;
 354
 355     -webkit-border-bottom-right-radius: 3px;
 356        -moz-border-bottom-right-radius: 3px;
 357             border-bottom-right-radius: 3px;
 358
 359 }
 360
 361 .btn .caret {
 362         border-top: 4px solid black;
 363         opacity: 0.3;
 364 }
 365
 366 .btn-group > .dropdown-menu > li > a:hover {
 367         border-bottom: 0;
 368 }
 369
 370 .btn.disabled, .btn[disabled] {
 371         background-color: @grayLight;
 372 }
 373
 374 // FORMS
 375 // -----------------------------------------------------
 376
 377
 378 .form-actions {
 379         background: transparent;
 380 }
 381
 382 legend, label {
 383         color: @textColor;
 384         border-bottom: 0px solid #222;
 385 }
 386
 387 .form-actions, .footer {
 388         border-top: 0px solid #222;
 389 }
 390
 391
 392 // MISCELLANEOUS
 393 // -----------------------------------------------------
 394
 395
 396 .progress {
 397         background-color: #060606;
 398         background-image: none;
 399         .border-radius(0);
 400 }
 401
 402 .label { background-color: darken(@gray, 20%); }
 403 .label-important { background-color: @red; }
 404 .label-warning   { background-color: darken(@orange, 10%); }
 405 .label-success   { background-color: darken(@green, 3%); }
 406 .label-info      { background-color: darken(@blueDark, 10%); }