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

   1 // Bootswatch.less
   2 // Swatch: Amelia
   3 // -----------------------------------------------------
   4
   5 // TYPOGRAPHY
   6 // -----------------------------------------------------
   7
   8 @import url('http://fonts.googleapis.com/css?family=Lobster');
   9 @import url('http://fonts.googleapis.com/css?family=Cabin:400,700');
  10
  11 h1, h2, h3, h4, h5, h6,
  12 h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
  13         color: @textColor;
  14         font-weight: normal;
  15 }
  16
  17 input, button, select, textarea,
  18 .navbar-search .search-query,
  19 h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
  20         font-family: @baseFontFamily;
  21 }
  22
  23 .muted {
  24         color: rgba(256, 256, 256, 0.5);
  25 }
  26
  27 .navbar .brand, h1, h2, h3, h4, h5, legend {
  28         font-family: 'Lobster', cursive;
  29 }
  30
  31
  32 // SCAFFOLDING
  33 // -----------------------------------------------------
  34
  35 body {
  36         background-color: #4397A2;
  37         #gradient > .radial(lighten(#0F8790, 7%), #0F8790);
  38 }
  39
  40 hr {
  41         border-bottom: 1px solid rgba(256, 256, 256, 0.3);
  42 }
  43
  44 .page-header {
  45         border-bottom: 0px solid transparent;
  46 }
  47
  48 footer.footer {
  49         border-top: 1px solid rgba(256, 256, 256, 0.3);
  50 }
  51
  52 footer.footer p {
  53         color: @textColor;
  54 }
  55
  56 // NAVBAR
  57 // -----------------------------------------------------
  58
  59 .navbar {
  60         .navbar-inner {
  61                 .border-radius(0);
  62         }
  63
  64         .brand {
  65                 padding-top: 12px;
  66                 font-size: 24px;
  67                 font-weight: normal;
  68         }
  69
  70         .nav > li > a {
  71                 padding-top: 17px;
  72                 padding-bottom: 14px;
  73                 text-shadow: none;
  74                 color: @textColor;
  75         }
  76
  77         .nav > li.active > a {
  78                 color: @white;
  79                 background-color: lighten(@navbarBackground, 10%);
  80         }
  81
  82         .nav > li > a:hover,
  83         .nav > li.active > a:hover {
  84                 background-color: lighten(@navbarBackground, 10%);
  85         }
  86
  87         .navbar-search {
  88                 margin-top: 10px;
  89         }
  90
  91         .navbar-search .search-query {
  92                 border: 2px solid lighten(@navbarBackground, 10%);
  93                 background-color: transparent;
  94                 .border-radius(0);
  95                 .box-shadow(none);
  96
  97                 &:focus, &.focus {
  98                         background-color: @grayLighter;
  99                         border-color: @grayLighter;
 100                         text-shadow: none;
 101                         padding: 4px 9px;
 102                         .box-shadow(none);
 103                 }
 104
 105         }
 106 }
 107
 108 .navbar .nav > li.dropdown.open > .dropdown-menu a:hover,
 109 div.subnav .nav > li.dropdown.open > .dropdown-menu a:hover,
 110 .dropdown-menu > li > a:hover,
 111 .nav .dropdown.open > .dropdown-menu > li > a:hover {
 112         background-color: rgba(0, 57, 59, 0.9);
 113 }
 114
 115 div.subnav {
 116         background-color: rgba(42, 99, 105, 0.9);
 117         background-image: none;
 118         border: 0px solid transparent;
 119         .border-radius(0);
 120         .box-shadow(none);
 121
 122         .nav > li.dropdown.open > a {
 123                 border-color: transparent;
 124                 background-color: rgba(256, 256, 256, 0.4);
 125         }
 126
 127         .nav > li > a {
 128                 color: @textColor;
 129                 border-color: transparent;
 130         }
 131
 132         .nav > li:first-child > a,
 133         .nav > li:first-child > a:hover {
 134                 .border-radius(0);
 135         }
 136
 137         .nav > .active > a {
 138                 background-color: transparent;
 139                 border-color: transparent;
 140                 color: @textColor;
 141                 .box-shadow(none);
 142         }
 143
 144         .nav > .active > a:hover,
 145         .nav > li > a:hover,
 146         .nav > li.active > a:hover, {
 147                 border-right-color: transparent;
 148                 background-color: rgba(256, 256, 256, 0.4);
 149                 color: @textColor;
 150         }
 151 }
 152
 153 div.subnav .nav > li:first-child > a:hover {
 154         border-left-color: rgba(256, 256, 256, 0.4);
 155         border-left-width: 1px;
 156 }
 157
 158 div.subnav-fixed {
 159         top: 50px;
 160 }
 161
 162 .navbar .nav-collapse.collapse {
 163
 164         li > a {
 165                 color: @textColor;
 166                 .border-radius(0);
 167         }
 168
 169         li > a:hover {
 170                 background-color: lighten(@navbarBackground, 10%);
 171         }
 172
 173         .navbar-form, .navbar-search {
 174                 .box-shadow(none);
 175                 border-color: lighten(@navbarBackground, 10%);
 176         }
 177
 178         .navbar-search .search-query {
 179                 border: 2px solid @textColor;
 180         }
 181 }
 182
 183 // BUTTONS
 184 // -----------------------------------------------------
 185
 186 .buttonBackgroundCustom(@color) {
 187
 188   background-image: none;
 189   background-color: @color;
 190
 191   &:hover, &:active, &.active, &.disabled, &[disabled] {
 192     background-color: darken(@color, 5%);
 193         text-shadow: none;
 194   }
 195
 196   &:active, &.active {
 197     background-color: darken(@color, 15%);
 198         .box-shadow(none);
 199   }
 200
 201   // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
 202   &:active,
 203   &.active {
 204     background-color: darken(@color, 15%) e("\9");
 205   }
 206 }
 207
 208 .btn {
 209         padding: 12px 16px;
 210         .border-radius(0);
 211         border: 0px solid transparent;
 212         text-shadow: none;
 213         .box-shadow(none);
 214         .buttonBackgroundCustom(@grayLighter);
 215 }
 216
 217 .btn-group .btn:first-child {
 218   margin-left: 0;
 219      -webkit-border-top-left-radius: 0;
 220          -moz-border-radius-topleft: 0;
 221              border-top-left-radius: 0;
 222   -webkit-border-bottom-left-radius: 0;
 223       -moz-border-radius-bottomleft: 0;
 224           border-bottom-left-radius: 0;
 225 }
 226
 227 .btn-group .btn:last-child,
 228 .btn-group .dropdown-toggle {
 229      -webkit-border-top-right-radius: 0;
 230          -moz-border-radius-topright: 0;
 231              border-top-right-radius: 0;
 232   -webkit-border-bottom-right-radius: 0;
 233       -moz-border-radius-bottomright: 0;
 234           border-bottom-right-radius: 0;
 235 }
 236
 237 .btn-group .dropdown-toggle,
 238 .btn-group.open .dropdown-toggle,
 239 .btn.open .dropdown-toggle {
 240         .box-shadow(none);
 241 }
 242
 243
 244 .btn-warning .caret {
 245         opacity: 0.75;
 246         border-top-color: @white;
 247 }
 248
 249 .btn-primary {
 250   .buttonBackgroundCustom(#AD1D28);
 251 }
 252
 253 .btn-warning {
 254   .buttonBackgroundCustom(@orange);
 255 }
 256
 257 .btn-danger {
 258   .buttonBackgroundCustom(darken(@yellow, 3%));
 259 }
 260
 261 .btn-success {
 262   .buttonBackgroundCustom(@green);
 263 }
 264
 265 .btn-info {
 266   .buttonBackgroundCustom(@purple);
 267 }
 268
 269 .btn-inverse {
 270   .buttonBackgroundCustom(#27666D);
 271 }
 272
 273 .btn-small {
 274         padding: 13px 16px 12px;
 275 }
 276
 277 [class^="icon-"], [class*=" icon-"] {
 278         margin-top: 2px;
 279         margin-right: 8px;
 280 }
 281
 282 .btn-small [class^="icon-"] {
 283         margin-top: 1px;
 284 }
 285
 286 .add-on  [class^="icon-"] {
 287         margin-left: 5px;
 288 }
 289
 290 // TABLES
 291 // -----------------------------------------------------
 292
 293 .table {
 294         background-color: lighten(#147E88, 10%);
 295 }
 296
 297 .table th, .table td,
 298 .table tbody + tbody {
 299         border-top: 0px solid transparent;
 300 }
 301
 302 .table-bordered {
 303         .border-radius(0);
 304     border: 1px solid lighten(#147E88, 12%);
 305
 306         th, td {
 307       border-top: 1px solid lighten(#147E88, 12%);
 308         }
 309
 310     th + th,
 311     td + td,
 312     th + td,
 313     td + th {
 314       border-left: 1px solid lighten(#147E88, 12%);
 315     }
 316
 317 }
 318
 319 .table-striped {
 320   tbody {
 321     tr:nth-child(odd) td,
 322     tr:nth-child(odd) th {
 323                 background-color: lighten(#147E88, 15%);
 324     }
 325   }
 326 }
 327
 328 .table {
 329   tbody tr:hover td,
 330   tbody tr:hover th {
 331                 background-color: rgba(256, 256, 256, 0.4);
 332   }
 333 }
 334
 335
 336 // FORMS
 337 // -----------------------------------------------------
 338
 339 legend, label, .help-block, .input-file {
 340         color: @textColor;
 341         border: 0px solid transparent;
 342 }
 343
 344 input, textarea, .uneditable-input {
 345         border: 0px solid transparent;
 346         padding: 10px;
 347 }
 348
 349 select {
 350         border: 0px solid transparent;
 351 }
 352
 353 button {
 354         margin-left: 12px;
 355 }
 356
 357 input, textarea, .search-query, .uneditable-input,
 358 .input-append input, .input-append .uneditable-input,
 359 .input-prepend input, .input-prepend .uneditable-input {
 360         border-color: transparent;
 361         .border-radius(0);
 362         .box-shadow(none);
 363 }
 364
 365 .form-actions {
 366         background-color: transparent;
 367         border-top: 0px solid transparent;
 368 }
 369
 370 .control-group.warning > label,
 371 .control-group.warning .help-inline {
 372         color: lighten(@orange, 30%);
 373 }
 374
 375 .control-group.error > label,
 376 .control-group.error .help-inline {
 377         color: lighten(@linkColor, 10%);
 378 }
 379
 380 .control-group.success > label,
 381 .control-group.success .help-inline {
 382         color: lighten(@green, 20%);
 383 }
 384
 385 .input-prepend .add-on, .input-append .add-on {
 386         height: 25px;
 387         padding-top: 9px;
 388         text-shadow: none;
 389         border-color: transparent;
 390         .border-radius(0);
 391         background-color: @grayLighter;
 392 }
 393
 394 // NAVIGATION
 395 // -----------------------------------------------------
 396
 397 .breadcrumb, .pager > li > a {
 398         border-color: transparent;
 399         .border-radius(0);
 400         .box-shadow(none);
 401         text-shadow: none;
 402 }
 403
 404 .breadcrumb {
 405         background-color: #3CB9C6;
 406         background-image: none;
 407
 408         li {
 409                 text-shadow: none;
 410         }
 411
 412         .divider {
 413                 color: @linkColor;
 414         }
 415 }
 416
 417 .pager > li > a {
 418         background-color: #3CB9C6;
 419
 420         &:hover {
 421                 background-color: #8AD5DC;
 422         }
 423 }
 424
 425 .pagination {
 426
 427         ul  {
 428                 background-color: #3CB9C6;
 429                 background-image: none;
 430         }
 431
 432         li a {
 433                 border: 0px solid transparent;
 434         }
 435
 436         .disabled a, .disabled a:hover {
 437                 color: @textColor;
 438         }
 439
 440         li a:hover {
 441                 background-color: rgba(256, 256, 256, 0.4);
 442                 color: @linkColor;
 443         }
 444
 445         .active a, .active a:hover {
 446                 background-color: rgba(256, 256, 256, 0.4);
 447                 color: @textColor;
 448         }
 449
 450         ul,
 451         li:first-child a,
 452         li:last-child a {
 453                 .border-radius(0);
 454         }
 455
 456 }
 457
 458 .nav-tabs .dropdown.open > .dropdown-toggle,
 459 .nav-pills .dropdown.open > .dropdown-toggle {
 460         background-color: #8AD5DC;
 461         color: @linkColor;
 462         border-color: transparent;
 463 }
 464
 465 .nav-tabs, .nav-pills {
 466         border-color: transparent;
 467
 468         li > a {
 469                 border-color: transparent;
 470                 .border-radius(0);
 471                 .box-shadow(0);
 472         }
 473
 474         li.active > a,
 475         li:active > a,
 476         li.active > a:hover,
 477         li:active > a:hover {
 478                 color: @textColor;
 479         }
 480
 481         li.active > a,
 482         li:active > a,
 483         li > a:hover,
 484         li.active > a:hover,
 485         li:active > a:hover {
 486                 background-color: #8AD5DC;
 487                 border-color: transparent;
 488                 text-shadow: none;
 489         }
 490 }
 491
 492 .nav-tabs, .nav-tabs > li > a {
 493         border-bottom: 1px solid rgba(256, 256, 256, 0.5);
 494 }
 495
 496 .nav-tabs > li > a {
 497         background-color: #3CB9C6;
 498 }
 499
 500 .nav-tabs.nav-stacked {
 501
 502         li > a:first-child,
 503         li > a:last-child {
 504                 .border-radius(0);
 505         }
 506
 507         li > a,
 508         li > a:hover,
 509         li.active > a,
 510         li:active > a,
 511         li.active > a:hover,
 512         li:active > a:hover {
 513                 border-color: transparent;
 514         }
 515 }
 516
 517 .nav-list {
 518         .nav-header {
 519                 text-shadow: none;
 520                 color: @textColor;
 521         }
 522
 523         li > a {
 524                 text-shadow: none;
 525         }
 526
 527         li.active > a,
 528         li:active > a,
 529         li > a:hover,
 530         li.active > a:hover,
 531         li:active > a:hover {
 532                 background-color: #8AD5DC;
 533                 text-shadow: none;
 534         }
 535 }
 536
 537
 538
 539 // MISCELLANEOUS
 540 // -----------------------------------------------------
 541
 542 .alert, .label, .progress, .well, pre, code {
 543         border-color: transparent;
 544         .border-radius(0);
 545         .box-shadow(none);
 546         text-shadow: none;
 547 }
 548
 549 code, pre {
 550         background-color: rgba(256, 256, 256, 0.3);
 551         padding: 2px;
 552 }
 553
 554 .well {
 555         background-color: #3CB9C6;
 556         background-image: none;
 557 }
 558
 559 .label, .label:hover {
 560         background-color: @grayLighter;
 561         text-shadow: none;
 562         color: @grayDark;
 563 }
 564
 565 .label-warning, .label-warning:hover, .alert {
 566         background-color: @orange;
 567         color: @textColor;
 568 }
 569
 570 .label-important, .label-important:hover, .alert-error {
 571         background-color: darken(@yellow, 3%);
 572         color: @textColor;
 573 }
 574
 575 .label-success, .label-success:hover, .alert-success {
 576         background-color: @green;
 577         color: @textColor;
 578 }
 579
 580 .label-info, .label-info:hover, .alert-info {
 581         background-color: @purple;
 582         color: @textColor;
 583 }
 584
 585 .alert-heading {
 586         color: @textColor;
 587 }
 588
 589 .progress {
 590         background-image: none;
 591         background-color: #27666D;
 592
 593         .bar {
 594                 .box-shadow(none);
 595                 background-image: none;
 596                 background-color: @orange;
 597         }
 598 }
 599
 600 .progress-danger .bar {
 601         background-image: none;
 602         background-color: #AD1D28;
 603 }
 604 .progress-danger.progress-striped .bar {
 605   #gradient > .striped(#AD1D28);
 606 }
 607
 608 .progress-success .bar {
 609         background-image: none;
 610         background-color: @green;
 611 }
 612 .progress-success.progress-striped .bar {
 613   #gradient > .striped(@green);
 614 }
 615
 616 .progress-info .bar {
 617         background-image: none;
 618         background-color: @blue;
 619 }
 620 .progress-info.progress-striped .bar {
 621   #gradient > .striped(@blue);
 622 }
 623
 624 .thumbnail {
 625         border: 0px solid transparent;
 626         .border-radius(0);
 627         .box-shadow(none);
 628 }
 629
 630 blockquote {
 631
 632         border-left-color: lighten(#147E88, 12%);
 633
 634         &.pull-right {
 635                 border-right-color: lighten(#147E88, 12%);
 636         }
 637
 638         small {
 639                 color: rgba(256, 256, 256, 0.6);
 640         }
 641 }