From bf4f5bc88b294d41d8460bd71f80353e7212f812 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Wed, 11 Jan 2023 14:07:08 +0700
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20=D0=BD?=
 =?UTF-8?q?=D0=B0=D0=B4=20=D0=BD=D0=BE=D1=87=D0=BD=D1=8B=D0=BC=20=D1=80?=
 =?UTF-8?q?=D0=B5=D0=B6=D0=B8=D0=BC=D0=BE=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/App.vue                     | 61 +++++++++++++++----
 .../CommonHelpPage/CommonHelpPage.vue         |  2 +-
 .../components/Reader/HelpPage/HelpPage.vue   | 12 ++--
 .../VersionHistoryPage/VersionHistoryPage.vue |  2 +-
 .../KeysTab/UserHotKeys/UserHotKeys.vue       | 10 +--
 client/components/share/Window.vue            |  2 +-
 6 files changed, 63 insertions(+), 26 deletions(-)

diff --git a/client/components/App.vue b/client/components/App.vue
index 99a67067..5d94642f 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -50,8 +50,9 @@ class App {
             if (darkMode !== value) {
                 const vars = [
                     '--bg-app-color', '--text-app-color', '--text-anchor-color',
-                    '--bg-loader-color', '--bg-input-color', '--bg-btn1-color',
-                    '--bg-header1-color', '--bg-header2-color',
+                    '--bg-loader-color', '--bg-input-color', '--bg-btn-color1',
+                    '--bg-header-color1', '--bg-header-color2', '--bg-header-color3',
+                    '--bg-menu-color1', '--bg-menu-color2', '--text-menu-color',
                 ];
 
                 let root = document.querySelector(':root');
@@ -226,9 +227,13 @@ export default vueComponent(App);
     --text-anchor-color: #00f;
     --bg-loader-color: #ebe2c9;
     --bg-input-color: #fff;
-    --bg-btn1-color: #1976d2;/* primary */
-    --bg-header1-color: #007000;
-    --bg-header2-color: #59B04F;
+    --bg-btn-color1: #1976d2;/* primary */
+    --bg-header-color1: #007000;
+    --bg-header-color2: #59b04f;
+    --bg-header-color3: #bbdefb;
+    --bg-menu-color1: #eee;
+    --bg-menu-color2: #e0e0e0;
+    --text-menu-color: #757575;
 
     /* light */
     --bg-app-color-light: #fff;
@@ -236,9 +241,13 @@ export default vueComponent(App);
     --text-anchor-color-light: #00f;
     --bg-loader-color-light: #ebe2c9;
     --bg-input-color-light: #fff;
-    --bg-btn1-color-light: #1976d2;/* primary */
-    --bg-header1-color-light: #007000;
-    --bg-header2-color-light: #59B04F;
+    --bg-btn-color1-light: #1976d2;/* primary */
+    --bg-header-color1-light: #007000;
+    --bg-header-color2-light: #59b04f;
+    --bg-header-color3-light: #bbdefb;
+    --bg-menu-color1-light: #eee;
+    --bg-menu-color2-light: #e0e0e0;
+    --text-menu-color-light: #757575;
 
     /* dark */
     --bg-app-color-dark: #222;
@@ -246,9 +255,13 @@ export default vueComponent(App);
     --text-anchor-color-dark: #09f;
     --bg-loader-color-dark: #222;
     --bg-input-color-dark: #333;
-    --bg-btn1-color-dark: #00695c;/* teal-9 */
-    --bg-header1-color-dark: #004000;
-    --bg-header2-color-dark: #29901F;
+    --bg-btn-color1-dark: #00695c;/* teal-9 */
+    --bg-header-color1-dark: #004000;
+    --bg-header-color2-dark: #29901f;
+    --bg-header-color3-dark: #335673;
+    --bg-menu-color1-dark: #333;
+    --bg-menu-color2-dark: #424242;
+    --text-menu-color-dark: #858585;
     
 }
 
@@ -256,12 +269,36 @@ a {
     color: var(--text-anchor-color);
 }
 
+.bg-app, .text-bg-app {
+    background-color: var(--bg-app-color);
+}
+
+.text-app {
+    color: var(--text-app-color);
+}
+
 .bg-input {
     background-color: var(--bg-input-color);
 }
 
 .bg-btn1 {
-    background-color: var(--bg-btn1-color);
+    background-color: var(--bg-btn-color1);
+}
+
+.bg-menu-1 {
+    background-color: var(--bg-menu-color1);
+}
+
+.bg-menu-2 {
+    background-color: var(--bg-menu-color2);
+}
+
+.text-menu {
+    color: var(--text-menu-color);
+}
+
+.bg-header-3 {
+    background-color: var(--bg-header-color3);
 }
 
 /* main section */
diff --git a/client/components/Reader/HelpPage/CommonHelpPage/CommonHelpPage.vue b/client/components/Reader/HelpPage/CommonHelpPage/CommonHelpPage.vue
index bff9389a..6af1a1be 100644
--- a/client/components/Reader/HelpPage/CommonHelpPage/CommonHelpPage.vue
+++ b/client/components/Reader/HelpPage/CommonHelpPage/CommonHelpPage.vue
@@ -88,6 +88,6 @@ export default vueComponent(CommonHelpPage);
     margin-left: 10px;
     cursor: pointer;
     font-size: 120%;
-    color: blue;
+    color: var(--text-anchor-color);
 }
 </style>
