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