/* ============================================================ * glass_ui.css — 全站统一毛玻璃 + 金色按钮组件 * 用法：在 中引入 * ============================================================ */ /* ===== 卡片/容器半透明毛玻璃 ===== */ .glass,.table-wrap,.card,.add-form,.login-card,.modal,.cs-menu,.filter-bar input,.cs-trigger,.field input,.form-item input,.form-item textarea,.form-item select{ background:rgba(17,26,46,.5) !important; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(212,175,55,.2); } .glass-th,thead th{ background:rgba(10,14,26,.65) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } /* ===== 统一金色按钮（所有 .btn / .btn-primary / .btn-ghost / .btn-edit） ===== */ .btn,.btn-primary,.btn-gold,.btn-edit{ background:linear-gradient(135deg,#F9DF8F 0%,#E3B93D 45%,#C9A227 100%) !important; color:#1A1205 !important; border:none !important; border-radius:10px !important; font-weight:700 !important; letter-spacing:1px; cursor:pointer; transition:all .25s ease; box-shadow:0 2px 12px rgba(212,175,55,.3),inset 0 1px 0 rgba(255,255,255,.4); } .btn:hover,.btn-primary:hover,.btn-gold:hover,.btn-edit:hover{ background:linear-gradient(135deg,#FFEFB0 0%,#F5D06F 45%,#D4AF37 100%) !important; transform:translateY(-2px); box-shadow:0 8px 30px rgba(245,208,111,.55),0 0 22px rgba(245,208,111,.4),inset 0 1px 0 rgba(255,255,255,.55); } .btn:active,.btn-primary:active,.btn-gold:active,.btn-edit:active{ transform:translateY(0); box-shadow:0 2px 8px rgba(212,175,55,.3),inset 0 2px 4px rgba(0,0,0,.15); } .btn:focus-visible,.btn-primary:focus-visible,.btn-gold:focus-visible,.btn-edit:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(212,175,55,.3),0 2px 12px rgba(212,175,55,.3); } /* ===== 取消/次级按钮：暗色描边 ===== */ .btn-ghost,.btn-cancel,.cfm-cancel{ background:rgba(212,175,55,.08) !important; color:#F5D06F !important; border:1px solid rgba(212,175,55,.4) !important; border-radius:10px !important; cursor:pointer; transition:all .25s ease; } .btn-ghost:hover,.btn-cancel:hover,.cfm-cancel:hover{ background:linear-gradient(135deg,#F9DF8F 0%,#E3B93D 45%,#C9A227 100%) !important; color:#1A1205 !important; border-color:transparent !important; transform:translateY(-2px); box-shadow:0 6px 24px rgba(245,208,111,.5),0 0 18px rgba(245,208,111,.35); } /* ===== 危险按钮（删除） ===== */ .btn-del,.btn-ok,.cfm-ok,.act-del{ background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%) !important; color:#fff !important; border:none !important; border-radius:10px !important; cursor:pointer; transition:all .25s ease; box-shadow:0 2px 12px rgba(231,76,60,.3); } .btn-del:hover,.btn-ok:hover,.cfm-ok:hover,.act-del:hover{ background:linear-gradient(135deg,#ff6b6b 0%,#e74c3c 100%) !important; transform:translateY(-2px); box-shadow:0 8px 30px rgba(231,76,60,.55),0 0 22px rgba(231,76,60,.4); } /* ===== 自定义确认弹窗（公共） ===== */ .gc-overlay{ position:fixed;inset:0;z-index:99999; background:rgba(5,8,20,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden; transition:opacity .28s ease,visibility .28s ease; } .gc-overlay.show{opacity:1;visibility:visible;} .gc-card{ width:420px;max-width:calc(100vw - 40px); background:linear-gradient(160deg,rgba(17,26,46,.92),rgba(10,14,26,.92)); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(212,175,55,.35); border-radius:16px; padding:0; box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(212,175,55,.12); transform:scale(.85) translateY(20px); transition:transform .32s cubic-bezier(.22,1,.36,1); overflow:hidden;position:relative; } .gc-overlay.show .gc-card{transform:scale(1) translateY(0);} .gc-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,#f9df8f,#c9a227,#f9df8f,transparent); } .gc-icon{ width:56px;height:56px;margin:28px auto 14px;border-radius:50%; background:rgba(231,76,60,.12); border:2px solid #e74c3c; display:flex;align-items:center;justify-content:center; font-size:26px;font-weight:700;color:#e74c3c; box-shadow:0 0 24px rgba(231,76,60,.35),inset 0 0 12px rgba(231,76,60,.15); } .gc-title{ text-align:center;font-size:17px;font-weight:600;color:#e8e6e1; letter-spacing:1px;margin-bottom:8px; } .gc-body{ text-align:center;font-size:14px;color:#b8b8b8;line-height:1.7; padding:0 28px 24px; } .gc-btns{ display:flex;gap:12px;justify-content:center;padding:0 28px 26px; } .gc-btn{ padding:10px 30px;border-radius:10px;font-size:14px;font-weight:600; letter-spacing:1px;cursor:pointer;transition:all .25s ease; border:1px solid transparent; } .gc-btn-cancel{ background:rgba(212,175,55,.08);color:#F5D06F;border-color:rgba(212,175,55,.4); } .gc-btn-cancel:hover{ background:linear-gradient(135deg,#F9DF8F,#E3B93D,#C9A227);color:#1A1205; border-color:transparent;transform:translateY(-2px); box-shadow:0 6px 24px rgba(245,208,111,.5),0 0 18px rgba(245,208,111,.35); } .gc-btn-ok{ background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff; box-shadow:0 2px 12px rgba(231,76,60,.3); } .gc-btn-ok:hover{ background:linear-gradient(135deg,#ff6b6b,#e74c3c); transform:translateY(-2px); box-shadow:0 8px 30px rgba(231,76,60,.55),0 0 22px rgba(231,76,60,.4); } /* ===== Toast 统一 ===== */ .toast,.msg{ background:linear-gradient(135deg,#F9DF8F 0%,#E3B93D 45%,#C9A227 100%) !important; color:#1A1205 !important; border-radius:10px !important; box-shadow:0 4px 18px rgba(212,175,55,.35) !important; } /* ===== 滚动条美化 ===== */ ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:rgba(0,0,0,.2);border-radius:4px} ::-webkit-scrollbar-thumb{background:rgba(212,175,55,.4);border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:rgba(212,175,55,.7)} /* ===== 移动端 ===== */ @media(max-width:768px){ .gc-card{width:calc(100vw - 32px);} .gc-btns{flex-direction:column;} .gc-btn{width:100%;} }