aiolabs/lnbits
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #603 from lnbits/offTheme

Browse source 
Adds Freedom theme to celebrate Oslo Freedom Forum
This commit is contained in:
Arc 2022-04-20 11:25:35 +01:00 • committed by GitHub
commit 8dbe1b3678
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 101 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.env.example
View file

@ -32,8 +32,8 @@ LNBITS_SERVICE_FEE="0.0"
LNBITS_SITE_TITLE="LNbits"
LNBITS_SITE_TAGLINE="free and open-source lightning wallet"
LNBITS_SITE_DESCRIPTION="Some description about your service, will display if title is not 'LNbits'"
# Choose from mint, flamingo, salvador, autumn, monochrome, classic
LNBITS_THEME_OPTIONS="classic, bitcoin, flamingo, mint, autumn, monochrome, salvador"
# Choose from mint, flamingo, freedom, salvador, autumn, monochrome, classic
LNBITS_THEME_OPTIONS="classic, bitcoin, freedom, mint, autumn, monochrome, salvador"
# Choose from LNPayWallet, OpenNodeWallet, LntxbotWallet,
# LndRestWallet, CLightningWallet, LNbitsWallet, SparkWallet, FakeWallet

75
lnbits/static/scss/base.scss
View file

@ -1,63 +1,14 @@
$themes: (
'classic': (
primary: #673ab7,
secondary: #9c27b0,
dark: #1f2234,
info: #333646,
marginal-bg: #1f2234,
marginal-text: #fff
),
'bitcoin': (
primary: #ff9853,
secondary: #ff7353,
dark: #2d293b,
info: #333646,
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: #d11d53,
secondary: #db3e6d,
dark: #803a45,
info: #ec7599,
marginal-bg: #803a45,
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 {
$themes: ( 'classic': ( primary: #673ab7, secondary: #9c27b0, dark: #1f2234, info: #333646, marginal-bg: #1f2234, marginal-text: #fff), 'bitcoin': ( primary: #ff9853, secondary: #ff7353, dark: #2d293b, info: #333646, marginal-bg: #2d293b, marginal-text: #fff), 'freedom': ( primary: #e22156, secondary: #b91a45, 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: #d11d53, secondary: #db3e6d, dark: #803a45, info: #ec7599, marginal-bg: #803a45, 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 {
@ -73,7 +24,8 @@ $themes: (
}
}
[data-theme='#{$theme}'] {
@each $name, $color in $colors {
@each $name,
$color in $colors {
.bg-#{$name} {
background: $color !important;
}
@ -83,6 +35,15 @@ $themes: (
}
}
}
[data-theme='freedom'] .q-drawer--dark {
background: #0a0a0a !important;
}
[data-theme='freedom'] .q-header {
background: #0a0a0a !important;
}
[data-theme='salvador'] .q-drawer--dark {
background: #242424 !important;
}
@ -119,7 +80,6 @@ body.body--dark .q-field--error {
padding-bottom: 5px !important;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
&.q-item--active {
color: inherit;
font-weight: bold;
@ -136,7 +96,6 @@ body.body--dark .q-field--error {
.q-table__bottom {
padding-left: 6px !important;
}
th:last-child,
td:last-child,
.q-table__bottom {
@ -150,13 +109,11 @@ a.inherit {
}
// QR video
video {
border-radius: 3px;
}
// Material icons font
@font-face {
font-family: 'Material Icons';
font-style: normal;

11
lnbits/templates/base.html
View file

@ -7,7 +7,6 @@
{% endfor %}
<!---->
<link rel="stylesheet" type="text/css" href="/static/css/base.css" />
{% block styles %}{% endblock %}
<title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title>
<meta charset="utf-8" />
@ -118,6 +117,16 @@
size="md"
><q-tooltip>elSalvador</q-tooltip>
</q-btn>
<q-btn
v-if="g.allowedThemes.includes('freedom')"
dense
flat
@click="changeColor('freedom')"
icon="format_color_fill"
color="pink-13"
size="md"
><q-tooltip>Freedom</q-tooltip>
</q-btn>
<q-btn
v-if="g.allowedThemes.includes('flamingo')"
dense