diff --git a/css/style.css b/css/style.css index cc14e4a..4537828 100644 --- a/css/style.css +++ b/css/style.css @@ -1,41 +1 @@ -.drag{-webkit-transition:-webkit-transform 0s linear , opacity 0s linear !important;-moz-transition:-moz-transform 0s linear , opacity 0s linear !important;-ms-transition:-ms-transform 0s linear , opacity 0s linear !important;transition:transform 0s linear , opacity 0s linear !important;} -.ease-out{-webkit-transition:-webkit-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1) !important ;-moz-transition:-moz-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1) !important ;-ms-transition:-ms-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1) !important ;transition:transform 0.3s cubic-bezier(0, 0.5, 0.5, 1) !important ;} -html,body{margin:0;padding:0;height:100%;font-family:Helvetica,Arial,sans-serif;font-size:19px;font-weight:bold;color:#fff;} -#fork-ribbon{display:none;} -#wrapper{position:absolute;width:100%;height:100%;top:0;left:0;background:#000;overflow:hidden;} -#list-collection{z-index:1;}#list-collection .credit{color:rgba(255, 255, 255, 0.25);position:absolute;width:100%;text-align:center;top:-155px;} -.collection{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:-webkit-transform 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86) , opacity 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86);-moz-transition:-moz-transform 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86) , opacity 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86);-ms-transition:-ms-transform 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86) , opacity 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86);transition:transform 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86) , opacity 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86);position:absolute;width:100%;top:0;left:0;z-index:0;}.collection.shade .item{opacity:.15;} -.collection.instant .item{-webkit-transition:-webkit-transform 0s linear ;-moz-transition:-moz-transform 0s linear ;-ms-transition:-ms-transform 0s linear ;transition:transform 0s linear ;} -.collection .top-switch,.collection .bottom-switch{position:absolute;top:-62px;height:62px;line-height:62px;width:100%;text-align:center;} -.collection .arrow{width:30px;height:30px;vertical-align:middle;-webkit-transition:-webkit-transform 0.18s ease-in-out ;-moz-transition:-moz-transform 0.18s ease-in-out ;-ms-transition:-ms-transform 0.18s ease-in-out ;transition:transform 0.18s ease-in-out ;}.collection .arrow.down{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);} -.collection .top-switch{display:none;} -.collection .bottom-switch{display:none;}.collection .bottom-switch.empty{color:#333;}.collection .bottom-switch.empty .drawer{background-position:0 0;opacity:.2;}.collection .bottom-switch.empty .drawer .arrow-small{display:none;} -.collection .drawer{position:relative;top:-2px;margin-right:8px;display:inline-block;width:30px;height:30px;vertical-align:middle;background:url(../img/drawer.png) 0 0 no-repeat;background-size:100%;}.collection .drawer .arrow-small{position:absolute;width:15px;left:8px;top:-72px;} -.collection .drawer.full{background-position:0 -30px;}.collection .drawer.full .arrow-small{display:none;} -.item{text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);-webkit-transform-origin:center center;-moz-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transition:-webkit-transform 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86) , opacity 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86);-moz-transition:-moz-transform 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86) , opacity 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86);-ms-transition:-ms-transform 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86) , opacity 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86);transition:transform 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86) , opacity 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86);position:absolute;z-index:0;width:100%;top:0;left:0;opacity:1;height:62px;}.item .slider{-webkit-transition:background-color 0.15s cubic-bezier(0.67, 0.18, 0.3, 0.86),color 0.15s cubic-bezier(0.67, 0.18, 0.3, 0.86);-moz-transition:background-color 0.15s cubic-bezier(0.67, 0.18, 0.3, 0.86),color 0.15s cubic-bezier(0.67, 0.18, 0.3, 0.86);-ms-transition:background-color 0.15s cubic-bezier(0.67, 0.18, 0.3, 0.86),color 0.15s cubic-bezier(0.67, 0.18, 0.3, 0.86);transition:background-color 0.15s cubic-bezier(0.67, 0.18, 0.3, 0.86),color 0.15s cubic-bezier(0.67, 0.18, 0.3, 0.86);position:relative;z-index:1;height:62px;} -.item .inner{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);box-sizing:border-box;-moz-box-sizing:border-box;border-top:1px solid rgba(255, 255, 255, 0.07);border-bottom:1px solid rgba(0, 0, 0, 0.1);height:62px;line-height:62px;} -.item .field{cursor:default;display:none;font-family:Helvetica,Arial,sans-serif;font-size:19px;font-weight:bold;color:#fff;background:transparent;border:none;padding:0;height:62px;outline:none;position:absolute;top:-1px;left:0;right:0;padding-left:9px;} -.item .title{position:absolute;top:0;left:12px;cursor:default;} -.item .check,.item .cross{width:62px;height:62px;position:absolute;z-index:0;top:0;opacity:0;} -.item .check{left:0;} -.item .cross{right:0;} -.item.sorting{-webkit-transition:-webkit-transform 0s linear !important ;-moz-transition:-moz-transform 0s linear !important ;-ms-transition:-ms-transform 0s linear !important ;transition:transform 0s linear !important ;}.item.sorting .slider{box-shadow:0 2px 16px rgba(0, 0, 0, 0.25);-webkit-transform:scale(1.05) !important;-moz-transform:scale(1.05) !important;-ms-transform:scale(1.05) !important;transform:scale(1.05) !important;} -.item.sorting-trans{z-index:999 !important;-webkit-transition:-webkit-transform 0.12s ease-out ;-moz-transition:-moz-transform 0.12s ease-out ;-ms-transition:-ms-transform 0.12s ease-out ;transition:transform 0.12s ease-out ;}.item.sorting-trans .slider{-webkit-transition:-webkit-transform 0.12s ease-out ;-moz-transition:-moz-transform 0.12s ease-out ;-ms-transition:-ms-transform 0.12s ease-out ;transition:transform 0.12s ease-out ;} -.item.top{z-index:998 !important;} -.item.edit{opacity:1 !important;} -.item.fade{opacity:0;} -.list-item .count{position:absolute;width:62px;height:61px;right:0;top:-1px;background-color:rgba(255, 255, 255, 0.15);text-align:center;} -.list-item.empty{color:rgba(255, 255, 255, 0.5);text-shadow:0 1px 1px rgba(0, 0, 0, 0.13);} -.todo-item .title{position:relative;} -.todo-item .line{position:absolute;height:2px;left:0;top:12px;width:0%;background-color:#fff;-webkit-transition:width 0s linear,background-color 0.15s cubic-bezier(0.67, 0.18, 0.3, 0.86);-moz-transition:width 0s linear,background-color 0.15s cubic-bezier(0.67, 0.18, 0.3, 0.86);-ms-transition:width 0s linear,background-color 0.15s cubic-bezier(0.67, 0.18, 0.3, 0.86);transition:width 0s linear,background-color 0.15s cubic-bezier(0.67, 0.18, 0.3, 0.86);} -.todo-item.done{color:#666;}.todo-item.done .slider{background-color:#000 !important;} -.todo-item.done .line{background-color:#666;} -.todo-item.green .slider{background-color:#0A3 !important;} -.dummy-item{z-index:-1;-webkit-perspective:400px;-moz-perspective:400px;perspective:400px;-webkit-transition:opacity .15s ease;-moz-transition:opacity .15s ease;-ms-transition:opacity .15s ease;transition:opacity .15s ease;}.dummy-item.top{-webkit-perspective-origin:bottom center;-moz-perspective-origin:bottom center;perspective-origin:bottom center;top:-62px;}.dummy-item.top .slider{-webkit-transition:-webkit-transform 0s linear ;-moz-transition:-moz-transform 0s linear ;-ms-transition:-ms-transform 0s linear ;transition:transform 0s linear ;-webkit-transform-origin:bottom center;-moz-transform-origin:bottom center;-ms-transform-origin:bottom center;transform-origin:bottom center;} -.dummy-item.bottom{-webkit-perspective-origin:top center;-moz-perspective-origin:top center;perspective-origin:top center;}.dummy-item.bottom .slider{-webkit-transition:-webkit-transform 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86) ;-moz-transition:-moz-transform 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86) ;-ms-transition:-ms-transform 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86) ;transition:transform 0.3s cubic-bezier(0.67, 0.18, 0.3, 0.86) ;-webkit-transform-origin:top center;-moz-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-transform:rotateX(-91deg);-moz-transform:rotateX(-91deg);-ms-transform:rotateX(-91deg);transform:rotateX(-91deg);} -*:not(input){-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;} -body.desktop{background:url(../img/bg.png) center center no-repeat;}body.desktop img{-webkit-user-drag:none;} -body.desktop #wrapper{width:320px;height:548px;top:50%;left:50%;margin-top:-259px;margin-left:-160px;} -body.desktop #fork-ribbon{display:inline;} -body.desktop .field{top:0;padding-left:10px;} -#log{position:absolute;bottom:5px;width:100%;left:0;text-align:center;font-size:14px;} +.drag{-webkit-transition:-webkit-transform 0s linear,opacity 0s linear!important;-moz-transition:-moz-transform 0s linear,opacity 0s linear!important;-ms-transition:-ms-transform 0s linear,opacity 0s linear!important;transition:transform 0s linear,opacity 0s linear!important}.ease-out{-webkit-transition:-webkit-transform .3s cubic-bezier(0,0.5,0.5,1)!important;-moz-transition:-moz-transform .3s cubic-bezier(0,0.5,0.5,1)!important;-ms-transition:-ms-transform .3s cubic-bezier(0,0.5,0.5,1)!important;transition:transform .3s cubic-bezier(0,0.5,0.5,1)!important}html,body{margin:0;padding:0;height:100%;font-family:Helvetica,Arial,sans-serif;font-size:19px;font-weight:bold;color:#fff}#fork-ribbon{display:none}#wrapper{position:absolute;width:100%;height:100%;top:0;left:0;background:#000;overflow:hidden}#list-collection{z-index:1}#list-collection .credit{color:rgba(255,255,255,0.25);position:absolute;width:100%;text-align:center;top:-155px}.collection{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:-webkit-transform .3s cubic-bezier(0.67,0.18,0.3,0.86),opacity .3s cubic-bezier(0.67,0.18,0.3,0.86);-moz-transition:-moz-transform .3s cubic-bezier(0.67,0.18,0.3,0.86),opacity .3s cubic-bezier(0.67,0.18,0.3,0.86);-ms-transition:-ms-transform .3s cubic-bezier(0.67,0.18,0.3,0.86),opacity .3s cubic-bezier(0.67,0.18,0.3,0.86);transition:transform .3s cubic-bezier(0.67,0.18,0.3,0.86),opacity .3s cubic-bezier(0.67,0.18,0.3,0.86);position:absolute;width:100%;top:0;left:0;z-index:0}.collection.shade .item{opacity:.15}.collection.instant .item{-webkit-transition:-webkit-transform 0s linear;-moz-transition:-moz-transform 0s linear;-ms-transition:-ms-transform 0s linear;transition:transform 0s linear}.collection .top-switch,.collection .bottom-switch{position:absolute;top:-62px;height:62px;line-height:62px;width:100%;text-align:center}.collection .arrow{width:30px;height:30px;vertical-align:middle;-webkit-transition:-webkit-transform .18s ease-in-out;-moz-transition:-moz-transform .18s ease-in-out;-ms-transition:-ms-transform .18s ease-in-out;transition:transform .18s ease-in-out}.collection .arrow.down{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.collection .top-switch{display:none}.collection .bottom-switch{display:none}.collection .bottom-switch.empty{color:#333}.collection .bottom-switch.empty .drawer{background-position:0 0;opacity:.2}.collection .bottom-switch.empty .drawer .arrow-small{display:none}.collection .drawer{position:relative;top:-2px;margin-right:8px;display:inline-block;width:30px;height:30px;vertical-align:middle;background:url(../img/drawer.png) 0 0 no-repeat;background-size:100%}.collection .drawer .arrow-small{position:absolute;width:15px;left:8px;top:-72px}.collection .drawer.full{background-position:0 -30px}.collection .drawer.full .arrow-small{display:none}.item{text-shadow:0 1px 1px rgba(0,0,0,0.3);-webkit-transform-origin:center center;-moz-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transition:-webkit-transform .3s cubic-bezier(0.67,0.18,0.3,0.86),opacity .3s cubic-bezier(0.67,0.18,0.3,0.86);-moz-transition:-moz-transform .3s cubic-bezier(0.67,0.18,0.3,0.86),opacity .3s cubic-bezier(0.67,0.18,0.3,0.86);-ms-transition:-ms-transform .3s cubic-bezier(0.67,0.18,0.3,0.86),opacity .3s cubic-bezier(0.67,0.18,0.3,0.86);transition:transform .3s cubic-bezier(0.67,0.18,0.3,0.86),opacity .3s cubic-bezier(0.67,0.18,0.3,0.86);position:absolute;z-index:0;width:100%;top:0;left:0;opacity:1;height:62px}.item .slider{-webkit-transition:background-color .15s cubic-bezier(0.67,0.18,0.3,0.86),color .15s cubic-bezier(0.67,0.18,0.3,0.86);-moz-transition:background-color .15s cubic-bezier(0.67,0.18,0.3,0.86),color .15s cubic-bezier(0.67,0.18,0.3,0.86);-ms-transition:background-color .15s cubic-bezier(0.67,0.18,0.3,0.86),color .15s cubic-bezier(0.67,0.18,0.3,0.86);transition:background-color .15s cubic-bezier(0.67,0.18,0.3,0.86),color .15s cubic-bezier(0.67,0.18,0.3,0.86);position:relative;z-index:1;height:62px}.item .inner{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);box-sizing:border-box;-moz-box-sizing:border-box;border-top:1px solid rgba(255,255,255,0.07);border-bottom:1px solid rgba(0,0,0,0.1);height:62px;line-height:62px}.item .field{cursor:default;display:none;font-family:Helvetica,Arial,sans-serif;font-size:19px;font-weight:bold;color:#fff;background:transparent;border:0;padding:0;height:62px;outline:0;position:absolute;top:-1px;left:0;right:0;padding-left:9px}.item .title{position:absolute;top:0;left:12px;cursor:default}.item .check,.item .cross{width:62px;height:62px;position:absolute;z-index:0;top:0;opacity:0}.item .check{left:0}.item .cross{right:0}.item.sorting{-webkit-transition:-webkit-transform 0s linear!important;-moz-transition:-moz-transform 0s linear!important;-ms-transition:-ms-transform 0s linear!important;transition:transform 0s linear!important}.item.sorting .slider{box-shadow:0 2px 16px rgba(0,0,0,0.25);-webkit-transform:scale(1.05)!important;-moz-transform:scale(1.05)!important;-ms-transform:scale(1.05)!important;transform:scale(1.05)!important}.item.sorting-trans{z-index:999!important;-webkit-transition:-webkit-transform .12s ease-out;-moz-transition:-moz-transform .12s ease-out;-ms-transition:-ms-transform .12s ease-out;transition:transform .12s ease-out}.item.sorting-trans .slider{-webkit-transition:-webkit-transform .12s ease-out;-moz-transition:-moz-transform .12s ease-out;-ms-transition:-ms-transform .12s ease-out;transition:transform .12s ease-out}.item.top{z-index:998!important}.item.edit{opacity:1!important}.item.fade{opacity:0}.list-item .count{position:absolute;width:62px;height:61px;right:0;top:-1px;background-color:rgba(255,255,255,0.15);text-align:center}.list-item.empty{color:rgba(255,255,255,0.5);text-shadow:0 1px 1px rgba(0,0,0,0.13)}.todo-item .title{position:relative}.todo-item .line{position:absolute;height:2px;left:0;top:12px;width:0;background-color:#fff;-webkit-transition:width 0s linear,background-color .15s cubic-bezier(0.67,0.18,0.3,0.86);-moz-transition:width 0s linear,background-color .15s cubic-bezier(0.67,0.18,0.3,0.86);-ms-transition:width 0s linear,background-color .15s cubic-bezier(0.67,0.18,0.3,0.86);transition:width 0s linear,background-color .15s cubic-bezier(0.67,0.18,0.3,0.86)}.todo-item.done{color:#666}.todo-item.done .slider{background-color:#000!important}.todo-item.done .line{background-color:#666}.todo-item.green .slider{background-color:#0A3!important}.dummy-item{z-index:-1;-webkit-perspective:400px;-moz-perspective:400px;perspective:400px;-webkit-transition:opacity .15s ease;-moz-transition:opacity .15s ease;-ms-transition:opacity .15s ease;transition:opacity .15s ease}.dummy-item.top{-webkit-perspective-origin:bottom center;-moz-perspective-origin:bottom center;perspective-origin:bottom center;top:-62px}.dummy-item.top .slider{-webkit-transition:-webkit-transform 0s linear;-moz-transition:-moz-transform 0s linear;-ms-transition:-ms-transform 0s linear;transition:transform 0s linear;-webkit-transform-origin:bottom center;-moz-transform-origin:bottom center;-ms-transform-origin:bottom center;transform-origin:bottom center}.dummy-item.bottom{-webkit-perspective-origin:top center;-moz-perspective-origin:top center;perspective-origin:top center}.dummy-item.bottom .slider{-webkit-transition:-webkit-transform .3s cubic-bezier(0.67,0.18,0.3,0.86);-moz-transition:-moz-transform .3s cubic-bezier(0.67,0.18,0.3,0.86);-ms-transition:-ms-transform .3s cubic-bezier(0.67,0.18,0.3,0.86);transition:transform .3s cubic-bezier(0.67,0.18,0.3,0.86);-webkit-transform-origin:top center;-moz-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-transform:rotateX(-91deg);-moz-transform:rotateX(-91deg);-ms-transform:rotateX(-91deg);transform:rotateX(-91deg)}*:not(input){-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}body.desktop{background:url(../img/bg.png) center center no-repeat}body.desktop img{-webkit-user-drag:none}body.desktop #wrapper{width:320px;height:548px;top:50%;left:50%;margin-top:-259px;margin-left:-160px}body.desktop #fork-ribbon{display:inline}body.desktop .field{top:0;padding-left:10px}#log{position:absolute;bottom:5px;width:100%;left:0;text-align:center;font-size:14px} \ No newline at end of file diff --git a/css/style.less b/css/style.less index 9b0214e..101367f 100644 --- a/css/style.less +++ b/css/style.less @@ -9,8 +9,7 @@ } // due to limitations of less, extra vars need an escaped comma in front of it: ~"," -// also no extra value needs a dummy parameter ~"" -.transition (@vars, @extra) { +.transition (@vars, @extra:~"") { -webkit-transition: -webkit-transform @vars @extra; -moz-transition: -moz-transform @vars @extra; -ms-transition: -ms-transform @vars @extra; @@ -41,7 +40,7 @@ } .ease-out { - .transition(.3s cubic-bezier(0,.5,.5,1) ~"!important", ~""); + .transition(.3s cubic-bezier(0,.5,.5,1) ~"!important"); } html, body { @@ -96,7 +95,7 @@ html, body { &.instant { .item { - .transition(0s linear, ~""); + .transition(0s linear); } } @@ -113,7 +112,7 @@ html, body { width: 30px; height: 30px; vertical-align: middle; - .transition(.18s ease-in-out, ~""); + .transition(.18s ease-in-out); &.down { .transform(rotate(180deg)); @@ -243,7 +242,7 @@ html, body { } &.sorting { - .transition(0s linear ~"!important", ~""); + .transition(0s linear ~"!important"); .slider { box-shadow: 0 2px 16px rgba(0,0,0,.25); .transform(scale(1.05) ~"!important"); @@ -252,9 +251,9 @@ html, body { &.sorting-trans { z-index: 999 !important; - .transition(.12s ease-out, ~""); + .transition(.12s ease-out); .slider { - .transition(.12s ease-out, ~""); + .transition(.12s ease-out); } } @@ -338,7 +337,7 @@ html, body { .perspective-origin(bottom center); top: -@itemHeight; .slider { - .transition(0s linear, ~""); + .transition(0s linear); .trans-origin(bottom center); } } @@ -346,7 +345,7 @@ html, body { &.bottom { .perspective-origin(top center); .slider { - .transition(.3s @ease, ~""); + .transition(.3s @ease); .trans-origin(top center); .transform(rotateX(-91deg)); // see createItemAtBottom() in collection.js }