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