Diffstat (limited to 'frontend/delta/less/web/overlay.less') (more/less context) (ignore whitespace changes)
| -rw-r--r-- | frontend/delta/less/web/overlay.less | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/frontend/delta/less/web/overlay.less b/frontend/delta/less/web/overlay.less new file mode 100644 index 0000000..bac3ca3 --- a/dev/null +++ b/frontend/delta/less/web/overlay.less @@ -0,0 +1,157 @@ +@import "mixin"; + +div.overlay { + z-index: 99999; + position: fixed; + top: 50%; + left: 50%; + width: 200px; + height: 200px; + margin-left: -100px; + margin-top: -100px; + background: rgba(0,0,0,0.8); + .border-radius(20px); + + .title { + color: #FFF; + font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: bold; + text-align: center; + display: block; + font-size: 26px; + position: absolute; + bottom: 30px; + left: 0; + width: 100%; + } + + .icon { + position: relative; + display: inline-block; + width: 128px; + height: 128px; + top: 40%; + left: 50%; + margin-left: -64px; + margin-top: -64px; + + text-align: center; + vertical-align: middle; + + .icon-font(); + font-size: 96pt; + color: white; + text-shadow: none; + } + + &.ios-overlay-show { + .animation(ios-overlay-show, 750ms); + } + + + &.ios-overlay-hide { + .animation(ios-overlay-hide, 750ms, forwards); + } + + // http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit + div.spinner { + position: relative; + width: 100px; + height: 100px; + left: 50% !important; + top: 40% !important; + + margin-left: -50px; + margin-top: -50px; + +// display: inline-block; + display: block; + + div { + width: 12%; + height: 26%; + background: #ffffff; + position: absolute; + left: 44.5%; + top: 37%; + opacity: 0; + .animation(fade, 1s, linear, infinite); + .border-radius(50px); + .box-shadow(0, 0, 3px, rgba(0,0,0,0.2)); + } + + div.bar01 {.transform( 0deg, 0, -142%); .animation-delay(-0.00000s);} + div.bar02 {.transform( 30deg, 0, -142%); .animation-delay(-0.91670s);} + div.bar03 {.transform( 60deg, 0, -142%); .animation-delay(-0.83300s);} + div.bar04 {.transform( 90deg, 0, -142%); .animation-delay(-0.75000s);} + div.bar05 {.transform(120deg, 0, -142%); .animation-delay(-0.66700s);} + div.bar06 {.transform(150deg, 0, -142%); .animation-delay(-0.58330s);} + div.bar07 {.transform(180deg, 0, -142%); .animation-delay(-0.50000s);} + div.bar08 {.transform(210deg, 0, -142%); .animation-delay(-0.41667s);} + div.bar09 {.transform(240deg, 0, -142%); .animation-delay(-0.33300s);} + div.bar10 {.transform(270deg, 0, -142%); .animation-delay(-0.25000s);} + div.bar11 {.transform(300deg, 0, -142%); .animation-delay(-0.16670s);} + div.bar12 {.transform(330deg, 0, -142%); .animation-delay(-0.08330s);} + + @-webkit-keyframes fade { + from {opacity: 1;} + to {opacity: 0.25;} + } + @-o-keyframes fade { + from {opacity: 1;} + to {opacity: 0.25;} + } + @keyframes fade { + from {opacity: 1;} + to {opacity: 0.25;} + } + } +} + +//======================================================== + +@-webkit-keyframes ios-overlay-show { + 0% { opacity: 0; } + 100% { opacity: 1; } +} +@-moz-keyframes ios-overlay-show { + 0% { opacity: 0; } + 100% { opacity: 1; } +} +@-ms-keyframes ios-overlay-show { + 0% { opacity: 0; } + 100% { opacity: 1; } +} +@-o-keyframes ios-overlay-show { + 0% { opacity: 0; } + 100% { opacity: 1; } +} +@keyframes ios-overlay-show { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +//-------------------------------------------------------- + +@-webkit-keyframes ios-overlay-hide { + 0% { opacity: 1; } + 100% { opacity: 0; } +} +@-moz-keyframes ios-overlay-hide { + 0% { opacity: 1; } + 100% { opacity: 0; } +} +@-ms-keyframes ios-overlay-hide { + 0% { opacity: 1; } + 100% { opacity: 0; } +} +@-o-keyframes ios-overlay-hide { + 0% { opacity: 1; } + 100% { opacity: 0; } +} +@keyframes ios-overlay-hide { + 0% { opacity: 1; } + 100% { opacity: 0; } +} + +//======================================================== |