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

client/components/App.vue

@@ -55,7 +55,7 @@ class App {
                     '--bg-app-color', '--text-app-color', '--bg-dialog-color', '--text-anchor-color',
                     '--bg-loader-color', '--bg-input-color', '--bg-btn-color1', '--bg-btn-color2',
                     '--bg-header-color1', '--bg-header-color2', '--bg-header-color3',
-                    '--bg-menu-color1', '--bg-menu-color2', '--text-menu-color',
+                    '--bg-menu-color1', '--bg-menu-color2', '--text-menu-color', '--text-ubtn-color',
                     '--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',
@@ -254,6 +254,7 @@ export default vueComponent(App);
     --bg-menu-color1: #eee;
     --bg-menu-color2: #e0e0e0;
     --text-menu-color: #757575;
+    --text-ubtn-color: #bbb;
 
     --text-tb-normal: #3e843e;
     --bg-tb-normal: #e6edf4;
@@ -282,6 +283,7 @@ export default vueComponent(App);
     --bg-menu-color1-light: #eee;
     --bg-menu-color2-light: #e0e0e0;
     --text-menu-color-light: #757575;
+    --text-ubtn-color-light: #bbb;
 
     --text-tb-normal-light: #3e843e;
     --bg-tb-normal-light: #e6edf4;
@@ -310,6 +312,7 @@ export default vueComponent(App);
     --bg-menu-color1-dark: #333;
     --bg-menu-color2-dark: #424242;
     --text-menu-color-dark: #858585;
+    --text-ubtn-color-dark: #555;
     
     --text-tb-normal-dark: #3e843e;
     --bg-tb-normal-dark: #c6cde4;

client/components/Reader/SettingsPage/PageMoveTab/PageMoveTab.vue

@@ -10,7 +10,7 @@
                 Тип
             </div>
             <q-select
-                v-model="form.pageChangeAnimation" class="col-left" :options="pageChangeAnimationOptions"
+                v-model="form.pageChangeAnimation" bg-color="input" class="col-left" :options="pageChangeAnimationOptions"
                 dropdown-icon="la la-angle-down la-sm"
                 outlined dense emit-value map-options
             />
@@ -20,7 +20,7 @@
             <div class="sets-label label">
                 Скорость
             </div>
-            <NumInput v-model="form.pageChangeAnimationSpeed" class="col-left" :min="0" :max="100" :disable="form.pageChangeAnimation == ''" />
+            <NumInput v-model="form.pageChangeAnimationSpeed" bg-color="input" class="col-left" :min="0" :max="100" :disable="form.pageChangeAnimation == ''" />
         </div>
 
         <!---------------------------------------------->

client/components/share/NumInput.vue

@@ -4,9 +4,9 @@
         outlined dense
         input-style="text-align: center"
         class="no-mp"
-        :class="(error ? 'error' : '')"
         :disable="disable"
         :mask="mask"
+        :error="error"
     >
         <slot></slot>
         <template #prepend>
@@ -236,23 +236,16 @@ export default vueComponent(NumInput);
     border-radius: 15px;
     width: 30px;
     height: 30px;
-    color: #bbb;
+    color: var(--text-ubtn-color);
     cursor: pointer;
 }
 
 .button:hover {
-    color: #616161;
-    background-color: #efebe9;
-}
-
-.error {
-    background-color: #ffabab;
-    border-radius: 3px;
+    filter: invert(100%);
 }
 
 .disable, .disable:hover {
     cursor: not-allowed;
-    color: #bbb;
-    background-color: white;
+    filter: invert(0%);
 }
 </style>

client/components/share/StdDialog.vue

@@ -3,7 +3,7 @@
         <slot></slot>
 
         <!--------------------------------------------------->
-        <div v-show="type == 'alert'" class="bg-white no-wrap">
+        <div v-show="type == 'alert'" class="bg-dialog no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
                     <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
@@ -28,7 +28,7 @@
         </div>
 
         <!--------------------------------------------------->
-        <div v-show="type == 'confirm'" class="bg-white no-wrap">
+        <div v-show="type == 'confirm'" class="bg-dialog no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
                     <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
@@ -56,7 +56,7 @@
         </div>
 
         <!--------------------------------------------------->
-        <div v-show="type == 'askYesNo'" class="bg-white no-wrap">
+        <div v-show="type == 'askYesNo'" class="bg-dialog no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
                     <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
@@ -84,7 +84,7 @@
         </div>
 
         <!--------------------------------------------------->
-        <div v-show="type == 'prompt'" class="bg-white no-wrap">
+        <div v-show="type == 'prompt'" class="bg-dialog no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
                     <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
@@ -116,7 +116,7 @@
         </div>
 
         <!--------------------------------------------------->
-        <div v-show="type == 'hotKey'" class="bg-white no-wrap">
+        <div v-show="type == 'hotKey'" class="bg-dialog no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
                     <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>