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-10 21:06:54 +07:00
parent c0aec66f0f
commit 7b1d0bb778
2 changed files with 16 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/components/App.vue
View File

@@ -48,7 +48,7 @@ class App {
let darkMode = null;
this.$root.setDarkMode = (value) => {
if (darkMode !== value) {
const vars = ['--app-bg-color', '--app-text-color'];
const vars = ['--app-bg-color', '--app-text-color', '--bg-input-color'];
let root = document.querySelector(':root');
let cs = getComputedStyle(root);
@@ -218,14 +218,21 @@ export default vueComponent(App);
/* current */
--app-bg-color: #fff;
--app-text-color: #000;
--bg-input-color: #fff;
/* light */
--app-bg-color-light: #ebe2c9;
--app-text-color-light: #000;
--bg-input-color-light: #fff;
/* dark */
--app-bg-color-dark: #222;
--app-text-color-dark: #bbb;
--bg-input-color-dark: #333;
}
.bg-input {
background-color: var(--bg-input-color);
}
body, html, #app {

24
client/components/Reader/LoaderPage/LoaderPage.vue
View File

@@ -14,7 +14,7 @@
<div class="col-auto column justify-start items-center no-wrap overflow-hidden">
<q-input
ref="input" v-model="bookUrl" class="full-width q-px-sm" style="max-width: 700px"
outlined dense :bg-color="dark ? 'grey-9' : 'white'" placeholder="Ссылка на книгу или веб-страницу" @keydown="onInputKeydown"
outlined dense bg-color="input" placeholder="Ссылка на книгу или веб-страницу" @keydown="onInputKeydown"
>
<template #append>
<q-btn rounded flat style="width: 40px" icon="la la-check" @click="submitUrl" />
@@ -29,13 +29,13 @@
/>
<div class="q-my-sm"></div>
<q-btn no-caps dense class="q-px-sm" :color="dark ? 'teal-9' : 'primary'" size="13px" @click="loadFileClick">
<q-btn no-caps dense class="q-px-sm" size="13px" @click="loadFileClick">
<q-icon class="q-mr-xs" name="la la-caret-square-up" size="24px" />
Загрузить файл с диска
</q-btn>
<div class="q-my-sm"></div>
<q-btn no-caps dense class="q-px-sm" :color="dark ? 'teal-9' : 'primary'" size="13px" @click="loadBufferClick">
<q-btn no-caps dense class="q-px-sm" size="13px" @click="loadBufferClick">
<q-icon class="q-mr-xs" name="la la-comment" size="24px" />
Из буфера обмена
</q-btn>
@@ -50,13 +50,13 @@
</div>
</div>
<div class="q-my-sm"></div-->
<span v-if="mode == 'omnireader'" class="bottom-span clickable" :class="{'clickable-dark': dark}" @click="openComments">Отзывы о читалке</span>
<span v-if="mode == 'omnireader'" class="bottom-span clickable" :class="{'clickable-dark': dark}" @click="openOldVersion">Старая версия</span>
<span v-if="mode == 'omnireader'" class="bottom-span clickable" @click="openComments">Отзывы о читалке</span>
<span v-if="mode == 'omnireader'" class="bottom-span clickable" @click="openOldVersion">Старая версия</span>
</div>
<div class="col column justify-end items-center no-wrap overflow-hidden">
<span class="bottom-span clickable" :class="{'clickable-dark': dark}" @click="openHelp">Справка</span>
<span class="bottom-span clickable" :class="{'clickable-dark': dark}" @click="openDonate">Помочь проекту</span>
<span class="bottom-span clickable" @click="openHelp">Справка</span>
<span class="bottom-span clickable" @click="openDonate">Помочь проекту</span>
<span v-if="version == clientVersion" class="bottom-span">v{{ version }}</span>
<span v-else class="bottom-span">Версия сервера {{ version }}, версия клиента {{ clientVersion }}, необходимо обновить страницу</span>
@@ -134,10 +134,6 @@ class LoaderPage {
return versionHistory[0].version;
}
get dark() {
return this.$store.state.reader.settings.nightMode;
}
submitUrl() {
if (this.bookUrl) {
this.$emit('load-book', {url: this.bookUrl, force: true});
@@ -220,16 +216,12 @@ export default vueComponent(LoaderPage);
line-height: 160%;
}
.clickable, .clickable-dark {
.clickable {
color: blue;
text-decoration: underline;
cursor: pointer;
}
.clickable-dark {
color: #aaf;
}
.bottom-span {
font-size: 70%;
margin-bottom: 10px;