AI 界面优化脚本 需打开暗黑模式

为水贴增加护眼护航

// ==UserScript==
// @name         DeepFlood 夜间毛玻璃主题 v2.6（精细交互版）
// @namespace    https://ezren.dev
// @version      2.6.0
// @description  自动识别用户名/标题链接悬停特效 + 色盘即时生效 + 双主题 + 全自定义控制面板
// @match        https://www.deepflood.com/*
// @match        https://deepflood.com/*
// @run-at       document-idle
// @grant        none
// ==/UserScript==

(function () {
  'use strict';
  const LS_KEY = 'df_glass_theme_v26';
  const defaults = {
    theme: 'neon',
    blur: 18, alpha: 0.42, radius: 16, shadow: 32,
    enabled: true,
    contentRounded: false,
    contentGlass: false,
    titleColor: '', usernameColor: '', linkColor: ''
  };
  const state = { ...defaults };
  try { Object.assign(state, JSON.parse(localStorage.getItem(LS_KEY)||'{}')); } catch(_){}

  const style = document.createElement('style');
  style.id = 'df-glass-v26';
  document.documentElement.appendChild(style);

  function themeVars() {
    if (state.theme === 'deepblack') {
      return {
        accent:'#7FA6FF',text:'#E6EAF4',card:'rgba(18,20,28,var(--df-alpha))',
        header:'rgba(10,12,18,.72)',border:'rgba(132,160,255,.14)',
        titleGlow:'rgba(127,166,255,.45)',uname:'#9ca9c6',unameHover:'#d3dbf0',meta:'#78809a',
        backdrop:`radial-gradient(1000px 800px at 15% 12%, rgba(127,166,255,.28), transparent 60%),
                  radial-gradient(1100px 850px at 85% 18%, rgba(79,209,197,.18), transparent 60%),
                  linear-gradient(180deg,#06080f 0%, #0a0d16 50%, #05060b 100%)`
      };
    }
    return {
      accent:'#4FD1C5',text:'#E7ECF7',card:'rgba(30,32,44,var(--df-alpha))',
      header:'rgba(12,16,28,.7)',border:'rgba(99,226,183,.18)',
      titleGlow:'rgba(79,209,197,.40)',uname:'#aab7d5',unameHover:'#d0dcf0',meta:'#7d8399',
      backdrop:`radial-gradient(900px 700px at 10% 10%, rgba(79,209,197,.25), transparent 60%),
                radial-gradient(800px 600px at 90% 15%, rgba(76,111,255,.18), transparent 60%),
                radial-gradient(1200px 900px at 40% 80%, rgba(255,122,89,.12), transparent 60%),
                linear-gradient(180deg,#0a0f1f 0%,#101529 50%,#080a14 100%)`
    };
  }

  function setCSS(){
    const t = themeVars();
    const titleColor = state.titleColor || t.accent;
    const linkColor  = state.linkColor  || t.accent;
    const unameColor = state.usernameColor || t.uname;
    const contentBg = state.contentGlass ? 'rgba(22,24,33,0.6)' : 'rgba(12,14,22,0.92)';
    const contentBlur = state.contentGlass ? 'blur(10px)' : 'none';
    const contentRadius = state.contentRounded ? '12px' : '0';

    style.textContent = `
      :root{
        --df-blur:${state.blur}px;--df-alpha:${state.alpha};
        --df-radius:${state.radius}px;--df-shadow:${state.shadow};
        --df-accent:${t.accent};--df-text:${t.text};
        --df-card-bg:${t.card};--df-border:${t.border};
        --df-title-glow:${t.titleGlow};--df-uname:${t.uname};
        --df-uname-hover:${t.unameHover};--df-meta:${t.meta};
        --df-title-color:${titleColor};--df-link-color:${linkColor};
        --df-username-color:${unameColor};
        --df-content-bg:${contentBg};--df-content-radius:${contentRadius};--df-content-blur:${contentBlur};
      }
      body::before{content:"";position:fixed;inset:0;z-index:-1;background:${t.backdrop};}
      body{color:var(--df-text);background:transparent!important;}
      a{color:var(--df-link-color);} a:hover{opacity:.9;}

      /* 主要卡片 */
      .post-item,.post,article,.card,.panel,.user-card,.comment{
        background:var(--df-card-bg)!important;
        border:1px solid rgba(255,255,255,.08);
        border-radius:var(--df-radius);
        -webkit-backdrop-filter:blur(var(--df-blur));backdrop-filter:blur(var(--df-blur));
        box-shadow:0 8px calc(var(--df-shadow)) rgba(0,0,0,.45);
        transition:all .35s ease;
      }
      .post-item:hover,.card:hover,.panel:hover,.user-card:hover{
        transform:translateY(-2px) scale(1.01);
        box-shadow:0 14px 40px rgba(0,0,0,.6);
      }

      /* 帖子正文 */
      .post-content, .reply-content, .markdown-body, .comment-body {
        background: var(--df-content-bg)!important;
        border-radius: var(--df-content-radius)!important;
        -webkit-backdrop-filter: var(--df-content-blur)!important;
        backdrop-filter: var(--df-content-blur)!important;
        border: 1px solid rgba(255,255,255,.06);
        box-shadow:none!important;
      }

      /* 用户名识别 */
      a[href^="/space/"] {
        color: var(--df-username-color)!important;
        font-weight:500;
        transition:color .2s ease;
      }
      a[href^="/space/"]:hover { color: var(--df-uname-hover)!important; }

      /* 帖子标题识别 */
      a[href^="/post-"] {
        color: var(--df-title-color)!important;
        font-weight:600;
        text-shadow:0 0 6px var(--df-title-glow);
        transition:all .25s ease;
      }
      a[href^="/post-"]:hover {
        transform:translateY(-1px);
        filter:brightness(1.2);
        background:rgba(255,255,255,.05);
        -webkit-backdrop-filter:blur(6px);
        backdrop-filter:blur(6px);
        border-radius:6px;
      }

      /* 控制面板样式 */
      .df-btn{position:fixed;right:20px;bottom:22px;width:46px;height:46px;border-radius:50%;
        border:none;cursor:pointer;z-index:10001;background:rgba(24,28,44,.7);
        -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
        box-shadow:0 8px 24px rgba(0,0,0,.4);color:var(--df-accent);font-size:22px;transition:all .25s ease;}
      .df-btn:hover{box-shadow:0 10px 32px rgba(0,0,0,.55);transform:scale(1.1);}
      .df-card-ui{position:fixed;right:80px;bottom:90px;z-index:10000;width:320px;
        padding:12px 14px;border-radius:14px;background:rgba(22,26,40,.82);
        -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
        border:1px solid var(--df-border);color:#d9e6ff;
        box-shadow:0 20px 40px rgba(0,0,0,.45);
        opacity:0;pointer-events:none;transform:translateY(10px);
        transition:opacity .3s ease,transform .3s ease;}
      .df-card-ui.active{opacity:1;pointer-events:auto;transform:translateY(0);}
      .df-row{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}
      .df-row label{flex:0 0 90px;font-size:12px;opacity:.9}
      .df-row input[type=range]{flex:1}
      .df-color input[type=color]{width:28px;height:28px;padding:0;border:none;background:transparent}
      .df-pills{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 2px}
      .df-pill{padding:6px 10px;border-radius:999px;cursor:pointer;font-size:12px;
        border:1px solid var(--df-border);background:rgba(79,209,197,.08);color:#d9e6ff;}
      .df-pill.active{background:var(--df-accent);color:#0b0f1e;border-color:transparent;}
    `;
  }
  setCSS();

  // 控制面板逻辑
  const btn=document.createElement('button');btn.className='df-btn';btn.textContent='⚙️';document.body.appendChild(btn);
  const panel=document.createElement('div');panel.className='df-card-ui';
  panel.innerHTML=`
    <div class="df-row"><label>主题</label>
      <div class="df-pills">
        <span class="df-pill ${state.theme==='neon'?'active':''}" data-theme="neon">Neon 夜蓝</span>
        <span class="df-pill ${state.theme==='deepblack'?'active':''}" data-theme="deepblack">Deep Black 夜幕</span>
      </div>
    </div>
    <div class="df-row"><label>标题颜色</label><input id="title-color" type="color" value="${state.titleColor||'#4FD1C5'}"></div>
    <div class="df-row"><label>用户名颜色</label><input id="uname-color" type="color" value="${state.usernameColor||'#aab7d5'}"></div>
    <div class="df-row"><label>链接颜色</label><input id="link-color" type="color" value="${state.linkColor||'#4FD1C5'}"></div>
    <div class="df-row"><label>模糊</label><input id="blur" type="range" min="6" max="28" value="${state.blur}"></div>
    <div class="df-row"><label>透明</label><input id="alpha" type="range" min="20" max="80" value="${Math.round(state.alpha*100)}"></div>
    <div class="df-row"><label>正文圆角</label><input id="rounded" type="checkbox" ${state.contentRounded?'checked':''}>
      <label style="flex:0 0 120px">正文毛玻璃</label><input id="glass" type="checkbox" ${state.contentGlass?'checked':''}></div>
    <div class="df-row" style="justify-content:flex-end;gap:8px">
      <button id="save">保存</button><button id="reset">重置</button>
    </div>`;
  document.body.appendChild(panel);

  const qs=id=>panel.querySelector(id);
  const blur=qs('#blur'),alpha=qs('#alpha'),rounded=qs('#rounded'),glass=qs('#glass');
  const titleColor=qs('#title-color'),unameColor=qs('#uname-color'),linkColor=qs('#link-color');
  const saveBtn=qs('#save'),resetBtn=qs('#reset');

  function persist(){localStorage.setItem(LS_KEY,JSON.stringify(state));}

  panel.querySelectorAll('.df-pill').forEach(p=>p.addEventListener('click',()=>{
    panel.querySelectorAll('.df-pill').forEach(x=>x.classList.remove('active'));
    p.classList.add('active');state.theme=p.dataset.theme;setCSS();persist();
  }));

  [blur,alpha].forEach(i=>i.addEventListener('input',()=>{state.blur=+blur.value;state.alpha=(+alpha.value)/100;setCSS();persist();}));
  [titleColor,unameColor,linkColor].forEach(inp=>inp.addEventListener('input',()=>{state[ inp.id.replace('-color','Color') ]=inp.value;setCSS();persist();}));
  rounded.addEventListener('change',()=>{state.contentRounded=rounded.checked;setCSS();persist();});
  glass.addEventListener('change',()=>{state.contentGlass=glass.checked;setCSS();persist();});

  saveBtn.onclick=()=>persist();
  resetBtn.onclick=()=>{Object.assign(state,defaults);setCSS();persist();};

  let open=false;btn.onclick=()=>{open=!open;panel.classList.toggle('active',open);};
  document.addEventListener('click',e=>{if(open && !panel.contains(e.target) && !btn.contains(e.target)){open=false;panel.classList.remove('active');}});
  document.addEventListener('keydown',e=>{if(e.key==='Escape'&&open){open=false;panel.classList.remove('active');}});

})();