From dcaf7219b966d3ccde8efe63a1bdb4e25801b9d3 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 4 Apr 2026 07:46:19 +0000 Subject: [PATCH] fix: editor background opacity, workspace module sizing, and dynamic effects MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Editor textarea: background changed from transparent to rgba(6,8,18,.98) - nearly opaque dark blue - Editor content area: added rgba(8,10,24,.96) background with blur backdrop - Workspace: enlarged goal module (font 40→52px), bigger quick buttons (52→68px min-height) - Module cards: increased padding, font sizes, border visibility - Writing entry: icon 44→52px, title 20→22px, stronger glow effects - Dynamic effects: added entrance animations, hover glow radials, text-shadow on numbers - Font sizes: default editor 16→17px, focus mode 17→18px, size range expanded to 24px - Content max-width: 700→800px for more writing space Agent-Logs-Url: https://github.com/qinfendebingshuo/guanghulab/sessions/e3a1f142-80c1-47b8-b9ce-80e3efd4cb0b Co-authored-by: qinfendebingshuo <207279273+qinfendebingshuo@users.noreply.github.com> --- docs/index.html | 121 ++++++++++++++++++++++++++---------------------- 1 file changed, 65 insertions(+), 56 deletions(-) diff --git a/docs/index.html b/docs/index.html index 2ddf9009..aeaffda6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -190,21 +190,22 @@ label{display:block;font-size:12px;color:var(--dim);margin-bottom:4px;font-weigh .char-role{font-size:10px;color:var(--accent);font-weight:600} /* ═══ PAGE: Editor ═══ */ -.editor-info{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:12px;color:var(--dim);border-bottom:1px solid var(--border);margin-bottom:12px} -.editor-textarea{min-height:calc(100vh - 260px);min-height:calc(100dvh - 260px);resize:none;line-height:var(--da-ed-lh, 2);font-size:var(--da-ed-font, 16px);border:none;background:transparent;padding:0;position:relative;z-index:3} -.editor-textarea:focus{border:none} -.editor-bottom{position:sticky;bottom:0;padding:10px 0;background:rgba(10,10,26,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(100,100,200,.12);font-size:11px;color:var(--dim);z-index:5} +#pg-editor>.content{background:rgba(8,10,24,.96);border-radius:0;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);max-width:var(--da-content-max, 800px);padding:20px 28px} +.editor-info{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:13px;color:var(--dim);border-bottom:1px solid rgba(100,100,200,.2);margin-bottom:16px} +.editor-textarea{min-height:calc(100vh - 240px);min-height:calc(100dvh - 240px);resize:none;line-height:var(--da-ed-lh, 2);font-size:var(--da-ed-font, 17px);border:none;background:rgba(6,8,18,.98);padding:24px 20px;position:relative;z-index:3;border-radius:12px;color:var(--text);box-shadow:inset 0 2px 20px rgba(0,0,0,.3);transition:box-shadow .3s} +.editor-textarea:focus{border:none;box-shadow:inset 0 2px 20px rgba(0,0,0,.3),0 0 20px rgba(110,168,254,.06)} +.editor-bottom{position:sticky;bottom:0;padding:12px 0;background:rgba(8,10,24,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(100,100,200,.15);font-size:12px;color:var(--dim);z-index:5} .ed-bottom-info{display:flex;gap:12px;align-items:center;font-family:var(--f);font-size:11px;color:var(--dim)} /* ═══ Editor Toolbar ═══ */ -.ed-toolbar{display:flex;gap:4px;align-items:center;flex-wrap:wrap} -.ed-toolbar .tb-btn{background:rgba(8,14,30,.6);border:1px solid rgba(110,168,254,.1);color:var(--dim);width:34px;height:30px;border-radius:8px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .25s;font-family:var(--f);position:relative;overflow:hidden} -.ed-toolbar .tb-btn:hover{color:var(--accent);border-color:rgba(110,168,254,.3);box-shadow:0 0 12px rgba(110,168,254,.1);background:rgba(110,168,254,.08)} +.ed-toolbar{display:flex;gap:5px;align-items:center;flex-wrap:wrap} +.ed-toolbar .tb-btn{background:rgba(10,18,38,.8);border:1px solid rgba(110,168,254,.15);color:var(--dim);width:38px;height:34px;border-radius:8px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .3s;font-family:var(--f);position:relative;overflow:hidden} +.ed-toolbar .tb-btn:hover{color:var(--accent);border-color:rgba(110,168,254,.35);box-shadow:0 0 16px rgba(110,168,254,.12);background:rgba(110,168,254,.1)} .ed-toolbar .tb-btn:active{transform:scale(.9)} -.ed-toolbar .tb-sep{width:1px;height:18px;background:var(--border);margin:0 4px} +.ed-toolbar .tb-sep{width:1px;height:20px;background:rgba(100,100,200,.2);margin:0 5px} /* ═══ Focus Mode ═══ */ .focus-mode .bar,.focus-mode .editor-info,.focus-mode .chat-fab,.focus-mode .mon{opacity:0;pointer-events:none;transition:opacity .4s} -.focus-mode .editor-textarea{min-height:calc(100vh - 80px);min-height:calc(100dvh - 80px);font-size:17px;line-height:2.2} -.focus-mode .editor-bottom{background:transparent;border:none} +.focus-mode .editor-textarea{min-height:calc(100vh - 80px);min-height:calc(100dvh - 80px);font-size:18px;line-height:2.2;padding:32px 28px} +.focus-mode .editor-bottom{background:rgba(8,10,24,.7);border:none} .focus-mode .ed-toolbar{opacity:.3;transition:opacity .3s} .focus-mode .ed-toolbar:hover{opacity:1} .focus-mode:hover .bar{opacity:1;pointer-events:auto} @@ -421,23 +422,31 @@ label{display:block;font-size:12px;color:var(--dim);margin-bottom:4px;font-weigh .mod-card.disabled:hover{transform:none;box-shadow:none;border-color:rgba(110,168,254,.1)} /* ── Workspace Dashboard ── */ -.ws-header{text-align:center;padding:24px 16px 16px} -.ws-header h2{font-size:22px;font-weight:700;margin-bottom:4px} -.ws-header p{font-size:13px;color:var(--dim)} -.ws-goal{background:rgba(10,18,38,.75);border:1px solid rgba(110,168,254,.1);border-radius:var(--r);padding:22px;margin-bottom:14px;text-align:center;transition:all .3s} -.ws-goal:hover{border-color:rgba(110,168,254,.2)} -.ws-goal-title{font-size:12px;color:var(--dim);margin-bottom:8px;font-weight:600} -.ws-goal-num{font-size:40px;font-weight:800;font-family:var(--m);color:var(--accent);margin:6px 0;line-height:1.1} -.ws-goal-sub{font-size:12px;color:var(--dim);margin-top:4px} -.ws-goal-bar{height:8px;background:rgba(110,168,254,.1);border-radius:4px;overflow:hidden;margin:14px 0 8px} -.ws-goal-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px;transition:width .6s cubic-bezier(.4,0,.2,1);position:relative} -.ws-goal-fill::after{content:'';position:absolute;right:0;top:0;bottom:0;width:20px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3));animation:shimmer 2s infinite} +#pg-workspace>.content{max-width:var(--da-content-max, 800px)} +.ws-header{text-align:center;padding:32px 16px 20px} +.ws-header h2{font-size:28px;font-weight:800;margin-bottom:6px;background:linear-gradient(135deg,var(--text),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} +.ws-header p{font-size:14px;color:var(--dim)} +.ws-goal{background:rgba(10,18,38,.88);border:1px solid rgba(110,168,254,.18);border-radius:var(--r);padding:28px;margin-bottom:18px;text-align:center;transition:all .4s;position:relative;overflow:hidden;animation:slideInUp .5s ease-out both} +.ws-goal::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(110,168,254,.06),transparent 70%);pointer-events:none;transition:opacity .4s} +.ws-goal:hover{border-color:rgba(110,168,254,.3);box-shadow:0 0 30px rgba(110,168,254,.1);transform:translateY(-2px)} +.ws-goal-title{font-size:14px;color:var(--dim);margin-bottom:10px;font-weight:600;letter-spacing:.5px} +.ws-goal-num{font-size:52px;font-weight:800;font-family:var(--m);color:var(--accent);margin:8px 0;line-height:1.1;text-shadow:0 0 30px rgba(138,180,248,.3)} +.ws-goal-sub{font-size:14px;color:var(--dim);margin-top:6px} +.ws-goal-bar{height:10px;background:rgba(110,168,254,.12);border-radius:5px;overflow:hidden;margin:16px 0 10px} +.ws-goal-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:5px;transition:width .6s cubic-bezier(.4,0,.2,1);position:relative} +.ws-goal-fill::after{content:'';position:absolute;right:0;top:0;bottom:0;width:30px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35));animation:shimmer 2s infinite} @keyframes shimmer{0%{opacity:0}50%{opacity:1}100%{opacity:0}} -.ws-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0} -.ws-quick-btn{padding:16px 12px;text-align:center;background:rgba(8,14,30,.4);border:1px solid rgba(110,168,254,.08);border-radius:var(--r);cursor:pointer;transition:all .35s;font-size:13px;color:var(--text);font-family:var(--f);min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px} -.ws-quick-btn:hover{border-color:rgba(110,168,254,.25);background:rgba(110,168,254,.05);transform:translateY(-2px);box-shadow:0 0 16px rgba(110,168,254,.08)} +.ws-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0} +.ws-quick-btn{padding:20px 14px;text-align:center;background:rgba(10,18,38,.82);border:1px solid rgba(110,168,254,.15);border-radius:var(--r);cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);font-size:15px;color:var(--text);font-family:var(--f);min-height:68px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden} +.ws-quick-btn::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(110,168,254,.04),transparent 70%);opacity:0;transition:opacity .4s} +.ws-quick-btn:hover{border-color:rgba(110,168,254,.35);background:rgba(110,168,254,.08);transform:translateY(-3px);box-shadow:0 4px 24px rgba(110,168,254,.12)} +.ws-quick-btn:hover::before{opacity:1} .ws-quick-btn:active{transform:scale(.97)} -.ws-quick-btn em{font-style:normal;font-size:20px} +.ws-quick-btn em{font-style:normal;font-size:24px;filter:drop-shadow(0 0 8px rgba(110,168,254,.2))} +.ws-quick-btn:nth-child(1){animation:slideInUp .4s ease-out both;animation-delay:0s} +.ws-quick-btn:nth-child(2){animation:slideInUp .4s ease-out both;animation-delay:.08s} +.ws-quick-btn:nth-child(3){animation:slideInUp .4s ease-out both;animation-delay:.16s} +.ws-quick-btn:nth-child(4){animation:slideInUp .4s ease-out both;animation-delay:.24s} /* ── Inspiration Page ── */ .insp-input-area{display:flex;gap:8px;margin-bottom:14px} @@ -577,20 +586,20 @@ label{display:block;font-size:12px;color:var(--dim);margin-bottom:4px;font-weigh .fb-compact-hint{font-size:10px;color:var(--muted);margin-top:6px} /* Writing Module Main Entry */ -.writing-entry{background:rgba(10,18,38,.72);border:1px solid rgba(110,168,254,.25);border-radius:var(--r);padding:22px 20px;margin:16px 0;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden} -.writing-entry-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(110,168,254,.06),transparent 60%);pointer-events:none;transition:opacity .4s} -.writing-entry:hover{border-color:rgba(110,168,254,.5);box-shadow:0 0 40px rgba(110,168,254,.15),0 0 80px rgba(167,139,250,.08);transform:translateY(-2px)} -.writing-entry:hover .writing-entry-glow{background:radial-gradient(ellipse at 30% 50%,rgba(110,168,254,.12),transparent 60%)} +.writing-entry{background:rgba(10,18,38,.88);border:1px solid rgba(110,168,254,.3);border-radius:var(--r);padding:28px 24px;margin:16px 0;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden} +.writing-entry-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(110,168,254,.08),transparent 60%);pointer-events:none;transition:opacity .4s} +.writing-entry:hover{border-color:rgba(110,168,254,.55);box-shadow:0 0 40px rgba(110,168,254,.18),0 0 80px rgba(167,139,250,.1);transform:translateY(-3px)} +.writing-entry:hover .writing-entry-glow{background:radial-gradient(ellipse at 30% 50%,rgba(110,168,254,.15),transparent 60%)} .writing-entry:active{transform:scale(.99)} -.writing-entry-inner{display:flex;align-items:center;gap:16px} -.writing-entry-icon{font-size:44px;flex-shrink:0;filter:drop-shadow(0 0 16px rgba(110,168,254,.3));animation:uptimePulse 6s ease-in-out infinite} +.writing-entry-inner{display:flex;align-items:center;gap:18px} +.writing-entry-icon{font-size:52px;flex-shrink:0;filter:drop-shadow(0 0 20px rgba(110,168,254,.35));animation:uptimePulse 6s ease-in-out infinite} .writing-entry-text{flex:1;min-width:0} -.writing-entry-title{display:block;font-size:20px;font-weight:800;margin-bottom:4px;letter-spacing:.3px} -.writing-entry-sub{display:block;font-size:12px;color:var(--dim);margin-bottom:8px} -.writing-entry-tags{display:flex;gap:5px;flex-wrap:wrap} -.writing-entry-arrow{font-size:18px;color:var(--accent);opacity:.6;flex-shrink:0;transition:all .3s} -.writing-entry:hover .writing-entry-arrow{opacity:1;transform:translateX(4px)} -.writing-entry-hint{font-size:11px;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px solid rgba(110,168,254,.08)} +.writing-entry-title{display:block;font-size:22px;font-weight:800;margin-bottom:6px;letter-spacing:.3px} +.writing-entry-sub{display:block;font-size:13px;color:var(--dim);margin-bottom:10px} +.writing-entry-tags{display:flex;gap:6px;flex-wrap:wrap} +.writing-entry-arrow{font-size:22px;color:var(--accent);opacity:.6;flex-shrink:0;transition:all .3s} +.writing-entry:hover .writing-entry-arrow{opacity:1;transform:translateX(6px)} +.writing-entry-hint{font-size:12px;color:var(--muted);margin-top:12px;padding-top:12px;border-top:1px solid rgba(110,168,254,.1)} /* ═══════════════════════════════════════════════ V48.0 Homepage Redesign · 零感域·零点原核 @@ -618,23 +627,23 @@ label{display:block;font-size:12px;color:var(--dim);margin-bottom:4px;font-weigh .domain-tag{display:inline-block;font-size:8px;padding:1px 6px;border-radius:8px;background:rgba(110,168,254,.1);color:var(--accent);margin-top:4px;font-family:var(--m)} /* ── App Module Grid ── */ -.app-section{margin:0 16px 16px} -.app-title{font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px} -.app-grid{display:flex;flex-direction:column;gap:8px} -.app-card{display:flex;align-items:center;gap:14px;padding:16px 14px;background:rgba(10,18,38,.72);border:1px solid rgba(110,168,254,.2);border-radius:var(--r);cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden} -.app-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(110,168,254,.04),transparent 60%);pointer-events:none;transition:opacity .4s} -.app-card:hover{border-color:rgba(110,168,254,.4);box-shadow:0 0 30px rgba(110,168,254,.1);transform:translateY(-2px)} -.app-card:hover::before{background:radial-gradient(ellipse at 20% 50%,rgba(110,168,254,.08),transparent 60%)} +.app-section{margin:0 16px 20px} +.app-title{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:6px} +.app-grid{display:flex;flex-direction:column;gap:10px} +.app-card{display:flex;align-items:center;gap:16px;padding:20px 18px;background:rgba(10,18,38,.85);border:1px solid rgba(110,168,254,.22);border-radius:var(--r);cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden} +.app-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(110,168,254,.05),transparent 60%);pointer-events:none;transition:opacity .4s} +.app-card:hover{border-color:rgba(110,168,254,.45);box-shadow:0 0 35px rgba(110,168,254,.12),0 0 70px rgba(167,139,250,.06);transform:translateY(-3px)} +.app-card:hover::before{background:radial-gradient(ellipse at 20% 50%,rgba(110,168,254,.1),transparent 60%)} .app-card:active{transform:scale(.99)} .app-card.disabled{opacity:.5;cursor:default} .app-card.disabled:hover{transform:none;box-shadow:none;border-color:rgba(110,168,254,.12)} -.app-card-icon{font-size:32px;flex-shrink:0;filter:drop-shadow(0 0 10px rgba(110,168,254,.2))} +.app-card-icon{font-size:38px;flex-shrink:0;filter:drop-shadow(0 0 14px rgba(110,168,254,.25));animation:uptimePulse 8s ease-in-out infinite} .app-card-body{flex:1;min-width:0} -.app-card-body strong{display:block;font-size:15px;font-weight:700;margin-bottom:2px} -.app-card-body span{display:block;font-size:11px;color:var(--dim);margin-bottom:5px} -.app-card-tags{display:flex;gap:4px;flex-wrap:wrap} -.app-card-arrow{font-size:16px;color:var(--accent);opacity:.5;flex-shrink:0;transition:all .3s} -.app-card:hover .app-card-arrow{opacity:1;transform:translateX(3px)} +.app-card-body strong{display:block;font-size:17px;font-weight:700;margin-bottom:3px} +.app-card-body span{display:block;font-size:12px;color:var(--dim);margin-bottom:6px;line-height:1.5} +.app-card-tags{display:flex;gap:5px;flex-wrap:wrap} +.app-card-arrow{font-size:18px;color:var(--accent);opacity:.5;flex-shrink:0;transition:all .3s} +.app-card:hover .app-card-arrow{opacity:1;transform:translateX(4px)} @@ -1319,15 +1328,15 @@ var DA = (function(){ s.setProperty('--da-hub', vw >= 340 ? '1fr 1fr' : '1fr'); // 内容区最大宽度 - s.setProperty('--da-content-max', vw >= 800 ? '700px' : '100%'); + s.setProperty('--da-content-max', vw >= 800 ? '800px' : '100%'); // 标题字号 = 按屏宽比例 s.setProperty('--da-title', Math.max(22, Math.min(44, Math.round(vw * 0.055))) + 'px'); - // 编辑器字号：触控设备至少16px（防iOS自动缩放） - var edFont = touch ? Math.max(16, Math.round(vw * 0.042)) : Math.max(15, Math.min(18, Math.round(vw * 0.013))); + // 编辑器字号：触控设备至少17px（防iOS自动缩放），桌面端16-20px + var edFont = touch ? Math.max(17, Math.round(vw * 0.045)) : Math.max(16, Math.min(20, Math.round(vw * 0.014))); s.setProperty('--da-ed-font', edFont + 'px'); - s.setProperty('--da-ed-lh', touch ? '1.9' : '2.1'); + s.setProperty('--da-ed-lh', touch ? '2.0' : '2.1'); // 顶栏高度 s.setProperty('--da-bar-h', (touch ? 44 : 48) + 'px'); @@ -1928,8 +1937,8 @@ document.getElementById('edNewCh').onclick=function(){ // Editor font size controls (function(){ - var sizes=[14,15,16,17,18,20,22]; - var idx=2; // default 16px + var sizes=[15,16,17,18,20,22,24]; + var idx=2; // default 17px try{var sv=localStorage.getItem('hl-ed-font-idx');if(sv!==null)idx=parseInt(sv)}catch(e){} function applySize(){ document.documentElement.style.setProperty('--da-ed-font',sizes[idx]+'px');