Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE][SSE][PE] Skeleton improvement

Browse source
This commit is contained in:
Alexander Yuzhin 2019-10-21 16:58:34 +03:00
parent 4da866952b
commit 6b993485e2
6 changed files with 59 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
apps/documenteditor/main/index.html
View file

@ -18,7 +18,7 @@
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
background: #f1f1f1;
z-index: 1001;
}
@ -31,6 +31,7 @@
.loadmask > .brendpanel > div {
display: flex;
align-items: center;
height: 28px;
}
.loadmask > .brendpanel .spacer {
@ -50,15 +51,6 @@
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 {
vertical-align: middle;
width: 50px;
@ -69,8 +61,8 @@
}
.loadmask > .sktoolbar {
background: #fafafa;
border-bottom: 1px solid #e2e2e2;
background: #f1f1f1;
border-bottom: 1px solid #cfcfcf;
height: 46px;
padding: 10px 12px;
box-sizing: content-box;
@ -130,24 +122,24 @@
}
@keyframes flickerAnimation {
0% { opacity:0.1; }
0% { opacity:0.5; }
50% { opacity:1; }
100% { opacity:0.1; }
100% { opacity:0.5; }
}
@-o-keyframes flickerAnimation{
0% { opacity:0.1; }
0% { opacity:0.5; }
50% { opacity:1; }
100% { opacity:0.1; }
100% { opacity:0.5; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:0.1; }
0% { opacity:0.5; }
50% { opacity:1; }
100% { opacity:0.1; }
100% { opacity:0.5; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:0.1; }
0% { opacity:0.5; }
50% { opacity:1; }
100% { opacity:0.1; }
100% { opacity:0.5; }
}
</style>
@ -217,7 +209,7 @@
<body>
<div id="loading-mask" class="loadmask">
<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">
<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>

41
apps/documenteditor/main/index.html.deploy
View file

@ -19,19 +19,20 @@
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
background: #f1f1f1;
z-index: 1001;
}
.loadmask > .brendpanel {
width: 100%;
height: 56px;
min-height: 32px;
background: #446995;
}
.loadmask > .brendpanel > div {
display: flex;
align-items: center;
height: 28px;
}
.loadmask > .brendpanel .spacer {
@ -51,15 +52,6 @@
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 {
vertical-align: middle;
width: 50px;
@ -70,8 +62,8 @@
}
.loadmask > .sktoolbar {
background: #fafafa;
border-bottom: 1px solid #e2e2e2;
background: #f1f1f1;
border-bottom: 1px solid #cfcfcf;
height: 46px;
padding: 10px 12px;
box-sizing: content-box;
@ -82,11 +74,6 @@
padding: 0;
white-space: nowrap;
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 {
@ -136,24 +123,24 @@
}
@keyframes flickerAnimation {
0% { opacity:0.1; }
0% { opacity:0.5; }
50% { opacity:1; }
100% { opacity:0.1; }
100% { opacity:0.5; }
}
@-o-keyframes flickerAnimation{
0% { opacity:0.1; }
0% { opacity:0.5; }
50% { opacity:1; }
100% { opacity:0.1; }
100% { opacity:0.5; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:0.1; }
0% { opacity:0.5; }
50% { opacity:1; }
100% { opacity:0.1; }
100% { opacity:0.5; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:0.1; }
0% { opacity:0.5; }
50% { opacity:1; }
100% { opacity:0.1; }
100% { opacity:0.5; }
}
</style>
@ -217,7 +204,7 @@
<link rel="stylesheet" type="text/css" href="../../../apps/documenteditor/main/resources/css/app.css">
</head>
<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>
<script>

26
apps/presentationeditor/main/index.html
View file

@ -17,7 +17,7 @@
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
background-color: #e2e2e2;
z-index: 1001;
}
@ -30,6 +30,7 @@
.loadmask > .brendpanel > div {
display: flex;
align-items: center;
height: 28px;
}
.loadmask > .brendpanel .loading-logo {
@ -49,15 +50,6 @@
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 {
vertical-align: middle;
width: 50px;
@ -68,8 +60,8 @@
}
.loadmask > .sktoolbar {
background: #fafafa;
border-bottom: 1px solid #e2e2e2;
background: #f1f1f1;
border-bottom: 1px solid #cbcbcb;
height: 46px;
padding: 10px 12px;
box-sizing: content-box;
@ -167,22 +159,22 @@
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
</style>
@ -245,7 +237,7 @@
<body>
<div id="loading-mask" class="loadmask">
<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 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>

26
apps/presentationeditor/main/index.html.deploy
View file

@ -19,7 +19,7 @@
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
background-color: #e2e2e2;
z-index: 1001;
}
@ -32,6 +32,7 @@
.loadmask > .brendpanel > div {
display: flex;
align-items: center;
height: 28px;
}
.loadmask > .brendpanel .loading-logo {
@ -51,15 +52,6 @@
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 {
vertical-align: middle;
width: 50px;
@ -70,8 +62,8 @@
}
.loadmask > .sktoolbar {
background: #fafafa;
border-bottom: 1px solid #e2e2e2;
background: #f1f1f1;
border-bottom: 1px solid #cbcbcb;
height: 46px;
padding: 10px 12px;
box-sizing: content-box;
@ -169,22 +161,22 @@
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
</style>
@ -251,7 +243,7 @@
<body>
<div id="loading-mask" class="loadmask">
<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 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>

22
apps/spreadsheeteditor/main/index.html
View file

@ -29,6 +29,7 @@
.loadmask > .brendpanel > div {
display: flex;
align-items: center;
height: 28px;
}
.loadmask > .brendpanel .loading-logo {
@ -48,15 +49,6 @@
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 {
vertical-align: middle;
width: 50px;
@ -67,7 +59,7 @@
}
.loadmask > .sktoolbar {
background: #fafafa;
background: #f1f1f1;
height: 46px;
padding: 10px 12px;
box-sizing: content-box;
@ -135,22 +127,22 @@
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
</style>
@ -216,7 +208,7 @@
<div id="loading-mask" class="loadmask">
<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 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 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>

22
apps/spreadsheeteditor/main/index.html.deploy
View file

@ -31,6 +31,7 @@
.loadmask > .brendpanel > div {
display: flex;
align-items: center;
height: 28px;
}
.loadmask > .brendpanel .loading-logo {
@ -50,15 +51,6 @@
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 {
vertical-align: middle;
width: 50px;
@ -69,7 +61,7 @@
}
.loadmask > .sktoolbar {
background: #fafafa;
background: #f1f1f1;
height: 46px;
padding: 10px 12px;
box-sizing: content-box;
@ -137,22 +129,22 @@
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
50% { opacity:0.5; }
100% { opacity:1; }
}
</style>
@ -221,7 +213,7 @@
<div id="loading-mask" class="loadmask">
<div class="brendpanel"><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 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>