├── readme.md ├── scheme.less └── 1pxdeep.less /readme.md: -------------------------------------------------------------------------------- 1 | # 1pxdeep: Bootstrap Theme. Exudes color. Oozes flat. 2 | 3 | _Copyright Rex Riepe 2013_ 4 | 5 | _Code licensed under Apache License v2.0, documentation under CC BY 3.0._ 6 | 7 | ## Demo & Documentation 8 | 9 | Use the Bootstrap version of LESS. 10 | 11 | Include scheme.less anywhere. 12 | 13 | Include 1pxdeep.less after all Bootstrap LESS. -------------------------------------------------------------------------------- /scheme.less: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////// 2 | ///////////////////////////////////////////////// 3 | //// SchemeLESS v1.0 4 | //// 5 | //// Copyright 2013 Rex Riepe 6 | //// Licensed under the Apache License v2.0 7 | //// http://www.apache.org/licenses/LICENSE-2.0 8 | //// 9 | ///////////////////////////////////////////////// 10 | ///////////////////////////////////////////////// 11 | 12 | /////////////////////////// 13 | ////Customizable values 14 | /////////////////////////// 15 | 16 | // This color is used to generate the scheme 17 | @seed-color:#ed8c2b; 18 | 19 | //// Color wheel positions 20 | /////////////////////////// 21 | 22 | // Uncomment the color wheel you want to use 23 | 24 | // Accented analogue (default) 25 | @wheel_pos1:45; @wheel_pos2:315; @wheel_pos3:180; 26 | 27 | // Tetrad 28 | //@wheel_pos1:30; @wheel_pos2:180; @wheel_pos3:210; 29 | 30 | // Triad 31 | //@wheel_pos1:120; @wheel_pos2:240; @wheel_pos3:0; 32 | 33 | // Compliment 34 | //@wheel_pos1:180; @wheel_pos2:0; @wheel_pos3:180; 35 | 36 | // Monochrome 37 | //@wheel_pos1:8; @wheel_pos2:352; @wheel_pos3:0; 38 | 39 | //// Luma breaks 40 | /////////////////////////// 41 | 42 | // Change these for different contrast cutoff points 43 | 44 | @luma-upper-break:80%; 45 | @luma-lower-break:16%; 46 | 47 | //// Relative changes to subcolors (lightness, saturation) 48 | /////////////////////////// 49 | 50 | // Customize these for different relative a, b and c colors 51 | 52 | @color-a-sat:10%; 53 | @color-a-lit:-20%; 54 | 55 | @color-b-sat:8%; 56 | @color-b-lit:-8%; 57 | 58 | @color-c-sat:0%; 59 | @color-c-lit:8%; 60 | 61 | /////////////////////////// 62 | ////Scheme building 63 | /////////////////////////// 64 | 65 | //// Beginning color values 66 | /////////////////////////// 67 | 68 | @sat:saturation(@seed-color); 69 | @luma:luma(@seed-color); 70 | @lit:lightness(@seed-color); 71 | 72 | //// Color creation 73 | /////////////////////////// 74 | 75 | //This makes the scheme's colors using the wheel positions 76 | 77 | @l-factor:@luma; // what we'll use for the L in HSL 78 | 79 | @color1:@seed-color; 80 | @color1theme:hsl(hue(spin(@seed-color,0)),@sat,@l-factor); 81 | 82 | @color1a:lighten(saturate(@color1,@color-a-sat), @color-a-lit); 83 | @color1b:lighten(saturate(@color1,@color-b-sat), @color-b-lit); 84 | @color1c:lighten(saturate(@color1,@color-c-sat), @color-c-lit); 85 | 86 | @color2:hsl(hue(spin(@seed-color,@wheel_pos1)),@sat,@l-factor); 87 | 88 | @color2a:lighten(saturate(@color2,@color-a-sat), @color-a-lit); 89 | @color2b:lighten(saturate(@color2,@color-b-sat), @color-b-lit); 90 | @color2c:lighten(saturate(@color2,@color-c-sat), @color-c-lit); 91 | 92 | @color3:hsl(hue(spin(@seed-color,@wheel_pos2)),@sat,@l-factor); 93 | 94 | @color3a:lighten(saturate(@color3,@color-a-sat), @color-a-lit); 95 | @color3b:lighten(saturate(@color3,@color-b-sat), @color-b-lit); 96 | @color3c:lighten(saturate(@color3,@color-c-sat), @color-c-lit); 97 | 98 | @color4:hsl(hue(spin(@seed-color,@wheel_pos3)),@sat,@l-factor); 99 | 100 | @color4a:lighten(saturate(@color4,@color-a-sat), @color-a-lit); 101 | @color4b:lighten(saturate(@color4,@color-b-sat), @color-b-lit); 102 | @color4c:lighten(saturate(@color4,@color-c-sat), @color-c-lit); 103 | 104 | /////////////////////////// 105 | //// Mix-ins 106 | /////////////////////////// 107 | 108 | //// Contrast 109 | /////////////////////////// 110 | 111 | // contrasts text against a given background color 112 | 113 | .contrast (@color) when (luma(@color) >= @luma-upper-break) { 114 | //darker text for lighter backgrounds 115 | color:average(darken(@color,30%),#222); 116 | } 117 | 118 | .contrast (@color) when (luma(@color) < @luma-upper-break) { 119 | //white text for everything else 120 | color:#ffffff; 121 | } 122 | 123 | //// Schemify 124 | /////////////////////////// 125 | 126 | // brings outside colors more in line with the current scheme 127 | 128 | .schemify(@color) { //schemifies a background color 129 | @mix-weight:60%; 130 | @new-color:mix(hsl(hue(@color),@sat,@luma),@color,@mix-weight); 131 | background:@new-color; 132 | .contrast(@new-color); 133 | } 134 | 135 | .schemify-text(@color) { 136 | @mix-weight:60%; 137 | @new-color:mix(hsl(hue(@color),@sat,@luma),@color,@mix-weight); 138 | color:@new-color; 139 | .contrast(@color); 140 | } 141 | 142 | -------------------------------------------------------------------------------- /1pxdeep.less: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////// 2 | ///////////////////////////////////////////////// 3 | //// 1pxdeep v0.9 4 | //// 5 | //// Copyright 2013 Rex Riepe 6 | //// Licensed under the Apache License v2.0 7 | //// http://www.apache.org/licenses/LICENSE-2.0 8 | //// 9 | ///////////////////////////////////////////////// 10 | ///////////////////////////////////////////////// 11 | 12 | //// Bootstrap variable overrides 13 | 14 | @baseFontSize: 18px; 15 | @baseLineHeight: 27px; 16 | 17 | @paddingLarge: 13px 22px; 18 | @paddingSmall: 3px 12px; 19 | @paddingMini: 1px 7px; 20 | 21 | @baseBorderRadius: 6px; 22 | @borderRadiusLarge: 8px; 23 | @borderRadiusSmall: 4px; 24 | 25 | @inputHeight: @baseLineHeight + 14px; 26 | 27 | //// Theme variables 28 | 29 | @1pxdeep-bg: @color4; 30 | @1pxdeep-modal-bg: @color1; 31 | 32 | //// Mix-ins 33 | 34 | .button-text (@color) when (luma(@color1) >= @luma-upper-break) { 35 | color:average(darken(@color,30%),#222); 36 | text-shadow:-1px -1px 0px darken(@color,6%); 37 | 38 | } 39 | .button-text (@color) when (luma(@color1) < @luma-upper-break) { 40 | color:#ffffff; 41 | text-shadow:-1px -1px 0px darken(desaturate(@color,10%),6%); 42 | } 43 | 44 | .contrast (@color) when (luma(@color) >= @luma-upper-break) { 45 | color:mix(darken(@color,25%),#333,50%); 46 | text-shadow:none; 47 | } 48 | 49 | .contrast (@color) when (luma(@color) < @luma-upper-break) { 50 | color:#ffffff; 51 | text-shadow:-1px -1px 0px darken(desaturate(@color,10%),6%); 52 | } 53 | 54 | .contrast-link (@color) when (luma(@color) >= @luma-upper-break) { 55 | color:average(darken(@color,80%),#222); 56 | text-shadow:none; 57 | } 58 | 59 | .contrast-link (@color) when (luma(@color) < @luma-upper-break) { 60 | color:mix(#ffffff,@color1,75%); 61 | text-shadow:-1px -1px 0px darken(desaturate(@color,10%),6%); 62 | } 63 | 64 | .btn-borders(@color) { 65 | border-style:solid; 66 | border-width:1px; 67 | border-top-color:lighten(@color,8%); 68 | border-left-color:lighten(@color,4%); 69 | border-right-color:darken(@color,2%); 70 | border-bottom-color:darken(@color,6%); 71 | 72 | &:active { 73 | border-color:@color; 74 | } 75 | } 76 | 77 | .btn-borders(@color) when (luma(@seed-color) > 85%) { 78 | border-top-color:lighten(@color,4%); 79 | border-left-color:lighten(@color,2%); 80 | border-right-color:darken(@color,8%); 81 | border-bottom-color:darken(@color,12%); 82 | } 83 | 84 | .btn-borders(@color) when (luma(@seed-color) < 10%) { 85 | border-top-color:lighten(@color,12%); 86 | border-left-color:lighten(@color,8%); 87 | border-right-color:lighten(@color,6%); 88 | border-bottom-color:lighten(@color,2%); 89 | } 90 | 91 | .btn-borders-invert(@color) { 92 | border-top-color:darken(@color,12%); 93 | border-left-color:darken(@color,8%); 94 | border-right-color:lighten(@color,4%); 95 | border-bottom-color:lighten(@color,8%); 96 | } 97 | 98 | .btn-borders-invert(@color) when (luma(@seed-color) > 85%) { 99 | border-top-color:darken(@color,8%); 100 | border-left-color:darken(@color,4%); 101 | border-right-color:darken(@color,2%); 102 | border-bottom-color:darken(@color,1%); 103 | } 104 | 105 | .btn-borders-invert(@color) when (luma(@seed-color) < 10%) { 106 | border-top-color:lighten(@color,2%); 107 | border-left-color:lighten(@color,6%); 108 | border-right-color:lighten(@color,8%); 109 | border-bottom-color:lighten(@color,12%); 110 | } 111 | 112 | .schemify(@color) { 113 | @mix-weight:60%; 114 | @new-color:mix(hsl(hue(@color),@sat,@luma),@color,@mix-weight); 115 | background:@new-color; 116 | .contrast(@new-color); 117 | } 118 | 119 | .schemify-btn(@color) { 120 | @mix-weight:60%; 121 | @new-color:mix(hsl(hue(@color),@sat,@luma),@color,@mix-weight); 122 | background:@new-color; 123 | .btn-borders(@new-color); 124 | .contrast(@new-color); 125 | 126 | &:hover { 127 | background:lighten(@new-color,2%); 128 | .contrast(@new-color); 129 | } 130 | 131 | &:active { 132 | background:darken(@new-color,2%); 133 | .contrast(@new-color); 134 | border-color:darken(@new-color,2%); 135 | .box-shadow(inset 1px 1px 0px rgba(0,0,0,.075)); 136 | } 137 | } 138 | 139 | .schemify-text(@color) { 140 | @mix-weight:60%; 141 | @new-color:mix(hsl(hue(@color),@sat,@luma),@color,@mix-weight); 142 | color:@new-color; 143 | 144 | .contrast(@color); 145 | } 146 | 147 | //elements 148 | 149 | body,html { 150 | background:@1pxdeep-bg; 151 | .contrast(@1pxdeep-bg); 152 | 153 | -webkit-font-smoothing: antialiased; 154 | -moz-font-smoothing: antialiased; 155 | font-smoothing: antialiased; 156 | } 157 | 158 | h1 { 159 | font-size:42px; 160 | line-height:61px; 161 | } 162 | 163 | a { 164 | .contrast-link(@1pxdeep-bg); 165 | 166 | &:hover { 167 | .contrast-link(@1pxdeep-bg); 168 | } 169 | } 170 | 171 | blockquote { 172 | 173 | padding:6px 8px; 174 | 175 | cite { 176 | font-style:italic; 177 | } 178 | 179 | .blockquote-color(@color,@alt-color) { 180 | background:@color; 181 | border-left:4px solid @alt-color; 182 | .contrast(@color); 183 | 184 | &.pull-right { 185 | border-left:none; 186 | border-right:4px solid @alt-color; 187 | } 188 | 189 | small { 190 | .contrast(@color); 191 | text-shadow:none; 192 | } 193 | } 194 | 195 | .blockquote-color(white,#888); 196 | &.color1 { .blockquote-color(@color1c,@color1a)} 197 | &.color2 { .blockquote-color(@color2c,@color2a)} 198 | &.color3 { .blockquote-color(@color3c,@color3a)} 199 | &.color4 { .blockquote-color(@color4c,@color4a)} 200 | } 201 | 202 | select, 203 | textarea, 204 | input[type="text"], 205 | input[type="password"], 206 | input[type="datetime"], 207 | input[type="datetime-local"], 208 | input[type="date"], 209 | input[type="month"], 210 | input[type="time"], 211 | input[type="week"], 212 | input[type="number"], 213 | input[type="email"], 214 | input[type="url"], 215 | input[type="search"], 216 | input[type="tel"], 217 | input[type="color"], 218 | .uneditable-input { 219 | .btn-borders-invert(white); 220 | } 221 | 222 | /*input[type="checkbox"] { //experimental flat look for checkboxes 223 | margin-right:13px; 224 | margin-top:8px; 225 | background:white; 226 | 227 | &:before { 228 | display:block; 229 | content:""; 230 | width:18px; 231 | height:18px; 232 | //border:2px solid @1pxdeep-bg; 233 | .border-radius(6px); 234 | background:white; 235 | position:relative; 236 | top:-2px; 237 | left:-2px; 238 | .box-shadow(inset 1px 1px 0px @1pxdeep-bg); 239 | } 240 | 241 | &:checked { 242 | &:after { 243 | display:block; 244 | content:""; 245 | width:6px; 246 | height:10px; 247 | .border-radius(2px); 248 | background:white; 249 | position:relative; 250 | top:-16px; 251 | left:5px; 252 | .box-shadow(inset -3px -3px 0px @1pxdeep-bg); 253 | border-bottom:1px solid #ddd; 254 | border-right:1px solid #ddd; 255 | .border-radius(0); 256 | .rotate(45deg); 257 | } 258 | } 259 | }*/ 260 | 261 | .btn { 262 | font-size:18px; 263 | line-height:24px; 264 | //.box-shadow(1px 1px 0px rgba(0,0,0,.075)); 265 | .box-shadow(none); 266 | 267 | .btn-color(@color) { 268 | background:@color; 269 | .contrast(@color); 270 | .btn-borders(@color); 271 | 272 | &:hover { 273 | background:lighten(@color,2%); 274 | .contrast(@color); 275 | } 276 | 277 | &:active { 278 | background:darken(@color,2%); 279 | .box-shadow(none); 280 | } 281 | } 282 | 283 | .btn-color(@color) when (luma(@color) > @luma-upper-break) { 284 | background:darken(@color,4%); 285 | .contrast(darken(@color,4%)); 286 | 287 | &:hover { 288 | background:darken(@color,2%); 289 | .contrast(darken(@color,4%)); 290 | } 291 | 292 | &:active { 293 | background:darken(@color,2%); 294 | border-color:darken(@color,2%); 295 | .box-shadow(none); 296 | } 297 | } 298 | 299 | .btn-color(@color) when (@color = #ffffff){ 300 | background:white; 301 | color:#888; 302 | .btn-borders(@color); 303 | 304 | &:hover { 305 | background:lighten(@color,2%); 306 | color:#888; 307 | } 308 | 309 | &:active { 310 | background:darken(@color,2%); 311 | .box-shadow(none); 312 | .opacity(90); 313 | } 314 | } 315 | 316 | .btn-color(@1pxdeep-bg); 317 | &.color1 {.btn-color(@color1);} 318 | &.color1a {.btn-color(@color1a);} 319 | &.color1b {.btn-color(@color1b);} 320 | &.color1c {.btn-color(@color1c);} 321 | &.color2 {.btn-color(@color2);} 322 | &.color2a {.btn-color(@color2a);} 323 | &.color2b {.btn-color(@color2b);} 324 | &.color2c {.btn-color(@color2c);} 325 | &.color3 {.btn-color(@color3);} 326 | &.color3a {.btn-color(@color3a);} 327 | &.color3b {.btn-color(@color3b);} 328 | &.color3c {.btn-color(@color3c);} 329 | &.color4 {.btn-color(@color4);} 330 | &.color4a {.btn-color(@color4a);} 331 | &.color4b {.btn-color(@color4b);} 332 | &.color4c {.btn-color(@color4c);} 333 | } 334 | 335 | .btn-primary {.schemify-btn(#08c);} 336 | .btn-info {.schemify-btn(#5bc0de);} 337 | .btn-success {.schemify-btn(#62c462);} 338 | .btn-warning {.schemify-btn(#ff8000);} 339 | .btn-danger {.schemify-btn(#ee5f5b);} 340 | .btn-inverse {.schemify-btn(#444);} 341 | 342 | .btn-group.open .btn.dropdown-toggle { 343 | background:inherit; 344 | color:inherit; 345 | text-shadow:inherit; 346 | border-color:transparent; 347 | .box-shadow(none); 348 | 349 | .caret { 350 | border-color:#888 transparent transparent transparent; 351 | } 352 | } 353 | 354 | .btn-group { 355 | .caret { 356 | border-color:white transparent transparent transparent; 357 | } 358 | } 359 | 360 | .dropdown-menu { 361 | .box-shadow(none); 362 | border:none; 363 | 364 | li { 365 | border:none; 366 | } 367 | 368 | .dropdown-menu-color(@color) { 369 | background:@color; 370 | //.btn-borders(@color); 371 | li { 372 | 373 | a { 374 | .contrast(@color); 375 | text-shadow:none; 376 | } 377 | 378 | &:hover { 379 | a { 380 | background:lighten(@color,12%); 381 | .contrast(lighten(@color,12%)); 382 | } 383 | 384 | } 385 | } 386 | } 387 | 388 | .dropdown-menu-color(white); 389 | 390 | &.color1 {.dropdown-menu-color(@color1b);} 391 | &.color2 {.dropdown-menu-color(@color2b);} 392 | &.color3 {.dropdown-menu-color(@color3b);} 393 | &.color4 {.dropdown-menu-color(@color4b);} 394 | 395 | } 396 | 397 | .caret { 398 | border-color:@1pxdeep-bg transparent transparent transparent; 399 | } 400 | 401 | .modal { 402 | .box-shadow(none); 403 | border:none; 404 | background:transparent; 405 | 406 | .modal-header { 407 | border:none; 408 | .contrast(@1pxdeep-modal-bg); 409 | background:@1pxdeep-modal-bg; 410 | 411 | .close { 412 | .opacity(100); 413 | font-size:36px; 414 | font-weight:bold; 415 | .contrast(@1pxdeep-modal-bg); 416 | margin-top:-2px; 417 | } 418 | } 419 | 420 | .modal-body { 421 | .border-radius(6px 6px 0 0); 422 | background:white; 423 | .contrast(white); 424 | padding-bottom:0; 425 | } 426 | 427 | .modal-footer { 428 | border:none; 429 | .box-shadow(none); 430 | background:white; 431 | } 432 | } 433 | 434 | // Backdrop 435 | .modal-backdrop { 436 | background:@color1; 437 | &:after { 438 | .contrast(@color1); 439 | display:none; 440 | content:"»"; 441 | font-size:170px; 442 | line-height:100%; 443 | font-weight:bold; 444 | position:absolute; 445 | left:20%; top:10%; 446 | vertical-align: middle; 447 | } 448 | } 449 | 450 | .modal-backdrop, 451 | .modal-backdrop.fade.in { 452 | .opacity(100); 453 | } 454 | 455 | .well { 456 | background:white; 457 | .contrast(white); 458 | .box-shadow(none); 459 | .btn-borders-invert(#ffffff); 460 | 461 | &.color1 { 462 | background:@color1c; 463 | .contrast(@color1c); 464 | .btn-borders-invert(@color1c); 465 | } 466 | &.color2 { 467 | background:@color2c; 468 | .contrast(@color2c); 469 | .btn-borders-invert(@color2c); 470 | } 471 | &.color3 { 472 | background:@color3c; 473 | .contrast(@color3c); 474 | .btn-borders-invert(@color3c); 475 | } 476 | &.color4 { 477 | background:@color4c; 478 | .contrast(@color4c); 479 | .btn-borders-invert(@color4c); 480 | } 481 | } 482 | 483 | //navbars 484 | 485 | .navbar .brand { 486 | .brand-color(@color) { 487 | color:@color; 488 | background:transparent; 489 | } 490 | 491 | .brand-color(@color) when (luma(@color) > 80% ) { 492 | color:darken(@color,50%); 493 | background:transparent; 494 | } 495 | 496 | &.color1 { .brand-color(@color1);} 497 | &.color2 { .brand-color(@color2);} 498 | &.color3 { .brand-color(@color3);} 499 | &.color4 { .brand-color(@color4);} 500 | } 501 | 502 | .navbar-inner { 503 | margin:12px; 504 | background:white; 505 | .box-shadow(none); 506 | border:none; 507 | 508 | .nav { 509 | .active a { 510 | .border-radius(1px); 511 | background:@color1b; 512 | .contrast(@color1b); 513 | .box-shadow(none); 514 | 515 | &:hover { 516 | background:lighten(@color1b,4%); 517 | .contrast(lighten(@color1b,4%)); 518 | .box-shadow(none); 519 | } 520 | } 521 | } 522 | } 523 | 524 | .navbar-fixed-top, .navbar-fixed-bottom { 525 | background:white; 526 | 527 | .navbar-inner { 528 | .box-shadow(none); 529 | padding:0; 530 | margin-bottom:12px; 531 | } 532 | } 533 | 534 | .navbar-inverse { 535 | 536 | .navbar-inverse-color(@color) { 537 | .navbar-inner { 538 | background:@color4a; 539 | .contrast(@color4a); 540 | 541 | .brand { 542 | .contrast(@color4a); 543 | } 544 | 545 | .nav { 546 | 547 | a { 548 | .contrast(@color4a); 549 | } 550 | 551 | .active a { 552 | background:@color4c; 553 | .contrast(@color4c); 554 | } 555 | } 556 | } 557 | } 558 | .navbar-inner { 559 | background:@color4a; 560 | .contrast(@color4a); 561 | 562 | .brand { 563 | .contrast(@color4a); 564 | } 565 | 566 | .nav { 567 | 568 | a { 569 | .contrast(@color4a); 570 | } 571 | 572 | .active a { 573 | background:@color4c; 574 | .contrast(@color4c); 575 | } 576 | } 577 | } 578 | 579 | &.navbar-fixed-top, &.navbar-fixed-bottom { 580 | background:@color4a; 581 | .contrast(@color4a); 582 | } 583 | } 584 | 585 | //pills 586 | 587 | .nav-pills { 588 | text-shadow:none; 589 | color:black; 590 | 591 | li a { 592 | .contrast(white); 593 | background:white; 594 | margin-right:6px; 595 | .btn-borders(white); 596 | 597 | &:hover { 598 | color:white; 599 | } 600 | } 601 | 602 | .pills-color(@color) { 603 | li a { 604 | &:hover { 605 | background:lighten(@color,10%); 606 | .contrast(lighten(@color,10%)); 607 | .btn-borders(lighten(@color,10%)); 608 | } 609 | } 610 | 611 | .active a { 612 | background:@color; 613 | .contrast(@color); 614 | .btn-borders(@color); 615 | 616 | &:hover { 617 | background:lighten(@color,4%); 618 | .contrast(lighten(@color,4%)); 619 | } 620 | } 621 | } 622 | 623 | .pills-color(@color1); 624 | 625 | &.color1 { .pills-color(@color1);} 626 | &.color2 { .pills-color(@color2);} 627 | &.color3 { .pills-color(@color3);} 628 | &.color4 { .pills-color(@color4);} 629 | } 630 | 631 | //alerts 632 | 633 | .alert { 634 | border:none; 635 | text-shadow:none; 636 | 637 | .close { 638 | .opacity(100); 639 | text-shadow:none; 640 | } 641 | 642 | .alert-color(@color) { 643 | background:@color; 644 | .contrast(@color); 645 | 646 | .close { 647 | .contrast(@color); 648 | } 649 | } 650 | 651 | .alert-color-schemify(@color) { 652 | .alert-color(@color); 653 | .schemify(@color); 654 | 655 | .close { 656 | .contrast(mix(hsl(hue(@color),@sat,@luma),@color,60%);); 657 | } 658 | } 659 | 660 | .alert-color-schemify(#fbfcd6); 661 | 662 | &.color1 { .alert-color(@color1);} 663 | &.color2 { .alert-color(@color2);} 664 | &.color3 { .alert-color(@color3);} 665 | &.color4 { .alert-color(@color4);} 666 | 667 | &.alert-error,&.alert-danger {.alert-color-schemify(#ee5f5b);} 668 | &.alert-info {.alert-color-schemify(#08c);} 669 | &.alert-success {.alert-color-schemify(#62c462);} 670 | } 671 | 672 | //progress bars 673 | 674 | .progress { 675 | background:white; 676 | .box-shadow(none); 677 | border:2px solid #888; 678 | 679 | .progress-color(@color) { 680 | border:2px solid @color; 681 | background:desaturate(darken(@color,8%),4%); 682 | 683 | .bar {.bar-color(@color);} 684 | } 685 | 686 | .progress-color(@color) when (luma(@color) > @luma-upper-break) { 687 | border:2px solid darken(@color,5%); 688 | background:desaturate(lighten(@color,12%),2%); 689 | 690 | .bar {.bar-color(darken(@color,5%));} 691 | } 692 | 693 | .progress-color(@color) when (luma(@color) < @luma-lower-break) { 694 | border:2px solid @color; 695 | background:transparent; 696 | 697 | .bar {.bar-color(@color);} 698 | } 699 | 700 | .bar-color(@color) { 701 | background:@color; 702 | } 703 | 704 | &.color1 { .progress-color(@color1);} 705 | &.color2 { .progress-color(@color2);} 706 | &.color3 { .progress-color(@color3);} 707 | &.color4 { .progress-color(@color4);} 708 | 709 | .bar { 710 | .box-shadow(none); 711 | background:#888; 712 | } 713 | 714 | .progress-danger { 715 | #gradient > .vertical(#ee5f5b, #c43c35); 716 | } 717 | .progress-danger.progress-striped .bar, .progress-striped .bar-danger { 718 | #gradient > .striped(#ee5f5b); 719 | } 720 | 721 | // Success (green) 722 | .progress-success .bar, .progress .bar-success { 723 | #gradient > .vertical(#62c462, #57a957); 724 | } 725 | .progress-success.progress-striped .bar, .progress-striped .bar-success { 726 | #gradient > .striped(#62c462); 727 | } 728 | 729 | // Info (teal) 730 | .progress-info .bar, .progress .bar-info { 731 | #gradient > .vertical(#5bc0de, #339bb9); 732 | } 733 | .progress-info.progress-striped .bar, .progress-striped .bar-info { 734 | #gradient > .striped(#5bc0de); 735 | } 736 | 737 | // Warning (orange) 738 | .progress-warning .bar, .progress .bar-warning { 739 | #gradient > .vertical(lighten(@orange, 15%), @orange); 740 | } 741 | .progress-warning.progress-striped .bar, .progress-striped .bar-warning { 742 | #gradient > .striped(lighten(@orange, 15%)); 743 | } 744 | 745 | } 746 | 747 | 748 | .progress-striped { 749 | .progress-striped-color(@color) { 750 | border:2px solid @color; 751 | 752 | .bar { 753 | #gradient > .striped(@color); 754 | .background-size(80px 80px); 755 | } 756 | } 757 | 758 | .progress-striped-color(@color) when (luma(@color) > @luma-upper-break) { 759 | border:2px solid darken(@color,5%); 760 | background:desaturate(lighten(@color,12%),2%); 761 | 762 | .bar { 763 | #gradient > .striped(darken(@color,5%)); 764 | .background-size(80px 80px); 765 | } 766 | } 767 | 768 | .progress-striped-color(@color) when (luma(@color) < @luma-lower-break) { 769 | border:2px solid @color; 770 | background:transparent; 771 | 772 | .bar { 773 | #gradient > .striped(@color); 774 | .background-size(80px 80px); 775 | } 776 | } 777 | 778 | &.color1 { .progress-striped-color(@color1);} 779 | &.color2 { .progress-striped-color(@color2);} 780 | &.color3 { .progress-striped-color(@color3);} 781 | &.color4 { .progress-striped-color(@color4);} 782 | } 783 | 784 | // ANIMATIONS (for progress bars) 785 | // ---------- 786 | 787 | // Webkit 788 | @-webkit-keyframes progress-bar-stripes { 789 | from { background-position: 80px 0; } 790 | to { background-position: 0 0; } 791 | } 792 | 793 | // Firefox 794 | @-moz-keyframes progress-bar-stripes { 795 | from { background-position: 80px 0; } 796 | to { background-position: 0 0; } 797 | } 798 | 799 | // IE9 800 | @-ms-keyframes progress-bar-stripes { 801 | from { background-position: 80px 0; } 802 | to { background-position: 0 0; } 803 | } 804 | 805 | // Opera 806 | @-o-keyframes progress-bar-stripes { 807 | from { background-position: 0 0; } 808 | to { background-position: 80px 0; } 809 | } 810 | 811 | // Spec 812 | @keyframes progress-bar-stripes { 813 | from { background-position: 80px 0; } 814 | to { background-position: 0 0; } 815 | } 816 | 817 | // Call animation for the active one 818 | .progress.active .bar { 819 | @time:3s; 820 | -webkit-animation: progress-bar-stripes @time linear infinite; 821 | -moz-animation: progress-bar-stripes @time linear infinite; 822 | -ms-animation: progress-bar-stripes @time linear infinite; 823 | -o-animation: progress-bar-stripes @time linear infinite; 824 | animation: progress-bar-stripes @time linear infinite; 825 | } 826 | 827 | //accordions 828 | 829 | .accordion { 830 | .accordion-heading { 831 | border-bottom: 0; 832 | .border-radius(6px); 833 | a { 834 | &:hover { 835 | text-decoration:none; 836 | } 837 | } 838 | } 839 | 840 | .accordion-group { 841 | border:none; 842 | } 843 | 844 | .accordion-inner { 845 | background:white; 846 | .contrast(white); 847 | text-shadow:none; 848 | .btn-borders-invert(white); 849 | margin:12px; 850 | padding:15px; 851 | .border-radius(6px); 852 | } 853 | 854 | .accordion-inner-color(@color) { 855 | .accordion-inner { 856 | background:@color; 857 | .contrast(@color); 858 | .btn-borders-invert(@color); 859 | //text-shadow:none; 860 | } 861 | } 862 | 863 | .accordion-heading-color(@color) { 864 | .accordion-heading { 865 | background:@color; 866 | .contrast(@color); 867 | .btn-borders(@color); 868 | 869 | a { 870 | .contrast(@color); 871 | } 872 | } 873 | } 874 | 875 | .accordion-heading-color(white); 876 | 877 | &.color1 { .accordion-heading-color(@color1b); 878 | .accordion-inner-color(@color1c);} 879 | &.color2 { .accordion-heading-color(@color2b); 880 | .accordion-inner-color(@color2c);} 881 | &.color3 { .accordion-heading-color(@color3b); 882 | .accordion-inner-color(@color3c);} 883 | &.color4 { .accordion-heading-color(@color4b); 884 | .accordion-inner-color(@color4c);} 885 | } 886 | 887 | 888 | 889 | //hero-unit 890 | 891 | .hero-unit { 892 | font-size: 24px; 893 | line-height:32px; 894 | font-weight: normal; 895 | 896 | .hero-color(@color) { 897 | background:@color; 898 | .contrast(@color); 899 | } 900 | 901 | .hero-color(white); 902 | 903 | &.color1 {.hero-color(@color1);} 904 | &.color2 {.hero-color(@color2);} 905 | &.color3 {.hero-color(@color3);} 906 | &.color4 {.hero-color(@color4);} 907 | 908 | h1 { 909 | margin-bottom: 12px; 910 | font-size: 60px; 911 | line-height: 1; 912 | color: @heroUnitHeadingColor; 913 | letter-spacing: -1px; 914 | } 915 | } 916 | 917 | //breadcrumbs 918 | 919 | .breadcrumb { 920 | 921 | background:white; 922 | 923 | .breadcrumb-color(@color) { 924 | background:@color; 925 | li { 926 | .contrast(@color); 927 | text-shadow:none; 928 | 929 | a { 930 | .contrast(@color); 931 | } 932 | } 933 | 934 | } 935 | 936 | .breadcrumb-color(white); 937 | 938 | &.color1 { .breadcrumb-color(@color1b);} 939 | &.color2 { .breadcrumb-color(@color2b);} 940 | &.color3 { .breadcrumb-color(@color3b);} 941 | &.color4 { .breadcrumb-color(@color4b);} 942 | 943 | > .active { 944 | font-weight:bold; 945 | } 946 | } 947 | 948 | //pagination 949 | 950 | .pagination { 951 | background:none; 952 | 953 | .page-color(@color) { 954 | li { 955 | a { 956 | background:@color; 957 | .contrast(@color); 958 | .btn-borders(@color); 959 | 960 | &:hover { 961 | background:lighten(@color,4%); 962 | } 963 | 964 | &:active { 965 | background:@color; 966 | border-color:@color; 967 | } 968 | } 969 | } 970 | } 971 | 972 | .page-color(white); 973 | 974 | &.color1 {.page-color(@color1b);} 975 | &.color2 {.page-color(@color2b);} 976 | &.color3 {.page-color(@color3b);} 977 | &.color4 {.page-color(@color4b);} 978 | } 979 | 980 | //forms 981 | 982 | .form-horizontal { 983 | font-size:18px; 984 | } 985 | 986 | legend { 987 | .contrast(@1pxdeep-bg); 988 | } 989 | 990 | .help-block { 991 | .contrast(@1pxdeep-bg); 992 | } 993 | 994 | .form-color(@color) { 995 | legend { 996 | .contrast(@color); 997 | } 998 | 999 | .help-block { 1000 | .contrast(@color); 1001 | } 1002 | } 1003 | 1004 | .well { 1005 | .form-color(white); 1006 | } 1007 | 1008 | .color1 { 1009 | .form-color(@color1); 1010 | } 1011 | 1012 | .input-append .add-on, 1013 | .input-prepend .add-on { 1014 | text-shadow:none; 1015 | .add-on-color(@color) { 1016 | .btn-borders(@color); 1017 | background:@color; 1018 | .contrast(@color); 1019 | border-top-color:@color; 1020 | } 1021 | .add-on-color(white); 1022 | &.color1{.add-on-color(@color1)} 1023 | &.color2{.add-on-color(@color2)} 1024 | &.color3{.add-on-color(@color3)} 1025 | &.color4{.add-on-color(@color4)} 1026 | } 1027 | 1028 | //code 1029 | 1030 | code, pre { 1031 | font-size:15px; 1032 | text-shadow:none; 1033 | 1034 | .code-color(@color) { 1035 | background:@color; 1036 | .contrast(@color); 1037 | border-color:@color; 1038 | } 1039 | 1040 | .code-color(white); 1041 | 1042 | &.color1 { .code-color(@color1a)} 1043 | &.color2 { .code-color(@color2a)} 1044 | &.color3 { .code-color(@color3a)} 1045 | &.color4 { .code-color(@color4a)} 1046 | } 1047 | 1048 | //labels and badges 1049 | 1050 | .label, .badge { 1051 | .label-color(@color) { 1052 | background:@color; 1053 | .contrast(@color); 1054 | text-shadow:none; 1055 | } 1056 | 1057 | .label-color(white); 1058 | 1059 | &.color1 {.label-color(@color1);} 1060 | &.color2 {.label-color(@color2);} 1061 | &.color3 {.label-color(@color3);} 1062 | &.color4 {.label-color(@color4);} 1063 | 1064 | /*&-success {.schemify(#468847);} 1065 | &-important {.schemify(#b94a48);} 1066 | &-info {.schemify(#3a87ad);} 1067 | &-inverse {.schemify(#333);} 1068 | &-warning {.schemify(#f89406);}*/ 1069 | } 1070 | 1071 | //tables 1072 | 1073 | table { 1074 | max-width: 100%; 1075 | text-shadow:none; 1076 | border-collapse: collapse; 1077 | border-spacing: 0; 1078 | 1079 | .table-color(@color) { 1080 | background-color:@color; 1081 | .contrast(@color); 1082 | 1083 | &.table { 1084 | th, 1085 | td { 1086 | border-top-color: @color; 1087 | } 1088 | tbody + tbody { 1089 | border-top-color:@color; 1090 | } 1091 | } 1092 | 1093 | &.table-bordered { 1094 | border-color:@color; 1095 | th, 1096 | td { 1097 | border-left-color: @color; 1098 | } 1099 | } 1100 | 1101 | &.table-striped { 1102 | .table-striped-color(darken(@color,5%)); 1103 | } 1104 | 1105 | .table-striped-color(@color) { 1106 | tbody { 1107 | > tr:nth-child(odd) > td, 1108 | > tr:nth-child(odd) > th { 1109 | background-color:darken(@color,1%); 1110 | } 1111 | } 1112 | } 1113 | 1114 | .table-striped-color (@color) when (luma(@color) > @luma-upper-break) { 1115 | tbody { 1116 | > tr:nth-child(odd) > td, 1117 | > tr:nth-child(odd) > th { 1118 | background-color:darken(@color,1%); 1119 | } 1120 | } 1121 | } 1122 | 1123 | .table-striped-color (@color) when (luma(@color) < @luma-lower-break) { 1124 | tbody { 1125 | > tr:nth-child(odd) > td, 1126 | > tr:nth-child(odd) > th { 1127 | background-color:lighten(@color,1%); 1128 | } 1129 | } 1130 | } 1131 | 1132 | &.table-hover { 1133 | tbody { 1134 | tr:hover > td, 1135 | tr:hover > th { 1136 | background-color: lighten(@color,5%); 1137 | } 1138 | } 1139 | } 1140 | 1141 | 1142 | } 1143 | 1144 | .table-color(white); 1145 | 1146 | &.color1 { .table-color(@color1b);} 1147 | &.color2 { .table-color(@color2b);} 1148 | &.color3 { .table-color(@color3b);} 1149 | &.color4 { .table-color(@color4b);} 1150 | } 1151 | 1152 | 1153 | //hr 1154 | 1155 | hr { 1156 | .hr-color(@color) { 1157 | background:@color; 1158 | color:@color; 1159 | border-color:@color; 1160 | } 1161 | 1162 | .hr-color(white); 1163 | &.color1 {.hr-color(@color1c);} 1164 | &.color2 {.hr-color(@color2c);} 1165 | &.color3 {.hr-color(@color3c);} 1166 | &.color4 {.hr-color(@color4c);} 1167 | } 1168 | 1169 | //page header 1170 | 1171 | .page-header { 1172 | border-width:2px; 1173 | 1174 | .page-header-color(@color) { 1175 | border-color:@color; 1176 | .contrast(@1pxdeep-bg); 1177 | 1178 | small { 1179 | .contrast(@1pxdeep-bg); 1180 | } 1181 | } 1182 | 1183 | .page-header-color(white); 1184 | &.color1 {.page-header-color(@color1c);} 1185 | &.color2 {.page-header-color(@color2c);} 1186 | &.color3 {.page-header-color(@color3c);} 1187 | &.color4 {.page-header-color(@color4c);} 1188 | } --------------------------------------------------------------------------------