diff --git a/src/themes.js b/src/themes.js index bef432d..dd66c56 100644 --- a/src/themes.js +++ b/src/themes.js @@ -18,65 +18,45 @@ function parseMeta(css){ } function applyThemes(){ - document.querySelectorAll(".avia-theme-style").forEach(e=>e.remove()); - const themes = getThemes(); - themes.forEach(theme=>{ if(!theme.enabled) return; - const style=document.createElement("style"); style.className="avia-theme-style"; style.textContent=theme.css; - document.head.appendChild(style); }); - } function makeDraggable(panel, handle){ - let dragging=false,offsetX,offsetY; - handle.addEventListener("mousedown",e=>{ dragging=true; offsetX=e.clientX-panel.offsetLeft; offsetY=e.clientY-panel.offsetTop; document.body.style.userSelect="none"; }); - - document.addEventListener("mouseup",()=>{ - dragging=false; - document.body.style.userSelect=""; - }); - + document.addEventListener("mouseup",()=>{dragging=false;document.body.style.userSelect="";}); document.addEventListener("mousemove",e=>{ if(!dragging) return; - panel.style.left=(e.clientX-offsetX)+"px"; panel.style.top=(e.clientY-offsetY)+"px"; panel.style.right="auto"; panel.style.bottom="auto"; }); - } function openThemeEditor(theme){ - editingTheme = theme; - let panel = document.getElementById('avia-theme-editor'); - if(panel){ panel.style.display="flex"; panel.querySelector("textarea").value = theme.css; return; } - panel=document.createElement("div"); panel.id="avia-theme-editor"; - Object.assign(panel.style,{ position:"fixed", bottom:"24px", @@ -93,10 +73,8 @@ function openThemeEditor(theme){ overflow:"hidden", border:"1px solid rgba(255,255,255,0.08)" }); - const header=document.createElement("div"); header.textContent="Theme Editor"; - Object.assign(header.style,{ padding:"14px 16px", fontWeight:"600", @@ -105,23 +83,12 @@ function openThemeEditor(theme){ borderBottom:"1px solid rgba(255,255,255,0.08)", cursor:"move" }); - makeDraggable(panel,header); - const close=document.createElement("div"); close.textContent="✕"; - - Object.assign(close.style,{ - position:"absolute", - right:"16px", - top:"12px", - cursor:"pointer" - }); - + Object.assign(close.style,{position:"absolute",right:"16px",top:"12px",cursor:"pointer"}); close.onclick=()=>panel.style.display="none"; - const textarea=document.createElement("textarea"); - Object.assign(textarea.style,{ flex:"1", border:"none", @@ -133,46 +100,30 @@ function openThemeEditor(theme){ fontFamily:"monospace", fontSize:"13px" }); - textarea.value=theme.css; - textarea.addEventListener("input",()=>{ - const themes=getThemes(); const t=themes.find(x=>x.id===editingTheme.id); if(!t) return; - t.css=textarea.value; - setThemes(themes); applyThemes(); - - if(window.__avia_refresh_themes_panel){ - window.__avia_refresh_themes_panel(); - } - + if(window.__avia_refresh_themes_panel){window.__avia_refresh_themes_panel();} }); - panel.appendChild(header); panel.appendChild(close); panel.appendChild(textarea); - document.body.appendChild(panel); - } function toggleThemesPanel(){ - let panel=document.getElementById("avia-themes-panel"); - if(panel){ panel.style.display = panel.style.display==="none"?"flex":"none"; return; } - panel=document.createElement("div"); panel.id="avia-themes-panel"; - Object.assign(panel.style,{ position:"fixed", bottom:"40px", @@ -189,10 +140,8 @@ function toggleThemesPanel(){ overflow:"hidden", border:"1px solid rgba(255,255,255,0.08)" }); - const header=document.createElement("div"); header.textContent="Themes"; - Object.assign(header.style,{ padding:"14px 16px", fontWeight:"600", @@ -201,24 +150,13 @@ function toggleThemesPanel(){ borderBottom:"1px solid rgba(255,255,255,0.08)", cursor:"move" }); - makeDraggable(panel,header); - const close=document.createElement("div"); close.textContent="✕"; - - Object.assign(close.style,{ - position:"absolute", - right:"16px", - top:"12px", - cursor:"pointer" - }); - + Object.assign(close.style,{position:"absolute",right:"16px",top:"12px",cursor:"pointer"}); close.onclick=()=>panel.style.display="none"; - const importBtn=document.createElement("button"); importBtn.textContent="Import Theme"; - Object.assign(importBtn.style,{ margin:"10px", padding:"10px", @@ -230,17 +168,9 @@ function toggleThemesPanel(){ cursor:"pointer", transition:"all .15s ease" }); - - importBtn.onmouseenter=()=>{ - importBtn.style.background="rgba(255,255,255,0.12)"; - }; - - importBtn.onmouseleave=()=>{ - importBtn.style.background="rgba(255,255,255,0.06)"; - }; - + importBtn.onmouseenter=()=>{importBtn.style.background="rgba(255,255,255,0.12)";}; + importBtn.onmouseleave=()=>{importBtn.style.background="rgba(255,255,255,0.06)";}; const list=document.createElement("div"); - Object.assign(list.style,{ flex:"1", overflowY:"auto", @@ -249,26 +179,17 @@ function toggleThemesPanel(){ flexDirection:"column", gap:"8px" }); - panel.appendChild(header); panel.appendChild(close); panel.appendChild(importBtn); panel.appendChild(list); - document.body.appendChild(panel); - function render(){ - list.innerHTML=""; - const themes=getThemes(); - themes.forEach(theme=>{ - const meta=parseMeta(theme.css); - const card=document.createElement("div"); - Object.assign(card.style,{ padding:"10px", borderRadius:"10px", @@ -277,125 +198,69 @@ function toggleThemesPanel(){ justifyContent:"space-between", alignItems:"center" }); - const info=document.createElement("div"); - info.innerHTML=` -
${meta.name}
-
${meta.author} • v${meta.version}
-
${meta.description}
- `; - + info.innerHTML=`
${meta.name}
${meta.author} • v${meta.version}
${meta.description}
`; const controls=document.createElement("div"); - const toggle=document.createElement("button"); toggle.textContent=theme.enabled?"Disable":"Enable"; - toggle.onclick=()=>{ theme.enabled=!theme.enabled; setThemes(themes); applyThemes(); render(); }; - const edit=document.createElement("button"); edit.textContent="Edit"; edit.onclick=()=>openThemeEditor(theme); - const del=document.createElement("button"); del.textContent="Delete"; - del.onclick=()=>{ const updated=themes.filter(t=>t.id!==theme.id); setThemes(updated); applyThemes(); render(); }; - - [toggle,edit,del].forEach(b=>{ - Object.assign(b.style,{ - marginLeft:"6px", - padding:"4px 8px", - borderRadius:"6px", - border:"none", - cursor:"pointer" - }); - controls.appendChild(b); - }); - + [toggle,edit,del].forEach(b=>{Object.assign(b.style,{marginLeft:"6px",padding:"4px 8px",borderRadius:"6px",border:"none",cursor:"pointer"});controls.appendChild(b);}); card.appendChild(info); card.appendChild(controls); list.appendChild(card); - }); - } - window.__avia_refresh_themes_panel = render; - importBtn.onclick=()=>{ - const input=document.createElement("input"); input.type="file"; input.accept=".css,.txt"; - input.onchange=async()=>{ - const file=input.files[0]; if(!file) return; - const css=await file.text(); - const themes=getThemes(); - - themes.push({ - id:crypto.randomUUID(), - css, - enabled:true - }); - + themes.push({id:crypto.randomUUID(),css,enabled:true}); setThemes(themes); applyThemes(); render(); - }; - input.click(); - }; - render(); - } function injectButton(){ - if(document.getElementById("avia-themes-btn")) return; - - const appearanceBtn=[...document.querySelectorAll("a")] - .find(a=>a.textContent.trim()==="Appearance"); - + const appearanceBtn=[...document.querySelectorAll("a")].find(a=>a.textContent.trim()==="Appearance"); const quickCSS=document.getElementById("stoat-fake-quickcss"); - if(!appearanceBtn || !quickCSS) return; - const clone=appearanceBtn.cloneNode(true); clone.id="avia-themes-btn"; - - const text=[...clone.querySelectorAll("div")] - .find(d=>d.children.length===0); - + const text=[...clone.querySelectorAll("div")].find(d=>d.children.length===0); if(text) text.textContent="(Avia) Themes"; - clone.onclick=toggleThemesPanel; - - quickCSS.parentElement.insertBefore(clone,quickCSS.nextSibling); - + quickCSS.parentElement.insertBefore(clone, quickCSS.nextSibling); } -new MutationObserver(injectButton) -.observe(document.body,{childList:true,subtree:true}); - +new MutationObserver(injectButton).observe(document.body,{childList:true,subtree:true}); injectButton(); applyThemes(); -})(); \ No newline at end of file +})();