deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Book Pauk
2023-01-11 18:26:52 +07:00
parent ec8fedc73d
commit 273ab4ae60
2 changed files with 29 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/components/App.vue
View File

@@ -53,7 +53,7 @@ class App {
if (darkMode !== value) { if (darkMode !== value) {
const vars = [ const vars = [
'--bg-app-color', '--text-app-color', '--text-anchor-color', '--bg-app-color', '--text-app-color', '--text-anchor-color',
'--bg-loader-color', '--bg-input-color', '--bg-btn-color1', '--bg-loader-color', '--bg-input-color', '--bg-btn-color1', '--bg-btn-color2',
'--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-normal', '--bg-tb-normal', '--bg-tb-hover',
@@ -245,7 +245,8 @@ export default vueComponent(App);
--text-anchor-color: #00f; --text-anchor-color: #00f;
--bg-loader-color: #ebe2c9; --bg-loader-color: #ebe2c9;
--bg-input-color: #eee; --bg-input-color: #eee;
--bg-btn-color1: #1976d2;/* primary */ --bg-btn-color1: #1976d2;
--bg-btn-color2: #eee;
--bg-header-color1: #007000; --bg-header-color1: #007000;
--bg-header-color2: #59b04f; --bg-header-color2: #59b04f;
--bg-header-color3: #bbdefb; --bg-header-color3: #bbdefb;
@@ -271,7 +272,8 @@ export default vueComponent(App);
--text-anchor-color-light: #00f; --text-anchor-color-light: #00f;
--bg-loader-color-light: #ebe2c9; --bg-loader-color-light: #ebe2c9;
--bg-input-color-light: #eee; --bg-input-color-light: #eee;
--bg-btn-color1-light: #1976d2;/* primary */ --bg-btn-color1-light: #1976d2;
--bg-btn-color2-light: #eee;
--bg-header-color1-light: #007000; --bg-header-color1-light: #007000;
--bg-header-color2-light: #59b04f; --bg-header-color2-light: #59b04f;
--bg-header-color3-light: #bbdefb; --bg-header-color3-light: #bbdefb;
@@ -297,7 +299,8 @@ export default vueComponent(App);
--text-anchor-color-dark: #09f; --text-anchor-color-dark: #09f;
--bg-loader-color-dark: #222; --bg-loader-color-dark: #222;
--bg-input-color-dark: #333; --bg-input-color-dark: #333;
--bg-btn-color1-dark: #00695c;/* teal-9 */ --bg-btn-color1-dark: #00695c;
--bg-btn-color2-dark: #333;
--bg-header-color1-dark: #004000; --bg-header-color1-dark: #004000;
--bg-header-color2-dark: #29901f; --bg-header-color2-dark: #29901f;
--bg-header-color3-dark: #335673; --bg-header-color3-dark: #335673;
@@ -314,8 +317,8 @@ export default vueComponent(App);
--text-tb-disabled-dark: #d3d3d3; --text-tb-disabled-dark: #d3d3d3;
--bg-tb-disabled-dark: #808080; --bg-tb-disabled-dark: #808080;
--bg-selected-item-color1-dark: #406040; --bg-selected-item-color1-dark: #605020;
--bg-selected-item-color2-dark: #304530; --bg-selected-item-color2-dark: #403010;
} }
a { a {
@@ -338,6 +341,10 @@ a {
background-color: var(--bg-btn-color1); background-color: var(--bg-btn-color1);
} }
.bg-btn2 {
background-color: var(--bg-btn-color2);
}
.bg-menu-1 { .bg-menu-1 {
background-color: var(--bg-menu-color1); background-color: var(--bg-menu-color1);
} }

29
client/components/Reader/RecentBooksPage/RecentBooksPage.vue
View File

@@ -36,29 +36,29 @@
<a ref="download" style="display: none;" target="_blank"></a> <a ref="download" style="display: none;" target="_blank"></a>
<div id="vs-container" ref="vsContainer" class="recent-books-scroll col"> <div id="vs-container" ref="vsContainer" class="recent-books-scroll col">
<div ref="header" class="scroll-header row bg-blue-2"> <div ref="header" class="scroll-header row bg-header-3">
<q-btn class="tool-button" round @click="showSameBookClick"> <q-btn class="tool-button" color="btn2" round @click="showSameBookClick">
<q-icon name="la la-caret-right" class="icon" :class="{'expanded-icon': showSameBook}" color="green-8" size="24px" /> <q-icon name="la la-caret-right" class="icon" :class="{'expanded-icon': showSameBook}" color="green-8" size="24px" />
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%"> <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
Показать/скрыть версии книг Показать/скрыть версии книг
</q-tooltip> </q-tooltip>
</q-btn> </q-btn>
<q-btn class="tool-button" round @click="scrollToBegin"> <q-btn class="tool-button" color="btn2" round @click="scrollToBegin">
<q-icon name="la la-arrow-up" color="green-8" size="24px" /> <q-icon name="la la-arrow-up" color="green-8" size="24px" />
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%"> <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
В начало списка В начало списка
</q-tooltip> </q-tooltip>
</q-btn> </q-btn>
<q-btn class="tool-button" round @click="scrollToEnd"> <q-btn class="tool-button" color="btn2" round @click="scrollToEnd">
<q-icon name="la la-arrow-down" color="green-8" size="24px" /> <q-icon name="la la-arrow-down" color="green-8" size="24px" />
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%"> <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
В конец списка В конец списка
</q-tooltip> </q-tooltip>
</q-btn> </q-btn>
<q-btn class="tool-button" round @click="scrollToActiveBook"> <q-btn class="tool-button" color="btn2" round @click="scrollToActiveBook">
<q-icon name="la la-location-arrow" color="green-8" size="24px" /> <q-icon name="la la-location-arrow" color="green-8" size="24px" />
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%"> <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
На текущую книгу На текущую книгу
@@ -71,7 +71,7 @@
class="q-ml-sm q-mt-xs" class="q-ml-sm q-mt-xs"
outlined dense outlined dense
style="width: 185px" style="width: 185px"
bg-color="white" bg-color="input"
placeholder="Найти" placeholder="Найти"
@click.stop @click.stop
> >
@@ -86,7 +86,7 @@
class="q-ml-sm q-mt-xs" class="q-ml-sm q-mt-xs"
:options="sortMethodOptions" :options="sortMethodOptions"
style="width: 180px" style="width: 180px"
bg-color="white" bg-color="input"
dropdown-icon="la la-angle-down la-sm" dropdown-icon="la la-angle-down la-sm"
outlined dense emit-value map-options display-value-sanitize options-sanitize outlined dense emit-value map-options display-value-sanitize options-sanitize
options-html display-value-html options-html display-value-html
@@ -140,7 +140,7 @@
class="col" style="border: 1px solid #cccccc; border-bottom: 0; padding: 4px; line-height: 140%;" class="col" style="border: 1px solid #cccccc; border-bottom: 0; padding: 4px; line-height: 140%;"
:style="{ 'width': (380 - 40*(+item.inGroup)) + 'px' }" :style="{ 'width': (380 - 40*(+item.inGroup)) + 'px' }"
> >
<div class="text-green-10" style="font-size: 80%"> <div :class="dark ? 'text-lime-4' : 'text-green-10'" style="font-size: 80%">
{{ item.desc.author }} {{ item.desc.author }}
</div> </div>
<div style="font-size: 75%"> <div style="font-size: 75%">
@@ -349,6 +349,10 @@ class RecentBooksPage {
return this.$store.state.config.bucEnabled && this.bucEnabled; return this.$store.state.config.bucEnabled && this.bucEnabled;
} }
get dark() {
return this.$store.state.reader.settings.nightMode;
}
async updateTableData() { async updateTableData() {
if (!this.inited) if (!this.inited)
return; return;
@@ -847,7 +851,7 @@ export default vueComponent(RecentBooksPage);
position: sticky; position: sticky;
z-index: 1; z-index: 1;
top: 0; top: 0;
border-bottom: 2px solid #aaaaaa; border-bottom: 2px solid var(--bg-menu-color2);
padding-left: 5px; padding-left: 5px;
} }
@@ -870,15 +874,15 @@ export default vueComponent(RecentBooksPage);
} }
.even { .even {
background-color: #f2f2f2; background-color: var(--bg-menu-color1);
} }
.active-book { .active-book {
background-color: #b0f0b0 !important; background-color: var(--bg-selected-item-color1) !important;
} }
.active-parent-book { .active-parent-book {
background-color: #ffbbbb !important; background-color: var(--bg-selected-item-color2) !important;
} }
.icon { .icon {
@@ -895,7 +899,6 @@ export default vueComponent(RecentBooksPage);
min-height: 30px; min-height: 30px;
height: 30px; height: 30px;
margin: 10px 6px 0px 3px; margin: 10px 6px 0px 3px;
background-color: white;
} }
.row-info-bottom { .row-info-bottom {