Merge pull request #269 from qinfendebingshuo/copilot/adjust-ui-background-color
fix: editor background opacity, workspace module sizing, and dynamic effects
This commit is contained in:
冰朔
GitHub
commit
5562e04fdc
|
|
@ -72,6 +72,7 @@
|
|||
| ZY-WEB-007 | OS仪表盘改版 | `docs/index.html` sysPanel | ✅ v44.0 | D44 |
|
||||
| ZY-WEB-008 | 首页重构v48.0 | `docs/index.html` pg-home | ✅ v48.0 | D48 |
|
||||
| ZY-WEB-009 | 团队区更新 | `docs/index.html` team | ✅ v48.0 | D48 |
|
||||
| ZY-WEB-010 | 编辑器背景+工作台UI修复 | `docs/index.html` editor/workspace | ✅ v50.0 | D50 |
|
||||
|
||||
## 四、文档记录类 (ZY-DOC)
|
||||
|
||||
|
|
|
|||
121
docs/index.html
121
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)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -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');
|
||||
|
|
|
|||
Loading…
Reference in New Issue