From 22f73ab3b943f2c5d08bdbffc5bdbcbace0e4ae3 Mon Sep 17 00:00:00 2001 From: th Date: Sat, 11 Apr 2026 13:01:27 +0200 Subject: [PATCH] fixes + theme --- data/plugins.json | 4 +- public/css/style.css | 191 ++++++++- public/index.php | 363 ++++++++++++++---- public/js/app.js | 41 +- public/js/hyprcrd.js | 4 +- public/js/modules/board.js | 12 +- public/js/modules/buckets.js | 20 +- public/js/modules/context-menu.js | 50 +-- public/js/modules/detail.js | 8 +- public/js/modules/dialog.js | 2 +- public/js/modules/editor.js | 6 +- public/js/modules/gallery.js | 10 +- public/js/modules/theme.js | 324 +++++++++++++++- public/plugins/chat/backend.php | 10 +- public/plugins/chat/chat.css | 4 +- public/plugins/chat/chat.html | 2 +- public/plugins/chat/chat.js | 21 +- public/plugins/email/email.html | 20 +- public/plugins/email/email.js | 14 +- public/plugins/gitea/gitea.html | 30 +- public/plugins/gitea/gitea.js | 14 +- public/plugins/logseq-import/logseq-import.js | 6 +- public/plugins/slideshow/slideshow.css | 19 + public/plugins/slideshow/slideshow.html | 10 +- public/plugins/slideshow/slideshow.js | 25 ++ 25 files changed, 1004 insertions(+), 206 deletions(-) diff --git a/data/plugins.json b/data/plugins.json index 7e7b58f..312c10b 100644 --- a/data/plugins.json +++ b/data/plugins.json @@ -1,3 +1,5 @@ { - "disabled": [] + "disabled": [ + "logseq-import" + ] } \ No newline at end of file diff --git a/public/css/style.css b/public/css/style.css index 3565f3d..6aa783f 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,5 +1,181 @@ -body { font-family: 'JetBrains Mono', monospace; } -.font-pixel { font-family: var(--t-font-pixel, 'Silkscreen', cursive) !important; } +body { font-family: var(--t-font-content, 'JetBrains Mono', monospace); } +.font-pixel { font-family: var(--t-font-ui, var(--t-font-pixel, 'Silkscreen', cursive)) !important; } +.brand { font-family: 'Silkscreen', cursive !important; } +body.no-scanlines::after { display: none !important; } +#dialog-msg { white-space: pre-line; word-break: break-word; } + +/* ── User-customizable design tokens ── */ +:root { + --ui-radius-card: 0px; + --ui-radius-button: 0px; + --ui-radius-input: 0px; + --ui-radius-modal: 4px; + --ui-radius-tag: 2px; + --ui-radius-image: 4px; + --ui-border-card: 1px; + --ui-border-style: solid; + --ui-bar-height: 3px; + --ui-pad-card: 16px; + --ui-gap-board: 0px; + --ui-shadow-card: none; + --ui-shadow-modal: 0 25px 50px -12px rgba(0,0,0,0.35); + --ui-shadow-header: 0 4px 20px -4px rgba(0,0,0,0.3); + --ui-shadow-footer: 0 -4px 20px -4px rgba(0,0,0,0.3); + --ui-lift-card: 0px; + --ui-blur-overlay: 0px; +} + +#main-header { box-shadow: var(--ui-shadow-header); } +#main-footer { box-shadow: var(--ui-shadow-footer); } + +/* Cards: geometry & shadow driven by design tokens */ +.board-card { + border-radius: var(--ui-radius-card); + border-width: var(--ui-border-card); + border-style: var(--ui-border-style); + box-shadow: var(--ui-shadow-card); + transition: border-color 0.12s, transform 0.15s, box-shadow 0.2s; + overflow: hidden; /* clip card-bar (and other inner elements) to the rounded corners */ +} +.board-card:hover { transform: translateY(calc(0px - var(--ui-lift-card))); } +.board-card > .p-4 { padding: var(--ui-pad-card); } +.board-card .card-tags { flex-shrink: 0; min-height: 18px; } +#board { gap: var(--ui-gap-board); } + +/* Bordered action buttons */ +button[class*="border-t-border"]:not(.toolbar-btn):not(.settings-tab):not(.bucket-tab):not(.ctx-item):not(.tp-btn), +button[class*="border-t-accent"]:not(.toolbar-btn):not(.settings-tab):not(.bucket-tab):not(.ctx-item):not(.tp-btn), +button[class*="border-t-danger"]:not(.toolbar-btn):not(.settings-tab):not(.bucket-tab):not(.ctx-item):not(.tp-btn), +a[class*="border-t-border"], +a[class*="border-t-accent"] { + border-radius: var(--ui-radius-button); +} + +/* Inputs / selects / textareas */ +input:not([type="checkbox"]):not([type="radio"]):not([type="range"])[class*="border-t-border"], +input:not([type="checkbox"]):not([type="radio"]):not([type="range"])[class*="border-t-accent"], +textarea[class*="border-t-border"], +textarea[class*="border-t-accent"], +select[class*="border-t-border"], +select[class*="border-t-accent"] { + border-radius: var(--ui-radius-input); +} + +/* Tag chips */ +.tag-chip { border-radius: var(--ui-radius-tag); } + +/* Prose images & card cover */ +.prose img { border-radius: var(--ui-radius-image); } +.board-card.card-has-cover { border-radius: var(--ui-radius-card); } + +/* Modal containers (the inner box of each overlay) */ +#modal > div, +#detail > div, +#settings-overlay > div, +#help > div, +#search > div, +#tasks > div, +#calendar > div, +#gallery > div, +#dialog > div { + border-radius: var(--ui-radius-modal); + box-shadow: var(--ui-shadow-modal); +} + +/* Overlay backdrop blur (applies to anything that's already an .overlay) */ +.overlay { backdrop-filter: blur(var(--ui-blur-overlay)); -webkit-backdrop-filter: blur(var(--ui-blur-overlay)); } + +/* Animation speed (toggled via body class from applyDesign) */ +body.anim-off *, body.anim-off *::before, body.anim-off *::after { + transition: none !important; + animation: none !important; +} +body.anim-fast *, body.anim-fast *::before, body.anim-fast *::after { + transition-duration: 50ms !important; + animation-duration: 100ms !important; +} +body.anim-slow *, body.anim-slow *::before, body.anim-slow *::after { + transition-duration: 400ms !important; + animation-duration: 600ms !important; +} + +/* ── Theme preview (settings) ── */ +.theme-preview { + position: relative; padding: 14px; overflow: hidden; + background: var(--t-bg); border: 1px solid var(--t-border); border-radius: 3px; +} +.theme-preview .tp-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--t-scanline, rgba(0,0,0,0.04)) 2px, var(--t-scanline, rgba(0,0,0,0.04)) 4px); } +.theme-preview .tp-row { display: flex; gap: 12px; align-items: stretch; position: relative; z-index: 1; } +.theme-preview .tp-card { + flex: 1; min-width: 0; + background: var(--t-surface); + border: var(--tp-border-card, 1px) var(--tp-border-style, solid) var(--t-border); + border-radius: var(--tp-radius-card, 0px); + box-shadow: var(--tp-shadow-card, none); + overflow: hidden; +} +.theme-preview .tp-card-bar { height: var(--tp-bar-height, 3px); background: var(--t-accent); } +.theme-preview .tp-card-body { padding: var(--tp-pad-card, 14px); } +.theme-preview .tp-headline { font-family: var(--tp-font-headline); color: var(--t-bright); font-size: 16px; font-weight: 700; margin-bottom: 4px; } +.theme-preview .tp-content { font-family: var(--tp-font-content); color: var(--t-text); font-size: 11px; line-height: 1.55; margin-bottom: 8px; } +.theme-preview .tp-meta { display: flex; gap: 6px; align-items: center; } +.theme-preview .tp-tag { + font-family: var(--tp-font-ui); font-size: 9px; + color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 12%, transparent); + border: 1px solid color-mix(in srgb, var(--t-accent) 25%, transparent); + border-radius: var(--tp-radius-tag, 2px); padding: 1px 6px; +} +.theme-preview .tp-ui { font-family: var(--tp-font-ui); font-size: 9px; color: var(--t-dim); text-transform: uppercase; letter-spacing: 0.05em; } +.theme-preview .tp-side { display: flex; flex-direction: column; gap: 6px; min-width: 96px; } +.theme-preview .tp-btn { + font-family: var(--tp-font-ui); font-size: 10px; + color: var(--t-accent); border: 1px solid var(--t-accent); + padding: 4px 10px; border-radius: var(--tp-radius-button, 0px); + background: transparent; cursor: pointer; +} +.theme-preview .tp-input { + font-family: var(--tp-font-ui); font-size: 10px; + color: var(--t-text); background: var(--t-bg); + border: 1px solid var(--t-border); + padding: 4px 8px; border-radius: var(--tp-radius-input, 0px); + outline: none; width: 100%; +} + +/* Range slider styling for design panel */ +.design-slider { + flex: 1; height: 4px; + -webkit-appearance: none; appearance: none; + background: var(--t-border); border-radius: 2px; outline: none; cursor: pointer; +} +.design-slider::-webkit-slider-thumb { + -webkit-appearance: none; appearance: none; + width: 12px; height: 12px; border-radius: 50%; + background: var(--t-accent); cursor: pointer; border: none; +} +.design-slider::-moz-range-thumb { + width: 12px; height: 12px; border-radius: 50%; + background: var(--t-accent); cursor: pointer; border: none; +} +.design-row { display: flex; align-items: center; gap: 10px; padding: 2px 0; } +.design-row > label { flex: 0 0 88px; font-size: 11px; color: var(--t-muted); } +.design-row > select { width: 110px; } +.design-row > .design-val { font-family: var(--t-font-pixel); font-size: 9px; color: var(--t-dim); width: 36px; text-align: right; flex-shrink: 0; } +.design-section-label { font-family: var(--t-font-pixel); font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--t-dim); margin: 12px 0 4px; } +.design-section-label:first-child { margin-top: 0; } +#design-advanced > summary { list-style: none; } +#design-advanced > summary::-webkit-details-marker { display: none; } +#design-advanced > summary:hover { color: var(--t-bright); } +#design-advanced .design-advanced-caret { transition: transform 0.15s; display: inline-block; } +#design-advanced[open] .design-advanced-caret { transform: rotate(90deg); } + +/* Settings peek: hide only the dim background so the user can see the real UI behind, while the settings popup stays open and interactive */ +body.settings-peeking #settings-overlay { + background: transparent !important; + pointer-events: none !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} +body.settings-peeking #settings-overlay > div { pointer-events: auto; } /* Toolbar toggles */ .toolbar-toggle { @@ -118,7 +294,8 @@ body::after { .card-spinner { animation: spin 0.8s linear infinite; } /* Cards */ -.card-bar { image-rendering: pixelated; height: 3px; } +.card-bar { image-rendering: pixelated; height: var(--ui-bar-height, 3px); } +.board-card > .card-bar { border-top-left-radius: var(--ui-radius-card); border-top-right-radius: var(--ui-radius-card); } .board-card { min-height: var(--card-min-h, 180px); } .card-layer { position: relative; z-index: 1; } .card-has-cover { @@ -163,8 +340,8 @@ body::after { .card-group::after { top: 8px; opacity: 0.3; left: 8px; right: 8px; } .card-group-badge { position: absolute; - top: -6px; - right: -6px; + top: 6px; + right: 6px; min-width: 20px; height: 20px; padding: 0 6px; @@ -212,7 +389,7 @@ body::after { box-shadow: 0 4px 16px rgba(0,0,0,0.4); z-index: 10; } -.card-glow:hover { box-shadow: 0 0 16px -3px var(--glow-color, rgba(56, 189, 248, 0.15)); } +.card-glow:hover { box-shadow: var(--ui-shadow-card), 0 0 16px -3px var(--glow-color, rgba(56, 189, 248, 0.15)); } .card-selected { outline: 2px solid var(--t-accent) !important; outline-offset: -2px; } .card-select-check { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; @@ -541,7 +718,7 @@ body.detail-image-fs-open { overflow: hidden; } /* Prose (markdown) */ .prose { line-height: 1.75; } -.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--t-bright); font-family: var(--t-font-pixel, 'Silkscreen', cursive); margin: 1.5em 0 0.6em; font-weight: 700; } +.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--t-bright); font-family: var(--t-font-headline, var(--t-font-pixel, 'Silkscreen', cursive)); margin: 1.5em 0 0.6em; font-weight: 700; } .prose h1 { font-size: 1.8em; padding-bottom: 0.3em; border-bottom: 1px solid var(--t-border); } .prose h2 { font-size: 1.4em; } .prose h3 { font-size: 1.15em; } diff --git a/public/index.php b/public/index.php index 7881435..92240fa 100644 --- a/public/index.php +++ b/public/index.php @@ -1020,8 +1020,10 @@ if (str_starts_with($route, '/api/')) { phosphor: { label:'Phosphor', vars:{ '--t-bg':'#0a0f0a','--t-surface':'#0f1a0f','--t-raised':'#142214','--t-border':'#1a3a1a','--t-dim':'#2d5a2d','--t-muted':'#4a8a4a','--t-text':'#7bc67b','--t-bright':'#b8f0b8','--t-accent':'#4ade80','--t-accent2':'#22d3ee','--t-danger':'#f87171','--t-scanline':'rgba(0,0,0,0.1)','--t-overlay':'rgba(5,10,5,0.85)','--t-font-pixel':'"Silkscreen", cursive','--t-cover-gradient':'linear-gradient(180deg, rgba(10,15,10,0.22) 0%, rgba(10,15,10,0.7) 62%, rgba(10,15,10,0.86) 100%)' }}, midnight: { label:'Midnight', vars:{ '--t-bg':'#0f172a','--t-surface':'#162033','--t-raised':'#1c2940','--t-border':'#263650','--t-dim':'#475882','--t-muted':'#7088b0','--t-text':'#a8bdd8','--t-bright':'#e2e8f0','--t-accent':'#a78bfa','--t-accent2':'#f472b6','--t-danger':'#fb7185','--t-scanline':'rgba(0,0,0,0.06)','--t-overlay':'rgba(10,15,30,0.8)','--t-font-pixel':'"Silkscreen", cursive','--t-cover-gradient':'linear-gradient(180deg, rgba(15,23,42,0.22) 0%, rgba(15,23,42,0.7) 62%, rgba(15,23,42,0.86) 100%)' }}, amber: { label:'Amber', vars:{ '--t-bg':'#1a1408','--t-surface':'#231c0e','--t-raised':'#2c2414','--t-border':'#3d3520','--t-dim':'#6b5c38','--t-muted':'#a08c5a','--t-text':'#d4c088','--t-bright':'#fbe8b0','--t-accent':'#fbbf24','--t-accent2':'#fb923c','--t-danger':'#ef4444','--t-scanline':'rgba(0,0,0,0.08)','--t-overlay':'rgba(20,16,5,0.8)','--t-font-pixel':'"Silkscreen", cursive','--t-cover-gradient':'linear-gradient(180deg, rgba(26,20,8,0.22) 0%, rgba(26,20,8,0.7) 62%, rgba(26,20,8,0.86) 100%)' }}, - void: { label:'Void', vars:{ '--t-bg':'#000000','--t-surface':'#0a0a0a','--t-raised':'#141414','--t-border':'#222222','--t-dim':'#444444','--t-muted':'#666666','--t-text':'#a0a0a0','--t-bright':'#e0e0e0','--t-accent':'#ffffff','--t-accent2':'#888888','--t-danger':'#ff4444','--t-scanline':'rgba(0,0,0,0)','--t-overlay':'rgba(0,0,0,0.85)','--t-font-pixel':'"Silkscreen", cursive','--t-cover-gradient':'linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 62%, rgba(0,0,0,0.9) 100%)' }}, - paper: { label:'Paper', vars:{ '--t-bg':'#f4f4f5','--t-surface':'#ffffff','--t-raised':'#e8e8eb','--t-border':'#d4d4d8','--t-dim':'#a1a1aa','--t-muted':'#71717a','--t-text':'#3f3f46','--t-bright':'#18181b','--t-accent':'#2563eb','--t-accent2':'#7c3aed','--t-danger':'#dc2626','--t-scanline':'rgba(0,0,0,0)','--t-overlay':'rgba(244,244,245,0.8)','--t-font-pixel':'"JetBrains Mono", monospace','--t-cover-gradient':'linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.75) 40%, rgba(255,255,255,0.3) 100%)' }}, + void: { label:'Void', vars:{ '--t-bg':'#000000','--t-surface':'#0a0a0a','--t-raised':'#141414','--t-border':'#222222','--t-dim':'#444444','--t-muted':'#666666','--t-text':'#a0a0a0','--t-bright':'#e0e0e0','--t-accent':'#ffffff','--t-accent2':'#888888','--t-danger':'#ff4444','--t-scanline':'rgba(255,255,255,0.04)','--t-overlay':'rgba(0,0,0,0.85)','--t-font-pixel':'"Silkscreen", cursive','--t-cover-gradient':'linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 62%, rgba(0,0,0,0.9) 100%)' }}, + paper: { label:'Bright Mind', vars:{ '--t-bg':'#f4f4f5','--t-surface':'#ffffff','--t-raised':'#e8e8eb','--t-border':'#d4d4d8','--t-dim':'#a1a1aa','--t-muted':'#71717a','--t-text':'#3f3f46','--t-bright':'#18181b','--t-accent':'#2563eb','--t-accent2':'#7c3aed','--t-danger':'#dc2626','--t-scanline':'rgba(0,0,0,0.05)','--t-overlay':'rgba(244,244,245,0.8)','--t-font-pixel':'"JetBrains Mono", monospace','--t-cover-gradient':'linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.75) 40%, rgba(255,255,255,0.3) 100%)' }}, + sand: { label:'Sand', vars:{ '--t-bg':'#d6c5a3','--t-surface':'#e2d5b8','--t-raised':'#ede2c5','--t-border':'#a89572','--t-dim':'#8a7654','--t-muted':'#5d4f36','--t-text':'#3a3120','--t-bright':'#1a1408','--t-accent':'#b91c1c','--t-accent2':'#15803d','--t-danger':'#7c2d12','--t-scanline':'rgba(60,40,20,0.06)','--t-overlay':'rgba(60,50,30,0.75)','--t-font-pixel':'"Silkscreen", cursive','--t-cover-gradient':'linear-gradient(180deg, rgba(214,196,160,0.22) 0%, rgba(214,196,160,0.7) 62%, rgba(214,196,160,0.86) 100%)' }}, + stone: { label:'Stone', vars:{ '--t-bg':'#94a3b8','--t-surface':'#a8b6c8','--t-raised':'#bcc7d5','--t-border':'#64748b','--t-dim':'#475569','--t-muted':'#334155','--t-text':'#1e293b','--t-bright':'#0f172a','--t-accent':'#1d4ed8','--t-accent2':'#7e22ce','--t-danger':'#991b1b','--t-scanline':'rgba(15,23,42,0.06)','--t-overlay':'rgba(50,60,80,0.75)','--t-font-pixel':'"Silkscreen", cursive','--t-cover-gradient':'linear-gradient(180deg, rgba(148,163,184,0.22) 0%, rgba(148,163,184,0.7) 62%, rgba(148,163,184,0.86) 100%)' }}, }; window.applyTheme = function(name) { const t = themes[name] || themes.slate; @@ -1033,38 +1035,153 @@ if (str_starts_with($route, '/api/')) { }); } applyTheme(localStorage.getItem('hyprcrd-theme') || 'slate'); + + window.themeFonts = { + pixel: '"Silkscreen", cursive', + mono: '"JetBrains Mono", monospace', + sans: 'system-ui, -apple-system, sans-serif', + serif: 'Georgia, "Times New Roman", serif', + }; + window.themeFontLabels = { pixel: 'Pixel (Silkscreen)', mono: 'Mono (JetBrains)', sans: 'Sans', serif: 'Serif' }; + window.designShadows = { + none: '0 0 0 0 transparent', + soft: '0 2px 8px rgba(0,0,0,0.18)', + medium: '0 6px 20px -4px rgba(0,0,0,0.35)', + heavy: '0 12px 40px -8px rgba(0,0,0,0.55)', + }; + // Header drops down, footer drops up — same intensity scale. + window.designUiShadows = { + header: { + none: '0 0 0 0 transparent', + soft: '0 2px 8px -2px rgba(0,0,0,0.18)', + medium: '0 4px 20px -4px rgba(0,0,0,0.3)', + heavy: '0 8px 30px -4px rgba(0,0,0,0.5)', + }, + footer: { + none: '0 0 0 0 transparent', + soft: '0 -2px 8px -2px rgba(0,0,0,0.18)', + medium: '0 -4px 20px -4px rgba(0,0,0,0.3)', + heavy: '0 -8px 30px -4px rgba(0,0,0,0.5)', + }, + }; + window.designDefaults = { + // color theme + theme: 'slate', + // typography + scanlines: '1', + fontHeadline: 'pixel', fontContent: 'mono', fontUi: 'pixel', + // geometry + radiusCard: 0, radiusButton: 0, radiusInput: 0, radiusModal: 0, radiusTag: 0, radiusImage: 0, + // borders + borderCard: 1, borderStyle: 'solid', barHeight: 3, + // spacing + padCard: 10, gapBoard: 17, + // effects + shadowCard: 'none', shadowModal: 'medium', shadowUi: 'medium', liftCard: 1, blurOverlay: 0, animSpeed: 'fast', + }; + window.builtinPresets = { + Terminal: { ...window.designDefaults }, + Modern: { theme: 'paper', + scanlines: '0', + fontHeadline: 'mono', fontContent: 'mono', fontUi: 'mono', + radiusCard: 10, radiusButton: 24, radiusInput: 5, radiusModal: 15, radiusTag: 3, radiusImage: 8, + borderCard: 1, borderStyle: 'solid', barHeight: 3, + padCard: 10, gapBoard: 17, + shadowCard: 'none', shadowModal: 'none', shadowUi: 'none', + liftCard: 2, blurOverlay: 5, animSpeed: 'normal' }, + }; + window.applyDesign = function(d) { + const root = document.documentElement.style; + // color theme + if (d.theme && window.themes?.[d.theme]) window.applyTheme(d.theme); + // fonts + root.setProperty('--t-font-headline', window.themeFonts[d.fontHeadline] || window.themeFonts.pixel); + root.setProperty('--t-font-content', window.themeFonts[d.fontContent] || window.themeFonts.mono); + root.setProperty('--t-font-ui', window.themeFonts[d.fontUi] || window.themeFonts.pixel); + // geometry + root.setProperty('--ui-radius-card', d.radiusCard + 'px'); + root.setProperty('--ui-radius-button', d.radiusButton + 'px'); + root.setProperty('--ui-radius-input', d.radiusInput + 'px'); + root.setProperty('--ui-radius-modal', d.radiusModal + 'px'); + root.setProperty('--ui-radius-tag', d.radiusTag + 'px'); + root.setProperty('--ui-radius-image', d.radiusImage + 'px'); + // borders + root.setProperty('--ui-border-card', d.borderCard + 'px'); + root.setProperty('--ui-border-style', d.borderStyle); + root.setProperty('--ui-bar-height', d.barHeight + 'px'); + // spacing + root.setProperty('--ui-pad-card', d.padCard + 'px'); + root.setProperty('--ui-gap-board', d.gapBoard + 'px'); + // effects + root.setProperty('--ui-shadow-card', window.designShadows[d.shadowCard] || 'none'); + root.setProperty('--ui-shadow-modal', window.designShadows[d.shadowModal] || window.designShadows.medium); + root.setProperty('--ui-shadow-header', window.designUiShadows.header[d.shadowUi] || window.designUiShadows.header.medium); + root.setProperty('--ui-shadow-footer', window.designUiShadows.footer[d.shadowUi] || window.designUiShadows.footer.medium); + root.setProperty('--ui-lift-card', d.liftCard + 'px'); + root.setProperty('--ui-blur-overlay', d.blurOverlay + 'px'); + // body classes + document.body.classList.toggle('no-scanlines', String(d.scanlines) !== '1'); + document.body.classList.remove('anim-off', 'anim-fast', 'anim-slow'); + if (d.animSpeed === 'off') document.body.classList.add('anim-off'); + if (d.animSpeed === 'fast') document.body.classList.add('anim-fast'); + if (d.animSpeed === 'slow') document.body.classList.add('anim-slow'); + }; + window.loadDesign = function() { + let saved = {}; + try { saved = JSON.parse(localStorage.getItem('hyprcrd-design') || '{}'); } catch {} + // Migrate legacy individual keys (only if no JSON blob exists yet) + if (!Object.keys(saved).length) { + const legacy = {}; + const sl = localStorage.getItem('hyprcrd-scanlines'); + if (sl !== null) legacy.scanlines = sl; + const fh = localStorage.getItem('hyprcrd-font-headline'); if (fh) legacy.fontHeadline = fh; + const fc = localStorage.getItem('hyprcrd-font-content'); if (fc) legacy.fontContent = fc; + const fu = localStorage.getItem('hyprcrd-font-ui'); if (fu) legacy.fontUi = fu; + saved = legacy; + } + // Always pull the legacy theme key as a fallback so existing users keep their selected theme + if (!saved.theme) { + const t = localStorage.getItem('hyprcrd-theme'); + if (t) saved.theme = t; + } + return { ...window.designDefaults, ...saved }; + }; + window.saveDesign = function(d) { localStorage.setItem('hyprcrd-design', JSON.stringify(d)); }; + // Apply once body exists + const _applySaved = () => window.applyDesign(window.loadDesign()); + if (document.body) _applySaved(); else document.addEventListener('DOMContentLoaded', _applySaved); -
+
-

hyprcrd

+

hyprcrd

v
@@ -1122,39 +1239,39 @@ if (str_starts_with($route, '/api/')) { -