1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/chess/src/main/webapp/pages/css/spinner.css	Tue Sep 24 22:20:24 2013 +0200
     1.3 @@ -0,0 +1,114 @@
     1.4 +/**
     1.5 + * The MIT License (MIT)
     1.6 + *
     1.7 + * Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
     1.8 + *
     1.9 + * Permission is hereby granted, free of charge, to any person obtaining a copy
    1.10 + * of this software and associated documentation files (the "Software"), to deal
    1.11 + * in the Software without restriction, including without limitation the rights
    1.12 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    1.13 + * copies of the Software, and to permit persons to whom the Software is
    1.14 + * furnished to do so, subject to the following conditions:
    1.15 + *
    1.16 + * The above copyright notice and this permission notice shall be included in
    1.17 + * all copies or substantial portions of the Software.
    1.18 + *
    1.19 + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    1.20 + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    1.21 + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    1.22 + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    1.23 + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    1.24 + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    1.25 + * THE SOFTWARE.
    1.26 + */
    1.27 +/** chess cube style **/
    1.28 +
    1.29 +#chesscube {
    1.30 +    margin: 1em auto;
    1.31 +    -webkit-perspective: 1200px;
    1.32 +    perspective: 1200px;
    1.33 +    position: fixed; 
    1.34 +    z-index: -100;
    1.35 +    bottom:100px;
    1.36 +    right: 100px; 
    1.37 +    width: 160px; 
    1.38 +    height: 160px;    
    1.39 +    transition: opacity 1s;
    1.40 +}
    1.41 +
    1.42 +#spinner div {
    1.43 +    position: fixed;
    1.44 +    width: 160px;
    1.45 +    height: 160px;
    1.46 +    border: 1px solid #ccc;
    1.47 +    background: rgba(255,255,155,0.8);
    1.48 +    text-align: center;
    1.49 +    line-height: 160px;
    1.50 +    font-size: 120px;                
    1.51 +    -webkit-box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
    1.52 +    box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
    1.53 +}
    1.54 +
    1.55 +#spinner div:nth-child(1) {
    1.56 +    -webkit-transform: translateZ(80px);
    1.57 +    transform: translateZ(80px);
    1.58 +}
    1.59 +#spinner div:nth-child(2) {
    1.60 +    -webkit-transform: rotateY(90deg) translateZ(80px);
    1.61 +    transform: rotateY(90deg) translateZ(80px);
    1.62 +}
    1.63 +#spinner div:nth-child(3) {
    1.64 +    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(80px);
    1.65 +    transform: rotateY(90deg) rotateX(90deg) translateZ(80px);
    1.66 +}
    1.67 +#spinner div:nth-child(4) {
    1.68 +    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(80px);
    1.69 +    transform: rotateY(180deg) rotateZ(90deg) translateZ(80px);
    1.70 +}
    1.71 +#spinner div:nth-child(5) {
    1.72 +    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(80px);
    1.73 +    transform: rotateY(-90deg) rotateZ(90deg) translateZ(80px);
    1.74 +}
    1.75 +#spinner div:nth-child(6) {
    1.76 +    -webkit-transform: rotateX(-90deg) translateZ(80px);
    1.77 +    transform: rotateX(-90deg) translateZ(80px);
    1.78 +}
    1.79 +
    1.80 +@-webkit-keyframes spincube {
    1.81 +    from,to  {                                                    }            
    1.82 +    16%      { -webkit-transform: rotateY(-90deg);                }
    1.83 +    33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
    1.84 +    50%      { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
    1.85 +    66%      { -webkit-transform: rotateY(90deg) rotateX(90deg);  }
    1.86 +    83%      { -webkit-transform: rotateX(90deg);                 }
    1.87 +}
    1.88 +
    1.89 +@keyframes spincube {
    1.90 +    from,to  {                                                    }            
    1.91 +    16%      { transform: rotateY(-90deg);                }
    1.92 +    33%      { transform: rotateY(-90deg) rotateZ(90deg); }
    1.93 +    50%      { transform: rotateY(180deg) rotateZ(90deg); }
    1.94 +    66%      { transform: rotateY(90deg) rotateX(90deg);  }
    1.95 +    83%      { transform: rotateX(90deg);                 }
    1.96 +}
    1.97 +
    1.98 +#spinner {
    1.99 +    -webkit-animation-name: spincube;
   1.100 +    -webkit-animation-timing-function: ease-in-out;
   1.101 +    -webkit-animation-iteration-count: infinite;
   1.102 +    -webkit-animation-duration: 12s;
   1.103 +    -webkit-transform-style: preserve-3d;
   1.104 +    -webkit-transform-origin: 80px 80px 0;
   1.105 +    animation-name: spincube;
   1.106 +    animation-timing-function: ease-in-out;
   1.107 +    animation-iteration-count: infinite;
   1.108 +    animation-duration: 12s;
   1.109 +    transform-style: preserve-3d;
   1.110 +    transform-origin: 80px 80px 0;
   1.111 +}
   1.112 +
   1.113 +@media (max-width: 767px) {
   1.114 +    #chesscube {
   1.115 +        opacity: 0;
   1.116 +    }
   1.117 +}