refactor: theme options, includes fix bg on firefox with dialog (#3247)
Co-authored-by: dni ⚡ <office@dnilabs.com>
This commit is contained in:
Arc
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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)
|
||||
)
|
||||
);
|
||||
Reference in New Issue
Block a user