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

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