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

   1 // Bootswatch.less
   2 // Swatch: Cyborg
   3 // Version: 2.1.1
   4 // -----------------------------------------------------
   5
   6 // TYPOGRAPHY
   7 // -----------------------------------------------------
   8
   9 @import url('https://fonts.googleapis.com/css?family=Droid+Sans:400,700');
  10
  11 label, input, button, select, textarea,
  12 .navbar .search-query:-moz-placeholder,
  13 .navbar .search-query::-webkit-input-placeholder {
  14         font-family: 'Droid Sans', sans-serif;
  15         color: @gray;
  16 }
  17
  18 code, pre {
  19         background-color: @grayLighter;
  20 }
  21
  22 blockquote {
  23         border-left: 5px solid @blue;
  24
  25         &.pull-right {
  26                 border-right: 5px solid @blue;
  27         }
  28 }
  29
  30 // SCAFFOLDING
  31 // -----------------------------------------------------
  32
  33 html {
  34         min-height: 100%;
  35 }
  36
  37 body {
  38         min-height: 100%;
  39         #gradient > .vertical (@bodyBackground, #252A30);
  40 }
  41
  42 .page-header {
  43         border-bottom: 2px solid @blue
  44 }
  45
  46 // NAVBAR
  47 // -----------------------------------------------------
  48
  49 .navbar {
  50
  51         font-size: 16px;
  52
  53         .navbar-inner {
  54                 .border-radius(0);
  55                 .box-shadow(none);
  56                 border-bottom: 2px solid @blue
  57         }
  58
  59         .brand {
  60                 padding: 12px 20px 11px;
  61                 color: @grayLighter;
  62                 font-weight: normal;
  63                 text-shadow: none;
  64         }
  65
  66         li {
  67                 line-height: 19px;
  68         }
  69
  70         .nav > li > a {
  71                 padding: 13px 10px 8px;
  72                 border-bottom: 3px solid transparent;
  73                 border-left: 1px solid rgba(255, 255, 255, 0.1);
  74
  75                 &:hover {
  76                         border-bottom: 3px solid @blue
  77                 }
  78         }
  79
  80         .nav > .active > a {
  81                 border-bottom: 3px solid @blue;
  82         }
  83
  84         .nav .active > a,
  85         .nav .active > a:hover,
  86         .nav .active > a:focus {
  87                 .box-shadow(none);
  88         }
  89
  90         .nav > li > .dropdown-menu::before,
  91         .nav > li > .dropdown-menu::after {
  92                 display: none;
  93         }
  94
  95         .dropdown-menu li > a:hover,
  96         .dropdown-menu li > a:focus,
  97         .dropdown-submenu:hover > a {
  98                 background-image: none;
  99         }
 100
 101         .navbar-text {
 102                 margin-left: 15px;
 103                 margin-right: 15px;
 104                 line-height: 43px;
 105         }
 106
 107         .search-query,
 108         .search-query:focus,
 109         .search-query.focused {
 110                 color: @grayLight;
 111                 text-shadow: none;
 112                 background-color: #222;
 113                 .border-radius(1px);
 114                 .placeholder(@gray);
 115         }
 116
 117         &-inverse {
 118
 119                 .navbar-inner {
 120                         border: none;
 121                         border-bottom: 3px solid @black;
 122                 }
 123
 124                 .brand:hover {
 125                         border-bottom: none;
 126                         background-color: @black;
 127                 }
 128
 129                 .nav li > a:hover {
 130                         border-bottom-color: transparent;
 131                 }
 132
 133                 .nav .active > a {
 134                         border-bottom-color: transparent;
 135                 }
 136         }
 137 }
 138
 139 @media (max-width: @navbarCollapseWidth) {
 140
 141         .navbar .nav-collapse {
 142
 143                 .nav li > a {
 144                         border: none;
 145                         color: @grayLighter;
 146                         font-weight: normal;
 147                         text-shadow: none;
 148
 149                         &:hover {
 150                                 border: none;
 151                                 background-color: @blue;
 152                         }
 153                 }
 154
 155                 .nav .active > a {
 156                         border: none;
 157                         background-color: @blue;
 158                 }
 159
 160                 .dropdown-menu a:hover {
 161                         background-color: @blue;
 162                 }
 163
 164                 .navbar-form,
 165                 .navbar-search {
 166                         border-top: none;
 167                         border-bottom: none;
 168                 }
 169
 170                 .nav-header {
 171                         color: rgba(128, 128, 128, 0.6);
 172                 }
 173         }
 174
 175         .navbar-inverse .nav-collapse {
 176
 177                 .nav li > a:hover {
 178                         background-color: #111;
 179                 }
 180
 181                 .nav .active > a {
 182                         background-color: #111;
 183                 }
 184
 185                 .nav li.dropdown.open > .dropdown-toggle,
 186                 .nav li.dropdown.active > .dropdown-toggle,
 187                 .nav li.dropdown.open.active > .dropdown-toggle {
 188                         background-color: #111;
 189                 }
 190         }
 191 }
 192
 193 div.subnav {
 194         position: static;
 195         background-color: @grayDarker;
 196         background-image: none;
 197         border: 0;
 198
 199
 200         &.subnav-fixed {
 201                 position: relative;
 202                 left: -1px;
 203                 top: auto;
 204         }
 205
 206         .nav > li > a,
 207         .nav .active a {
 208                 background-color: @grayDarker;
 209                 border-left: 1px solid #222;
 210                 border-right: 0;
 211                 color: @grayLighter;
 212         }
 213
 214         .nav li.nav-header {
 215                 text-shadow: none;
 216         }
 217
 218         .nav > li > a:hover,
 219         .nav > li.active > a:hover,
 220         .nav > li:first-child > a:hover {
 221                 background: transparent;
 222                 border-bottom: 2px solid @blue;
 223                 border-left: 1px solid #222;
 224                 color: @white;
 225         }
 226
 227         .nav .open .dropdown-toggle {
 228                 border: 0;
 229                 border-left: 1px solid #222;
 230             border-bottom: 2px solid @blue;
 231                 background-color: #060606;
 232         }
 233
 234         .nav .open .dropdown-menu {
 235                 background-color: @grayDarker;
 236                 border-left: solid 1px rgba(255, 255, 255, 0.1);
 237
 238                 li > a:hover {
 239                         border-bottom: 0;
 240                         background: @blue;
 241                 }
 242         }
 243 }
 244
 245 // NAV
 246 // -----------------------------------------------------
 247
 248 .nav-tabs {
 249
 250         border-bottom: 1px solid #222;
 251
 252         li > a:hover,
 253         li.active > a,
 254         li.active > a:hover {
 255                 border: 1px solid #222;
 256                 background-color: @blue;
 257                 color: @white;
 258         }
 259
 260         .open .dropdown-toggle {
 261                 background-color: #060606 !important;
 262                 border: 1px solid #222;
 263         }
 264
 265         .dropdown-menu li > a:hover {
 266                 border: none;
 267         }
 268 }
 269
 270 .nav-pills {
 271
 272         li > a:hover {
 273                 background-color: @blue;
 274                 color: @white;
 275         }
 276
 277         .open .dropdown-toggle {
 278                 background-color: #060606;
 279         }
 280
 281         .dropdown-menu li > a:hover {
 282                 border: none;
 283         }
 284 }
 285
 286 .nav-list {
 287
 288         li > a {
 289                 text-shadow: none;
 290         }
 291
 292         li > a:hover {
 293                 background-color: @blue;
 294                 color: @white;
 295         }
 296
 297         .nav-header {
 298                 text-shadow: none;
 299         }
 300
 301         .divider {
 302                 background-color: transparent;
 303                 border-bottom: 1px solid #222;
 304         }
 305 }
 306
 307 .nav-stacked {
 308
 309         li > a {
 310                 border: 1px solid #222 !important;
 311         }
 312
 313         li > a:hover,
 314         li.active > a {
 315                 background-color: @blue;
 316                 color: @white;
 317         }
 318 }
 319
 320 .tabbable  {
 321         .nav-tabs,
 322         .nav-tabs li.active > a {
 323                 border-color: #222;
 324         }
 325 }
 326
 327 .breadcrumb {
 328         background-color: transparent;
 329         background-image: none;
 330         border-width: 0;
 331         .box-shadow(none);
 332         font-size: 14px;
 333
 334         li > a {
 335                 color: @blue;
 336                 text-shadow: none;
 337         }
 338
 339         li.active {
 340                 text-shadow: none;
 341         }
 342 }
 343
 344 .pagination {
 345         ul {
 346                 .box-shadow(none);
 347         }
 348
 349         a {
 350                 border: 0;
 351                 font-size: 14px;
 352         }
 353
 354         a:hover, .active a {
 355                 background-color: @blue;
 356                 color: @white;
 357         }
 358
 359         .disabled span,
 360         .disabled a,
 361         .disabled a:hover {
 362                 background-color: rgba(0, 0, 0, 0.2);
 363         }
 364 }
 365
 366 .pager {
 367
 368         a {
 369                 background-color: @bodyBackground;
 370                 border: none;
 371
 372                 &:hover {
 373                         background-color: @blue;
 374                 }
 375         }
 376
 377         .disabled a,
 378         .disabled a:hover {
 379                 background-color: @bodyBackground;
 380         }
 381
 382 }
 383
 384 // BUTTONS
 385 // -----------------------------------------------------
 386
 387 .btn {
 388         .box-shadow(1px 1px 2px #111);
 389         .buttonBackground(darken(@gray, 20%), darken(@gray, 30%));
 390         color: @white;
 391         text-shadow: none;
 392
 393         &:hover {
 394                 text-shadow: none;
 395                 color: @white;
 396         }
 397 }
 398
 399 .btn-primary {
 400   .buttonBackground(@blueDark, darken(@blueDark, 10%));
 401 }
 402
 403 .btn-warning {
 404   .buttonBackground(lighten(@orange, 10%), @orange);
 405 }
 406
 407 .btn-danger {
 408   .buttonBackground(lighten(@red, 10%), @red);
 409 }
 410
 411 .btn-success {
 412   .buttonBackground(lighten(@green, 10%), @green);
 413 }
 414
 415 .btn-info {
 416   .buttonBackground(darken(@gray, 40%), darken(@gray, 50%));
 417 }
 418
 419 .btn-inverse {
 420   .buttonBackground(lighten(@purple, 5%), @purple);
 421 }
 422
 423 .btn .caret {
 424         border-top: 4px solid black;
 425         opacity: 0.3;
 426 }
 427
 428 .btn-group > .dropdown-menu > li > a:hover {
 429         border-bottom: 0;
 430 }
 431
 432 .btn.disabled, .btn[disabled] {
 433         background-color: @grayLight;
 434 }
 435
 436 // FORMS
 437 // -----------------------------------------------------
 438
 439 input, textarea, select {
 440         border-width: 2px;
 441         .border-radius(1px);
 442 }
 443
 444 legend, label {
 445         color: @textColor;
 446         border-bottom: 0px solid #222;
 447 }
 448
 449 input, textarea, select, .uneditable-input {
 450         color: @grayDark;
 451 }
 452
 453 input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input {
 454         background-color: #555;
 455         border-color: #444;
 456 }
 457
 458 input:focus,
 459 textarea:focus,
 460 input.focused,
 461 textarea.focused {
 462   border-color: rgba(82,168,236,1);
 463   outline: 0;
 464   outline: thin dotted \9; /* IE6-9 */
 465 }
 466
 467 input[type="file"]:focus,
 468 input[type="radio"]:focus,
 469 input[type="checkbox"]:focus,
 470 select:focus {
 471   .box-shadow(none); // override for file inputs
 472   .tab-focus();
 473 }
 474
 475 .form-actions {
 476         border-top: 1px solid #222;
 477 }
 478
 479 // TABLES
 480 // -----------------------------------------------------
 481
 482 .table {
 483
 484         .border-radius(1px);
 485
 486         tbody tr.success td {
 487                 background-color: @green;
 488                 color: @white;
 489         }
 490
 491         tbody tr.error td {
 492                 background-color: @red;
 493                 color: @white;
 494         }
 495
 496         tbody tr.info td {
 497                 background-color: @blue;
 498                 color: @white;
 499         }
 500 }
 501
 502 // DROPDOWNS
 503 // -----------------------------------------------------
 504
 505 .dropdown-menu {
 506         background-color: #191A1A;
 507         .box-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
 508 }
 509
 510 .dropdown-menu li > a:hover {
 511         background-color: @blue;
 512 }
 513
 514 // ALERTS, LABELS, BADGES
 515 // -----------------------------------------------------
 516
 517 .alert,
 518 .alert .alert-heading,
 519 .alert-success,
 520 .alert-success .alert-heading,
 521 .alert-danger,
 522 .alert-error,
 523 .alert-danger .alert-heading,
 524 .alert-error .alert-heading,
 525 .alert-info,
 526 .alert-info .alert-heading {
 527   color: @grayLighter;
 528   text-shadow: none;
 529   border: none;
 530 }
 531
 532 .label {
 533         color: @grayLighter;
 534 }
 535
 536 .label, .alert { background-color: darken(@gray, 20%); }
 537
 538 .label:hover { background-color: darken(@gray, 30%); }
 539
 540 .label-important,
 541 .alert-danger,
 542 .alert-error { background-color: @red; }
 543
 544 .label-important:hover { background-color: darken(@red, 10%); }
 545
 546 .label-warning   { background-color: darken(@orange, 10%); }
 547
 548 .label-warning:hover { background-color: darken(@orange, 20%); }
 549
 550 .label-success, .alert-success { background-color: darken(@green, 3%); }
 551
 552 .label-success:hover { background-color: darken(@green, 13%); }
 553
 554 .label-info, .alert-info { background-color: darken(@blueDark, 10%); }
 555
 556 .label-info:hover { background-color: darken(@blueDark, 20%); }
 557
 558 // MISC
 559 // -----------------------------------------------------
 560
 561 .well, .hero-unit {
 562         .border-radius(1px);
 563 }
 564
 565 .well, .hero-unit {
 566         border-top: solid 1px lighten(@grayDark, 5%);
 567         .box-shadow(0 2px 4px rgba(0,0,0,.8));
 568 }
 569
 570 .thumbnail {
 571         border-color: #222;
 572 }
 573
 574 .progress {
 575         background-color: #060606;
 576         background-image: none;
 577         .border-radius(0);
 578 }
 579
 580 .modal {
 581         .border-radius(1px);
 582         border-top: solid 1px lighten(@grayDark, 5%);
 583         background-color: @grayDark;
 584 }
 585
 586 .modal-header {
 587         border-bottom: 1px solid #222;
 588 }
 589
 590 .modal-footer {
 591         background-color: @grayDark;
 592         border-top: 1px solid #222;
 593         .border-radius(0 0 6px 6px);
 594         .box-shadow(none);
 595 }
 596
 597 .footer {
 598         border-top: 1px solid #222;
 599 }
 600
 601 // MEDIA QUERIES
 602 // -----------------------------------------------------
 603
 604 @media (max-width: 768px) {
 605         div.subnav .nav > li + li > a,
 606         div.subnav .nav > li:first-child > a {
 607                 border-top: 1px solid #222;
 608                 border-left: 1px solid #222;
 609         }
 610
 611         .subnav .nav > li + li > a:hover,
 612         .subnav .nav > li:first-child > a:hover {
 613                         border-bottom: 0;
 614                         background-color: @blue;
 615         }
 616 }