LinuxGUI/WebUI/static/css/vtoy.css

   1 /*loading ¶¯»*/
   2 .loading {
   3     width: 100%;
   4     height: 100%;
   5     position: fixed;
   6     top:0;
   7     left:0;
   8     z-index: 999999;
   9     background-color: rgba(0, 0, 0, 0);
  10 }
  11 .loading .title {
  12     width: 300px;
  13     text-align: center;
  14     margin: 250px auto 0px;
  15     color: #2F7095;
  16     font-weight: 900;
  17     font-size: 24px;
  18 }
  19 .loading .rectbox {
  20     width: 150px;
  21     height: 40px;
  22     margin: 10px auto;
  23 }
  24 .loading .rectbox .title {
  25     font-size: 14px;
  26     font-family: 'Microsoft YaHei';
  27     font-weight: 900;
  28     text-align: center;
  29     color: rgba(68, 149, 57, 1);
  30 }
  31 .loading .rectbox .rect {
  32     width: 25px;
  33     height: 25px;
  34     background-color: rgba(68, 149, 57, 1);
  35     margin: 0 2px auto 3px;
  36     float: left;
  37     -webkit-animation: loading 0.48s infinite ease-in-out;
  38     -o-animation: loading 0.48s infinite ease-in-out;
  39     animation: loading 0.48s infinite ease-in-out;
  40 }
  41 .loading .rectbox .rect1 {
  42     -webkit-animation-delay: 0s;
  43     -moz-animation-delay: 0s;
  44     -o-animation-delay: 0s;
  45     animation-delay: 0s;
  46 }
  47 .loading .rectbox .rect2 {
  48     -webkit-animation-delay: 0.12s;
  49     -moz-animation-delay: 0.12s;
  50     -o-animation-delay: 0.12s;
  51     animation-delay: 0.12s;
  52     background-color: rgba(68, 149, 57, 0.2);
  53 }
  54 .loading .rectbox .rect3 {
  55     -webkit-animation-delay: 0.24s;
  56     -moz-animation-delay: 0.24s;
  57     -o-animation-delay: 0.24s;
  58     animation-delay: 0.24s;
  59     background-color: rgba(68, 149, 57, 0.4);
  60 }
  61 .loading .rectbox .rect4 {
  62     -webkit-animation-delay: 0.36s;
  63     -moz-animation-delay: 0.36s;
  64     -o-animation-delay: 0.36s;
  65     animation-delay: 0.36s;
  66     background-color: rgba(68, 149, 57, 0.6);
  67 }
  68 .loading .rectbox .rect5 {
  69     -webkit-animation-delay: 0.48s;
  70     -moz-animation-delay: 0.48s;
  71     -o-animation-delay: 0.48s;
  72     animation-delay: 0.48s;
  73     background-color: rgba(68, 149, 57, 0.8);
  74 }
  75 @keyframes loading {
  76     0% {
  77         background-color: rgba(68, 149, 57, 1);
  78     }
  79     25% {
  80         background-color: rgba(68, 149, 57, 0.8);
  81     }
  82     50% {
  83         background-color: rgba(68, 149, 57, 0.6);
  84     }
  85     75% {
  86         background-color: rgba(68, 149, 57, 0.4);
  87     }
  88     100% {
  89         background-color: rgba(68, 149, 57, 0.2);
  90     }
  91 }
  92 @-moz-keyframes loading {
  93     0% {
  94         background-color: rgba(68, 149, 57, 1);
  95     }
  96     25% {
  97         background-color: rgba(68, 149, 57, 0.8);
  98     }
  99     50% {
 100         background-color: rgba(68, 149, 57, 0.6);
 101     }
 102     75% {
 103         background-color: rgba(68, 149, 57, 0.4);
 104     }
 105     100% {
 106         background-color: rgba(68, 149, 57, 0.2);
 107     }
 108 }
 109 @-ms-keyframes loading {
 110     0% {
 111         background-color: rgba(68, 149, 57, 1);
 112     }
 113     25% {
 114         background-color: rgba(68, 149, 57, 0.8);
 115     }
 116     50% {
 117         background-color: rgba(68, 149, 57, 0.6);
 118     }
 119     75% {
 120         background-color: rgba(68, 149, 57, 0.4);
 121     }
 122     100% {
 123         background-color: rgba(68, 149, 57, 0.2);
 124     }
 125 }
 126 @-webkit-keyframes loading {
 127     0% {
 128         background-color: rgba(68, 149, 57, 1);
 129     }
 130     25% {
 131         background-color: rgba(68, 149, 57, 0.8);
 132     }
 133     50% {
 134         background-color: rgba(68, 149, 57, 0.6);
 135     }
 136     75% {
 137         background-color: rgba(68, 149, 57, 0.4);
 138     }
 139     100% {
 140         background-color: rgba(68, 149, 57, 0.2);
 141     }
 142 }
 143
 144 /*vtoy server is running*/
 145 #vtoy-main .loading {
 146     width: 100%;
 147     position: relative;
 148     top:0;
 149     left:0;
 150     background-color: rgba(0, 0, 0, 0);
 151 }
 152 #vtoy-main .loading .title {
 153     width: 300px;
 154     text-align: center;
 155     margin: 250px auto 0px;
 156     color: #449539;
 157     font-weight: 900;
 158     font-size: 24px;
 159 }
 160 #vtoy-main .loading .rectbox {
 161     width: 120px;
 162     height: 40px;
 163     margin: 10px auto;
 164 }
 165 #vtoy-main .loading .rectbox .title {
 166     font-size: 14px;
 167     font-family: 'Microsoft YaHei';
 168     font-weight: 900;
 169     text-align: center;
 170     color: rgba(68, 149, 57, 1);
 171 }
 172 #vtoy-main .loading .rectbox .rect {
 173     width: 25px;
 174     height: 25px;
 175     background-color: rgba(68, 149, 57, 1);
 176     margin: 0 2px auto 3px;
 177     float: left;
 178     -webkit-animation: loading 1.44s infinite ease-in-out;
 179     -o-animation: loading 0.48s infinite ease-in-out;
 180     animation: loading 0.48s infinite ease-in-out;
 181 }
 182 #vtoy-main .loading .rectbox .rect1 {
 183     -webkit-animation-delay: 0s;
 184     -moz-animation-delay: 0s;
 185     -o-animation-delay: 0s;
 186     animation-delay: 0s;
 187 }
 188 #vtoy-main .loading .rectbox .rect2 {
 189     -webkit-animation-delay: 0.36s;
 190     -moz-animation-delay: 0.12s;
 191     -o-animation-delay: 0.12s;
 192     animation-delay: 0.12s;
 193     background-color: rgba(68, 149, 57, 0.2);
 194 }
 195 #vtoy-main .loading .rectbox .rect3 {
 196     -webkit-animation-delay: 0.72s;
 197     -moz-animation-delay: 0.24s;
 198     -o-animation-delay: 0.24s;
 199     animation-delay: 0.24s;
 200     background-color: rgba(68, 149, 57, 0.4);
 201 }
 202 #vtoy-main .loading .rectbox .rect4 {
 203     -webkit-animation-delay: 1.08s;
 204     -moz-animation-delay: 0.36s;
 205     -o-animation-delay: 0.36s;
 206     animation-delay: 0.36s;
 207     background-color: rgba(68, 149, 57, 0.6);
 208 }
 209 #vtoy-main .loading .rectbox .rect5 {
 210     -webkit-animation-delay: 1.44s;
 211     -moz-animation-delay: 0.48s;
 212     -o-animation-delay: 0.48s;
 213     animation-delay: 0.48s;
 214     background-color: rgba(68, 149, 57, 0.8);
 215 }
 216 @keyframes running {
 217     0% {
 218         background-color: rgba(68, 149, 57, 1);
 219     }
 220     25% {
 221         background-color: rgba(68, 149, 57, 0.8);
 222     }
 223     50% {
 224         background-color: rgba(68, 149, 57, 0.6);
 225     }
 226     75% {
 227         background-color: rgba(68, 149, 57, 0.4);
 228     }
 229     100% {
 230         background-color: rgba(68, 149, 57, 0.2);
 231     }
 232 }
 233 @-moz-keyframes running {
 234     0% {
 235         background-color: rgba(68, 149, 57, 1);
 236     }
 237     25% {
 238         background-color: rgba(68, 149, 57, 0.8);
 239     }
 240     50% {
 241         background-color: rgba(68, 149, 57, 0.6);
 242     }
 243     75% {
 244         background-color: rgba(68, 149, 57, 0.4);
 245     }
 246     100% {
 247         background-color: rgba(68, 149, 57, 0.2);
 248     }
 249 }
 250 @-ms-keyframes running {
 251     0% {
 252         background-color: rgba(68, 149, 57, 1);
 253     }
 254     25% {
 255         background-color: rgba(68, 149, 57, 0.8);
 256     }
 257     50% {
 258         background-color: rgba(68, 149, 57, 0.6);
 259     }
 260     75% {
 261         background-color: rgba(68, 149, 57, 0.4);
 262     }
 263     100% {
 264         background-color: rgba(68, 149, 57, 0.2);
 265     }
 266 }
 267 @-webkit-keyframes running {
 268     0% {
 269         background-color: rgba(68, 149, 57, 1);
 270     }
 271     25% {
 272         background-color: rgba(68, 149, 57, 0.8);
 273     }
 274     50% {
 275         background-color: rgba(68, 149, 57, 0.6);
 276     }
 277     75% {
 278         background-color: rgba(68, 149, 57, 0.4);
 279     }
 280     100% {
 281         background-color: rgba(68, 149, 57, 0.2);
 282     }
 283 }
 284
 285
 286
 287 .loadEffect{
 288     width: 110px;
 289     height: 110px;
 290     position: relative;
 291     margin: 0 auto;
 292     margin-top:0 auto;
 293 }
 294 .loadEffect span{
 295     display: inline-block;
 296     width: 20px;
 297     height: 20px;
 298     border-radius: 50%;
 299     background: lightgreen;
 300     position: absolute;
 301     -webkit-animation: load 1.04s ease infinite;
 302 }
 303 @-webkit-keyframes load{
 304     0%{
 305         opacity: 1;
 306     }
 307     100%{
 308         opacity: 0.2;
 309     }
 310 }
 311
 312
 313
 314
 315 .loadEffect span:nth-child(1){
 316     left: 40%;
 317     top: -130%;
 318     -webkit-animation-delay:0.13s;
 319 }
 320 .loadEffect span:nth-child(2){
 321     left: 90%;
 322     top: 8%;
 323     margin-top:-120%;
 324     -webkit-animation-delay:0.26s;
 325 }
 326 .loadEffect span:nth-child(3){
 327     left: 110%;
 328     top: -80%;
 329     margin-left: %-100;
 330     -webkit-animation-delay:0.39s;
 331 }
 332 .loadEffect span:nth-child(4){
 333     top: -40%;
 334     left:110%;
 335     -webkit-animation-delay:0.52s;
 336 }
 337 .loadEffect span:nth-child(5){
 338     left: 40%;
 339     top: 0;
 340     margin-top:10%;
 341     -webkit-animation-delay:0.65s;
 342 }
 343 .loadEffect span:nth-child(6){
 344     left: -20%;
 345     bottom:120%;
 346     -webkit-animation-delay:0.78s;
 347 }
 348 .loadEffect span:nth-child(7){
 349     bottom: 160%;
 350     left: -20%;
 351     -webkit-animation-delay:0.91s;
 352 }
 353 .loadEffect span:nth-child(8){
 354     bottom: 200%;
 355     left: -10%;
 356     -webkit-animation-delay:1.04s;
 357 }