Update menu html

git-svn-id: svn://192.168.3.15/activex/AVS/Sources/TeamlabOffice/trunk/OfficeWeb@60594 954022d7-b5bf-4e40-9824-e11837661b57

Excel/index_mobile.html

@@ -18,22 +18,132 @@
                 overflow: hidden;
                 border: none;
                 background-color: #f4f4f4;
-                z-index: 20002;
+                z-index: 100;
             }
 
-            .loadmask-body {
-                position:relative;
-                top:44%;
+            .loader-page {
+                top: 50%;
+                left: 50%;
+                width: 50px;
+                height: 180px;
+                z-index: 100;
+                position: absolute;
+                margin-top: -100px;
+            }
+
+            .romb {
+                width: 40px;
+                height: 40px;
+                -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+                -moz-transform: rotate(135deg) skew(20deg, 20deg);
+                -ms-transform: rotate(135deg) skew(20deg, 20deg);
+                -o-transform: rotate(135deg) skew(20deg, 20deg);
+                position: absolute;
+                background: red;
+                border-radius: 6px;
+                -webkit-animation: movedown 3s infinite ease;
+                -moz-animation: movedown 3s infinite ease;
+                -ms-animation: movedown 3s infinite ease;
+                -o-animation: movedown 3s infinite ease;
+                animation: movedown 3s infinite ease;
+            }
+
+            #blue {
+                z-index: 3;
+                background: #55bce6;
+                -webkit-animation-name: blue;
+                -moz-animation-name: blue;
+                -ms-animation-name: blue;
+                -o-animation-name: blue;
+                animation-name: blue;
+            }
+
+            #red {
+                z-index:1;
+                background: #de7a59;
+                -webkit-animation-name: red;
+                -moz-animation-name: red;
+                -ms-animation-name: red;
+                -o-animation-name: red;
+                animation-name: red;
+            }
+
+            #green {
+                z-index: 2;
+                background: #a1cb5c;
+                -webkit-animation-name: green;
+                -moz-animation-name: green;
+                -ms-animation-name: green;
+                -o-animation-name: green;
+                animation-name: green;
+            }
+
+            @-webkit-keyframes red {
+                  0%    { top:120px; background: #de7a59; }
+                 10%    { top:120px; background: #F2CBBF; }
+                 14%    { background: #f4f4f4; top:120px; }
+                 15%    { background: #f4f4f4; top:0;}
+                 20%    { background: #E6E4E4; }
+                 30%    { background: #D2D2D2; }
+                 40%    { top:120px; }
+                100%    { top:120px; background: #de7a59; }
+            }
+
+            @keyframes red {
+                  0%    { top:120px; background: #de7a59; }
+                 10%    { top:120px; background: #F2CBBF; }
+                 14%    { background: #f4f4f4; top:120px; }
+                 15%    { background: #f4f4f4; top:0; }
+                 20%    { background: #E6E4E4; }
+                 30%    { background: #D2D2D2; }
+                 40%    { top:120px; }
+                100%    { top:120px; background: #de7a59; }
+            }
+
+            @-webkit-keyframes green {
+                  0%    { top:110px; background: #a1cb5c; opacity:1; }
+                 10%    { top:110px; background: #CBE0AC; opacity:1; }
+                 14%    { background: #f4f4f4; top:110px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #EFEFEF; top:0; opacity:1; }
+                 30%    { background:#E6E4E4; }
+                 70%    { top:110px; }
+                100%    { top:110px; background: #a1cb5c; }
             }
 
-            .loadmask-logo {
-                display:inline-block;
-                min-width:220px;
-                min-height:62px;
-                vertical-align:top;
-                background-image:url('./resources/img/loading-logo.gif');
-                background-image: -webkit-image-set(url('./resources/img/loading-logo.gif') 1x, url('./resources/img/loading-logo@2x.gif') 2x);
-                background-repeat:no-repeat;
+            @keyframes green {
+                  0%    { top:110px; background: #a1cb5c; opacity:1; }
+                 10%    { top:110px; background: #CBE0AC; opacity:1; }
+                 14%    { background: #f4f4f4; top:110px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #EFEFEF; top:0; opacity:1; }
+                 30%    { background:#E6E4E4; }
+                 70%    { top:110px; }
+                100%    { top:110px; background: #a1cb5c; }
+            }
+
+            @-webkit-keyframes blue {
+                  0%    { top:100px; background: #55bce6; opacity:1; }
+                 10%    { top:100px; background: #BFE8F8; opacity:1; }
+                 14%    { background: #f4f4f4; top:100px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #f4f4f4; top:0; opacity:0; }
+                 45%    { background: #EFEFEF; top:0; opacity:0,2; }
+                100%    { top:100px; background: #55bce6; }
+            }
+
+            @keyframes blue {
+                  0%    { top:100px; background: #55bce6; opacity:1; }
+                 10%    { top:100px; background: #BFE8F8; opacity:1; }
+                 14%    { background: #f4f4f4; top:100px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #f4f4f4; top:0; opacity:0; }
+                 45%    { background: #EFEFEF; top:0; opacity:0,2; }
+                100%    { top:100px; background: #55bce6; }
             }
         </style>
 
@@ -51,6 +161,28 @@
         <!-- Application -->
 
         <!--<link rel="stylesheet" href="resources/css/application-normal.css" type="text/css"/>-->
+        <script type="text/javascript">
+            var injectStyleElement = function(url) {
+                var style = document.createElement('link'),
+                        documentHead = typeof document != 'undefined' && (document.head || document.getElementsByTagName('head')[0]);
+
+                style.rel = 'stylesheet';
+                style.href = url;
+                style.type = 'text/css';
+
+                if (documentHead) {
+                    documentHead.appendChild(style);
+                    return true;
+                }
+
+                return false;
+            };
+
+            injectStyleElement((window.devicePixelRatio > 1)
+                ? 'resources/css/application-retina.css'
+                : 'resources/css/application-normal.css'
+            );
+        </script>
 
         <script type="text/javascript" src="../../common/Analytics.js"></script>
         <script type="text/javascript" src="../../common/Gateway.js"></script>
@@ -239,34 +371,14 @@
             } else {
                 document.write(
                     '<div id="loading-mask" class="loadmask">' +
-                        '<div class="loadmask-body" align="center">' +
-                            '<div class="loadmask-logo"></div>' +
+                        '<div class="loader-page">' +
+                            '<div class="romb" id="blue"></div>' +
+                            '<div class="romb" id="green"></div>' +
+                            '<div class="romb" id="red"></div>' +
                         '</div>' +
                     '</div>');
             }
 
-
-            var injectStyleElement = function(url) {
-                var style = document.createElement('link'),
-                        documentHead = typeof document != 'undefined' && (document.head || document.getElementsByTagName('head')[0]);
-
-                style.rel = 'stylesheet';
-                style.href = url;
-                style.type = 'text/css';
-
-                if (documentHead) {
-                    documentHead.appendChild(style);
-                    return true;
-                }
-
-                return false;
-            };
-
-            injectStyleElement(
-                (window.devicePixelRatio > 1)
-                    ? 'resources/css/application-retina.css'
-                    : 'resources/css/application-normal.css'
-            );
         </script>
     </body>
 </html>

PowerPoint/index.html

@@ -22,7 +22,7 @@
             overflow: hidden;
             border: none;
             background-color: #f4f4f4;
-            z-index: 20002;
+            z-index: 100;
         }
 
         .loader-page {
@@ -30,7 +30,6 @@
             left: 50%;
             width: 50px;
             height: 180px;
-            z-index: 100;
             position: absolute;
             margin-top: -100px;
         }