/* ============================================================ * 木木地理教学资源站 · 共用 CSS（v1） * 任何文件 引用： * 提供：noscript 防线 + 顶部标题栏 + 返回主页按钮 + 加载提示 * + 触屏操作提示 + 移动端适配 + 模态对话框 * ============================================================ */ /* ===== noscript 防线 ===== */ html.js-noscript, html.js-noscript body { visibility: hidden !important; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; } .__ns_guard { position: fixed; inset: 0; z-index: 2147483647; background: #0a0e1a; color: #fff; display: flex; align-items: center; justify-content: center; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center; padding: 40px; visibility: visible !important; } .__ns_guard h1 { font-size: 64px; margin: 0 0 20px; line-height: 1; } .__ns_guard h2 { font-size: 26px; color: #ff5e7e; margin: 0 0 16px; letter-spacing: 2px; } .__ns_guard p { font-size: 15px; line-height: 1.8; color: #cfd6e4; margin: 8px 0; } .__ns_guard small { font-size: 12px; color: #6e7d8a; margin-top: 24px; display: block; opacity: 0.7; letter-spacing: 1px; } /* ===== 顶部标题栏 ===== */ .top-bar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: linear-gradient(180deg, rgba(5,8,22,0.85) 0%, rgba(5,8,22,0) 100%); z-index: 150; pointer-events: none; } .top-bar .title { font-size: 18px; font-weight: 600; letter-spacing: 1px; background: linear-gradient(90deg, #60A5FA 0%, #A78BFA 50%, #F472B6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .top-bar .subtitle { font-size: 12px; color: #94a3b8; margin-top: 2px; } /* ===== 返回主页按钮 ===== */ #backHome { position: fixed; top: 14px; left: 18px; z-index: 200; padding: 8px 16px; background: rgba(255, 255, 255, 0.85); color: #2d6cdf; text-decoration: none; font-size: 13px; font-weight: 500; border: 1px solid rgba(45, 108, 223, 0.25); border-radius: 999px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(45, 108, 223, 0.1); transition: all 0.25s ease; } #backHome:hover { background: rgba(45, 108, 223, 0.2); border-color: #2d6cdf; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(45, 108, 223, 0.25); } /* ===== 加载提示 ===== */ .loading-overlay { position: fixed; inset: 0; background: linear-gradient(135deg, #0a0e1a 0%, #1a1d2e 50%, #0a0e1a 100%); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.6s ease; } .loading-overlay.hide { opacity: 0; pointer-events: none; } .loading-content { text-align: center; } .loading-content .spinner { width: 60px; height: 60px; border: 3px solid rgba(96, 165, 250, 0.2); border-top-color: #60A5FA; border-radius: 50%; margin: 0 auto 24px; animation: _common_spin 1s linear infinite; } @keyframes _common_spin { to { transform: rotate(360deg); } } .loading-content .title { font-size: 18px; font-weight: 500; color: #fff; background: linear-gradient(90deg, #60A5FA, #A78BFA, #F472B6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; } .loading-content .subtitle { font-size: 12px; color: #94a3b8; } /* ===== 触屏 / 鼠标操作提示 ===== */ .controls-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(96, 165, 250, 0.25); border-radius: 999px; padding: 8px 18px; font-size: 12px; color: #475569; z-index: 100; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; gap: 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); white-space: nowrap; } .controls-hint .item { display: flex; align-items: center; gap: 6px; } /* ===== 信息面板 / 卡片通用 ===== */ .info-panel { position: fixed; top: 70px; right: 18px; background: rgba(15, 23, 42, 0.78); border: 1px solid rgba(96, 165, 250, 0.25); border-radius: 16px; padding: 16px; color: #e2e8f0; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); z-index: 100; min-width: 200px; } .info-panel h3 { margin: 0 0 12px 0; font-size: 14px; font-weight: 600; letter-spacing: 1px; color: #fff; padding-bottom: 8px; border-bottom: 1px solid rgba(96, 165, 250, 0.2); } /* ===== 移动端适配 ===== */ @media (max-width: 768px) { .top-bar { padding: 10px 14px; } .top-bar .title { font-size: 15px; } .top-bar .subtitle { font-size: 10px; } #backHome { padding: 6px 12px; font-size: 11px; top: 10px; left: 12px; } .controls-hint { font-size: 10px; padding: 6px 12px; gap: 8px; } .info-panel { top: 60px; right: 10px; left: 10px; min-width: 0; } } @media (max-width: 480px) { .top-bar .subtitle { display: none; } }