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, .navbar .nav-collapse.collapse .nav li > a {
  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 blockquote {
  36         border-left: 5px solid @blue;
  37
  38         &.pull-right {
  39                 border-right: 5px solid @blue;
  40         }
  41 }
  42
  43 // SCAFFOLDING
  44 // -----------------------------------------------------
  45
  46 body {
  47         background-color: #060606;
  48         #gradient > .vertical (#060606, #252A30);
  49 }
  50
  51 .page-header {
  52         border-bottom: 2px solid @blue
  53 }
  54
  55 // NAVBAR
  56 // -----------------------------------------------------
  57
  58 .navbar-inner {
  59   .border-radius(0);
  60   @shadow: none;
  61   .box-shadow(@shadow);
  62   border-bottom: 2px solid @blue
  63 }
  64
  65 .navbar .nav li > a {
  66         padding: 13px 10px 8px;
  67         border-bottom: 3px solid rgba(0, 0, 0, 0);
  68 }
  69
  70 .navbar .brand {
  71         padding: 12px 20px 8px;
  72 }
  73
  74 .navbar .search-query,
  75 .navbar .search-query:focus,
  76 .navbar .search-query.focused {
  77         color: @grayLight;
  78         text-shadow: none;
  79         background-color: #222;
  80         .border-radius(1px);
  81         .placeholder(@gray);
  82 }
  83
  84 .navbar .nav .active > a,
  85 .navbar .nav li > a:hover,
  86 .navbar .brand:hover {
  87         border-bottom: 3px solid @blue
  88 }
  89
  90 // Added dividers to items
  91 .navbar .nav > li > a {
  92         border-left: 1px solid #222;
  93 }
  94
  95 .dropdown-menu {
  96         background-color: #191A1A;
  97         border-left: solid 1px rgba(256,256,256,.1);
  98         .box-shadow(0 2px 4px rgba(0,0,0,.8));
  99 }
 100
 101 .dropdown-menu li > a:hover {
 102         background-color: @blue;
 103         border-bottom: 3px solid transparent;
 104 }
 105
 106 .dropdown-menu .divider {
 107         background-color: #222;
 108         border-bottom: 0px solid white;
 109 }
 110
 111 .navbar .dropdown-menu::before,
 112 .navbar .dropdown-menu::after {
 113         display: none;
 114 }
 115
 116 .navbar .nav-collapse.collapse .nav > li > a {
 117         border-left: 0;
 118 }
 119
 120 .navbar .nav-collapse.collapse .nav a:hover {
 121         background-color: @blue;
 122 }
 123
 124 div.subnav {
 125         position: static;
 126         background-color: @grayDarker;
 127         background-image: none;
 128         border: 0;
 129 }
 130
 131 div.subnav.subnav-fixed {
 132         position: relative;
 133         left: -1px;
 134         top: auto;
 135 }
 136
 137 div.subnav .nav li > a,
 138 div.subnav .nav .active a {
 139         border-left: 1px solid #222;
 140         border-right: 0;
 141         color: @grayLighter;
 142         background-color: @grayDarker;
 143 }
 144
 145 .subnav .nav > li > a:hover,
 146 .subnav .nav > li.active > a:hover,
 147 .subnav .nav > li:first-child > a:hover {
 148         background: transparent;
 149         border-bottom: 2px solid @blue;
 150         border-left: 1px solid #222;
 151         color: @white;
 152 }
 153
 154 div.subnav .nav .dropdown.open {
 155
 156         .dropdown-toggle {
 157                 border: 0;
 158                 border-left: 1px solid #222;
 159             border-bottom: 2px solid @blue;
 160                 background-color: #060606;
 161         }
 162
 163         .dropdown-menu {
 164                 background-color: @grayDarker;
 165                 border-left: 0;
 166
 167                 li > a:hover {
 168                         border-bottom: 0;
 169                         background: @blue;
 170                 }
 171         }
 172 }
 173
 174 @media (max-width: 768px) {
 175         div.subnav .nav > li + li > a,
 176         div.subnav .nav > li:first-child > a {
 177                 border-top: 1px solid #222;
 178                 border-left: 1px solid #222;
 179         }
 180
 181         .subnav .nav > li + li > a:hover,
 182         .subnav .nav > li:first-child > a:hover {
 183                         border-bottom: 0;
 184                         background-color: @blue;
 185         }
 186
 187 }
 188
 189 // TABLES
 190 // -----------------------------------------------------
 191
 192 .table-bordered {
 193   border: 1px solid #222;
 194
 195   th + th,
 196   td + td,
 197   th + td,
 198   td + th {
 199     border-left: 1px solid #222;
 200   }
 201   // Prevent a double border
 202   thead:first-child tr:first-child th,
 203   tbody:first-child tr:first-child th,
 204   tbody:first-child tr:first-child td {
 205     border-top: 0;
 206   }
 207 }
 208
 209 .table th, .table td {
 210         border-top: 1px solid #222;
 211 }
 212
 213 // make shaded elements light gray
 214 .breadcrumb,
 215 .table-striped tbody tr:nth-child(odd) td,
 216 .table-striped tbody tr:nth-child(odd) th {
 217         background-color: rgba(40, 40, 40, 0.5);
 218 }
 219
 220 .table-striped tbody tr:nth-child(even) td,
 221 .table-striped tbody tr:nth-child(even) th {
 222         background-color: transparent;
 223 }
 224
 225 .table tbody tr:hover th,
 226 .table tbody tr:hover td {
 227         background-color: @grayDark;
 228 }
 229
 230 code, pre, pre.prettyprint {
 231         background-color: @grayLighter;
 232 }
 233
 234 .well {
 235         background-color: rgba(40, 40, 40, 0.5);
 236         background-color: #131517;
 237         border-top: solid 1px rgba(256,256,256,.1);
 238         .box-shadow(0 2px 4px rgba(0,0,0,.8));
 239 }
 240
 241
 242 .table, .well, .prettyprint, input, textarea, select {
 243         .border-radius(1px);
 244 }
 245
 246 input, textarea, select, .uneditable-input {
 247         color: @grayDark;
 248 }
 249
 250
 251 // NAVIGATION
 252 // -----------------------------------------------------
 253
 254
 255 .nav-list > li > a, .nav-list .nav-header {
 256         text-shadow: none;
 257 }
 258
 259 .nav-list li > a:hover,
 260 .nav-tabs li > a:hover,
 261 .nav-tabs li.active > a,
 262 .nav-pills li > a:hover,
 263 .nav-stacked li > a:hover,
 264 .nav-stacked li.active > a {
 265         background-color: @blue;
 266         color: @white;
 267 }
 268
 269 .nav-tabs {
 270         border-bottom: 1px solid #222;
 271 }
 272
 273 .nav-stacked > li > a,
 274 .nav-tabs > li > a:hover,
 275 .nav-tabs > .active > a,
 276 .nav-tabs > .active > a:hover {
 277         border: 1px solid #222 !important;
 278 }
 279
 280 .nav.nav-tabs .active a:hover {
 281         background-color: @blue;
 282         color: @white;
 283 }
 284
 285 .nav.nav-tabs .dropdown.open,
 286 .nav.nav-pills .dropdown.open {
 287         .dropdown-toggle {
 288                 background-color: #060606 !important;
 289                 border-top: 0;
 290                 border: 1px solid #222;
 291         }
 292
 293         .dropdown-menu li > a:hover { border-bottom: 0; }
 294 }
 295
 296 .tabbable .nav-tabs, .thumbnail {
 297         border-color: #222;
 298 }
 299
 300 .breadcrumb {
 301         background-color: transparent;
 302         background-image: none;
 303         border-width: 0;
 304         .box-shadow(none);
 305         font-size: 14px;
 306
 307         li > a {
 308                 color: @blue;
 309                 text-shadow: none;
 310         }
 311
 312         li.active {
 313                 text-shadow: none;
 314         }
 315 }
 316
 317 .pagination {
 318         ul {
 319                 .box-shadow(none);
 320         }
 321
 322         a {
 323                 border: 0;
 324                 font-size: 14px;
 325         }
 326
 327         a:hover, .active a {
 328                 background-color: @blue;
 329                 color: @white;
 330         }
 331 }
 332
 333 // BUTTONS
 334 // -----------------------------------------------------
 335
 336 .btn, {
 337         border: 0;
 338         .border-radius(3px);
 339         .box-shadow(1px 1px 2px #111);
 340         .buttonBackground(darken(@gray, 20%), darken(@gray, 30%));
 341         color: @white;
 342         text-shadow: none;
 343
 344         &:hover {
 345             background-color: darken(@gray, 35%);
 346                 text-shadow: none;
 347                 color: @white;
 348         }
 349 }
 350
 351 // Set the backgrounds
 352 // -------------------------
 353 .btn-primary {
 354   .buttonBackground(@blueDark, darken(@blueDark, 10%));
 355 }
 356 // Warning appears are orange
 357 .btn-warning {
 358   .buttonBackground(lighten(@orange, 10%), @orange);
 359 }
 360 // Danger and error appear as red
 361 .btn-danger {
 362   .buttonBackground(lighten(@red, 10%), @red);
 363 }
 364 // Success appears as green
 365 .btn-success {
 366   .buttonBackground(lighten(@green, 10%), @green);
 367 }
 368 // Info appears as a neutral blue
 369 .btn-info {
 370   .buttonBackground(darken(@gray, 40%), darken(@gray, 50%));
 371 }
 372
 373 .btn-group .btn:first-child {
 374     -webkit-border-top-left-radius: 3px;
 375        -moz-border-top-left-radius: 3px;
 376             border-top-left-radius: 3px;
 377
 378     -webkit-border-bottom-left-radius: 3px;
 379        -moz-border-bottom-left-radius: 3px;
 380             border-bottom-left-radius: 3px;
 381 }
 382
 383 .btn-group .btn:last-child, .btn-group .dropdown-toggle {
 384     -webkit-border-top-right-radius: 3px;
 385        -moz-border-top-right-radius: 3px;
 386             border-top-right-radius: 3px;
 387
 388     -webkit-border-bottom-right-radius: 3px;
 389        -moz-border-bottom-right-radius: 3px;
 390             border-bottom-right-radius: 3px;
 391
 392 }
 393
 394 .btn .caret {
 395         border-top: 4px solid black;
 396         opacity: 0.3;
 397 }
 398
 399 .btn-group > .dropdown-menu > li > a:hover {
 400         border-bottom: 0;
 401 }
 402
 403 .btn.disabled, .btn[disabled] {
 404         background-color: @grayLight;
 405 }
 406
 407 // FORMS
 408 // -----------------------------------------------------
 409
 410 input, textarea, select {
 411         background-color: #ccc;
 412         border-color: #bbb;
 413         border-width: 2px;
 414         .placeholder(@gray);
 415 }
 416
 417 legend, label {
 418         color: @textColor;
 419         border-bottom: 0px solid #222;
 420 }
 421
 422 input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input {
 423         background-color: #555;
 424         border-color: #444;
 425 }
 426
 427 input:focus,
 428 textarea:focus,
 429 input.focused,
 430 textarea.focused {
 431   border-color: rgba(82,168,236,1);
 432   outline: 0;
 433   outline: thin dotted \9; /* IE6-9 */
 434 }
 435
 436 input[type="file"]:focus,
 437 input[type="radio"]:focus,
 438 input[type="checkbox"]:focus,
 439 select:focus {
 440   .box-shadow(none); // override for file inputs
 441   .tab-focus();
 442 }
 443
 444 .form-actions {
 445         background: transparent;
 446 }
 447
 448 .form-actions, footer.footer {
 449         border-top: 1px solid #222;
 450 }
 451
 452
 453 // MISCELLANEOUS
 454 // -----------------------------------------------------
 455
 456
 457 .progress {
 458         background-color: #060606;
 459         background-image: none;
 460         .border-radius(0);
 461 }
 462
 463 .label {
 464         color: @grayLighter;
 465 }
 466
 467 .label, .alert { background-color: darken(@gray, 20%); }
 468
 469 .label:hover { background-color: darken(@gray, 30%); }
 470
 471
 472 .label-important, .alert-danger,
 473 .alert-error { background-color: @red; }
 474
 475 .label-important:hover { background-color: darken(@red, 10%); }
 476
 477 .label-warning   { background-color: darken(@orange, 10%); }
 478
 479 .label-warning:hover { background-color: darken(@orange, 20%); }
 480
 481 .label-success, .alert-success { background-color: darken(@green, 3%); }
 482
 483 .label-success:hover { background-color: darken(@green, 13%); }
 484
 485 .label-info, .alert-info { background-color: darken(@blueDark, 10%); }
 486
 487 .label-info:hover { background-color: darken(@blueDark, 20%); }
 488
 489 .alert,
 490 .alert .alert-heading,
 491 .alert-success,
 492 .alert-success .alert-heading,
 493 .alert-danger,
 494 .alert-error,
 495 .alert-danger .alert-heading,
 496 .alert-error .alert-heading,
 497 .alert-info,
 498 .alert-info .alert-heading {
 499   color: @grayLighter;
 500   text-shadow: none;
 501   border: none;
 502 }