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

feat: modern theme stuff like rounded corners and card gradient (#3766)

Browse Source 
Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>
This commit is contained in:
Arc
2026-02-25 07:54:14 +01:00
committed by dni ⚡
co-authored by Vlad Stan
parent 4894b70bad
commit 130f4fd0bc
13 changed files with 431 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lnbits/static/bundle-components.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
lnbits/static/bundle.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
lnbits/static/bundle.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
lnbits/static/css/base.css
+175
View File
@@ -220,6 +220,181 @@ body.body--dark .q-drawer {
backdrop-filter: blur(6px) brightness(0.8);
}
body.rounded-ui .q-card,
body.rounded-ui .q-btn {
border-radius: 10px;
}
body[data-theme=classic].card-gradient .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgba(103, 58, 183, 0.08), rgba(156, 39, 176, 0.06));
}
body[data-theme=classic].card-gradient .q-drawer {
background-image: linear-gradient(165deg, rgba(103, 58, 183, 0.06), rgba(156, 39, 176, 0.04));
}
body[data-theme=classic].card-gradient.body--dark .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgb(38.6192771084, 42.356626506, 64.7807228916), rgba(103, 58, 183, 0.07));
}
body[data-theme=classic].card-gradient.body--dark .q-drawer {
background-image: linear-gradient(165deg, rgb(36.7144578313, 40.2674698795, 61.5855421687), rgba(103, 58, 183, 0.05));
}
body[data-theme=bitcoin].card-gradient .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgba(234, 97, 29, 0.08), rgba(229, 111, 53, 0.06));
}
body[data-theme=bitcoin].card-gradient .q-drawer {
background-image: linear-gradient(165deg, rgba(234, 97, 29, 0.06), rgba(229, 111, 53, 0.04));
}
body[data-theme=bitcoin].card-gradient.body--dark .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgb(54.18, 49.364, 71.036), rgba(234, 97, 29, 0.07));
}
body[data-theme=bitcoin].card-gradient.body--dark .q-drawer {
background-image: linear-gradient(165deg, rgb(51.885, 47.273, 68.027), rgba(234, 97, 29, 0.05));
}
body[data-theme=freedom].card-gradient .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgba(226, 33, 86, 0.08), rgba(185, 26, 69, 0.06));
}
body[data-theme=freedom].card-gradient .q-drawer {
background-image: linear-gradient(165deg, rgba(226, 33, 86, 0.06), rgba(185, 26, 69, 0.04));
}
body[data-theme=freedom].card-gradient.body--dark .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgb(82.2051282051, 55.1948717949, 63.4153846154), rgba(226, 33, 86, 0.07));
}
body[data-theme=freedom].card-gradient.body--dark .q-drawer {
background-image: linear-gradient(165deg, rgb(79.1538461538, 53.1461538462, 61.0615384615), rgba(226, 33, 86, 0.05));
}
body[data-theme=cyber].card-gradient .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgba(124, 179, 66, 0.08), rgba(85, 139, 47, 0.06));
}
body[data-theme=cyber].card-gradient .q-drawer {
background-image: linear-gradient(165deg, rgba(124, 179, 66, 0.06), rgba(85, 139, 47, 0.04));
}
body[data-theme=cyber].card-gradient.body--dark .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgb(10.2, 10.2, 10.2), rgba(124, 179, 66, 0.07));
}
body[data-theme=cyber].card-gradient.body--dark .q-drawer {
background-image: linear-gradient(165deg, rgb(7.65, 7.65, 7.65), rgba(124, 179, 66, 0.05));
}
body[data-theme=mint].card-gradient .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgba(58, 183, 125, 0.08), rgba(39, 176, 101, 0.06));
}
body[data-theme=mint].card-gradient .q-drawer {
background-image: linear-gradient(165deg, rgba(58, 183, 125, 0.06), rgba(39, 176, 101, 0.04));
}
body[data-theme=mint].card-gradient.body--dark .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgb(38.6192771084, 64.7807228916, 53.5686746988), rgba(58, 183, 125, 0.07));
}
body[data-theme=mint].card-gradient.body--dark .q-drawer {
background-image: linear-gradient(165deg, rgb(36.7144578313, 61.5855421687, 50.9265060241), rgba(58, 183, 125, 0.05));
}
body[data-theme=autumn].card-gradient .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgba(183, 118, 58, 0.08), rgba(176, 121, 39, 0.06));
}
body[data-theme=autumn].card-gradient .q-drawer {
background-image: linear-gradient(165deg, rgba(183, 118, 58, 0.06), rgba(176, 121, 39, 0.04));
}
body[data-theme=autumn].card-gradient.body--dark .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgb(64.7807228916, 51.0771084337, 38.6192771084), rgba(183, 118, 58, 0.07));
}
body[data-theme=autumn].card-gradient.body--dark .q-drawer {
background-image: linear-gradient(165deg, rgb(61.5855421687, 48.5578313253, 36.7144578313), rgba(183, 118, 58, 0.05));
}
body[data-theme=flamingo].card-gradient .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgba(255, 0, 255, 0.08), rgba(253, 163, 253, 0.06));
}
body[data-theme=flamingo].card-gradient .q-drawer {
background-image: linear-gradient(165deg, rgba(255, 0, 255, 0.06), rgba(253, 163, 253, 0.04));
}
body[data-theme=flamingo].card-gradient.body--dark .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgb(66.176, 4.224, 66.176), rgba(255, 0, 255, 0.07));
}
body[data-theme=flamingo].card-gradient.body--dark .q-drawer {
background-image: linear-gradient(165deg, rgb(61.382, 3.918, 61.382), rgba(255, 0, 255, 0.05));
}
body[data-theme=monochrome].card-gradient .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgba(73, 73, 73, 0.08), rgba(107, 107, 107, 0.06));
}
body[data-theme=monochrome].card-gradient .q-drawer {
background-image: linear-gradient(165deg, rgba(73, 73, 73, 0.06), rgba(107, 107, 107, 0.04));
}
body[data-theme=monochrome].card-gradient.body--dark .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgb(10.2, 10.2, 10.2), rgba(73, 73, 73, 0.07));
}
body[data-theme=monochrome].card-gradient.body--dark .q-drawer {
background-image: linear-gradient(165deg, rgb(7.65, 7.65, 7.65), rgba(73, 73, 73, 0.05));
}
body[data-theme=salvador].card-gradient .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgba(25, 118, 210, 0.08), rgba(38, 166, 154, 0.06));
}
body[data-theme=salvador].card-gradient .q-drawer {
background-image: linear-gradient(165deg, rgba(25, 118, 210, 0.06), rgba(38, 166, 154, 0.04));
}
body[data-theme=salvador].card-gradient.body--dark .q-card:not(.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark) {
background-image: linear-gradient(135deg, rgb(43.9888888889, 64.2, 84.4111111111), rgba(25, 118, 210, 0.07));
}
body[data-theme=salvador].card-gradient.body--dark .q-drawer {
background-image: linear-gradient(165deg, rgb(42.2416666667, 61.65, 81.0583333333), rgba(25, 118, 210, 0.05));
}
body.card-shadow .q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark) {
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.18));
}
body.card-shadow.body--dark .q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark) {
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}
:root {
--size: 100px;
--gap: 25px;
lnbits/static/i18n/en.js
+6
View File
@@ -465,6 +465,12 @@ window.localisation.en = {
api_token_id: 'Token Id',
toggle_gradient: 'Toggle Gradient',
gradient_background: 'Gradient Background',
rounded_ui: 'Rounded Cards & Buttons',
toggle_rounded_ui: 'Toggle rounded corners for cards and buttons',
card_gradient: 'Card Gradient',
toggle_card_gradient: 'Toggle gradient on cards',
card_shadow: 'Card Shadow',
toggle_card_shadow: 'Toggle shadow on cards',
language: 'Language',
assets: 'Assets',
max_asset_size_mb: 'Max Asset Size (MB)',
lnbits/static/js/components/lnbits-theme.js
+33
View File
@@ -45,6 +45,30 @@ window.app.component('lnbits-theme', {
document.body.classList.remove('gradient-bg')
}
},
'g.cardRoundedChoice'(val) {
this.$q.localStorage.set('lnbits.cardRounded', val)
if (val === true) {
document.body.classList.add('rounded-ui')
} else {
document.body.classList.remove('rounded-ui')
}
},
'g.cardGradientChoice'(val) {
this.$q.localStorage.set('lnbits.cardGradient', val)
if (val === true) {
document.body.classList.add('card-gradient')
} else {
document.body.classList.remove('card-gradient')
}
},
'g.cardShadowChoice'(val) {
this.$q.localStorage.set('lnbits.cardShadow', val)
if (val === true) {
document.body.classList.add('card-shadow')
} else {
document.body.classList.remove('card-shadow')
}
},
'g.mobileSimple'(val) {
this.$q.localStorage.set('lnbits.mobileSimple', val)
if (val === true) {
@@ -117,6 +141,15 @@ window.app.component('lnbits-theme', {
if (this.g.gradientChoice === true) {
document.body.classList.add('gradient-bg')
}
if (this.g.cardRoundedChoice === true) {
document.body.classList.add('rounded-ui')
}
if (this.g.cardGradientChoice === true) {
document.body.classList.add('card-gradient')
}
if (this.g.cardShadowChoice === true) {
document.body.classList.add('card-shadow')
}
if (this.g.bgimageChoice !== '') {
document.body.classList.add('bg-image')
document.body.style.setProperty(
lnbits/static/js/globals.js
+10 -1
View File
@@ -20,6 +20,15 @@ window.g = Vue.reactive({
themeChoice: localStore('lnbits.theme', SETTINGS.defaultTheme),
borderChoice: localStore('lnbits.border', SETTINGS.defaultBorder),
gradientChoice: localStore('lnbits.gradientBg', SETTINGS.defaultGradient),
cardRoundedChoice: localStore(
'lnbits.cardRounded',
SETTINGS.defaultCardRounded
),
cardGradientChoice: localStore(
'lnbits.cardGradient',
SETTINGS.defaultCardGradient
),
cardShadowChoice: localStore('lnbits.cardShadow', SETTINGS.defaultCardShadow),
reactionChoice: localStore('lnbits.reactions', SETTINGS.defaultReaction),
bgimageChoice: localStore(
'lnbits.backgroundImage',
@@ -31,7 +40,7 @@ window.g = Vue.reactive({
mobileSimple: localStore('lnbits.mobileSimple', true),
walletFlip: localStore('lnbits.walletFlip', false),
lastActiveWallet: localStore('lnbits.lastActiveWallet', null),
darkChoice: localStore('lnbits.darkMode', true),
darkChoice: localStore('lnbits.darkMode', SETTINGS.defaultDark),
// cookie vars
isUserAuthorized: !!Quasar.Cookies.get('is_lnbits_user_authorized'),
isUserImpersonated: !!Quasar.Cookies.get('is_lnbits_user_impersonated'),
lnbits/static/js/pages/account.js
+15 -7
View File
@@ -40,13 +40,7 @@ window.PageAccount = {
}
],
defaultSiteCustomisation: {
locale: 'en',
themeChoice: 'salvador',
bgimageChoice: '',
gradientChoice: true,
darkChoice: true,
borderChoice: 'hard-border',
reactionChoice: 'confettiBothSides'
locale: 'en'
},
reactionOptions: [
'None',
@@ -698,6 +692,20 @@ window.PageAccount = {
} catch (e) {
LNbits.utils.notifyApiError(e)
}
},
resetThemeDefaults() {
const defaults = {
themeChoice: this.g.settings.defaultTheme,
borderChoice: this.g.settings.defaultBorder,
gradientChoice: this.g.settings.defaultGradient,
bgimageChoice: this.g.settings.defaultBgimage || '',
reactionChoice: this.g.settings.defaultReaction,
darkChoice: this.g.settings.defaultDark,
cardRoundedChoice: this.g.settings.defaultCardRounded,
cardGradientChoice: this.g.settings.defaultCardGradient,
cardShadowChoice: this.g.settings.defaultCardShadow
}
this.siteCustomisationChanged(defaults)
}
},
lnbits/static/scss/base.scss
+1
View File
@@ -1,6 +1,7 @@
@use 'themes';
@use 'borders';
@use 'background';
@use 'cards';
@use 'home';
[v-cloak] {
lnbits/static/scss/cards.scss
+72
View File
@@ -0,0 +1,72 @@
@use 'sass:color';
@use 'sass:map';
@use 'themes';
$card-radius: 10px;
body.rounded-ui {
.q-card,
.q-btn {
border-radius: $card-radius;
}
}
@each $theme, $colors in themes.$themes {
$primary: map.get($colors, primary);
$secondary: map.get($colors, secondary);
$dark: map.get($colors, dark);
body[data-theme='#{$theme}'].card-gradient {
.q-card:not(
.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark
) {
background-image: linear-gradient(
135deg,
color.adjust($primary, $alpha: -0.92),
color.adjust($secondary, $alpha: -0.94)
);
}
.q-drawer {
background-image: linear-gradient(
165deg,
color.adjust($primary, $alpha: -0.94),
color.adjust($secondary, $alpha: -0.96)
);
}
}
body[data-theme='#{$theme}'].card-gradient.body--dark {
.q-card:not(
.q-dialog .q-card,
.lnbits__dialog-card,
.q-dialog-plugin--dark
) {
background-image: linear-gradient(
135deg,
color.adjust($dark, $lightness: 4%),
color.adjust($primary, $alpha: -0.93)
);
}
.q-drawer {
background-image: linear-gradient(
165deg,
color.adjust($dark, $lightness: 3%),
color.adjust($primary, $alpha: -0.95)
);
}
}
}
body.card-shadow {
.q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark) {
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.18));
}
}
body.card-shadow.body--dark {
.q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark) {
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}
}