heierbtc/lnbits
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added freedom forum theme

Browse Source
This commit is contained in:
benarc 2022-04-20 00:36:11 +01:00
parent d1d252210c
commit 165d663491
2 changed files with 121 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
lnbits/static/scss/base.scss
View File

@ -1,186 +1,143 @@
$themes: ( $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)));
'classic': ( @each $theme,
primary: #673ab7, $colors in $themes {
secondary: #9c27b0, @each $name,
dark: #1f2234, $color in $colors {
info: #333646, @if $name=='dark' {
marginal-bg: #1f2234, [data-theme='#{$theme}'] .q-drawer--dark,
marginal-text: #fff body[data-theme='#{$theme}'].body--dark,
), [data-theme='#{$theme}'] .q-menu--dark {
'bitcoin': ( background: $color !important;
primary: #ff9853, }
secondary: #ff7353, /* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
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 {
@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" // set a darker body bg for all themes, when in "dark mode"
body[data-theme='#{$theme}'].body--dark { body[data-theme='#{$theme}'].body--dark {
background: scale-color($color, $lightness: -60%); background: scale-color($color, $lightness: -60%);
} }
*/ */
}
@if $name=='info' {
[data-theme='#{$theme}'] .q-card--dark,
[data-theme='#{$theme}'] .q-stepper--dark {
background: $color !important;
}
}
} }
@if $name == 'info' { [data-theme='#{$theme}'] {
[data-theme='#{$theme}'] .q-card--dark, @each $name,
[data-theme='#{$theme}'] .q-stepper--dark { $color in $colors {
background: $color !important; .bg-#{$name} {
} background: $color !important;
}
.text-#{$name} {
color: $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='salvador'] .q-drawer--dark { [data-theme='salvador'] .q-drawer--dark {
background: #242424 !important; background: #242424 !important;
} }
[data-theme='salvador'] .q-header { [data-theme='salvador'] .q-header {
background: #0f47af !important; background: #0f47af !important;
} }
[data-theme='flamingo'] .q-drawer--dark { [data-theme='flamingo'] .q-drawer--dark {
background: #e75480 !important; background: #e75480 !important;
} }
[data-theme='flamingo'] .q-header { [data-theme='flamingo'] .q-header {
background: #e75480 !important; background: #e75480 !important;
} }
[v-cloak] { [v-cloak] {
display: none; display: none;
} }
body.body--dark .q-table--dark { body.body--dark .q-table--dark {
background: transparent; background: transparent;
} }
body.body--dark .q-field--error { body.body--dark .q-field--error {
.text-negative, .text-negative,
.q-field__messages { .q-field__messages {
color: yellow !important; color: yellow !important;
} }
} }
.lnbits-drawer__q-list .q-item { .lnbits-drawer__q-list .q-item {
padding-top: 5px !important; padding-top: 5px !important;
padding-bottom: 5px !important; padding-bottom: 5px !important;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
&.q-item--active {
&.q-item--active { color: inherit;
color: inherit; font-weight: bold;
font-weight: bold; }
}
} }
.lnbits__dialog-card { .lnbits__dialog-card {
width: 500px; width: 500px;
} }
.q-table--dense { .q-table--dense {
th:first-child, th:first-child,
td:first-child, td:first-child,
.q-table__bottom { .q-table__bottom {
padding-left: 6px !important; padding-left: 6px !important;
} }
th:last-child,
th:last-child, td:last-child,
td:last-child, .q-table__bottom {
.q-table__bottom { padding-right: 6px !important;
padding-right: 6px !important; }
}
} }
a.inherit { a.inherit {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
// QR video // QR video
video { video {
border-radius: 3px; border-radius: 3px;
} }
// Material icons font // Material icons font
@font-face { @font-face {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(../fonts/material-icons-v50.woff2) format('woff2'); src: url(../fonts/material-icons-v50.woff2) format('woff2');
} }
.material-icons { .material-icons {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-size: 24px; font-size: 24px;
line-height: 1; line-height: 1;
letter-spacing: normal; letter-spacing: normal;
text-transform: none; text-transform: none;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
word-wrap: normal; word-wrap: normal;
direction: ltr; direction: ltr;
-moz-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
// text-wrap // text-wrap
.text-wrap { .text-wrap {
word-break: break-word; word-break: break-word;
} }

70
lnbits/templates/base.html
View File

@ -1,49 +1,33 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
{% for url in VENDORED_CSS %}
<link rel="stylesheet" type="text/css" href="{{ url }}" />
{% endfor %}
<!---->
<link rel="stylesheet" type="text/css" href="/static/css/base.css" />
{% block styles %}{% endblock %} <head>
{% for url in VENDORED_CSS %}
<link rel="stylesheet" type="text/css" href="{{ url }}" /> {% endfor %}
<!---->
<link rel="stylesheet" type="text/css" href="/static/css/base.css" /> {% block styles %}{% endblock %}
<title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title> <title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" /> {% block head_scripts %}{% endblock %}
{% block head_scripts %}{% endblock %} </head>
</head>
<body data-theme="bitcoin"> <body data-theme="bitcoin">
<q-layout id="vue" view="hHh lpR lfr" v-cloak> <q-layout id="vue" view="hHh lpR lfr" v-cloak>
<q-header bordered class="bg-marginal-bg"> <q-header bordered class="bg-marginal-bg">
<q-toolbar> <q-toolbar>
{% block drawer_toggle %} {% block drawer_toggle %}
<q-btn <q-btn dense flat round icon="menu" @click="g.visibleDrawer = !g.visibleDrawer"></q-btn>
dense {% endblock %}
flat <q-toolbar-title>
round <q-btn flat no-caps dense size="lg" type="a" href="/">
icon="menu" {% block toolbar_title %} {% if SITE_TITLE != 'LNbits' %} {{ SITE_TITLE }} {% else %} <strong>LN</strong>bits {% endif %} {% endblock %}</q-btn>
@click="g.visibleDrawer = !g.visibleDrawer" </q-toolbar-title>
></q-btn> {% block beta %}
{% endblock %} <q-badge color="yellow" text-color="black" class="q-mr-md">
<q-toolbar-title> <span><span v-show="$q.screen.gt.sm"
<q-btn flat no-caps dense size="lg" type="a" href="/">
{% block toolbar_title %} {% if SITE_TITLE != 'LNbits' %} {{
SITE_TITLE }} {% else %} <strong>LN</strong>bits {% endif %} {%
endblock %}</q-btn
>
</q-toolbar-title>
{% block beta %}
<q-badge color="yellow" text-color="black" class="q-mr-md">
<span
><span v-show="$q.screen.gt.sm"
>USE WITH CAUTION - {{SITE_TITLE}} wallet is still in </span >USE WITH CAUTION - {{SITE_TITLE}} wallet is still in </span
>BETA</span >BETA</span
> >
@ -118,6 +102,16 @@
size="md" size="md"
><q-tooltip>elSalvador</q-tooltip> ><q-tooltip>elSalvador</q-tooltip>
</q-btn> </q-btn>
<q-btn
v-if="g.allowedThemes.includes('freedom')"
dense
flat
@click="changeColor('freedom')"
icon="format_color_fill"
color="pink-1"
size="md"
><q-tooltip>Freedom</q-tooltip>
</q-btn>
<q-btn <q-btn
v-if="g.allowedThemes.includes('flamingo')" v-if="g.allowedThemes.includes('flamingo')"
dense dense
@ -213,4 +207,4 @@
</script> </script>
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
</body> </body>
</html> </html>