From f5674d8b9ce57b61cde538978e3f1322d45edbee Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Thu, 23 Sep 2021 12:20:26 +0300
Subject: [PATCH] [DE mobile] refactoring

---
 .../common/mobile/resources/less/skeleton.css | 99 +++++++++++++++++++
 apps/documenteditor/mobile/src/index_dev.html | 99 +------------------
 2 files changed, 101 insertions(+), 97 deletions(-)
 create mode 100644 apps/common/mobile/resources/less/skeleton.css

diff --git a/apps/common/mobile/resources/less/skeleton.css b/apps/common/mobile/resources/less/skeleton.css
new file mode 100644
index 000000000..69361779e
--- /dev/null
+++ b/apps/common/mobile/resources/less/skeleton.css
@@ -0,0 +1,99 @@
+body {
+    margin: 0;
+}
+
+.skl-navbar {
+    --box-logo-height: 26px;
+    --skl-navbar-height: 44px;
+    --skl-pixel-ratio: 1;
+}
+
+.skl-navbar--md {
+    --skl-navbar-height: 56px;
+}
+
+.skl-pixel-ratio--2 {
+    --skl-pixel-ratio: 2;
+}
+
+.skl-navbar {
+    height: calc(var(--skl-navbar-height) + var(--box-logo-height));
+    width: 100%;
+    position: relative;
+}
+
+.skl-navbar.skl-navbar--md {
+    height: calc(56px + 26px);
+}
+
+.skl-navbar.skl-navbar--word {
+    background-color: #446995;
+}
+
+.skl-navbar.skl-navbar--cell {
+    background-color: #40865c;
+}
+
+.skl-navbar::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+}
+
+.skl-navbar:not(.skl-navbar--md)::before {
+    background-color: rgba(0,0,0,0.25);
+    display: block;
+    z-index: 15;
+    top: auto;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    transform-origin: 50% 100%;
+    transform: scaleY(calc(1 / var(--skl-pixel-ratio)));
+}
+
+.skl-navbar.skl-navbar--md::before {
+    right: 0;
+    width: 100%;
+    top: 100%;
+    bottom: auto;
+    height: 8px;
+    pointer-events: none;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%)
+}
+
+.skl-lines {
+    display: none;
+}
+
+.skl-line {
+    height: 15px;
+    margin: 30px;
+    background: #e2e2e2;
+    overflow: hidden;
+    position: relative;
+    -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+    animation: flickerAnimation 2s infinite ease-in-out;
+}
+
+@keyframes flickerAnimation {
+    0%   { opacity:0.1; }
+    50%  { opacity:1; }
+    100% { opacity:0.1; }
+}
+@-o-keyframes flickerAnimation{
+    0%   { opacity:0.1; }
+    50%  { opacity:1; }
+    100% { opacity:0.1; }
+}
+@-moz-keyframes flickerAnimation{
+    0%   { opacity:0.1; }
+    50%  { opacity:1; }
+    100% { opacity:0.1; }
+}
+@-webkit-keyframes flickerAnimation{
+    0%   { opacity:0.1; }
+    50%  { opacity:1; }
+    100% { opacity:0.1; }
+}
diff --git a/apps/documenteditor/mobile/src/index_dev.html b/apps/documenteditor/mobile/src/index_dev.html
index 9df63310f..c866a8a26 100644
--- a/apps/documenteditor/mobile/src/index_dev.html
+++ b/apps/documenteditor/mobile/src/index_dev.html
@@ -23,108 +23,13 @@
   <link rel="apple-touch-icon" href="static/icons/apple-touch-icon.png">
   <link rel="icon" href="static/icons/favicon.png">
 
-    <style type="text/css">
-        body {
-            /*background-color: red;*/
-            margin: 0;
-        }
+    <link rel="stylesheet" type="text/css" href="../../common/mobile/resources/less/skeleton.css">
 
-        .skl-navbar {
-            --box-logo-height: 26px;
-            --skl-navbar-height: 44px;
-            --skl-pixel-ratio: 1;
-        }
-
-        .skl-navbar--md {
-            --skl-navbar-height: 56px;
-        }
-
-        .skl-pixel-ratio--2 {
-            --skl-pixel-ratio: 2;
-        }
-
-        .skl-navbar {
-            height: calc(var(--skl-navbar-height) + var(--box-logo-height));
-            width: 100%;
-            /*background-color: #446995;*/
-            position: relative;
-        }
-
-        .skl-navbar.skl-navbar--md {
-            height: calc(56px + 26px);
-            background-color: #446995;
-        }
-
-        .skl-navbar::before {
-            content: '';
-            position: absolute;
-            width: 100%;
-        }
-
-        .skl-navbar:not(.skl-navbar--md)::before {
-            background-color: rgba(0,0,0,0.25);
-            display: block;
-            z-index: 15;
-            top: auto;
-            right: auto;
-            bottom: 0;
-            left: 0;
-            height: 1px;
-            transform-origin: 50% 100%;
-            transform: scaleY(calc(1 / var(--skl-pixel-ratio)));
-        }
-
-        .skl-navbar.skl-navbar--md::before {
-            right: 0;
-            width: 100%;
-            top: 100%;
-            bottom: auto;
-            height: 8px;
-            pointer-events: none;
-            background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%)
-        }
-
-        .skl-lines {
-            display: none;
-        }
-
-        .skl-line {
-            height: 15px;
-            margin: 30px;
-            background: #e2e2e2;
-            overflow: hidden;
-            position: relative;
-            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-            animation: flickerAnimation 2s infinite ease-in-out;
-        }
-
-        @keyframes flickerAnimation {
-            0%   { opacity:0.1; }
-            50%  { opacity:1; }
-            100% { opacity:0.1; }
-        }
-        @-o-keyframes flickerAnimation{
-            0%   { opacity:0.1; }
-            50%  { opacity:1; }
-            100% { opacity:0.1; }
-        }
-        @-moz-keyframes flickerAnimation{
-            0%   { opacity:0.1; }
-            50%  { opacity:1; }
-            100% { opacity:0.1; }
-        }
-        @-webkit-keyframes flickerAnimation{
-            0%   { opacity:0.1; }
-            50%  { opacity:1; }
-            100% { opacity:0.1; }
-        }
-    </style>
-  
   <!-- built styles file will be auto injected -->
 </head>
 <body>
     <section class="skl-container">
-        <div class="skl-navbar"></div>
+        <div class="skl-navbar skl-navbar--word"></div>
         <div class="skl-lines">
             <div class="skl-line"></div>
             <div class="skl-line"></div>