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

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