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

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