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

Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>

lnbits/settings.py

@@ -296,6 +296,10 @@ class ThemesSettings(LNbitsSettings):
     lnbits_default_border: str = Field(default="hard-border")
     lnbits_default_gradient: bool = Field(default=True)
     lnbits_default_bgimage: str | None = Field(default=None)
+    lnbits_default_dark: bool = Field(default=True)
+    lnbits_default_card_rounded: bool = Field(default=False)
+    lnbits_default_card_gradient: bool = Field(default=False)
+    lnbits_default_card_shadow: bool = Field(default=False)
 
 
 class OpsSettings(LNbitsSettings):
@@ -1186,6 +1190,10 @@ class PublicSettings(BaseModel):
     default_border: str = Field(alias="defaultBorder")
     default_bgimage: str | None = Field(alias="defaultBgimage")
     default_gradient: bool = Field(alias="defaultGradient")
+    default_dark: bool = Field(alias="defaultDark")
+    default_card_rounded: bool = Field(alias="defaultCardRounded")
+    default_card_gradient: bool = Field(alias="defaultCardGradient")
+    default_card_shadow: bool = Field(alias="defaultCardShadow")
     denomination: str | None = Field()
     extensions: list[str] = Field()
     allowed_currencies: list[str] = Field(alias="allowedCurrencies")
@@ -1242,6 +1250,10 @@ class PublicSettings(BaseModel):
             defaultBorder=settings.lnbits_default_border,
             defaultGradient=settings.lnbits_default_gradient,
             defaultBgimage=settings.lnbits_default_bgimage,
+            defaultDark=settings.lnbits_default_dark,
+            defaultCardRounded=settings.lnbits_default_card_rounded,
+            defaultCardGradient=settings.lnbits_default_card_gradient,
+            defaultCardShadow=settings.lnbits_default_card_shadow,
             denomination=settings.lnbits_denomination,
             extensions=list(settings.lnbits_installed_extensions_ids),
             allowedCurrencies=settings.lnbits_allowed_currencies,

lnbits/static/css/base.css

@@ -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

@@ -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

@@ -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

@@ -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

@@ -40,13 +40,7 @@ window.PageAccount = {
         }
       ],
       defaultSiteCustomisation: {
-        locale: 'en',
+        locale: 'en'
-        themeChoice: 'salvador',
-        bgimageChoice: '',
-        gradientChoice: true,
-        darkChoice: true,
-        borderChoice: 'hard-border',
-        reactionChoice: 'confettiBothSides'
       },
       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,6 +1,7 @@
 @use 'themes';
 @use 'borders';
 @use 'background';
+@use 'cards';
 @use 'home';
 
 [v-cloak] {

lnbits/static/scss/cards.scss

@@ -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));
+  }
+}

lnbits/templates/components/admin/site_customisation.vue

@@ -257,12 +257,50 @@
           >
           </q-input>
         </div>
-        <div class="col-12 col-sm-6 col-lg-3">
+      </div>
+      <div class="row q-col-gutter-md q-mb-md">
+        <div class="col-12 col-sm-6 col-lg-2">
           <q-toggle
             type="bool"
             v-model="formData.lnbits_default_gradient"
             color="primary"
-            label="Gradient Background"
+            :label="$t('gradient_background')"
+          >
+          </q-toggle>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-2">
+          <q-toggle
+            type="bool"
+            v-model="formData.lnbits_default_dark"
+            color="primary"
+            :label="$t('toggle_darkmode')"
+          >
+          </q-toggle>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-2">
+          <q-toggle
+            type="bool"
+            v-model="formData.lnbits_default_card_rounded"
+            color="primary"
+            :label="$t('rounded_ui')"
+          >
+          </q-toggle>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-2">
+          <q-toggle
+            type="bool"
+            v-model="formData.lnbits_default_card_gradient"
+            color="primary"
+            :label="$t('card_gradient')"
+          >
+          </q-toggle>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-2">
+          <q-toggle
+            type="bool"
+            v-model="formData.lnbits_default_card_shadow"
+            color="primary"
+            :label="$t('card_shadow')"
           >
           </q-toggle>
         </div>

lnbits/templates/pages/account.vue

@@ -465,6 +465,69 @@
                       </q-toggle>
                     </div>
                   </div>
+                  <div class="row q-mb-md">
+                    <div class="col-4">
+                      <span v-text="$t('rounded_ui')"></span>
+                    </div>
+                    <div class="col-8">
+                      <q-toggle
+                        dense
+                        flat
+                        round
+                        icon="rounded_corner"
+                        v-model="g.cardRoundedChoice"
+                        @update:model-value="
+                          siteCustomisationChanged({cardRoundedChoice: $event})
+                        "
+                      >
+                        <q-tooltip
+                          ><span v-text="$t('toggle_rounded_ui')"></span
+                        ></q-tooltip>
+                      </q-toggle>
+                    </div>
+                  </div>
+                  <div class="row q-mb-md">
+                    <div class="col-4">
+                      <span v-text="$t('card_gradient')"></span>
+                    </div>
+                    <div class="col-8">
+                      <q-toggle
+                        dense
+                        flat
+                        round
+                        icon="gradient"
+                        v-model="g.cardGradientChoice"
+                        @update:model-value="
+                          siteCustomisationChanged({cardGradientChoice: $event})
+                        "
+                      >
+                        <q-tooltip
+                          ><span v-text="$t('toggle_card_gradient')"></span
+                        ></q-tooltip>
+                      </q-toggle>
+                    </div>
+                  </div>
+                  <div class="row q-mb-md">
+                    <div class="col-4">
+                      <span v-text="$t('card_shadow')"></span>
+                    </div>
+                    <div class="col-8">
+                      <q-toggle
+                        dense
+                        flat
+                        round
+                        icon="blur_on"
+                        v-model="g.cardShadowChoice"
+                        @update:model-value="
+                          siteCustomisationChanged({cardShadowChoice: $event})
+                        "
+                      >
+                        <q-tooltip
+                          ><span v-text="$t('toggle_card_shadow')"></span
+                        ></q-tooltip>
+                      </q-toggle>
+                    </div>
+                  </div>
 
                   <div class="row q-mb-md">
                     <div class="col-4">
@@ -539,9 +602,7 @@
                   </div>
                   <q-card-section>
                     <q-btn
-                      @click="
+                      @click="resetThemeDefaults"
-                        siteCustomisationChanged(defaultSiteCustomisation)
-                      "
                       :label="$t('reset_defaults')"
                       filled
                       color="primary"