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

This commit is contained in:
Book Pauk
2023-01-11 14:33:16 +07:00
parent bf4f5bc88b
commit a89572f85f
2 changed files with 39 additions and 11 deletions

View File

@@ -53,6 +53,9 @@ class App {
'--bg-loader-color', '--bg-input-color', '--bg-btn-color1', '--bg-loader-color', '--bg-input-color', '--bg-btn-color1',
'--bg-header-color1', '--bg-header-color2', '--bg-header-color3', '--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-tb-normal', '--bg-tb-normal', '--bg-tb-hover',
'--text-tb-active', '--bg-tb-active', '--bg-tb-active-hover',
'--text-tb-disabled', '--bg-tb-disabled',
]; ];
let root = document.querySelector(':root'); let root = document.querySelector(':root');
@@ -235,6 +238,15 @@ export default vueComponent(App);
--bg-menu-color2: #e0e0e0; --bg-menu-color2: #e0e0e0;
--text-menu-color: #757575; --text-menu-color: #757575;
--text-tb-normal: #3e843e;
--bg-tb-normal: #e6edf4;
--bg-tb-hover: #fff;
--text-tb-active: #fff;
--bg-tb-active: #8ab45f;
--bg-tb-active-hover: #81c581;
--text-tb-disabled: #d3d3d3;
--bg-tb-disabled: #808080;
/* light */ /* light */
--bg-app-color-light: #fff; --bg-app-color-light: #fff;
--text-app-color-light: #000; --text-app-color-light: #000;
@@ -249,6 +261,15 @@ export default vueComponent(App);
--bg-menu-color2-light: #e0e0e0; --bg-menu-color2-light: #e0e0e0;
--text-menu-color-light: #757575; --text-menu-color-light: #757575;
--text-tb-normal-light: #3e843e;
--bg-tb-normal-light: #e6edf4;
--bg-tb-hover-light: #fff;
--text-tb-active-light: #fff;
--bg-tb-active-light: #8ab45f;
--bg-tb-active-hover-light: #81c581;
--text-tb-disabled-light: #d3d3d3;
--bg-tb-disabled-light: #808080;
/* dark */ /* dark */
--bg-app-color-dark: #222; --bg-app-color-dark: #222;
--text-app-color-dark: #ccc; --text-app-color-dark: #ccc;
@@ -263,6 +284,14 @@ export default vueComponent(App);
--bg-menu-color2-dark: #424242; --bg-menu-color2-dark: #424242;
--text-menu-color-dark: #858585; --text-menu-color-dark: #858585;
--text-tb-normal-dark: #3e843e;
--bg-tb-normal-dark: #c6cde4;
--bg-tb-hover-dark: #ddd;
--text-tb-active-dark: #ddd;
--bg-tb-active-dark: #7aa44f;
--bg-tb-active-hover-dark: #71b571;
--text-tb-disabled-dark: #d3d3d3;
--bg-tb-disabled-dark: #808080;
} }
a { a {

View File

@@ -1704,8 +1704,8 @@ export default vueComponent(Reader);
.tool-button { .tool-button {
margin: 0px 2px 7px 2px; margin: 0px 2px 7px 2px;
padding: 0; padding: 0;
color: #3E843E; color: var(--text-tb-normal);
background-color: #E6EDF4; background-color: var(--bg-tb-normal);
min-height: 38px; min-height: 38px;
min-width: 38px; min-width: 38px;
height: 38px; height: 38px;
@@ -1717,34 +1717,33 @@ export default vueComponent(Reader);
} }
.tool-button:hover { .tool-button:hover {
background-color: white; background-color: var(--bg-tb-hover);
cursor: pointer; cursor: pointer;
} }
.tool-button-active { .tool-button-active {
box-shadow: 0 0 0; box-shadow: 0 0 0;
color: white; color: var(--text-tb-active);
background-color: #8AB45F; background-color: var(--bg-tb-active);
position: relative; position: relative;
top: 1px; top: 1px;
left: 1px; left: 1px;
} }
.tool-button-active:hover { .tool-button-active:hover {
color: white; background-color: var(--bg-tb-active-hover);
background-color: #81C581;
cursor: pointer; cursor: pointer;
} }
.tool-button-disabled { .tool-button-disabled {
color: lightgray; color: var(--text-tb-disabled);
background-color: gray; background-color: var(--bg-tb-disabled);
cursor: default; cursor: default;
} }
.tool-button-disabled:hover { .tool-button-disabled:hover {
color: lightgray; color: var(--text-tb-disabled);
background-color: gray; background-color: var(--bg-tb-disabled);
cursor: default; cursor: default;
} }