diff --git a/client/components/Reader/HelpPage/HelpPage.vue b/client/components/Reader/HelpPage/HelpPage.vue
index 71b6b18c..b9555903 100644
--- a/client/components/Reader/HelpPage/HelpPage.vue
+++ b/client/components/Reader/HelpPage/HelpPage.vue
@@ -1,20 +1,20 @@
 <template>
-    <Window @close="close" style="z-index: 200">
+    <Window style="z-index: 200" @close="close">
         <template #header>
             Справка
         </template>
 
         <div class="col column" style="min-width: 600px">
-            <div class="bg-grey-3 row">
+            <div class="bg-menu-1 row">
                 <q-tabs
                     v-model="selectedTab"
-                    active-color="black"
-                    active-bg-color="white"
-                    indicator-color="white"
+                    active-color="app"
+                    active-bg-color="app"
+                    indicator-color="bg-app"
                     dense
                     no-caps
                     inline-label
-                    class="bg-grey-4 text-grey-7"
+                    class="bg-menu-2 text-menu"
                 >
                     <q-tab v-for="btn in buttons" :key="btn.value" :name="btn.value" :label="btn.label" />
                 </q-tabs>
diff --git a/client/components/Reader/HelpPage/VersionHistoryPage/VersionHistoryPage.vue b/client/components/Reader/HelpPage/VersionHistoryPage/VersionHistoryPage.vue
index 7fd4876f..1237469c 100644
--- a/client/components/Reader/HelpPage/VersionHistoryPage/VersionHistoryPage.vue
+++ b/client/components/Reader/HelpPage/VersionHistoryPage/VersionHistoryPage.vue
@@ -72,7 +72,7 @@ p {
 }
 
 .clickable {
-    color: blue;
+    color: var(--text-anchor-color);
     text-decoration: underline;
     cursor: pointer;
 }
diff --git a/client/components/Reader/SettingsPage/KeysTab/UserHotKeys/UserHotKeys.vue b/client/components/Reader/SettingsPage/KeysTab/UserHotKeys/UserHotKeys.vue
index 876766e7..593c2288 100644
--- a/client/components/Reader/SettingsPage/KeysTab/UserHotKeys/UserHotKeys.vue
+++ b/client/components/Reader/SettingsPage/KeysTab/UserHotKeys/UserHotKeys.vue
@@ -2,10 +2,10 @@
     <div class="table col column no-wrap">
         <!-- header -->
         <div class="table-row row">
-            <div class="desc q-pa-sm bg-blue-2">
+            <div class="desc q-pa-sm bg-header-3">
                 Команда
             </div>
-            <div class="hotKeys col q-pa-sm bg-blue-2 row no-wrap">
+            <div class="hotKeys col q-pa-sm bg-header-3 row no-wrap">
                 <div style="width: 80px">
                     Сочетание клавиш
                 </div>
@@ -14,7 +14,7 @@
                     v-model="search"
                     class="q-ml-sm col"
                     outlined dense
-                    bg-color="grey-4"
+                    bg-color="input"
                     placeholder="Найти"                    
                     @click.stop
                 />
@@ -234,11 +234,11 @@ export default vueComponent(UserHotKeys);
 }
 
 .table-row:nth-child(even) {
-    background-color: #f7f7f7;
+    background-color: var(--bg-menu-color1);
 }
 
 .table-row:hover {
-    background-color: #f0f0f0;
+    background-color: var(--bg-menu-color2);
 }
 
 .desc {
diff --git a/client/components/share/Window.vue b/client/components/share/Window.vue
index a1c15fef..82a61651 100644
--- a/client/components/share/Window.vue
+++ b/client/components/share/Window.vue
@@ -155,7 +155,7 @@ export default vueComponent(Window);
 }
 
 .header {
-    background: linear-gradient(to bottom right, var(--bg-header1-color), var(--bg-header2-color));
+    background: linear-gradient(to bottom right, var(--bg-header-color1), var(--bg-header-color2));
     align-items: center;
     height: 30px;
 }