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(256,256,256,.1);
  94         .box-shadow(0 2px 4px rgba(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         border-left: 1px solid #222;
 136         border-right: 0;
 137         color: @grayLighter;
 138         background-color: @grayDarker;
 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 .dropdown.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: 0;
 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 > li > a, .nav-list .nav-header {
 188         text-shadow: none;
 189 }
 190
 191 .nav-list li > a:hover,
 192 .nav-tabs li > a:hover,
 193 .nav-tabs li.active > a,
 194 .nav-pills li > a:hover,
 195 .nav-stacked li > a:hover,
 196 .nav-stacked li.active > a {
 197         background-color: @blue;
 198         color: @white;
 199 }
 200
 201 .nav-tabs {
 202         border-bottom: 1px solid #222;
 203 }
 204
 205 .nav-stacked > li > a,
 206 .nav-tabs > li > a:hover,
 207 .nav-tabs > .active > a,
 208 .nav-tabs > .active > a:hover {
 209         border: 1px solid #222 !important;
 210 }
 211
 212 .nav.nav-tabs .active a:hover {
 213         background-color: @blue;
 214         color: @white;
 215 }
 216
 217 .nav.nav-tabs .dropdown.open,
 218 .nav.nav-pills .dropdown.open {
 219         .dropdown-toggle {
 220                 background-color: #060606 !important;
 221                 border-top: 0;
 222                 border: 1px solid #222;
 223         }
 224
 225         .dropdown-menu li > a:hover { border-bottom: 0; }
 226 }
 227
 228 .tabbable .nav-tabs, .thumbnail {
 229         border-color: #222;
 230 }
 231
 232 .breadcrumb {
 233         background-color: transparent;
 234         background-image: none;
 235         border-width: 0;
 236         .box-shadow(none);
 237         font-size: 14px;
 238
 239         li > a {
 240                 color: @blue;
 241                 text-shadow: none;
 242         }
 243
 244         li.active {
 245                 text-shadow: none;
 246         }
 247 }
 248
 249 .pagination {
 250         ul {
 251                 .box-shadow(none);
 252         }
 253
 254         a {
 255                 border: 0;
 256                 font-size: 14px;
 257         }
 258
 259         a:hover, .active a {
 260                 background-color: @blue;
 261                 color: @white;
 262         }
 263 }
 264
 265 // BUTTONS
 266 // -----------------------------------------------------
 267
 268 .btn {
 269         .border-radius(3px);
 270         .box-shadow(1px 1px 2px #111);
 271         .buttonBackground(darken(@gray, 20%), darken(@gray, 30%));
 272         color: @white;
 273         text-shadow: none;
 274
 275         &:hover {
 276                 text-shadow: none;
 277                 color: @white;
 278         }
 279 }
 280
 281 .btn-primary {
 282   .buttonBackground(@blueDark, darken(@blueDark, 10%));
 283 }
 284
 285 .btn-warning {
 286   .buttonBackground(lighten(@orange, 10%), @orange);
 287 }
 288
 289 .btn-danger {
 290   .buttonBackground(lighten(@red, 10%), @red);
 291 }
 292
 293 .btn-success {
 294   .buttonBackground(lighten(@green, 10%), @green);
 295 }
 296
 297 .btn-info {
 298   .buttonBackground(darken(@gray, 40%), darken(@gray, 50%));
 299 }
 300
 301 .btn-inverse {
 302   .buttonBackground(lighten(@purple, 5%), @purple);
 303 }
 304
 305 .btn-group .btn:first-child {
 306     -webkit-border-top-left-radius: 3px;
 307        -moz-border-top-left-radius: 3px;
 308             border-top-left-radius: 3px;
 309
 310     -webkit-border-bottom-left-radius: 3px;
 311        -moz-border-bottom-left-radius: 3px;
 312             border-bottom-left-radius: 3px;
 313 }
 314
 315 .btn-group .btn:last-child, .btn-group .dropdown-toggle {
 316     -webkit-border-top-right-radius: 3px;
 317        -moz-border-top-right-radius: 3px;
 318             border-top-right-radius: 3px;
 319
 320     -webkit-border-bottom-right-radius: 3px;
 321        -moz-border-bottom-right-radius: 3px;
 322             border-bottom-right-radius: 3px;
 323
 324 }
 325
 326 .btn .caret {
 327         border-top: 4px solid black;
 328         opacity: 0.3;
 329 }
 330
 331 .btn-group > .dropdown-menu > li > a:hover {
 332         border-bottom: 0;
 333 }
 334
 335 .btn.disabled, .btn[disabled] {
 336         background-color: @grayLight;
 337 }
 338
 339 // FORMS
 340 // -----------------------------------------------------
 341
 342 input, textarea, select {
 343         border-width: 2px;
 344 }
 345
 346 legend, label {
 347         color: @textColor;
 348         border-bottom: 0px solid #222;
 349 }
 350
 351 input, textarea, select, .uneditable-input {
 352         color: @grayDark;
 353 }
 354
 355 input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input {
 356         background-color: #555;
 357         border-color: #444;
 358 }
 359
 360 input:focus,
 361 textarea:focus,
 362 input.focused,
 363 textarea.focused {
 364   border-color: rgba(82,168,236,1);
 365   outline: 0;
 366   outline: thin dotted \9; /* IE6-9 */
 367 }
 368
 369 input[type="file"]:focus,
 370 input[type="radio"]:focus,
 371 input[type="checkbox"]:focus,
 372 select:focus {
 373   .box-shadow(none); // override for file inputs
 374   .tab-focus();
 375 }
 376
 377 .form-actions {
 378         background: transparent;
 379 }
 380
 381 .form-actions, footer.footer {
 382         border-top: 1px solid #222;
 383 }
 384
 385 // MODALS
 386 // -----------------------------------------------------
 387
 388 .modal {
 389         border-top: solid 1px rgba(256,256,256,.3);
 390         background-color: @grayDark;
 391 }
 392
 393 .modal-header {
 394         border-bottom: 1px solid #222;
 395 }
 396
 397 .modal-footer {
 398         background-color: @grayDark;
 399         border-top: 1px solid #222;
 400         .border-radius(0 0 6px 6px);
 401         .box-shadow(none);
 402 }
 403
 404 // MISCELLANEOUS
 405 // -----------------------------------------------------
 406
 407 .table, .well, .prettyprint, input, textarea, select {
 408         .border-radius(1px);
 409 }
 410
 411 code, pre, pre.prettyprint {
 412         background-color: @grayLighter;
 413 }
 414
 415 .well, .hero-unit {
 416         background-color: #131517;
 417         border-top: solid 1px rgba(256,256,256,.1);
 418         .box-shadow(0 2px 4px rgba(0,0,0,.8));
 419 }
 420
 421 .progress {
 422         background-color: #060606;
 423         background-image: none;
 424         .border-radius(0);
 425 }
 426
 427 .label {
 428         color: @grayLighter;
 429 }
 430
 431 .label, .alert { background-color: darken(@gray, 20%); }
 432
 433 .label:hover { background-color: darken(@gray, 30%); }
 434
 435
 436 .label-important, .alert-danger,
 437 .alert-error { background-color: @red; }
 438
 439 .label-important:hover { background-color: darken(@red, 10%); }
 440
 441 .label-warning   { background-color: darken(@orange, 10%); }
 442
 443 .label-warning:hover { background-color: darken(@orange, 20%); }
 444
 445 .label-success, .alert-success { background-color: darken(@green, 3%); }
 446
 447 .label-success:hover { background-color: darken(@green, 13%); }
 448
 449 .label-info, .alert-info { background-color: darken(@blueDark, 10%); }
 450
 451 .label-info:hover { background-color: darken(@blueDark, 20%); }
 452
 453 .alert,
 454 .alert .alert-heading,
 455 .alert-success,
 456 .alert-success .alert-heading,
 457 .alert-danger,
 458 .alert-error,
 459 .alert-danger .alert-heading,
 460 .alert-error .alert-heading,
 461 .alert-info,
 462 .alert-info .alert-heading {
 463   color: @grayLighter;
 464   text-shadow: none;
 465   border: none;
 466 }
 467
 468