v1.8.12: branding colors — full override including glass borders, glows, rgba values via applyBrandingColors()

This commit is contained in:
2026-05-28 20:58:25 +00:00
parent 9f489fbbcb
commit 8b88fed23f
5 changed files with 48 additions and 44 deletions
+2 -17
View File
@@ -1525,15 +1525,7 @@ async function loadBranding() {
document.getElementById('b-secondary-hex').value = d.secondary_color||'#95d3ba';
document.getElementById('preview-primary').style.background = d.primary_color||'#4edea3';
document.getElementById('preview-secondary').style.background = d.secondary_color||'#95d3ba';
// Apply colors live to admin CSS variables + override Tailwind classes
if(d.primary_color || d.secondary_color) {
const p=d.primary_color||'#4edea3', s=d.secondary_color||'#95d3ba';
document.documentElement.style.setProperty('--primary', p);
document.documentElement.style.setProperty('--secondary', s);
let bs = document.getElementById('branding-color-override');
if(!bs){bs=document.createElement('style');bs.id='branding-color-override';document.head.appendChild(bs);}
bs.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}.hover\:text-primary:hover{color:${p}!important}.focus\:border-primary:focus{border-color:${p}!important}`;
}
applyBrandingColors(d.primary_color, d.secondary_color);
// Logo
if(d.logo_url) document.getElementById('b-logo').value = d.logo_url;
if(d.logo_size) document.getElementById('b-logo-size').value = d.logo_size;
@@ -1554,14 +1546,7 @@ async function saveBranding() {
toast('Branding saved!','success');
const p=document.getElementById('b-primary-hex')?.value;
const s=document.getElementById('b-secondary-hex')?.value;
if(p||s){
const pc=p||'#4edea3', sc=s||'#95d3ba';
document.documentElement.style.setProperty('--primary',pc);
document.documentElement.style.setProperty('--secondary',sc);
let bs=document.getElementById('branding-color-override');
if(!bs){bs=document.createElement('style');bs.id='branding-color-override';document.head.appendChild(bs);}
bs.textContent=`.text-primary{color:${pc}!important}.bg-primary{background-color:${pc}!important}.border-primary{border-color:${pc}!important}.text-secondary{color:${sc}!important}.hover\:text-primary:hover{color:${pc}!important}`;
}
if(p||s) applyBrandingColors(p,s);
} else { alert('Save failed'); }
} catch(e) { alert('Error: '+e.message); }
}
+23 -21
View File
@@ -370,30 +370,32 @@ let userToken = localStorage.getItem('rag_token');
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);
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}';
document.head.appendChild(st);
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) {
const p = b.primary_color || '#4edea3';
const s = b.secondary_color || '#95d3ba';
document.documentElement.style.setProperty('--primary', p);
document.documentElement.style.setProperty('--secondary', s);
// Override Tailwind hardcoded colors with dynamic style injection
const style = document.createElement('style');
style.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; }
.border-secondary { border-color: ${s} !important; }
.hover\\:text-primary:hover { color: ${p} !important; }
.hover\\:bg-primary:hover { background-color: ${p} !important; }
.focus\\:border-primary:focus { border-color: ${p} !important; }
.shadow-primary { --tw-shadow-color: ${p}; }
`;
document.head.appendChild(style);
}
if(b.primary_color||b.secondary_color){applyBrandingColors(b.primary_color,b.secondary_color);}
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');}
+23 -6
View File
@@ -650,14 +650,31 @@ async function toggleFav(bookId, btn, e) {
}
// ── 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);
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}';
document.head.appendChild(st);
document.documentElement.style.setProperty('--primary',p);
document.documentElement.style.setProperty('--secondary',s);
}
fetch('/branding').then(r=>r.json()).then(b=>{
if(b.site_name){const bn=document.getElementById('brand-name');if(bn)bn.textContent=b.site_name;}
if(b.primary_color || b.secondary_color) {
const p=b.primary_color||'#4edea3', s=b.secondary_color||'#95d3ba';
const style=document.createElement('style');
style.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}.hover\\:text-primary:hover{color:${p}!important}.focus\\:border-primary:focus{border-color:${p}!important}`;
document.head.appendChild(style);
}
if(b.primary_color||b.secondary_color){applyBrandingColors(b.primary_color,b.secondary_color);}
}).catch(()=>{});
// ── Auth Nav ───────────────────────────────────────────────────────────────