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