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

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