79 lines
4.1 KiB
CSS
Executable File
79 lines
4.1 KiB
CSS
Executable File
/* 经典扫雷 - 手机竖屏优先 + 电脑端适配 */
|
|
:root{
|
|
--bg:#0f172a;
|
|
--panel:#111827;
|
|
--accent:#22d3ee;
|
|
--accent-2:#60a5fa;
|
|
--text:#e5e7eb;
|
|
--muted:#94a3b8;
|
|
--danger:#ef4444;
|
|
--success:#22c55e;
|
|
--warn:#f59e0b;
|
|
--cell:#1f2937;
|
|
--cell-hover:#273244;
|
|
--flag:#fb7185;
|
|
}
|
|
*{box-sizing:border-box}
|
|
html,body{height:100%;}
|
|
body{margin:0;background:linear-gradient(180deg,#0b1220,#0f172a);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Microsoft Yahei",sans-serif;-webkit-tap-highlight-color:transparent}
|
|
|
|
.app{min-height:100dvh;display:flex;flex-direction:column;gap:12px;padding:12px;}
|
|
.header{display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:12px 12px 10px;backdrop-filter:blur(6px)}
|
|
.title{margin:0;font-size:20px;letter-spacing:1px}
|
|
.hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:center}
|
|
.hud-item{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--panel);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:8px 6px}
|
|
.hud-item .label{font-size:12px;color:var(--muted)}
|
|
.hud-item .value{font-size:18px;font-weight:700;color:#fff}
|
|
.btn{appearance:none;border:none;background:#1e293b;color:#fff;padding:10px 12px;border-radius:10px;cursor:pointer;outline:none;transition:.15s transform,.15s background;display:inline-flex;align-items:center;justify-content:center}
|
|
.btn:active{transform:scale(.98)}
|
|
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
|
|
.btn.primary:active{filter:brightness(.95)}
|
|
|
|
.main{display:flex;flex-direction:column;gap:12px}
|
|
.board-wrapper{display:flex;justify-content:center;align-items:center}
|
|
.board{display:grid;gap:4px;touch-action:manipulation;user-select:none;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:6px;width:100%;max-width:92vw}
|
|
.cell{display:grid;place-items:center;background:var(--cell);border-radius:8px;border:1px solid rgba(255,255,255,0.06);font-weight:700;color:#9ca3af;box-shadow:inset 0 -1px 0 rgba(255,255,255,0.04);aspect-ratio:1/1;font-size:clamp(12px, 2.2vw, 18px)}
|
|
.cell.revealed{background:#0b1220;color:#e5e7eb}
|
|
.cell:hover{background:var(--cell-hover)}
|
|
.cell.flag::after{content:"🚩"}
|
|
.cell.mine.revealed{background:#3b0d0d;color:#fff}
|
|
.cell.mine.revealed::after{content:"💣"}
|
|
.cell[data-n="1"].revealed{color:#60a5fa}
|
|
.cell[data-n="2"].revealed{color:#34d399}
|
|
.cell[data-n="3"].revealed{color:#f87171}
|
|
.cell[data-n="4"].revealed{color:#a78bfa}
|
|
.cell[data-n="5"].revealed{color:#fbbf24}
|
|
.cell[data-n="6"].revealed{color:#22d3ee}
|
|
.cell[data-n="7"].revealed{color:#e879f9}
|
|
.cell[data-n="8"].revealed{color:#cbd5e1}
|
|
|
|
.tips{font-size:12px;color:var(--muted);text-align:center}
|
|
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(17,24,39,.95);border:1px solid rgba(255,255,255,.08);padding:10px 14px;border-radius:10px}
|
|
|
|
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:14px}
|
|
.modal{width:min(520px,92vw);background:linear-gradient(180deg,#0f172a,#0b1320);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px 14px}
|
|
.modal h2{margin:4px 0 8px;font-size:20px}
|
|
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 14px}
|
|
.stats .card{background:var(--panel);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:10px}
|
|
.stats .card .k{font-size:12px;color:var(--muted)}
|
|
.stats .card .v{font-size:18px;font-weight:700}
|
|
.modal-actions{display:flex;gap:10px;justify-content:flex-end}
|
|
|
|
/* 响应式：手机竖屏优先 */
|
|
@media (min-width: 480px){
|
|
.title{font-size:22px}
|
|
}
|
|
@media (min-width: 640px){
|
|
.app{padding:18px}
|
|
.hud{grid-template-columns:repeat(5,minmax(0,1fr))}
|
|
}
|
|
@media (min-width: 1024px){
|
|
.board{ max-width: 420px; }
|
|
.header{ padding:10px 10px 8px; }
|
|
.hud-item{ padding:6px 4px; }
|
|
.hud-item .value{ font-size:16px; }
|
|
.title{ font-size:18px; }
|
|
}
|
|
@media (orientation: landscape) and (max-width: 900px){
|
|
.board{transform:scale(.9)}
|
|
} |