[DE][SSE][PE] Skeleton improvement
This commit is contained in:
parent
4da866952b
commit
6b993485e2
|
@ -18,7 +18,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: #f4f4f4;
|
background: #f1f1f1;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -31,6 +31,7 @@
|
||||||
.loadmask > .brendpanel > div {
|
.loadmask > .brendpanel > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel .spacer {
|
.loadmask > .brendpanel .spacer {
|
||||||
|
@ -50,15 +51,6 @@
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel .circle {
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 12px;
|
|
||||||
margin: 4px 10px;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .brendpanel .rect {
|
.loadmask > .brendpanel .rect {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
@ -69,8 +61,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .sktoolbar {
|
.loadmask > .sktoolbar {
|
||||||
background: #fafafa;
|
background: #f1f1f1;
|
||||||
border-bottom: 1px solid #e2e2e2;
|
border-bottom: 1px solid #cfcfcf;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
|
@ -130,24 +122,24 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes flickerAnimation {
|
@keyframes flickerAnimation {
|
||||||
0% { opacity:0.1; }
|
0% { opacity:0.5; }
|
||||||
50% { opacity:1; }
|
50% { opacity:1; }
|
||||||
100% { opacity:0.1; }
|
100% { opacity:0.5; }
|
||||||
}
|
}
|
||||||
@-o-keyframes flickerAnimation{
|
@-o-keyframes flickerAnimation{
|
||||||
0% { opacity:0.1; }
|
0% { opacity:0.5; }
|
||||||
50% { opacity:1; }
|
50% { opacity:1; }
|
||||||
100% { opacity:0.1; }
|
100% { opacity:0.5; }
|
||||||
}
|
}
|
||||||
@-moz-keyframes flickerAnimation{
|
@-moz-keyframes flickerAnimation{
|
||||||
0% { opacity:0.1; }
|
0% { opacity:0.5; }
|
||||||
50% { opacity:1; }
|
50% { opacity:1; }
|
||||||
100% { opacity:0.1; }
|
100% { opacity:0.5; }
|
||||||
}
|
}
|
||||||
@-webkit-keyframes flickerAnimation{
|
@-webkit-keyframes flickerAnimation{
|
||||||
0% { opacity:0.1; }
|
0% { opacity:0.5; }
|
||||||
50% { opacity:1; }
|
50% { opacity:1; }
|
||||||
100% { opacity:0.1; }
|
100% { opacity:0.5; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
@ -217,7 +209,7 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="loading-mask" class="loadmask">
|
<div id="loading-mask" class="loadmask">
|
||||||
<div class="brendpanel">
|
<div class="brendpanel">
|
||||||
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div>
|
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div>
|
||||||
<div class="sktoolbar">
|
<div class="sktoolbar">
|
||||||
<ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul>
|
<ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul>
|
||||||
<ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li></ul>
|
<ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li></ul>
|
||||||
|
|
|
@ -19,19 +19,20 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: #f4f4f4;
|
background: #f1f1f1;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel {
|
.loadmask > .brendpanel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 56px;
|
min-height: 32px;
|
||||||
background: #446995;
|
background: #446995;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel > div {
|
.loadmask > .brendpanel > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel .spacer {
|
.loadmask > .brendpanel .spacer {
|
||||||
|
@ -51,15 +52,6 @@
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel .circle {
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 12px;
|
|
||||||
margin: 4px 10px;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .brendpanel .rect {
|
.loadmask > .brendpanel .rect {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
@ -70,8 +62,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .sktoolbar {
|
.loadmask > .sktoolbar {
|
||||||
background: #fafafa;
|
background: #f1f1f1;
|
||||||
border-bottom: 1px solid #e2e2e2;
|
border-bottom: 1px solid #cfcfcf;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
|
@ -82,11 +74,6 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
|
|
||||||
-moz-animation: flickerAnimation 2s infinite ease-in-out;
|
|
||||||
-o-animation: flickerAnimation 2s infinite ease-in-out;
|
|
||||||
animation: flickerAnimation 2s infinite ease-in-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .sktoolbar li {
|
.loadmask > .sktoolbar li {
|
||||||
|
@ -136,24 +123,24 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes flickerAnimation {
|
@keyframes flickerAnimation {
|
||||||
0% { opacity:0.1; }
|
0% { opacity:0.5; }
|
||||||
50% { opacity:1; }
|
50% { opacity:1; }
|
||||||
100% { opacity:0.1; }
|
100% { opacity:0.5; }
|
||||||
}
|
}
|
||||||
@-o-keyframes flickerAnimation{
|
@-o-keyframes flickerAnimation{
|
||||||
0% { opacity:0.1; }
|
0% { opacity:0.5; }
|
||||||
50% { opacity:1; }
|
50% { opacity:1; }
|
||||||
100% { opacity:0.1; }
|
100% { opacity:0.5; }
|
||||||
}
|
}
|
||||||
@-moz-keyframes flickerAnimation{
|
@-moz-keyframes flickerAnimation{
|
||||||
0% { opacity:0.1; }
|
0% { opacity:0.5; }
|
||||||
50% { opacity:1; }
|
50% { opacity:1; }
|
||||||
100% { opacity:0.1; }
|
100% { opacity:0.5; }
|
||||||
}
|
}
|
||||||
@-webkit-keyframes flickerAnimation{
|
@-webkit-keyframes flickerAnimation{
|
||||||
0% { opacity:0.1; }
|
0% { opacity:0.5; }
|
||||||
50% { opacity:1; }
|
50% { opacity:1; }
|
||||||
100% { opacity:0.1; }
|
100% { opacity:0.5; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
@ -217,7 +204,7 @@
|
||||||
<link rel="stylesheet" type="text/css" href="../../../apps/documenteditor/main/resources/css/app.css">
|
<link rel="stylesheet" type="text/css" href="../../../apps/documenteditor/main/resources/css/app.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../../apps/documenteditor/main/resources/img/header/header-logo@2x.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="sktoolbar"><ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul><ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li></ul></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
|
<div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../../apps/documenteditor/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar"><ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul><ul><li></li><li class="space"></li><li style="width: 255px;"></li><li class="space"></li><li style="width: 180px;"></li><li class="space"></li><li style="width: 60px;"></li></ul></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
|
||||||
<div id="viewport"></div>
|
<div id="viewport"></div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: #f4f4f4;
|
background-color: #e2e2e2;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -30,6 +30,7 @@
|
||||||
.loadmask > .brendpanel > div {
|
.loadmask > .brendpanel > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel .loading-logo {
|
.loadmask > .brendpanel .loading-logo {
|
||||||
|
@ -49,15 +50,6 @@
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel .circle {
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 12px;
|
|
||||||
margin: 4px 10px;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .brendpanel .rect {
|
.loadmask > .brendpanel .rect {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
@ -68,8 +60,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .sktoolbar {
|
.loadmask > .sktoolbar {
|
||||||
background: #fafafa;
|
background: #f1f1f1;
|
||||||
border-bottom: 1px solid #e2e2e2;
|
border-bottom: 1px solid #cbcbcb;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
|
@ -167,22 +159,22 @@
|
||||||
|
|
||||||
@keyframes flickerAnimation {
|
@keyframes flickerAnimation {
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
@-o-keyframes flickerAnimation{
|
@-o-keyframes flickerAnimation{
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
@-moz-keyframes flickerAnimation{
|
@-moz-keyframes flickerAnimation{
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
@-webkit-keyframes flickerAnimation{
|
@-webkit-keyframes flickerAnimation{
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -245,7 +237,7 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="loading-mask" class="loadmask">
|
<div id="loading-mask" class="loadmask">
|
||||||
<div class="brendpanel">
|
<div class="brendpanel">
|
||||||
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div>
|
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sktoolbar">
|
<div class="sktoolbar">
|
||||||
<ul><li/><li class="space" style="width: 78px;"/><li/><li class="space"/><li style="width: 210px;"/><li class="space"/><li style="width: 120px;"/><li class="space" style="width: 210px;"/><li style="width: 100px;"/><li class="fat"/></ul>
|
<ul><li/><li class="space" style="width: 78px;"/><li/><li class="space"/><li style="width: 210px;"/><li class="space"/><li style="width: 120px;"/><li class="space" style="width: 210px;"/><li style="width: 100px;"/><li class="fat"/></ul>
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: #f4f4f4;
|
background-color: #e2e2e2;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -32,6 +32,7 @@
|
||||||
.loadmask > .brendpanel > div {
|
.loadmask > .brendpanel > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel .loading-logo {
|
.loadmask > .brendpanel .loading-logo {
|
||||||
|
@ -51,15 +52,6 @@
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel .circle {
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 12px;
|
|
||||||
margin: 4px 10px;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .brendpanel .rect {
|
.loadmask > .brendpanel .rect {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
@ -70,8 +62,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .sktoolbar {
|
.loadmask > .sktoolbar {
|
||||||
background: #fafafa;
|
background: #f1f1f1;
|
||||||
border-bottom: 1px solid #e2e2e2;
|
border-bottom: 1px solid #cbcbcb;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
|
@ -169,22 +161,22 @@
|
||||||
|
|
||||||
@keyframes flickerAnimation {
|
@keyframes flickerAnimation {
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
@-o-keyframes flickerAnimation{
|
@-o-keyframes flickerAnimation{
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
@-moz-keyframes flickerAnimation{
|
@-moz-keyframes flickerAnimation{
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
@-webkit-keyframes flickerAnimation{
|
@-webkit-keyframes flickerAnimation{
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -251,7 +243,7 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="loading-mask" class="loadmask">
|
<div id="loading-mask" class="loadmask">
|
||||||
<div class="brendpanel">
|
<div class="brendpanel">
|
||||||
<div><div class="loading-logo"><img src="../../../apps/presentationeditor/main/resources/img/header/header-logo@2x.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div>
|
<div><div class="loading-logo"><img src="../../../apps/presentationeditor/main/resources/img/header/header-logo@2x.png"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sktoolbar">
|
<div class="sktoolbar">
|
||||||
<ul><li/><li class="space" style="width: 78px;"/><li/><li class="space"/><li style="width: 210px;"/><li class="space"/><li style="width: 120px;"/><li class="space" style="width: 210px;"/><li style="width: 100px;"/><li class="fat"/></ul>
|
<ul><li/><li class="space" style="width: 78px;"/><li/><li class="space"/><li style="width: 210px;"/><li class="space"/><li style="width: 120px;"/><li class="space" style="width: 210px;"/><li style="width: 100px;"/><li class="fat"/></ul>
|
||||||
|
|
|
@ -29,6 +29,7 @@
|
||||||
.loadmask > .brendpanel > div {
|
.loadmask > .brendpanel > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel .loading-logo {
|
.loadmask > .brendpanel .loading-logo {
|
||||||
|
@ -48,15 +49,6 @@
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel .circle {
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 12px;
|
|
||||||
margin: 4px 10px;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .brendpanel .rect {
|
.loadmask > .brendpanel .rect {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
@ -67,7 +59,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .sktoolbar {
|
.loadmask > .sktoolbar {
|
||||||
background: #fafafa;
|
background: #f1f1f1;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
|
@ -135,22 +127,22 @@
|
||||||
|
|
||||||
@keyframes flickerAnimation {
|
@keyframes flickerAnimation {
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
@-o-keyframes flickerAnimation{
|
@-o-keyframes flickerAnimation{
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
@-moz-keyframes flickerAnimation{
|
@-moz-keyframes flickerAnimation{
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
@-webkit-keyframes flickerAnimation{
|
@-webkit-keyframes flickerAnimation{
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -216,7 +208,7 @@
|
||||||
<div id="loading-mask" class="loadmask">
|
<div id="loading-mask" class="loadmask">
|
||||||
<div class="brendpanel"><div>
|
<div class="brendpanel"><div>
|
||||||
<div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div>
|
<div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo@2x.png"></div>
|
||||||
<div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div>
|
<div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sktoolbar">
|
<div class="sktoolbar">
|
||||||
<ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/><li class="fat"/></ul>
|
<ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/><li class="fat"/></ul>
|
||||||
|
|
|
@ -31,6 +31,7 @@
|
||||||
.loadmask > .brendpanel > div {
|
.loadmask > .brendpanel > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel .loading-logo {
|
.loadmask > .brendpanel .loading-logo {
|
||||||
|
@ -50,15 +51,6 @@
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .brendpanel .circle {
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 12px;
|
|
||||||
margin: 4px 10px;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .brendpanel .rect {
|
.loadmask > .brendpanel .rect {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
@ -69,7 +61,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmask > .sktoolbar {
|
.loadmask > .sktoolbar {
|
||||||
background: #fafafa;
|
background: #f1f1f1;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
|
@ -137,22 +129,22 @@
|
||||||
|
|
||||||
@keyframes flickerAnimation {
|
@keyframes flickerAnimation {
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
@-o-keyframes flickerAnimation{
|
@-o-keyframes flickerAnimation{
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
@-moz-keyframes flickerAnimation{
|
@-moz-keyframes flickerAnimation{
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
@-webkit-keyframes flickerAnimation{
|
@-webkit-keyframes flickerAnimation{
|
||||||
0% { opacity:1; }
|
0% { opacity:1; }
|
||||||
50% { opacity:0.3; }
|
50% { opacity:0.5; }
|
||||||
100% { opacity:1; }
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -221,7 +213,7 @@
|
||||||
<div id="loading-mask" class="loadmask">
|
<div id="loading-mask" class="loadmask">
|
||||||
<div class="brendpanel"><div>
|
<div class="brendpanel"><div>
|
||||||
<div class="loading-logo"><img src="../../../apps/spreadsheeteditor/main/resources/img/header/header-logo@2x.png"></div>
|
<div class="loading-logo"><img src="../../../apps/spreadsheeteditor/main/resources/img/header/header-logo@2x.png"></div>
|
||||||
<div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div>
|
<div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sktoolbar">
|
<div class="sktoolbar">
|
||||||
<ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/><li class="fat"/></ul>
|
<ul><li/><li class="space"/><li style="width: 240px;"/><li class="space"/><li style="width: 160px;"/><li class="space"/><li style="width: 390px;"/><li class="fat"/></ul>
|
||||||
|
|
Loading…
Reference in a new issue