Commit 013e2a85 authored by Alexander.Trofimov's avatar Alexander.Trofimov

Update menu html

git-svn-id: svn://192.168.3.15/activex/AVS/Sources/TeamlabOffice/trunk/OfficeWeb@60594 954022d7-b5bf-4e40-9824-e11837661b57
parent 77493e9b
...@@ -18,22 +18,132 @@ ...@@ -18,22 +18,132 @@
overflow: hidden; overflow: hidden;
border: none; border: none;
background-color: #f4f4f4; background-color: #f4f4f4;
z-index: 20002; z-index: 100;
} }
.loadmask-body { .loader-page {
position:relative; top: 50%;
top:44%; 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;
} }
.loadmask-logo { #green {
display:inline-block; z-index: 2;
min-width:220px; background: #a1cb5c;
min-height:62px; -webkit-animation-name: green;
vertical-align:top; -moz-animation-name: green;
background-image:url('./resources/img/loading-logo.gif'); -ms-animation-name: green;
background-image: -webkit-image-set(url('./resources/img/loading-logo.gif') 1x, url('./resources/img/loading-logo@2x.gif') 2x); -o-animation-name: green;
background-repeat:no-repeat; 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; }
}
@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> </style>
...@@ -51,6 +161,28 @@ ...@@ -51,6 +161,28 @@
<!-- Application --> <!-- Application -->
<!--<link rel="stylesheet" href="resources/css/application-normal.css" type="text/css"/>--> <!--<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/Analytics.js"></script>
<script type="text/javascript" src="../../common/Gateway.js"></script> <script type="text/javascript" src="../../common/Gateway.js"></script>
...@@ -239,34 +371,14 @@ ...@@ -239,34 +371,14 @@
} else { } else {
document.write( document.write(
'<div id="loading-mask" class="loadmask">' + '<div id="loading-mask" class="loadmask">' +
'<div class="loadmask-body" align="center">' + '<div class="loader-page">' +
'<div class="loadmask-logo"></div>' + '<div class="romb" id="blue"></div>' +
'<div class="romb" id="green"></div>' +
'<div class="romb" id="red"></div>' +
'</div>' + '</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> </script>
</body> </body>
</html> </html>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
overflow: hidden; overflow: hidden;
border: none; border: none;
background-color: #f4f4f4; background-color: #f4f4f4;
z-index: 20002; z-index: 100;
} }
.loader-page { .loader-page {
...@@ -30,7 +30,6 @@ ...@@ -30,7 +30,6 @@
left: 50%; left: 50%;
width: 50px; width: 50px;
height: 180px; height: 180px;
z-index: 100;
position: absolute; position: absolute;
margin-top: -100px; margin-top: -100px;
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment