69 lines
1.5 KiB
SCSS
69 lines
1.5 KiB
SCSS
@use 'sass:color';
|
|
@use 'themes';
|
|
|
|
@each $theme, $colors in themes.$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, #fff, var(--q-primary));
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
body.gradient-bg.body--dark {
|
|
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) brightness(0.8);
|
|
}
|
|
}
|