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
 346         ul {
 347                 .box-shadow(none);
 348         }
 349
 350         ul > li > a,
 351         ul > li > span {
 352                 border: 0;
 353                 font-size: 14px;
 354         }
 355
 356         ul > li > a:hover {
 357                 background-color: @blue;
 358                 color: @white;
 359         }
 360
 361         ul > .active > a,
 362         ul > .active > span {
 363                 background-color: @blue;
 364                 color: @white;
 365         }
 366
 367         ul > .disabled > a,
 368         ul > .disabled > a:hover,
 369         ul > .disabled > span,
 370         ul > .disabled > span:hover {
 371                 background-color: rgba(0, 0, 0, 0.2);
 372         }
 373 }
 374
 375 .pager {
 376
 377         a {
 378                 background-color: @bodyBackground;
 379                 border: none;
 380
 381                 &:hover {
 382                         background-color: @blue;
 383                 }
 384         }
 385
 386         .disabled a,
 387         .disabled a:hover {
 388                 background-color: @bodyBackground;
 389         }
 390
 391 }
 392
 393 // BUTTONS
 394 // -----------------------------------------------------
 395
 396 .btn {
 397         .box-shadow(1px 1px 2px #111);
 398         .buttonBackground(darken(@gray, 20%), darken(@gray, 30%));
 399         color: @white;
 400         text-shadow: none;
 401
 402         &:hover {
 403                 text-shadow: none;
 404                 color: @white;
 405         }
 406 }
 407
 408 .btn-primary {
 409   .buttonBackground(@blueDark, darken(@blueDark, 10%));
 410 }
 411
 412 .btn-warning {
 413   .buttonBackground(lighten(@orange, 10%), @orange);
 414 }
 415
 416 .btn-danger {
 417   .buttonBackground(lighten(@red, 10%), @red);
 418 }
 419
 420 .btn-success {
 421   .buttonBackground(lighten(@green, 10%), @green);
 422 }
 423
 424 .btn-info {
 425   .buttonBackground(darken(@gray, 40%), darken(@gray, 50%));
 426 }
 427
 428 .btn-inverse {
 429   .buttonBackground(lighten(@purple, 5%), @purple);
 430 }
 431
 432 .btn .caret {
 433         border-top: 4px solid black;
 434         opacity: 0.3;
 435 }
 436
 437 .btn-group > .dropdown-menu > li > a:hover {
 438         border-bottom: 0;
 439 }
 440
 441 .btn.disabled, .btn[disabled] {
 442         background-color: @grayLight;
 443 }
 444
 445 // FORMS
 446 // -----------------------------------------------------
 447
 448 input, textarea, select {
 449         border-width: 2px;
 450         .border-radius(1px);
 451 }
 452
 453 legend, label {
 454         color: @textColor;
 455         border-bottom: 0px solid #222;
 456 }
 457
 458 input, textarea, select, .uneditable-input {
 459         color: @grayDark;
 460 }
 461
 462 input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input {
 463         background-color: #555;
 464         border-color: #444;
 465 }
 466
 467 input:focus,
 468 textarea:focus,
 469 input.focused,
 470 textarea.focused {
 471   border-color: rgba(82,168,236,1);
 472   outline: 0;
 473   outline: thin dotted \9; /* IE6-9 */
 474 }
 475
 476 input[type="file"]:focus,
 477 input[type="radio"]:focus,
 478 input[type="checkbox"]:focus,
 479 select:focus {
 480   .box-shadow(none); // override for file inputs
 481   .tab-focus();
 482 }
 483
 484 .form-actions {
 485         border-top: 1px solid #222;
 486 }
 487
 488 // TABLES
 489 // -----------------------------------------------------
 490
 491 .table {
 492
 493         .border-radius(1px);
 494
 495         tbody tr.success td {
 496                 background-color: @green;
 497                 color: @white;
 498         }
 499
 500         tbody tr.error td {
 501                 background-color: @red;
 502                 color: @white;
 503         }
 504
 505         tbody tr.info td {
 506                 background-color: @blue;
 507                 color: @white;
 508         }
 509 }
 510
 511 // DROPDOWNS
 512 // -----------------------------------------------------
 513
 514 .dropdown-menu {
 515         background-color: #191A1A;
 516         .box-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
 517 }
 518
 519 .dropdown-menu li > a:hover {
 520         background-color: @blue;
 521 }
 522
 523 // ALERTS, LABELS, BADGES
 524 // -----------------------------------------------------
 525
 526 .alert,
 527 .alert .alert-heading,
 528 .alert-success,
 529 .alert-success .alert-heading,
 530 .alert-danger,
 531 .alert-error,
 532 .alert-danger .alert-heading,
 533 .alert-error .alert-heading,
 534 .alert-info,
 535 .alert-info .alert-heading {
 536   color: @grayLighter;
 537   text-shadow: none;
 538   border: none;
 539 }
 540
 541 .label {
 542         color: @grayLighter;
 543 }
 544
 545 .label, .alert { background-color: darken(@gray, 20%); }
 546
 547 .label:hover { background-color: darken(@gray, 30%); }
 548
 549 .label-important,
 550 .alert-danger,
 551 .alert-error { background-color: @red; }
 552
 553 .label-important:hover { background-color: darken(@red, 10%); }
 554
 555 .label-warning   { background-color: darken(@orange, 10%); }
 556
 557 .label-warning:hover { background-color: darken(@orange, 20%); }
 558
 559 .label-success, .alert-success { background-color: darken(@green, 3%); }
 560
 561 .label-success:hover { background-color: darken(@green, 13%); }
 562
 563 .label-info, .alert-info { background-color: darken(@blueDark, 10%); }
 564
 565 .label-info:hover { background-color: darken(@blueDark, 20%); }
 566
 567 // MISC
 568 // -----------------------------------------------------
 569
 570 .well, .hero-unit {
 571         .border-radius(1px);
 572 }
 573
 574 .well, .hero-unit {
 575         border-top: solid 1px lighten(@grayDark, 5%);
 576         .box-shadow(0 2px 4px rgba(0,0,0,.8));
 577 }
 578
 579 .thumbnail {
 580         border-color: #222;
 581 }
 582
 583 .progress {
 584         background-color: #060606;
 585         background-image: none;
 586         .border-radius(0);
 587 }
 588
 589 .modal {
 590         .border-radius(1px);
 591         border-top: solid 1px lighten(@grayDark, 5%);
 592         background-color: @grayDark;
 593 }
 594
 595 .modal-header {
 596         border-bottom: 1px solid #222;
 597 }
 598
 599 .modal-footer {
 600         background-color: @grayDark;
 601         border-top: 1px solid #222;
 602         .border-radius(0 0 6px 6px);
 603         .box-shadow(none);
 604 }
 605
 606 .footer {
 607         border-top: 1px solid #222;
 608 }
 609
 610 // MEDIA QUERIES
 611 // -----------------------------------------------------
 612
 613 @media (max-width: 768px) {
 614         div.subnav .nav > li + li > a,
 615         div.subnav .nav > li:first-child > a {
 616                 border-top: 1px solid #222;
 617                 border-left: 1px solid #222;
 618         }
 619
 620         .subnav .nav > li + li > a:hover,
 621         .subnav .nav > li:first-child > a:hover {
 622                         border-bottom: 0;
 623                         background-color: @blue;
 624         }
 625 }