Merge pull request #93 from ipnet-mesh/feat/theme-improvements

Add radial glow and solid tint backgrounds to panels and filter bars

Author: jinglemansweep

src/meshcore_hub/web/static/css/app.css

@@ -25,6 +25,7 @@
     --color-messages: oklch(0.75 0.18 180);    /* teal */
     --color-map: oklch(0.8471 0.199 83.87);      /* yellow (matches btn-warning) */
     --color-members: oklch(0.72 0.17 50);      /* orange */
+    --color-neutral: oklch(0.3 0.01 250);     /* subtle dark grey */
 }
 
 /* Light mode: darker section colors for contrast on light backgrounds */
@@ -35,6 +36,7 @@
     --color-messages: oklch(0.55 0.18 180);
     --color-map: oklch(0.58 0.16 45);
     --color-members: oklch(0.55 0.18 25);
+    --color-neutral: oklch(0.85 0.01 250);
 }
 
 /* ==========================================================================
@@ -90,6 +92,34 @@
     color: #fff !important;
 }
 
+/* ==========================================================================
+   Panel Glow
+   Radial color glow from bottom-right corner.
+   Set --panel-color on the element for a section-tinted glow.
+   ========================================================================== */
+
+.panel-glow {
+    background-image:
+        radial-gradient(
+            ellipse at 80% 80%,
+            color-mix(in oklch, var(--panel-color, transparent) 15%, transparent),
+            transparent 70%
+        );
+}
+
+.panel-glow.panel-glow-tl {
+    background-image:
+        radial-gradient(
+            ellipse at 20% 20%,
+            color-mix(in oklch, var(--panel-color, transparent) 15%, transparent),
+            transparent 70%
+        );
+}
+
+.panel-solid {
+    background-color: color-mix(in oklch, var(--panel-color, transparent) 10%, oklch(var(--b1)));
+}
+
 /* ==========================================================================
    Scrollbar Styling
    ========================================================================== */

src/meshcore_hub/web/static/js/spa/pages/advertisements.js

@@ -160,7 +160,7 @@ ${content}`, container);
         });
 
         renderPage(html`
-<div class="card bg-base-100 shadow mb-6">
+<div class="card shadow mb-6 panel-solid" style="--panel-color: var(--color-neutral)">
     <div class="card-body py-4">
         <form method="GET" action="/advertisements" class="flex gap-4 flex-wrap items-end" @submit=${createFilterHandler('/advertisements', navigate)}>
             <div class="form-control">

src/meshcore_hub/web/static/js/spa/pages/dashboard.js

@@ -45,7 +45,7 @@ function renderRecentAds(ads) {
     if (!ads || ads.length === 0) {
         return html`<p class="text-sm opacity-70">No advertisements recorded yet.</p>`;
     }
-    const rows = ads.map(ad => {
+    const rows = ads.slice(0, 5).map(ad => {
         const friendlyName = ad.tag_name || ad.name;
         const displayName = friendlyName || (ad.public_key.slice(0, 12) + '...');
         const keyLine = friendlyName
@@ -98,7 +98,7 @@ function renderChannelMessages(channelMessages) {
         </div>`;
     });
 
-    return html`<div class="card bg-base-100 shadow-xl">
+    return html`<div class="card bg-base-100 shadow-xl panel-glow" style="--panel-color: var(--color-neutral)">
         <div class="card-body">
             <h2 class="card-title">
                 ${iconChannel('h-6 w-6')}
@@ -148,7 +148,7 @@ export async function render(container, params, router) {
 ${topCount > 0 ? html`
 <div class="grid grid-cols-1 ${topGrid} gap-6 mb-6">
     ${showNodes ? html`
-    <div class="stat bg-base-100 rounded-box shadow">
+    <div class="stat bg-base-100 rounded-box shadow-xl panel-glow" style="--panel-color: ${pageColors.nodes}">
         <div class="stat-figure" style="color: ${pageColors.nodes}">
             ${iconNodes('h-8 w-8')}
         </div>
@@ -158,7 +158,7 @@ ${topCount > 0 ? html`
     </div>` : nothing}
 
     ${showAdverts ? html`
-    <div class="stat bg-base-100 rounded-box shadow">
+    <div class="stat bg-base-100 rounded-box shadow-xl panel-glow" style="--panel-color: ${pageColors.adverts}">
         <div class="stat-figure" style="color: ${pageColors.adverts}">
             ${iconAdvertisements('h-8 w-8')}
         </div>
@@ -168,7 +168,7 @@ ${topCount > 0 ? html`
     </div>` : nothing}
 
     ${showMessages ? html`
-    <div class="stat bg-base-100 rounded-box shadow">
+    <div class="stat bg-base-100 rounded-box shadow-xl panel-glow" style="--panel-color: ${pageColors.messages}">
         <div class="stat-figure" style="color: ${pageColors.messages}">
             ${iconMessages('h-8 w-8')}
         </div>
@@ -180,7 +180,7 @@ ${topCount > 0 ? html`
 
 <div class="grid grid-cols-1 ${topGrid} gap-6 mb-8">
     ${showNodes ? html`
-    <div class="card bg-base-100 shadow-xl">
+    <div class="card bg-base-100 shadow-xl panel-glow" style="--panel-color: var(--color-neutral)">
         <div class="card-body">
             <h2 class="card-title text-base">
                 ${iconNodes('h-5 w-5')}
@@ -194,7 +194,7 @@ ${topCount > 0 ? html`
     </div>` : nothing}
 
     ${showAdverts ? html`
-    <div class="card bg-base-100 shadow-xl">
+    <div class="card bg-base-100 shadow-xl panel-glow" style="--panel-color: var(--color-neutral)">
         <div class="card-body">
             <h2 class="card-title text-base">
                 ${iconAdvertisements('h-5 w-5')}
@@ -208,7 +208,7 @@ ${topCount > 0 ? html`
     </div>` : nothing}
 
     ${showMessages ? html`
-    <div class="card bg-base-100 shadow-xl">
+    <div class="card bg-base-100 shadow-xl panel-glow" style="--panel-color: var(--color-neutral)">
         <div class="card-body">
             <h2 class="card-title text-base">
                 ${iconMessages('h-5 w-5')}
@@ -225,7 +225,7 @@ ${topCount > 0 ? html`
 ${bottomCount > 0 ? html`
 <div class="grid grid-cols-1 ${bottomGrid} gap-6">
     ${showAdverts ? html`
-    <div class="card bg-base-100 shadow-xl">
+    <div class="card bg-base-100 shadow-xl panel-glow" style="--panel-color: var(--color-neutral)">
         <div class="card-body">
             <h2 class="card-title">
                 ${iconAdvertisements('h-6 w-6')}

src/meshcore_hub/web/static/js/spa/pages/home.js

@@ -67,7 +67,7 @@ export async function render(container, params, router) {
         const showActivityChart = showAdvertSeries || showMessageSeries;
 
         litRender(html`
-<div class="${showStats ? 'grid grid-cols-1 lg:grid-cols-3 gap-6' : ''} bg-base-100 rounded-box p-6">
+<div class="${showStats ? 'grid grid-cols-1 lg:grid-cols-3 gap-6' : ''} bg-base-100 rounded-box shadow-xl p-6">
     <div class="${showStats ? 'lg:col-span-2' : ''} flex flex-col items-center text-center">
         <div class="flex flex-col sm:flex-row items-center gap-4 sm:gap-8 mb-4">
             <img src="${logoUrl}" alt="${networkName}" class="theme-logo h-24 w-24 sm:h-36 sm:w-36" />
@@ -111,7 +111,7 @@ export async function render(container, params, router) {
     ${showStats ? html`
     <div class="flex flex-col gap-4">
         ${features.nodes !== false ? html`
-        <div class="stat bg-base-200 rounded-box">
+        <div class="stat bg-base-200 rounded-box shadow panel-glow" style="--panel-color: ${pageColors.nodes}">
             <div class="stat-figure" style="color: ${pageColors.nodes}">
                 ${iconNodes('h-8 w-8')}
             </div>
@@ -121,7 +121,7 @@ export async function render(container, params, router) {
         </div>` : nothing}
 
         ${features.advertisements !== false ? html`
-        <div class="stat bg-base-200 rounded-box">
+        <div class="stat bg-base-200 rounded-box shadow panel-glow" style="--panel-color: ${pageColors.adverts}">
             <div class="stat-figure" style="color: ${pageColors.adverts}">
                 ${iconAdvertisements('h-8 w-8')}
             </div>
@@ -131,7 +131,7 @@ export async function render(container, params, router) {
         </div>` : nothing}
 
         ${features.messages !== false ? html`
-        <div class="stat bg-base-200 rounded-box">
+        <div class="stat bg-base-200 rounded-box shadow panel-glow" style="--panel-color: ${pageColors.messages}">
             <div class="stat-figure" style="color: ${pageColors.messages}">
                 ${iconMessages('h-8 w-8')}
             </div>

src/meshcore_hub/web/static/js/spa/pages/map.js

@@ -174,7 +174,7 @@ export async function render(container, params, router) {
     </div>
 </div>
 
-<div class="card bg-base-100 shadow mb-6">
+<div class="card shadow mb-6 panel-solid" style="--panel-color: var(--color-neutral)">
     <div class="card-body py-4">
         <div class="flex gap-4 flex-wrap items-end">
             <div class="form-control">

src/meshcore_hub/web/static/js/spa/pages/messages.js

@@ -139,7 +139,7 @@ ${content}`, container);
         });
 
         renderPage(html`
-<div class="card bg-base-100 shadow mb-6">
+<div class="card shadow mb-6 panel-solid" style="--panel-color: var(--color-neutral)">
     <div class="card-body py-4">
         <form method="GET" action="/messages" class="flex gap-4 flex-wrap items-end" @submit=${createFilterHandler('/messages', navigate)}>
             <div class="form-control">

src/meshcore_hub/web/static/js/spa/pages/nodes.js

@@ -133,7 +133,7 @@ ${content}`, container);
         });
 
         renderPage(html`
-<div class="card bg-base-100 shadow mb-6">
+<div class="card shadow mb-6 panel-solid" style="--panel-color: var(--color-neutral)">
     <div class="card-body py-4">
         <form method="GET" action="/nodes" class="flex gap-4 flex-wrap items-end" @submit=${createFilterHandler('/nodes', navigate)}>
             <div class="form-control">