Added freedom forum theme
This commit is contained in:
benarc
parent
d1d252210c
commit
165d663491
2 changed files with 121 additions and 170 deletions
|
|
@ -1,63 +1,14 @@
|
||||||
$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,
|
|
||||||
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 {
|
|
||||||
@if $name=='dark' {
|
@if $name=='dark' {
|
||||||
[data-theme='#{$theme}'] .q-drawer--dark,
|
[data-theme='#{$theme}'] .q-drawer--dark,
|
||||||
body[data-theme='#{$theme}'].body--dark,
|
body[data-theme='#{$theme}'].body--dark,
|
||||||
[data-theme='#{$theme}'] .q-menu--dark {
|
[data-theme='#{$theme}'] .q-menu--dark {
|
||||||
background: $color !important;
|
background: $color !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
|
/* 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 {
|
||||||
|
|
@ -73,7 +24,8 @@ $themes: (
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[data-theme='#{$theme}'] {
|
[data-theme='#{$theme}'] {
|
||||||
@each $name, $color in $colors {
|
@each $name,
|
||||||
|
$color in $colors {
|
||||||
.bg-#{$name} {
|
.bg-#{$name} {
|
||||||
background: $color !important;
|
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 {
|
[data-theme='salvador'] .q-drawer--dark {
|
||||||
background: #242424 !important;
|
background: #242424 !important;
|
||||||
}
|
}
|
||||||
|
|
@ -119,7 +80,6 @@ body.body--dark .q-field--error {
|
||||||
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;
|
||||||
|
|
@ -136,7 +96,6 @@ body.body--dark .q-field--error {
|
||||||
.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 {
|
||||||
|
|
@ -150,13 +109,11 @@ a.inherit {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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;
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,17 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
{% for url in VENDORED_CSS %}
|
{% for url in VENDORED_CSS %}
|
||||||
<link rel="stylesheet" type="text/css" href="{{ url }}" />
|
<link rel="stylesheet" type="text/css" href="{{ url }}" /> {% endfor %}
|
||||||
{% endfor %}
|
|
||||||
<!---->
|
<!---->
|
||||||
<link rel="stylesheet" type="text/css" href="/static/css/base.css" />
|
<link rel="stylesheet" type="text/css" href="/static/css/base.css" /> {% block styles %}{% endblock %}
|
||||||
|
|
||||||
{% 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">
|
||||||
|
|
@ -25,25 +19,15 @@
|
||||||
<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
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
icon="menu"
|
|
||||||
@click="g.visibleDrawer = !g.visibleDrawer"
|
|
||||||
></q-btn>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
<q-toolbar-title>
|
<q-toolbar-title>
|
||||||
<q-btn flat no-caps dense size="lg" type="a" href="/">
|
<q-btn flat no-caps dense size="lg" type="a" href="/">
|
||||||
{% block toolbar_title %} {% if SITE_TITLE != 'LNbits' %} {{
|
{% block toolbar_title %} {% if SITE_TITLE != 'LNbits' %} {{ SITE_TITLE }} {% else %} <strong>LN</strong>bits {% endif %} {% endblock %}</q-btn>
|
||||||
SITE_TITLE }} {% else %} <strong>LN</strong>bits {% endif %} {%
|
|
||||||
endblock %}</q-btn
|
|
||||||
>
|
|
||||||
</q-toolbar-title>
|
</q-toolbar-title>
|
||||||
{% block beta %}
|
{% block beta %}
|
||||||
<q-badge color="yellow" text-color="black" class="q-mr-md">
|
<q-badge color="yellow" text-color="black" class="q-mr-md">
|
||||||
<span
|
<span><span v-show="$q.screen.gt.sm"
|
||||||
><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
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue