From 6b993485e21580fec2fd35a4e901d1f5bdd7ec6e Mon Sep 17 00:00:00 2001 From: Alexander Yuzhin Date: Mon, 21 Oct 2019 16:58:34 +0300 Subject: [PATCH] [DE][SSE][PE] Skeleton improvement --- apps/documenteditor/main/index.html | 34 ++++++--------- apps/documenteditor/main/index.html.deploy | 41 +++++++------------ apps/presentationeditor/main/index.html | 26 ++++-------- .../presentationeditor/main/index.html.deploy | 26 ++++-------- apps/spreadsheeteditor/main/index.html | 22 ++++------ apps/spreadsheeteditor/main/index.html.deploy | 22 ++++------ 6 files changed, 59 insertions(+), 112 deletions(-) diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html index 41d1ff210..48fe2d650 100644 --- a/apps/documenteditor/main/index.html +++ b/apps/documenteditor/main/index.html @@ -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; } } @@ -217,7 +209,7 @@
-
+
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy index b83e79fed..ee8e63733 100644 --- a/apps/documenteditor/main/index.html.deploy +++ b/apps/documenteditor/main/index.html.deploy @@ -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; } } @@ -217,7 +204,7 @@ -
+