Работа над ночным режимом

client/components/App.vue

@@ -59,6 +59,7 @@ class App {
                     '--text-tb-normal', '--bg-tb-normal', '--bg-tb-hover',
                     '--text-tb-active', '--bg-tb-active', '--bg-tb-active-hover',
                     '--text-tb-disabled', '--bg-tb-disabled',
+                    '--bg-selected-item-color1', '--bg-selected-item-color2',
                 ];
 
                 let root = document.querySelector(':root');
@@ -261,6 +262,9 @@ export default vueComponent(App);
     --text-tb-disabled: #d3d3d3;
     --bg-tb-disabled: #808080;
 
+    --bg-selected-item-color1: #b0f0b0;
+    --bg-selected-item-color2: #d0f5d0;
+
     /* light */
     --bg-app-color-light: #fff;
     --text-app-color-light: #000;
@@ -284,6 +288,9 @@ export default vueComponent(App);
     --text-tb-disabled-light: #d3d3d3;
     --bg-tb-disabled-light: #808080;
 
+    --bg-selected-item-color1-light: #b0f0b0;
+    --bg-selected-item-color2-light: #d0f5d0;
+
     /* dark */
     --bg-app-color-dark: #222;
     --text-app-color-dark: #ccc;
@@ -306,6 +313,9 @@ export default vueComponent(App);
     --bg-tb-active-hover-dark: #71b571;
     --text-tb-disabled-dark: #d3d3d3;
     --bg-tb-disabled-dark: #808080;
+
+    --bg-selected-item-color1-dark: #406040;
+    --bg-selected-item-color2-dark: #304530;
 }
 
 a {

client/components/Reader/ContentsPage/ContentsPage.vue

@@ -4,20 +4,20 @@
             Оглавление/закладки
         </template>
 
-        <div class="bg-grey-3 row">
+        <div class="bg-menu-1 row">
             <q-tabs
                 v-model="selectedTab"
-                active-color="black"
+                active-color="app"
-                active-bg-color="white"
+                active-bg-color="app"
-                indicator-color="white"
+                indicator-color="bg-app"
                 dense
                 no-caps
                 inline-label
-                class="no-mp bg-grey-4 text-grey-7"
+                class="no-mp bg-menu-2 text-menu"
             >
                 <q-tab name="contents" icon="la la-list" label="Оглавление" />
                 <q-tab name="images" icon="la la-image" label="Изображения" />
-                <q-tab name="bookmarks" icon="la la-bookmark" label="Закладки" />
+                <!--q-tab name="bookmarks" icon="la la-bookmark" label="Закладки" /-->
             </q-tabs>
         </div>
 
@@ -80,13 +80,13 @@
                                 <div class="image-num">
                                     {{ item.num }}
                                 </div>
-                                <div v-show="item.type == 'image/jpeg'" class="image-type it-jpg-color row justify-center">
+                                <div v-show="item.type == 'image/jpeg'" class="image-type text-black it-jpg-color row justify-center">
                                     JPG
                                 </div>
-                                <div v-show="item.type == 'image/png'" class="image-type it-png-color row justify-center">
+                                <div v-show="item.type == 'image/png'" class="image-type text-black it-png-color row justify-center">
                                     PNG
                                 </div>
-                                <div v-show="!item.local" class="image-type it-net-color row justify-center">
+                                <div v-show="!item.local" class="image-type text-black it-net-color row justify-center">
                                     INET
                                 </div>
                             </div>
@@ -250,7 +250,7 @@ class ContentsPage {
             const bin = parsed.binary[image.id];
             const type = (bin ? bin.type : '');
             
-            const label = (image.alt ? image.alt : '<span style="font-size: 90%; color: #dddddd"><i>Без названия</i></span>');
+            const label = (image.alt ? image.alt : '<span style="font-size: 90%; color: var(--bg-menu-color2)"><i>Без названия</i></span>');
             const indentStyle = getIndentStyle(1);
             const labelStyle = getLabelStyle(1);
 
@@ -466,27 +466,31 @@ export default vueComponent(ContentsPage);
 }
 
 .item, .subitem, .item-book-pos, .subitem-book-pos {
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--bg-menu-color2);
 }
 
 .item:hover, .subitem:hover {
-    background-color: #f0f0f0;
+    background-color: var(--bg-menu-color2);
 }
 
 .item-book-pos {
-    background-color: #b0f0b0;
+    opacity: 1;
+    background-color: var(--bg-selected-item-color1);
 }
 
 .subitem-book-pos {
-    background-color: #d0f5d0;
+    opacity: 1;
+    background-color: var(--bg-selected-item-color2);
 }
 
 .item-book-pos:hover {
-    background-color: #b0e0b0;
+    opacity: 0.8;
+    transition: opacity 0.2s linear;
 }
 
 .subitem-book-pos:hover {
-    background-color: #d0f0d0;
+    opacity: 0.8;
+    transition: opacity 0.2s linear;
 }
 
 .expand-button, .no-expand-button {

client/components/Reader/Reader.vue

@@ -470,10 +470,7 @@ class Reader {
         this.allowUrlParamBookPos = settings.allowUrlParamBookPos;
         this.copyFullText = settings.copyFullText;
         this.showClickMapPage = settings.showClickMapPage;
-
-        //dark mode
         this.nightModeActive = settings.nightMode;
-
         this.clickControlActive = settings.clickControl;
         this.blinkCachedLoad = settings.blinkCachedLoad;
         this.showToolButton = settings.showToolButton;