refactor: theme options, includes fix bg on firefox with dialog (#3247)
Co-authored-by: dni ⚡ <office@dnilabs.com>
This commit is contained in:
Arc
dni ⚡
parent
6563610b6c
commit
b0d0901969
13 changed files with 424 additions and 937 deletions
|
|
@ -368,89 +368,89 @@
|
|||
</div>
|
||||
<div class="col-8">
|
||||
<q-btn
|
||||
v-if="g.allowedThemes.includes('classic')"
|
||||
v-if="allowedThemes.includes('classic')"
|
||||
dense
|
||||
flat
|
||||
@click="themeChoiceFunc('classic')"
|
||||
@click="changeTheme('classic')"
|
||||
icon="circle"
|
||||
color="deep-purple"
|
||||
size="md"
|
||||
><q-tooltip>classic</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="g.allowedThemes.includes('bitcoin')"
|
||||
v-if="allowedThemes.includes('bitcoin')"
|
||||
dense
|
||||
flat
|
||||
@click="themeChoiceFunc('bitcoin')"
|
||||
@click="changeTheme('bitcoin')"
|
||||
icon="circle"
|
||||
color="deep-orange"
|
||||
size="md"
|
||||
><q-tooltip>bitcoin</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="g.allowedThemes.includes('mint')"
|
||||
v-if="allowedThemes.includes('mint')"
|
||||
dense
|
||||
flat
|
||||
@click="themeChoiceFunc('mint')"
|
||||
@click="changeTheme('mint')"
|
||||
icon="circle"
|
||||
color="green"
|
||||
size="md"
|
||||
><q-tooltip>mint</q-tooltip> </q-btn
|
||||
><q-btn
|
||||
v-if="g.allowedThemes.includes('autumn')"
|
||||
v-if="allowedThemes.includes('autumn')"
|
||||
dense
|
||||
flat
|
||||
@click="themeChoiceFunc('autumn')"
|
||||
@click="changeTheme('autumn')"
|
||||
icon="circle"
|
||||
color="brown"
|
||||
size="md"
|
||||
><q-tooltip>autumn</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="g.allowedThemes.includes('monochrome')"
|
||||
v-if="allowedThemes.includes('monochrome')"
|
||||
dense
|
||||
flat
|
||||
@click="themeChoiceFunc('monochrome')"
|
||||
@click="changeTheme('monochrome')"
|
||||
icon="circle"
|
||||
color="grey"
|
||||
size="md"
|
||||
><q-tooltip>monochrome</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="g.allowedThemes.includes('salvador')"
|
||||
v-if="allowedThemes.includes('salvador')"
|
||||
dense
|
||||
flat
|
||||
@click="themeChoiceFunc('salvador')"
|
||||
@click="changeTheme('salvador')"
|
||||
icon="circle"
|
||||
color="blue-10"
|
||||
size="md"
|
||||
><q-tooltip>elSalvador</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="g.allowedThemes.includes('freedom')"
|
||||
v-if="allowedThemes.includes('freedom')"
|
||||
dense
|
||||
flat
|
||||
@click="themeChoiceFunc('freedom')"
|
||||
@click="changeTheme('freedom')"
|
||||
icon="circle"
|
||||
color="pink-13"
|
||||
size="md"
|
||||
><q-tooltip>freedom</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="g.allowedThemes.includes('cyber')"
|
||||
v-if="allowedThemes.includes('cyber')"
|
||||
dense
|
||||
flat
|
||||
@click="themeChoiceFunc('cyber')"
|
||||
@click="changeTheme('cyber')"
|
||||
icon="circle"
|
||||
color="light-green-9"
|
||||
size="md"
|
||||
><q-tooltip>cyber</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="g.allowedThemes.includes('flamingo')"
|
||||
v-if="allowedThemes.includes('flamingo')"
|
||||
dense
|
||||
flat
|
||||
@click="themeChoiceFunc('flamingo')"
|
||||
@click="changeTheme('flamingo')"
|
||||
icon="circle"
|
||||
color="pink-3"
|
||||
size="md"
|
||||
|
|
@ -464,9 +464,9 @@
|
|||
</div>
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
v-model="bgimageSelection"
|
||||
v-model="bgimageChoice"
|
||||
:label="$t('background_image')"
|
||||
@update:model-value="bgimageChoiceFunc"
|
||||
@update:model-value="applyBackgroundImage"
|
||||
>
|
||||
<q-tooltip
|
||||
><span v-text="$t('background_image')"></span
|
||||
|
|
@ -479,19 +479,18 @@
|
|||
<span v-text="$t('gradient_background')"></span>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<q-btn
|
||||
<q-toggle
|
||||
dense
|
||||
flat
|
||||
round
|
||||
@click="toggleGradient"
|
||||
icon="gradient"
|
||||
size="sm"
|
||||
v-model="gradientChoice"
|
||||
@update:model-value="applyGradient"
|
||||
>
|
||||
<q-tooltip
|
||||
><span v-text="$t('toggle_gradient')"></span
|
||||
></q-tooltip>
|
||||
</q-btn>
|
||||
</q-toggle>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -500,10 +499,11 @@
|
|||
<span v-text="$t('toggle_darkmode')"></span>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<q-btn
|
||||
<q-toggle
|
||||
dense
|
||||
flat
|
||||
round
|
||||
v-model="darkChoice"
|
||||
@click="toggleDarkMode"
|
||||
:icon="($q.dark.isActive) ? 'brightness_3' : 'wb_sunny'"
|
||||
size="sm"
|
||||
|
|
@ -511,7 +511,7 @@
|
|||
<q-tooltip
|
||||
><span v-text="$t('toggle_darkmode')"></span
|
||||
></q-tooltip>
|
||||
</q-btn>
|
||||
</q-toggle>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mb-md">
|
||||
|
|
@ -520,7 +520,7 @@
|
|||
</div>
|
||||
<div class="col-8">
|
||||
<q-select
|
||||
v-model="borderSelection"
|
||||
v-model="borderChoice"
|
||||
:options="borderOptions"
|
||||
label="Borders"
|
||||
@update:model-value="applyBorder"
|
||||
|
|
@ -548,7 +548,7 @@
|
|||
</div>
|
||||
<div class="col-8">
|
||||
<q-select
|
||||
v-model="reactionSelection"
|
||||
v-model="reactionChoice"
|
||||
:options="reactionOptions"
|
||||
label="Reactions"
|
||||
@update:model-value="reactionChoiceFunc"
|
||||
|
|
|
|||
2
lnbits/static/bundle.min.css
vendored
2
lnbits/static/bundle.min.css
vendored
File diff suppressed because one or more lines are too long
20
lnbits/static/bundle.min.js
vendored
20
lnbits/static/bundle.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,617 +1,200 @@
|
|||
body[data-theme=classic].body--light {
|
||||
background-color: #f4f4f4;
|
||||
body[data-theme=classic].neon-border .q-card,
|
||||
body[data-theme=classic].neon-border .q-card.q-card--dark,
|
||||
body[data-theme=classic].neon-border .q-date,
|
||||
body[data-theme=classic].neon-border .q-date--dark {
|
||||
border: 2px solid #673ab7;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body[data-theme=classic].body--light {
|
||||
background-color: #f4f4f4;
|
||||
body[data-theme=bitcoin].neon-border .q-card,
|
||||
body[data-theme=bitcoin].neon-border .q-card.q-card--dark,
|
||||
body[data-theme=bitcoin].neon-border .q-date,
|
||||
body[data-theme=bitcoin].neon-border .q-date--dark {
|
||||
border: 2px solid #ea611d;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme=classic] .q-drawer--dark,
|
||||
body[data-theme=classic].body--dark,
|
||||
[data-theme=classic] .q-menu--dark {
|
||||
background: #1f2234 !important;
|
||||
body[data-theme=freedom].neon-border .q-card,
|
||||
body[data-theme=freedom].neon-border .q-card.q-card--dark,
|
||||
body[data-theme=freedom].neon-border .q-date,
|
||||
body[data-theme=freedom].neon-border .q-date--dark {
|
||||
border: 2px solid #e22156;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
|
||||
// set a darker body bg for all themes, when in "dark mode"
|
||||
body[data-theme='classic'].body--dark {
|
||||
background: scale-color($color, $lightness: -60%);
|
||||
}
|
||||
*/
|
||||
body[data-theme=classic].body--light {
|
||||
background-color: #f4f4f4;
|
||||
body[data-theme=cyber].neon-border .q-card,
|
||||
body[data-theme=cyber].neon-border .q-card.q-card--dark,
|
||||
body[data-theme=cyber].neon-border .q-date,
|
||||
body[data-theme=cyber].neon-border .q-date--dark {
|
||||
border: 2px solid #7cb342;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme=classic] .q-card--dark,
|
||||
[data-theme=classic] .q-stepper--dark {
|
||||
body[data-theme=mint].neon-border .q-card,
|
||||
body[data-theme=mint].neon-border .q-card.q-card--dark,
|
||||
body[data-theme=mint].neon-border .q-date,
|
||||
body[data-theme=mint].neon-border .q-date--dark {
|
||||
border: 2px solid #3ab77d;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body[data-theme=autumn].neon-border .q-card,
|
||||
body[data-theme=autumn].neon-border .q-card.q-card--dark,
|
||||
body[data-theme=autumn].neon-border .q-date,
|
||||
body[data-theme=autumn].neon-border .q-date--dark {
|
||||
border: 2px solid #b7763a;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body[data-theme=flamingo].neon-border .q-card,
|
||||
body[data-theme=flamingo].neon-border .q-card.q-card--dark,
|
||||
body[data-theme=flamingo].neon-border .q-date,
|
||||
body[data-theme=flamingo].neon-border .q-date--dark {
|
||||
border: 2px solid #ff00ff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body[data-theme=monochrome].neon-border .q-card,
|
||||
body[data-theme=monochrome].neon-border .q-card.q-card--dark,
|
||||
body[data-theme=monochrome].neon-border .q-date,
|
||||
body[data-theme=monochrome].neon-border .q-date--dark {
|
||||
border: 2px solid #494949;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body.hard-border .q-card,
|
||||
body.hard-border .q-card.q-card--dark,
|
||||
body.hard-border .q-date,
|
||||
body.hard-border .q-date--dark {
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.2784313725);
|
||||
border: none;
|
||||
}
|
||||
|
||||
body.retro-border .q-card,
|
||||
body.retro-border .q-card.q-card--dark,
|
||||
body.retro-border .q-date,
|
||||
body.retro-border .q-date--dark {
|
||||
border: none;
|
||||
box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2), 0 2px 2px rgba(255, 255, 255, 0.14), 0 3px 1px -2px rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
body.no-border .q-card,
|
||||
body.no-border .q-card.q-card--dark,
|
||||
body.no-border .q-date,
|
||||
body.no-border .q-date--dark {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body[data-theme=classic] {
|
||||
--q-primary: #673ab7;
|
||||
--q-secondary: #9c27b0;
|
||||
--q-dark-page: #1f2234;
|
||||
}
|
||||
body[data-theme=classic] [data-theme=classic] .q-card--dark,
|
||||
body[data-theme=classic] [data-theme=classic] .q-stepper--dark {
|
||||
background: #333646 !important;
|
||||
}
|
||||
|
||||
body[data-theme=classic].body--light {
|
||||
background-color: #f4f4f4;
|
||||
body[data-theme=bitcoin] {
|
||||
--q-primary: #ea611d;
|
||||
--q-secondary: #e56f35;
|
||||
--q-dark-page: #2d293b;
|
||||
}
|
||||
|
||||
body[data-theme=classic].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=classic] .bg-primary {
|
||||
background: #673ab7 !important;
|
||||
}
|
||||
[data-theme=classic] .text-primary {
|
||||
color: #673ab7 !important;
|
||||
}
|
||||
[data-theme=classic] .bg-secondary {
|
||||
background: #9c27b0 !important;
|
||||
}
|
||||
[data-theme=classic] .text-secondary {
|
||||
color: #9c27b0 !important;
|
||||
}
|
||||
[data-theme=classic] .bg-dark {
|
||||
background: #1f2234 !important;
|
||||
}
|
||||
[data-theme=classic] .text-dark {
|
||||
color: #1f2234 !important;
|
||||
}
|
||||
[data-theme=classic] .bg-info {
|
||||
background: #333646 !important;
|
||||
}
|
||||
[data-theme=classic] .text-info {
|
||||
color: #333646 !important;
|
||||
}
|
||||
[data-theme=classic] .bg-marginal-bg {
|
||||
background: #1f2234 !important;
|
||||
}
|
||||
[data-theme=classic] .text-marginal-bg {
|
||||
color: #1f2234 !important;
|
||||
}
|
||||
[data-theme=classic] .bg-marginal-text {
|
||||
background: #fff !important;
|
||||
}
|
||||
[data-theme=classic] .text-marginal-text {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
body[data-theme=bitcoin].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
body[data-theme=bitcoin].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=bitcoin] .q-drawer--dark,
|
||||
body[data-theme=bitcoin].body--dark,
|
||||
[data-theme=bitcoin] .q-menu--dark {
|
||||
background: #2d293b !important;
|
||||
}
|
||||
|
||||
/* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
|
||||
// set a darker body bg for all themes, when in "dark mode"
|
||||
body[data-theme='bitcoin'].body--dark {
|
||||
background: scale-color($color, $lightness: -60%);
|
||||
}
|
||||
*/
|
||||
body[data-theme=bitcoin].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=bitcoin] .q-card--dark,
|
||||
[data-theme=bitcoin] .q-stepper--dark {
|
||||
body[data-theme=bitcoin] [data-theme=bitcoin] .q-card--dark,
|
||||
body[data-theme=bitcoin] [data-theme=bitcoin] .q-stepper--dark {
|
||||
background: #333646 !important;
|
||||
}
|
||||
|
||||
body[data-theme=bitcoin].body--light {
|
||||
background-color: #f4f4f4;
|
||||
body[data-theme=freedom] {
|
||||
--q-primary: #e22156;
|
||||
--q-secondary: #b91a45;
|
||||
--q-dark-page: #0a0a0a;
|
||||
}
|
||||
|
||||
body[data-theme=bitcoin].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=bitcoin] .bg-primary {
|
||||
background: #ea611d !important;
|
||||
}
|
||||
[data-theme=bitcoin] .text-primary {
|
||||
color: #ea611d !important;
|
||||
}
|
||||
[data-theme=bitcoin] .bg-secondary {
|
||||
background: #e56f35 !important;
|
||||
}
|
||||
[data-theme=bitcoin] .text-secondary {
|
||||
color: #e56f35 !important;
|
||||
}
|
||||
[data-theme=bitcoin] .bg-dark {
|
||||
background: #2d293b !important;
|
||||
}
|
||||
[data-theme=bitcoin] .text-dark {
|
||||
color: #2d293b !important;
|
||||
}
|
||||
[data-theme=bitcoin] .bg-info {
|
||||
background: #333646 !important;
|
||||
}
|
||||
[data-theme=bitcoin] .text-info {
|
||||
color: #333646 !important;
|
||||
}
|
||||
[data-theme=bitcoin] .bg-marginal-bg {
|
||||
background: #000000 !important;
|
||||
}
|
||||
[data-theme=bitcoin] .text-marginal-bg {
|
||||
color: #000000 !important;
|
||||
}
|
||||
[data-theme=bitcoin] .bg-marginal-text {
|
||||
background: #fff !important;
|
||||
}
|
||||
[data-theme=bitcoin] .text-marginal-text {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
body[data-theme=freedom].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
body[data-theme=freedom].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=freedom] .q-drawer--dark,
|
||||
body[data-theme=freedom].body--dark,
|
||||
[data-theme=freedom] .q-menu--dark {
|
||||
background: #0a0a0a !important;
|
||||
}
|
||||
|
||||
/* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
|
||||
// set a darker body bg for all themes, when in "dark mode"
|
||||
body[data-theme='freedom'].body--dark {
|
||||
background: scale-color($color, $lightness: -60%);
|
||||
}
|
||||
*/
|
||||
body[data-theme=freedom].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=freedom] .q-card--dark,
|
||||
[data-theme=freedom] .q-stepper--dark {
|
||||
body[data-theme=freedom] [data-theme=freedom] .q-card--dark,
|
||||
body[data-theme=freedom] [data-theme=freedom] .q-stepper--dark {
|
||||
background: #1b1b1b !important;
|
||||
}
|
||||
|
||||
body[data-theme=freedom].body--light {
|
||||
background-color: #f4f4f4;
|
||||
body[data-theme=cyber] {
|
||||
--q-primary: #7cb342;
|
||||
--q-secondary: #558b2f;
|
||||
--q-dark-page: #0a0a0a;
|
||||
}
|
||||
|
||||
body[data-theme=freedom].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=freedom] .bg-primary {
|
||||
background: #e22156 !important;
|
||||
}
|
||||
[data-theme=freedom] .text-primary {
|
||||
color: #e22156 !important;
|
||||
}
|
||||
[data-theme=freedom] .bg-secondary {
|
||||
background: #b91a45 !important;
|
||||
}
|
||||
[data-theme=freedom] .text-secondary {
|
||||
color: #b91a45 !important;
|
||||
}
|
||||
[data-theme=freedom] .bg-dark {
|
||||
background: #0a0a0a !important;
|
||||
}
|
||||
[data-theme=freedom] .text-dark {
|
||||
color: #0a0a0a !important;
|
||||
}
|
||||
[data-theme=freedom] .bg-info {
|
||||
background: #1b1b1b !important;
|
||||
}
|
||||
[data-theme=freedom] .text-info {
|
||||
color: #1b1b1b !important;
|
||||
}
|
||||
[data-theme=freedom] .bg-marginal-bg {
|
||||
background: #2d293b !important;
|
||||
}
|
||||
[data-theme=freedom] .text-marginal-bg {
|
||||
color: #2d293b !important;
|
||||
}
|
||||
[data-theme=freedom] .bg-marginal-text {
|
||||
background: #fff !important;
|
||||
}
|
||||
[data-theme=freedom] .text-marginal-text {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
body[data-theme=cyber].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
body[data-theme=cyber].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=cyber] .q-drawer--dark,
|
||||
body[data-theme=cyber].body--dark,
|
||||
[data-theme=cyber] .q-menu--dark {
|
||||
background: #0a0a0a !important;
|
||||
}
|
||||
|
||||
/* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
|
||||
// set a darker body bg for all themes, when in "dark mode"
|
||||
body[data-theme='cyber'].body--dark {
|
||||
background: scale-color($color, $lightness: -60%);
|
||||
}
|
||||
*/
|
||||
body[data-theme=cyber].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=cyber] .q-card--dark,
|
||||
[data-theme=cyber] .q-stepper--dark {
|
||||
body[data-theme=cyber] [data-theme=cyber] .q-card--dark,
|
||||
body[data-theme=cyber] [data-theme=cyber] .q-stepper--dark {
|
||||
background: #1b1b1b !important;
|
||||
}
|
||||
|
||||
body[data-theme=cyber].body--light {
|
||||
background-color: #f4f4f4;
|
||||
body[data-theme=mint] {
|
||||
--q-primary: #3ab77d;
|
||||
--q-secondary: #27b065;
|
||||
--q-dark-page: #1f342b;
|
||||
}
|
||||
|
||||
body[data-theme=cyber].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=cyber] .bg-primary {
|
||||
background: #7cb342 !important;
|
||||
}
|
||||
[data-theme=cyber] .text-primary {
|
||||
color: #7cb342 !important;
|
||||
}
|
||||
[data-theme=cyber] .bg-secondary {
|
||||
background: #558b2f !important;
|
||||
}
|
||||
[data-theme=cyber] .text-secondary {
|
||||
color: #558b2f !important;
|
||||
}
|
||||
[data-theme=cyber] .bg-dark {
|
||||
background: #0a0a0a !important;
|
||||
}
|
||||
[data-theme=cyber] .text-dark {
|
||||
color: #0a0a0a !important;
|
||||
}
|
||||
[data-theme=cyber] .bg-info {
|
||||
background: #1b1b1b !important;
|
||||
}
|
||||
[data-theme=cyber] .text-info {
|
||||
color: #1b1b1b !important;
|
||||
}
|
||||
[data-theme=cyber] .bg-marginal-bg {
|
||||
background: #2d293b !important;
|
||||
}
|
||||
[data-theme=cyber] .text-marginal-bg {
|
||||
color: #2d293b !important;
|
||||
}
|
||||
[data-theme=cyber] .bg-marginal-text {
|
||||
background: #fff !important;
|
||||
}
|
||||
[data-theme=cyber] .text-marginal-text {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
body[data-theme=mint].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
body[data-theme=mint].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=mint] .q-drawer--dark,
|
||||
body[data-theme=mint].body--dark,
|
||||
[data-theme=mint] .q-menu--dark {
|
||||
background: #1f342b !important;
|
||||
}
|
||||
|
||||
/* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
|
||||
// set a darker body bg for all themes, when in "dark mode"
|
||||
body[data-theme='mint'].body--dark {
|
||||
background: scale-color($color, $lightness: -60%);
|
||||
}
|
||||
*/
|
||||
body[data-theme=mint].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=mint] .q-card--dark,
|
||||
[data-theme=mint] .q-stepper--dark {
|
||||
body[data-theme=mint] [data-theme=mint] .q-card--dark,
|
||||
body[data-theme=mint] [data-theme=mint] .q-stepper--dark {
|
||||
background: #334642 !important;
|
||||
}
|
||||
|
||||
body[data-theme=mint].body--light {
|
||||
background-color: #f4f4f4;
|
||||
body[data-theme=autumn] {
|
||||
--q-primary: #b7763a;
|
||||
--q-secondary: #b07927;
|
||||
--q-dark-page: #34291f;
|
||||
}
|
||||
|
||||
body[data-theme=mint].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=mint] .bg-primary {
|
||||
background: #3ab77d !important;
|
||||
}
|
||||
[data-theme=mint] .text-primary {
|
||||
color: #3ab77d !important;
|
||||
}
|
||||
[data-theme=mint] .bg-secondary {
|
||||
background: #27b065 !important;
|
||||
}
|
||||
[data-theme=mint] .text-secondary {
|
||||
color: #27b065 !important;
|
||||
}
|
||||
[data-theme=mint] .bg-dark {
|
||||
background: #1f342b !important;
|
||||
}
|
||||
[data-theme=mint] .text-dark {
|
||||
color: #1f342b !important;
|
||||
}
|
||||
[data-theme=mint] .bg-info {
|
||||
background: #334642 !important;
|
||||
}
|
||||
[data-theme=mint] .text-info {
|
||||
color: #334642 !important;
|
||||
}
|
||||
[data-theme=mint] .bg-marginal-bg {
|
||||
background: #1f342b !important;
|
||||
}
|
||||
[data-theme=mint] .text-marginal-bg {
|
||||
color: #1f342b !important;
|
||||
}
|
||||
[data-theme=mint] .bg-marginal-text {
|
||||
background: #fff !important;
|
||||
}
|
||||
[data-theme=mint] .text-marginal-text {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
body[data-theme=autumn].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
body[data-theme=autumn].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=autumn] .q-drawer--dark,
|
||||
body[data-theme=autumn].body--dark,
|
||||
[data-theme=autumn] .q-menu--dark {
|
||||
background: #34291f !important;
|
||||
}
|
||||
|
||||
/* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
|
||||
// set a darker body bg for all themes, when in "dark mode"
|
||||
body[data-theme='autumn'].body--dark {
|
||||
background: scale-color($color, $lightness: -60%);
|
||||
}
|
||||
*/
|
||||
body[data-theme=autumn].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=autumn] .q-card--dark,
|
||||
[data-theme=autumn] .q-stepper--dark {
|
||||
body[data-theme=autumn] [data-theme=autumn] .q-card--dark,
|
||||
body[data-theme=autumn] [data-theme=autumn] .q-stepper--dark {
|
||||
background: #463f33 !important;
|
||||
}
|
||||
|
||||
body[data-theme=autumn].body--light {
|
||||
background-color: #f4f4f4;
|
||||
body[data-theme=flamingo] {
|
||||
--q-primary: #ff00ff;
|
||||
--q-secondary: #fda3fd;
|
||||
--q-dark-page: #2f032f;
|
||||
}
|
||||
|
||||
body[data-theme=autumn].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=autumn] .bg-primary {
|
||||
background: #b7763a !important;
|
||||
}
|
||||
[data-theme=autumn] .text-primary {
|
||||
color: #b7763a !important;
|
||||
}
|
||||
[data-theme=autumn] .bg-secondary {
|
||||
background: #b07927 !important;
|
||||
}
|
||||
[data-theme=autumn] .text-secondary {
|
||||
color: #b07927 !important;
|
||||
}
|
||||
[data-theme=autumn] .bg-dark {
|
||||
background: #34291f !important;
|
||||
}
|
||||
[data-theme=autumn] .text-dark {
|
||||
color: #34291f !important;
|
||||
}
|
||||
[data-theme=autumn] .bg-info {
|
||||
background: #463f33 !important;
|
||||
}
|
||||
[data-theme=autumn] .text-info {
|
||||
color: #463f33 !important;
|
||||
}
|
||||
[data-theme=autumn] .bg-marginal-bg {
|
||||
background: #342a1f !important;
|
||||
}
|
||||
[data-theme=autumn] .text-marginal-bg {
|
||||
color: #342a1f !important;
|
||||
}
|
||||
[data-theme=autumn] .bg-marginal-text {
|
||||
background: rgb(255, 255, 255) !important;
|
||||
}
|
||||
[data-theme=autumn] .text-marginal-text {
|
||||
color: rgb(255, 255, 255) !important;
|
||||
}
|
||||
|
||||
body[data-theme=flamingo].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
body[data-theme=flamingo].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=flamingo] .q-drawer--dark,
|
||||
body[data-theme=flamingo].body--dark,
|
||||
[data-theme=flamingo] .q-menu--dark {
|
||||
background: #2f032f !important;
|
||||
}
|
||||
|
||||
/* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
|
||||
// set a darker body bg for all themes, when in "dark mode"
|
||||
body[data-theme='flamingo'].body--dark {
|
||||
background: scale-color($color, $lightness: -60%);
|
||||
}
|
||||
*/
|
||||
body[data-theme=flamingo].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=flamingo] .q-card--dark,
|
||||
[data-theme=flamingo] .q-stepper--dark {
|
||||
body[data-theme=flamingo] [data-theme=flamingo] .q-card--dark,
|
||||
body[data-theme=flamingo] [data-theme=flamingo] .q-stepper--dark {
|
||||
background: #bc23bc !important;
|
||||
}
|
||||
|
||||
body[data-theme=flamingo].body--light {
|
||||
background-color: #f4f4f4;
|
||||
body[data-theme=monochrome] {
|
||||
--q-primary: #494949;
|
||||
--q-secondary: #6b6b6b;
|
||||
--q-dark-page: #000;
|
||||
}
|
||||
|
||||
body[data-theme=flamingo].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=flamingo] .bg-primary {
|
||||
background: #ff00ff !important;
|
||||
}
|
||||
[data-theme=flamingo] .text-primary {
|
||||
color: #ff00ff !important;
|
||||
}
|
||||
[data-theme=flamingo] .bg-secondary {
|
||||
background: #fda3fd !important;
|
||||
}
|
||||
[data-theme=flamingo] .text-secondary {
|
||||
color: #fda3fd !important;
|
||||
}
|
||||
[data-theme=flamingo] .bg-dark {
|
||||
background: #2f032f !important;
|
||||
}
|
||||
[data-theme=flamingo] .text-dark {
|
||||
color: #2f032f !important;
|
||||
}
|
||||
[data-theme=flamingo] .bg-info {
|
||||
background: #bc23bc !important;
|
||||
}
|
||||
[data-theme=flamingo] .text-info {
|
||||
color: #bc23bc !important;
|
||||
}
|
||||
[data-theme=flamingo] .bg-marginal-bg {
|
||||
background: #311231 !important;
|
||||
}
|
||||
[data-theme=flamingo] .text-marginal-bg {
|
||||
color: #311231 !important;
|
||||
}
|
||||
[data-theme=flamingo] .bg-marginal-text {
|
||||
background: rgb(255, 255, 255) !important;
|
||||
}
|
||||
[data-theme=flamingo] .text-marginal-text {
|
||||
color: rgb(255, 255, 255) !important;
|
||||
}
|
||||
|
||||
body[data-theme=monochrome].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
body[data-theme=monochrome].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=monochrome] .q-drawer--dark,
|
||||
body[data-theme=monochrome].body--dark,
|
||||
[data-theme=monochrome] .q-menu--dark {
|
||||
background: #000 !important;
|
||||
}
|
||||
|
||||
/* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
|
||||
// set a darker body bg for all themes, when in "dark mode"
|
||||
body[data-theme='monochrome'].body--dark {
|
||||
background: scale-color($color, $lightness: -60%);
|
||||
}
|
||||
*/
|
||||
body[data-theme=monochrome].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
[data-theme=monochrome] .q-card--dark,
|
||||
[data-theme=monochrome] .q-stepper--dark {
|
||||
body[data-theme=monochrome] [data-theme=monochrome] .q-card--dark,
|
||||
body[data-theme=monochrome] [data-theme=monochrome] .q-stepper--dark {
|
||||
background: rgb(39, 39, 39) !important;
|
||||
}
|
||||
|
||||
body[data-theme=monochrome].body--light {
|
||||
background-color: #f4f4f4;
|
||||
body.gradient-bg {
|
||||
background-image: linear-gradient(to bottom right, var(--q-dark-page), #0a0a0a);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
body[data-theme=monochrome].body--light {
|
||||
background-color: #f4f4f4;
|
||||
body.bg-image::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: blur(8px);
|
||||
background-image: var(--background);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
body.bg-image .q-page-container {
|
||||
backdrop-filter: none; /* Ensure the page content is not affected */
|
||||
}
|
||||
|
||||
[data-theme=monochrome] .bg-primary {
|
||||
background: #494949 !important;
|
||||
}
|
||||
[data-theme=monochrome] .text-primary {
|
||||
color: #494949 !important;
|
||||
}
|
||||
[data-theme=monochrome] .bg-secondary {
|
||||
background: #6b6b6b !important;
|
||||
}
|
||||
[data-theme=monochrome] .text-secondary {
|
||||
color: #6b6b6b !important;
|
||||
}
|
||||
[data-theme=monochrome] .bg-dark {
|
||||
background: #000 !important;
|
||||
}
|
||||
[data-theme=monochrome] .text-dark {
|
||||
color: #000 !important;
|
||||
}
|
||||
[data-theme=monochrome] .bg-info {
|
||||
background: rgb(39, 39, 39) !important;
|
||||
}
|
||||
[data-theme=monochrome] .text-info {
|
||||
color: rgb(39, 39, 39) !important;
|
||||
}
|
||||
[data-theme=monochrome] .bg-marginal-bg {
|
||||
background: #000 !important;
|
||||
}
|
||||
[data-theme=monochrome] .text-marginal-bg {
|
||||
color: #000 !important;
|
||||
}
|
||||
[data-theme=monochrome] .bg-marginal-text {
|
||||
background: rgb(255, 255, 255) !important;
|
||||
}
|
||||
[data-theme=monochrome] .text-marginal-text {
|
||||
color: rgb(255, 255, 255) !important;
|
||||
}
|
||||
|
||||
[data-theme=freedom] .q-drawer--dark {
|
||||
background: #0a0a0a !important;
|
||||
}
|
||||
|
||||
[data-theme=freedom] .q-header {
|
||||
background: #0a0a0a !important;
|
||||
}
|
||||
|
||||
[data-theme=cyber] .q-drawer--dark {
|
||||
background: #0a0a0a !important;
|
||||
}
|
||||
|
||||
[data-theme=cyber] .q-header {
|
||||
background: #0a0a0a !important;
|
||||
}
|
||||
|
||||
[data-theme=salvador] .q-drawer--dark {
|
||||
background: #242424 !important;
|
||||
}
|
||||
|
||||
[data-theme=salvador] .q-header {
|
||||
background: #0f47af !important;
|
||||
body.body--dark .q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark),
|
||||
body.body--dark .q-header,
|
||||
body.body--dark .q-drawer {
|
||||
--q-dark: rgba(29, 29, 29, 0.3);
|
||||
background-color: var(--q-dark);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
|
|
|
|||
|
|
@ -91,35 +91,6 @@ window.AccountPageLogic = {
|
|||
window.i18n.global.locale = newValue
|
||||
this.$q.localStorage.set('lnbits.lang', newValue)
|
||||
},
|
||||
toggleGradient() {
|
||||
this.gradientSelection = !this.gradientChoice
|
||||
this.gradientChoice = this.gradientSelection
|
||||
this.$q.localStorage.set('lnbits.backgroundImage', 'none')
|
||||
this.applyGradient()
|
||||
if (!this.gradientChoice) {
|
||||
window.location.reload()
|
||||
}
|
||||
},
|
||||
reactionChoiceFunc() {
|
||||
this.$q.localStorage.set('lnbits.reactions', this.reactionSelection)
|
||||
this.reactionChoice = this.reactionSelection
|
||||
},
|
||||
bgimageChoiceFunc() {
|
||||
this.$q.localStorage.set('lnbits.backgroundImage', this.bgimageSelection)
|
||||
this.bgimageChoice = this.bgimageSelection
|
||||
this.applyBackgroundImage()
|
||||
},
|
||||
themeChoiceFunc(newValue) {
|
||||
this.changeTheme(newValue)
|
||||
this.setColors()
|
||||
if (this.gradientChoice) {
|
||||
this.applyGradient()
|
||||
}
|
||||
if (this.bgimageChoice) {
|
||||
this.applyBackgroundImage()
|
||||
}
|
||||
this.applyBorder()
|
||||
},
|
||||
async updateAccount() {
|
||||
try {
|
||||
const {data} = await LNbits.api.request(
|
||||
|
|
@ -426,10 +397,6 @@ window.AccountPageLogic = {
|
|||
}
|
||||
},
|
||||
async created() {
|
||||
this.borderSelection = this.borderChoice
|
||||
this.reactionSelection = this.reactionChoice
|
||||
this.bgimageSelection = this.bgimageChoice
|
||||
this.themeSelection = this.themeChoice
|
||||
try {
|
||||
const {data} = await LNbits.api.getAuthenticatedUser()
|
||||
this.user = data
|
||||
|
|
|
|||
|
|
@ -437,18 +437,6 @@ window.LNbits = {
|
|||
converter.setFlavor('github')
|
||||
converter.setOption('simpleLineBreaks', true)
|
||||
return converter.makeHtml(text)
|
||||
},
|
||||
hexToRgb(hex) {
|
||||
return Quasar.colors.hexToRgb(hex)
|
||||
},
|
||||
hexDarken(hex, percent) {
|
||||
return Quasar.colors.lighten(hex, percent)
|
||||
},
|
||||
hexAlpha(hex, alpha) {
|
||||
return Quasar.colors.changeAlpha(hex, alpha)
|
||||
},
|
||||
getPaletteColor(color) {
|
||||
return Quasar.colors.getPaletteColor(color)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -465,7 +453,6 @@ if (!window.g) {
|
|||
fiatTracking: false,
|
||||
wallets: [],
|
||||
payments: [],
|
||||
allowedThemes: null,
|
||||
langs: [],
|
||||
walletEventListeners: [],
|
||||
updatePayments: false,
|
||||
|
|
@ -482,12 +469,13 @@ window.windowMixin = {
|
|||
mobileSimple: true,
|
||||
walletFlip: true,
|
||||
showAddWalletDialog: {show: false},
|
||||
borderSelection: null,
|
||||
gradientSelection: null,
|
||||
themeSelection: null,
|
||||
reactionSelection: null,
|
||||
bgimageSelection: null,
|
||||
gradientSelection: false,
|
||||
isUserAuthorized: false,
|
||||
isSatsDenomination: WINDOW_SETTINGS['LNBITS_DENOMINATION'] == 'sats',
|
||||
allowedThemes: WINDOW_SETTINGS['LNBITS_THEME_OPTIONS'],
|
||||
walletEventListeners: [],
|
||||
darkChoice: this.$q.localStorage.has('lnbits.darkMode')
|
||||
? this.$q.localStorage.getItem('lnbits.darkMode')
|
||||
: true,
|
||||
borderChoice: this.$q.localStorage.has('lnbits.border')
|
||||
? this.$q.localStorage.getItem('lnbits.border')
|
||||
: USE_DEFAULT_BORDER,
|
||||
|
|
@ -503,10 +491,6 @@ window.windowMixin = {
|
|||
bgimageChoice: this.$q.localStorage.has('lnbits.backgroundImage')
|
||||
? this.$q.localStorage.getItem('lnbits.backgroundImage')
|
||||
: USE_DEFAULT_BGIMAGE,
|
||||
isUserAuthorized: false,
|
||||
isSatsDenomination: WINDOW_SETTINGS['LNBITS_DENOMINATION'] == 'sats',
|
||||
walletEventListeners: [],
|
||||
backgroundImage: '',
|
||||
...WINDOW_SETTINGS
|
||||
}
|
||||
},
|
||||
|
|
@ -612,138 +596,52 @@ window.windowMixin = {
|
|||
},
|
||||
changeTheme(newValue) {
|
||||
document.body.setAttribute('data-theme', newValue)
|
||||
if (this.themeSelection) {
|
||||
this.themeChoice = newValue
|
||||
this.$q.localStorage.set('lnbits.theme', newValue)
|
||||
}
|
||||
this.setColors()
|
||||
this.themeChoice = newValue
|
||||
},
|
||||
applyGradient() {
|
||||
darkBgColor = this.$q.localStorage.getItem('lnbits.darkBgColor')
|
||||
primaryColor = this.$q.localStorage.getItem('lnbits.primaryColor')
|
||||
if (this.gradientChoice) {
|
||||
document.body.classList.add('gradient-bg')
|
||||
this.$q.localStorage.set('lnbits.gradientBg', true)
|
||||
// Ensure dark mode is enabled when gradient background is applied
|
||||
if (!this.$q.dark.isActive) {
|
||||
this.$q.dark.toggle()
|
||||
this.$q.localStorage.set('lnbits.darkMode', true)
|
||||
this.toggleDarkMode()
|
||||
}
|
||||
const gradientStyle = `linear-gradient(to bottom right, ${LNbits.utils.hexDarken(String(primaryColor), -70)}, #0a0a0a)`
|
||||
document.body.style.setProperty(
|
||||
'background-image',
|
||||
gradientStyle,
|
||||
'important'
|
||||
)
|
||||
const gradientStyleCards = `background-color: ${LNbits.utils.hexAlpha(String(darkBgColor), 0.4)} !important; backdrop-filter: blur(6px);`
|
||||
const style = document.createElement('style')
|
||||
style.innerHTML =
|
||||
`body[data-theme="${this.themeChoice}"] .q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark), body.body${this.$q.dark.isActive ? '--dark' : ''} .q-header, body.body${this.$q.dark.isActive ? '--dark' : ''} .q-drawer { ${gradientStyleCards} }` +
|
||||
`body[data-theme="${this.themeChoice}"].body--dark{background: ${LNbits.utils.hexDarken(String(primaryColor), -88)} !important; }` +
|
||||
`[data-theme="${this.themeChoice}"] .q-card--dark{background: ${String(darkBgColor)} !important;} }`
|
||||
document.head.appendChild(style)
|
||||
} else {
|
||||
document.body.classList.remove('gradient-bg')
|
||||
this.$q.localStorage.set('lnbits.gradientBg', false)
|
||||
}
|
||||
},
|
||||
toggleDarkMode() {
|
||||
this.$q.dark.toggle()
|
||||
this.$q.localStorage.set('lnbits.darkMode', this.$q.dark.isActive)
|
||||
if (!this.$q.dark.isActive) {
|
||||
this.bgimageSelection = 'null'
|
||||
this.$q.localStorage.set('lnbits.gradientBg', false)
|
||||
this.$q.localStorage.set('lnbits.backgroundImage', 'null')
|
||||
window.location.hash = '#theme'
|
||||
window.location.reload()
|
||||
}
|
||||
},
|
||||
applyBackgroundImage() {
|
||||
if (this.bgimageSelection) {
|
||||
this.$q.localStorage.set(
|
||||
'lnbits.backgroundImage',
|
||||
this.bgimageSelection
|
||||
if (this.bgimageChoice == '') {
|
||||
document.body.classList.remove('bg-image')
|
||||
} else {
|
||||
document.body.classList.add('bg-image')
|
||||
document.body.style.setProperty(
|
||||
'--background',
|
||||
`url(${this.bgimageChoice})`
|
||||
)
|
||||
this.bgimageChoice = this.bgimageSelection
|
||||
}
|
||||
if (
|
||||
this.bgimageChoice &&
|
||||
this.bgimageChoice !== 'null' &&
|
||||
this.bgimageChoice !== 'none' &&
|
||||
this.bgimageChoice !== ''
|
||||
) {
|
||||
this.gradientChoice = true
|
||||
this.applyGradient()
|
||||
const style = document.createElement('style')
|
||||
style.innerHTML = `
|
||||
body[data-theme="${this.themeChoice}"]::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(${this.bgimageChoice});
|
||||
background-size: cover;
|
||||
filter: blur(8px);
|
||||
z-index: -1;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
body[data-theme="${this.themeChoice}"] .q-page-container {
|
||||
backdrop-filter: none; /* Ensure the page content is not affected */
|
||||
}`
|
||||
document.head.appendChild(style)
|
||||
}
|
||||
this.$q.localStorage.set('lnbits.backgroundImage', this.bgimageChoice)
|
||||
},
|
||||
applyBorder() {
|
||||
if (this.borderSelection) {
|
||||
this.$q.localStorage.setItem('lnbits.border', this.borderSelection)
|
||||
this.borderChoice = this.$q.localStorage.getItem('lnbits.border')
|
||||
// Remove any existing border classes
|
||||
document.body.classList.forEach(cls => {
|
||||
if (cls.endsWith('-border')) {
|
||||
document.body.classList.remove(cls)
|
||||
}
|
||||
let borderStyleCSS
|
||||
if (this.borderChoice == 'hard-border') {
|
||||
borderStyleCSS = `box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 0 0 1px #ffffff47; border: none;`
|
||||
}
|
||||
if (this.borderChoice == 'neon-border') {
|
||||
borderStyleCSS = `border: 2px solid ${this.$q.localStorage.getItem('lnbits.primaryColor')}; box-shadow: none;`
|
||||
}
|
||||
if (this.borderChoice == 'no-border') {
|
||||
borderStyleCSS = `box-shadow: none; border: none;`
|
||||
}
|
||||
if (this.borderChoice == 'retro-border') {
|
||||
borderStyleCSS = `border: none; border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2), 0 2px 2px rgba(255, 255, 255, 0.14), 0 3px 1px -2px rgba(255, 255, 255, 0.12);`
|
||||
}
|
||||
let style = document.createElement('style')
|
||||
style.innerHTML = `
|
||||
body[data-theme="${this.themeChoice}"] .q-card,
|
||||
body[data-theme="${this.themeChoice}"] .q-card.q-card--dark,
|
||||
body[data-theme="${this.themeChoice}"] .q-date,
|
||||
body[data-theme="${this.themeChoice}"] .q-date--dark {
|
||||
${borderStyleCSS}
|
||||
}
|
||||
`
|
||||
document.head.appendChild(style)
|
||||
})
|
||||
this.$q.localStorage.setItem('lnbits.border', this.borderChoice)
|
||||
document.body.classList.add(this.borderChoice)
|
||||
},
|
||||
setColors() {
|
||||
this.$q.localStorage.set(
|
||||
'lnbits.primaryColor',
|
||||
LNbits.utils.getPaletteColor('primary')
|
||||
)
|
||||
this.$q.localStorage.set(
|
||||
'lnbits.secondaryColor',
|
||||
LNbits.utils.getPaletteColor('secondary')
|
||||
)
|
||||
this.$q.localStorage.set(
|
||||
'lnbits.darkBgColor',
|
||||
LNbits.utils.getPaletteColor('dark')
|
||||
)
|
||||
document.documentElement.style.setProperty(
|
||||
'--q-primary',
|
||||
LNbits.utils.getPaletteColor('primary')
|
||||
)
|
||||
document.documentElement.style.setProperty(
|
||||
'--q-secondary',
|
||||
LNbits.utils.getPaletteColor('secondary')
|
||||
)
|
||||
toggleDarkMode() {
|
||||
this.$q.dark.toggle()
|
||||
this.darkChoice = this.$q.dark.isActive
|
||||
this.$q.localStorage.set('lnbits.darkMode', this.$q.dark.isActive)
|
||||
if (!this.$q.dark.isActive) {
|
||||
this.gradientChoice = false
|
||||
this.applyGradient()
|
||||
}
|
||||
},
|
||||
copyText(text, message, position) {
|
||||
Quasar.copyToClipboard(text).then(() => {
|
||||
|
|
@ -808,10 +706,7 @@ window.windowMixin = {
|
|||
const gradient = params.get('gradient')
|
||||
const border = params.get('border')
|
||||
|
||||
if (
|
||||
theme &&
|
||||
this.g.allowedThemes.includes(theme.trim().toLowerCase())
|
||||
) {
|
||||
if (theme && this.allowedThemes.includes(theme.trim().toLowerCase())) {
|
||||
const normalizedTheme = theme.trim().toLowerCase()
|
||||
document.body.setAttribute('data-theme', normalizedTheme)
|
||||
this.$q.localStorage.set('lnbits.theme', normalizedTheme)
|
||||
|
|
@ -841,8 +736,6 @@ window.windowMixin = {
|
|||
|
||||
window.history.replaceState(null, null, url.pathname)
|
||||
}
|
||||
|
||||
this.setColors()
|
||||
},
|
||||
refreshRoute() {
|
||||
const path = window.location.pathname
|
||||
|
|
@ -854,7 +747,6 @@ window.windowMixin = {
|
|||
}
|
||||
},
|
||||
async created() {
|
||||
this.g.allowedThemes = window.allowedThemes ?? ['bitcoin']
|
||||
this.$q.dark.set(
|
||||
this.$q.localStorage.has('lnbits.darkMode')
|
||||
? this.$q.localStorage.getItem('lnbits.darkMode')
|
||||
|
|
|
|||
|
|
@ -115,8 +115,6 @@ window.WalletPageLogic = {
|
|||
isFiatPriority: false,
|
||||
formattedFiatAmount: 0,
|
||||
formattedExchange: null,
|
||||
primaryColor: this.$q.localStorage.getItem('lnbits.primaryColor'),
|
||||
secondaryColor: this.$q.localStorage.getItem('lnbits.secondaryColor'),
|
||||
chartData: [],
|
||||
chartDataPointCount: 0,
|
||||
chartConfig: {
|
||||
|
|
@ -970,11 +968,11 @@ window.WalletPageLogic = {
|
|||
label: 'Balance',
|
||||
data: data.map(s => s.balance),
|
||||
pointStyle: false,
|
||||
backgroundColor: LNbits.utils.hexAlpha(
|
||||
this.primaryColor,
|
||||
backgroundColor: Quasar.colors.changeAlpha(
|
||||
Quasar.colors.getPaletteColor('primary'),
|
||||
0.3
|
||||
),
|
||||
borderColor: this.primaryColor,
|
||||
borderColor: Quasar.colors.getPaletteColor('primary'),
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.7,
|
||||
|
|
@ -984,11 +982,11 @@ window.WalletPageLogic = {
|
|||
label: 'Fees',
|
||||
data: data.map(s => s.fee),
|
||||
pointStyle: false,
|
||||
backgroundColor: LNbits.utils.hexAlpha(
|
||||
this.secondaryColor,
|
||||
backgroundColor: Quasar.colors.changeAlpha(
|
||||
Quasar.colors.getPaletteColor('secondary'),
|
||||
0.3
|
||||
),
|
||||
borderColor: this.secondaryColor,
|
||||
borderColor: Quasar.colors.getPaletteColor('secondary'),
|
||||
borderWidth: 1,
|
||||
fill: true,
|
||||
tension: 0.7,
|
||||
|
|
@ -1029,8 +1027,8 @@ window.WalletPageLogic = {
|
|||
label: 'Balance In',
|
||||
borderRadius: 5,
|
||||
data: data.map(s => s.balance_in),
|
||||
backgroundColor: LNbits.utils.hexAlpha(
|
||||
this.primaryColor,
|
||||
backgroundColor: Quasar.colors.changeAlpha(
|
||||
Quasar.colors.getPaletteColor('primary'),
|
||||
0.3
|
||||
)
|
||||
},
|
||||
|
|
@ -1038,8 +1036,8 @@ window.WalletPageLogic = {
|
|||
label: 'Balance Out',
|
||||
borderRadius: 5,
|
||||
data: data.map(s => s.balance_out),
|
||||
backgroundColor: LNbits.utils.hexAlpha(
|
||||
this.secondaryColor,
|
||||
backgroundColor: Quasar.colors.changeAlpha(
|
||||
Quasar.colors.getPaletteColor('secondary'),
|
||||
0.3
|
||||
)
|
||||
}
|
||||
|
|
@ -1078,16 +1076,16 @@ window.WalletPageLogic = {
|
|||
{
|
||||
label: 'Payments In',
|
||||
data: data.map(s => s.count_in),
|
||||
backgroundColor: LNbits.utils.hexAlpha(
|
||||
this.primaryColor,
|
||||
backgroundColor: Quasar.colors.changeAlpha(
|
||||
Quasar.colors.getPaletteColor('primary'),
|
||||
0.3
|
||||
)
|
||||
},
|
||||
{
|
||||
label: 'Payments Out',
|
||||
data: data.map(s => -s.count_out),
|
||||
backgroundColor: LNbits.utils.hexAlpha(
|
||||
this.secondaryColor,
|
||||
backgroundColor: Quasar.colors.changeAlpha(
|
||||
Quasar.colors.getPaletteColor('secondary'),
|
||||
0.3
|
||||
)
|
||||
}
|
||||
|
|
|
|||
62
lnbits/static/scss/background.scss
Normal file
62
lnbits/static/scss/background.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
@use 'sass:color';
|
||||
|
||||
@each $theme, $colors in $themes {
|
||||
body[data-theme='#{$theme}'] {
|
||||
@each $name, $color in $colors {
|
||||
@if $name== 'dark' {
|
||||
--q-dark-page: #{$color};
|
||||
}
|
||||
@if $name== 'primary' {
|
||||
--q-primary: #{$color};
|
||||
}
|
||||
@if $name== 'secondary' {
|
||||
--q-secondary: #{$color};
|
||||
}
|
||||
@if $name== 'info' {
|
||||
[data-theme='#{$theme}'] .q-card--dark,
|
||||
[data-theme='#{$theme}'] .q-stepper--dark {
|
||||
background: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.gradient-bg {
|
||||
background-image: linear-gradient(
|
||||
to bottom right,
|
||||
var(--q-dark-page),
|
||||
#0a0a0a
|
||||
);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
body.bg-image {
|
||||
&::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: blur(8px);
|
||||
background-image: var(--background);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.q-page-container {
|
||||
backdrop-filter: none; /* Ensure the page content is not affected */
|
||||
}
|
||||
}
|
||||
// transparent background for specific elements
|
||||
body.body--dark {
|
||||
.q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark),
|
||||
.q-header,
|
||||
.q-drawer {
|
||||
--q-dark: #{color.adjust(#1d1d1d, $alpha: -0.7)};
|
||||
background-color: var(--q-dark);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,130 +1,6 @@
|
|||
$themes: (
|
||||
'classic': (
|
||||
primary: #673ab7,
|
||||
secondary: #9c27b0,
|
||||
dark: #1f2234,
|
||||
info: #333646,
|
||||
marginal-bg: #1f2234,
|
||||
marginal-text: #fff
|
||||
),
|
||||
'bitcoin': (
|
||||
primary: #ea611d,
|
||||
secondary: #e56f35,
|
||||
dark: #2d293b,
|
||||
info: #333646,
|
||||
marginal-bg: #000000,
|
||||
marginal-text: #fff
|
||||
),
|
||||
'freedom': (
|
||||
primary: #e22156,
|
||||
secondary: #b91a45,
|
||||
dark: #0a0a0a,
|
||||
info: #1b1b1b,
|
||||
marginal-bg: #2d293b,
|
||||
marginal-text: #fff
|
||||
),
|
||||
'cyber': (
|
||||
primary: #7cb342,
|
||||
secondary: #558b2f,
|
||||
dark: #0a0a0a,
|
||||
info: #1b1b1b,
|
||||
marginal-bg: #2d293b,
|
||||
marginal-text: #fff
|
||||
),
|
||||
'mint': (
|
||||
primary: #3ab77d,
|
||||
secondary: #27b065,
|
||||
dark: #1f342b,
|
||||
info: #334642,
|
||||
marginal-bg: #1f342b,
|
||||
marginal-text: #fff
|
||||
),
|
||||
'autumn': (
|
||||
primary: #b7763a,
|
||||
secondary: #b07927,
|
||||
dark: #34291f,
|
||||
info: #463f33,
|
||||
marginal-bg: #342a1f,
|
||||
marginal-text: rgb(255, 255, 255)
|
||||
),
|
||||
'flamingo': (
|
||||
primary: #ff00ff,
|
||||
secondary: #fda3fd,
|
||||
dark: #2f032f,
|
||||
info: #bc23bc,
|
||||
marginal-bg: #311231,
|
||||
marginal-text: rgb(255, 255, 255)
|
||||
),
|
||||
'monochrome': (
|
||||
primary: #494949,
|
||||
secondary: #6b6b6b,
|
||||
dark: #000,
|
||||
info: rgb(39, 39, 39),
|
||||
marginal-bg: #000,
|
||||
marginal-text: rgb(255, 255, 255)
|
||||
)
|
||||
);
|
||||
@each $theme, $colors in $themes {
|
||||
@each $name, $color in $colors {
|
||||
@if $name== 'dark' {
|
||||
[data-theme='#{$theme}'] .q-drawer--dark,
|
||||
body[data-theme='#{$theme}'].body--dark,
|
||||
[data-theme='#{$theme}'] .q-menu--dark {
|
||||
background: $color !important;
|
||||
}
|
||||
/* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
|
||||
// set a darker body bg for all themes, when in "dark mode"
|
||||
body[data-theme='#{$theme}'].body--dark {
|
||||
background: scale-color($color, $lightness: -60%);
|
||||
}
|
||||
*/
|
||||
} @else {
|
||||
body[data-theme='#{$theme}'].body--light {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
@if $name== 'info' {
|
||||
[data-theme='#{$theme}'] .q-card--dark,
|
||||
[data-theme='#{$theme}'] .q-stepper--dark {
|
||||
background: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
[data-theme='#{$theme}'] {
|
||||
@each $name, $color in $colors {
|
||||
.bg-#{$name} {
|
||||
background: $color !important;
|
||||
}
|
||||
.text-#{$name} {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='freedom'] .q-drawer--dark {
|
||||
background: #0a0a0a !important;
|
||||
}
|
||||
|
||||
[data-theme='freedom'] .q-header {
|
||||
background: #0a0a0a !important;
|
||||
}
|
||||
|
||||
[data-theme='cyber'] .q-drawer--dark {
|
||||
background: #0a0a0a !important;
|
||||
}
|
||||
|
||||
[data-theme='cyber'] .q-header {
|
||||
background: #0a0a0a !important;
|
||||
}
|
||||
|
||||
[data-theme='salvador'] .q-drawer--dark {
|
||||
background: #242424 !important;
|
||||
}
|
||||
|
||||
[data-theme='salvador'] .q-header {
|
||||
background: #0f47af !important;
|
||||
}
|
||||
@import 'themes';
|
||||
@import 'borders';
|
||||
@import 'background';
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
|
|
|
|||
49
lnbits/static/scss/borders.scss
Normal file
49
lnbits/static/scss/borders.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
@each $theme, $colors in $themes {
|
||||
@each $name, $color in $colors {
|
||||
@if $name== 'primary' {
|
||||
body[data-theme='#{$theme}'].neon-border {
|
||||
.q-card,
|
||||
.q-card.q-card--dark,
|
||||
.q-date,
|
||||
.q-date--dark {
|
||||
border: 2px solid $color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.hard-border {
|
||||
.q-card,
|
||||
.q-card.q-card--dark,
|
||||
.q-date,
|
||||
.q-date--dark {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0, 0, 0, 0.12),
|
||||
0 0 0 1px #ffffff47;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
body.retro-border {
|
||||
.q-card,
|
||||
.q-card.q-card--dark,
|
||||
.q-date,
|
||||
.q-date--dark {
|
||||
border: none;
|
||||
box-shadow:
|
||||
0 1px 5px rgba(255, 255, 255, 0.2),
|
||||
0 2px 2px rgba(255, 255, 255, 0.14),
|
||||
0 3px 1px -2px rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
body.no-border {
|
||||
.q-card,
|
||||
.q-card.q-card--dark,
|
||||
.q-date,
|
||||
.q-date--dark {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
66
lnbits/static/scss/themes.scss
Normal file
66
lnbits/static/scss/themes.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
$themes: (
|
||||
'classic': (
|
||||
primary: #673ab7,
|
||||
secondary: #9c27b0,
|
||||
dark: #1f2234,
|
||||
info: #333646,
|
||||
marginal-bg: #1f2234,
|
||||
marginal-text: #fff
|
||||
),
|
||||
'bitcoin': (
|
||||
primary: #ea611d,
|
||||
secondary: #e56f35,
|
||||
dark: #2d293b,
|
||||
info: #333646,
|
||||
marginal-bg: #000000,
|
||||
marginal-text: #fff
|
||||
),
|
||||
'freedom': (
|
||||
primary: #e22156,
|
||||
secondary: #b91a45,
|
||||
dark: #0a0a0a,
|
||||
info: #1b1b1b,
|
||||
marginal-bg: #2d293b,
|
||||
marginal-text: #fff
|
||||
),
|
||||
'cyber': (
|
||||
primary: #7cb342,
|
||||
secondary: #558b2f,
|
||||
dark: #0a0a0a,
|
||||
info: #1b1b1b,
|
||||
marginal-bg: #2d293b,
|
||||
marginal-text: #fff
|
||||
),
|
||||
'mint': (
|
||||
primary: #3ab77d,
|
||||
secondary: #27b065,
|
||||
dark: #1f342b,
|
||||
info: #334642,
|
||||
marginal-bg: #1f342b,
|
||||
marginal-text: #fff
|
||||
),
|
||||
'autumn': (
|
||||
primary: #b7763a,
|
||||
secondary: #b07927,
|
||||
dark: #34291f,
|
||||
info: #463f33,
|
||||
marginal-bg: #342a1f,
|
||||
marginal-text: rgb(255, 255, 255)
|
||||
),
|
||||
'flamingo': (
|
||||
primary: #ff00ff,
|
||||
secondary: #fda3fd,
|
||||
dark: #2f032f,
|
||||
info: #bc23bc,
|
||||
marginal-bg: #311231,
|
||||
marginal-text: rgb(255, 255, 255)
|
||||
),
|
||||
'monochrome': (
|
||||
primary: #494949,
|
||||
secondary: #6b6b6b,
|
||||
dark: #000,
|
||||
info: rgb(39, 39, 39),
|
||||
marginal-bg: #000,
|
||||
marginal-text: rgb(255, 255, 255)
|
||||
)
|
||||
);
|
||||
|
|
@ -423,9 +423,6 @@
|
|||
Object.keys(WINDOW_SETTINGS).forEach(key => {
|
||||
window[key] = WINDOW_SETTINGS[key]
|
||||
})
|
||||
if (LNBITS_THEME_OPTIONS && LNBITS_THEME_OPTIONS.length) {
|
||||
window.allowedThemes = LNBITS_THEME_OPTIONS.map(str => str.trim())
|
||||
}
|
||||
</script>
|
||||
{% include('components.vue') %} {% block vue_templates %}{% endblock %} {%
|
||||
for url in INCLUDED_JS %}
|
||||
|
|
|
|||
|
|
@ -49,9 +49,6 @@
|
|||
Object.keys(WINDOW_SETTINGS).forEach(key => {
|
||||
window[key] = WINDOW_SETTINGS[key]
|
||||
})
|
||||
if (LNBITS_THEME_OPTIONS && LNBITS_THEME_OPTIONS.length) {
|
||||
window.allowedThemes = LNBITS_THEME_OPTIONS.map(str => str.trim())
|
||||
}
|
||||
</script>
|
||||
{% include('components.vue') %}{% block vue_templates %}{% endblock %} {%
|
||||
for url in INCLUDED_JS %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue