v1.8.14: branding — full color override (glass/glow/rgba/secondary), bg color+image control

2026-05-28 21:12:48 +00:00
parent 21ae2b4749
commit 808f6c5b79
9 changed files with 243 additions and 57 deletions
@@ -371,31 +371,86 @@ let currentUser = null;

 // ── Branding ──────────────────────────────────────────────────────────────────

-function applyBrandingColors(p, s) {
-  p = p || '#4edea3'; s = s || '#95d3ba';
-  const hr = (hex) => { const r=parseInt(hex.slice(1,3),16),g=parseInt(hex.slice(3,5),16),b=parseInt(hex.slice(5,7),16); return r+','+g+','+b; };
-  const pr = hr(p), sr = hr(s);
+// -- Branding color override --------------------------------------------------
+function applyBrandingColors(p, s, bg, bgImg) {
+  p   = p   || '#4edea3';
+  s   = s   || '#95d3ba';
+  bg  = bg  || '#0c1324';
+  const hr = (hex) => {
+    hex = hex.replace('#','');
+    if(hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
+    return parseInt(hex.slice(0,2),16)+','+parseInt(hex.slice(2,4),16)+','+parseInt(hex.slice(4,6),16);
+  };
+  const pr = hr(p), sr = hr(s), bgr = hr(bg);
+  // Background
+  if(bgImg) { document.body.style.backgroundImage='url('+bgImg+')'; document.body.style.backgroundSize='cover'; document.body.style.backgroundPosition='center'; }
+  else { document.body.style.backgroundImage=''; document.body.style.background='radial-gradient(circle at 50% -20%,'+bg+' 0%,'+bg+' 100%)'; }
+  // Remove old style
  const old = document.getElementById('_bco'); if(old) old.remove();
  const st = document.createElement('style'); st.id='_bco';
-  st.textContent=
-    '.text-primary{color:'+p+'!important}.bg-primary{background-color:'+p+'!important}.border-primary{border-color:'+p+'!important}'+
-    '.text-secondary{color:'+s+'!important}.bg-secondary{background-color:'+s+'!important}'+
-    '.glass{border-color:rgba('+pr+',0.12)!important}'+
-    '.glass-hover:hover{background:rgba('+pr+',0.06)!important;border-color:rgba('+pr+',0.25)!important}'+
-    '.glow{box-shadow:0 0 20px rgba('+pr+',0.15)!important}'+
-    '.glow-sm{box-shadow:0 0 10px rgba('+pr+',0.1)!important}'+
-    '.glass.glow{box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 0 20px rgba('+pr+',0.18),0 4px 24px rgba(0,0,0,0.15)!important}'+
-    '.upload-zone{border-color:rgba('+pr+',0.2)!important}'+
-    '.upload-zone:hover{border-color:rgba('+pr+',0.4)!important}'+
-    '.scrollbar::-webkit-scrollbar-thumb{background:rgba('+pr+',0.2)!important}';
+  st.textContent = [
+    // Primary color — text, bg, border
+    '.text-primary{color:'+p+'!important}',
+    '.bg-primary{background-color:'+p+'!important}',
+    '.border-primary{border-color:'+p+'!important}',
+    '[class*="text-primary"]{color:'+p+'!important}',
+    '[class*="bg-primary\/"]{}',
+    // Secondary
+    '.text-secondary{color:'+s+'!important}',
+    '.bg-secondary{background-color:'+s+'!important}',
+    '.border-secondary{border-color:'+s+'!important}',
+    '.text-tertiary{color:'+s+'!important}',
+    // Hover/focus states
+    '.hover\:text-primary:hover{color:'+p+'!important}',
+    '.hover\:bg-primary\/5:hover{background-color:rgba('+pr+',0.05)!important}',
+    '.focus\:border-primary:focus{border-color:'+p+'!important}',
+    // Active nav
+    '.active.bg-primary\/10{background-color:rgba('+pr+',0.1)!important}',
+    '.active.text-primary{color:'+p+'!important}',
+    'button.active{color:'+p+'!important}',
+    // Glass
+    '.glass{border-color:rgba('+pr+',0.12)!important}',
+    '.glass-hover:hover{background:rgba('+pr+',0.06)!important;border-color:rgba('+pr+',0.25)!important}',
+    // Glows
+    '.glow{box-shadow:0 0 20px rgba('+pr+',0.15)!important}',
+    '.glow-sm{box-shadow:0 0 10px rgba('+pr+',0.1)!important}',
+    '.glass.glow{box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 0 20px rgba('+pr+',0.18),0 4px 24px rgba(0,0,0,0.15)!important}',
+    '.glass.glow-sm{box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 0 10px rgba('+pr+',0.12)!important}',
+    // Spotlight card gradient
+    '.spotlight-card::before{background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba('+pr+',0.06),transparent 60%)!important}',
+    // Alpha variants
+    '.bg-primary\/15,.bg-primary\/10,.bg-primary\/5{background-color:rgba('+pr+',0.1)!important}',
+    '.border-primary\/20{border-color:rgba('+pr+',0.2)!important}',
+    '.border-primary\/30{border-color:rgba('+pr+',0.3)!important}',
+    // Upload zone
+    '.upload-zone{border-color:rgba('+pr+',0.2)!important}',
+    '.upload-zone.dragover{border-color:rgba('+pr+',0.6)!important}',
+    // Scrollbar
+    '.scrollbar::-webkit-scrollbar-thumb{background:rgba('+pr+',0.2)!important}',
+    // Input focus
+    '.inp:focus,.inp:focus-within{border-color:'+p+'!important;box-shadow:0 0 0 2px rgba('+pr+',0.1)!important}',
+    // Filter chips active
+    '.filter-chip.active{background:rgba('+pr+',0.12)!important;border-color:rgba('+pr+',0.4)!important;color:'+p+'!important}',
+    // Book card hover
+    '.book-card:hover{box-shadow:0 8px 24px rgba('+pr+',0.1)!important;border-color:rgba('+pr+',0.28)!important}',
+    // Nav active
+    '.nav-btn.active{background-color:rgba('+pr+',0.1)!important;color:'+p+'!important}',
+    // Sidebar border
+    'aside{border-color:rgba('+pr+',0.2)!important}',
+    // CTA button shimmer
+    '.cta-primary::before{background:linear-gradient(90deg,transparent,rgba('+pr+',0.1),transparent)!important}',
+    // Shadow glow on hover
+    '[class*="hover:shadow"]:hover{--tw-shadow-color:rgba('+pr+',0.4)!important}',
+  ].join('
+');
  document.head.appendChild(st);
-  document.documentElement.style.setProperty('--primary',p);
-  document.documentElement.style.setProperty('--secondary',s);
+  document.documentElement.style.setProperty('--primary', p);
+  document.documentElement.style.setProperty('--secondary', s);
 }
 fetch('/branding').then(r=>r.json()).then(b=>{
  if(b.site_name){document.title=b.site_name;const bn=document.getElementById('brand-name');if(bn)bn.textContent=b.site_name;}
  if(b.site_subtitle){const bs=document.getElementById('brand-sub');if(bs)bs.textContent=b.site_subtitle;}
-  if(b.primary_color||b.secondary_color){applyBrandingColors(b.primary_color,b.secondary_color);}
+  applyBrandingColors(b.primary_color,b.secondary_color,b.bg_color,b.bg_image);
  if(b.logo_url){
    const logo=document.getElementById('brand-logo');
    if(logo){logo.src=b.logo_url;logo.style.height=(b.logo_size||'40')+'px';logo.classList.remove('hidden');}