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

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