/* ===== index.html 第 98 行 ===== */ :root { --panel-offset: 20px; --accent-color: #27ae60; --text-main: #2c3e50; --text-muted: #7f8c8d; --glass-bg: rgba(255, 255, 255, 0.75); --glass-border: rgba(255, 255, 255, 0.5); --glass-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); --glass-blur: blur(20px); } body, html { margin: 0; padding: 0; height: 100%; font-family: 'Helvetica Neue', Arial, '微軟正黑體', sans-serif; background-color: #e9ecef; overflow: hidden; } #map { position: absolute; top: 0; bottom: 0; width: 100%; z-index: 1; } svg { flex-shrink: 0; } .glass-header { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 950px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; padding: 12px 25px; z-index: 1000; border: 1px solid rgba(255,255,255,0.4); pointer-events: auto; transition: 0.4s; } .glass-header.hidden-up { transform: translate(-50%, -150%); opacity: 0; pointer-events: none; visibility: hidden; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, visibility 0s 0.4s; } .nav-buttons button .short-text { display: none; } @media (min-width: 601px) { .glass-header.compact-mode { width: auto; left: 20px; top: 20px; transform: translateX(0); padding: 10px 18px; border-radius: 16px; } .glass-header.compact-mode .project-title span.sub-title { display: inline-block; font-size: 12px; margin-left: 6px; } .glass-header.compact-mode .nav-buttons button .full-text { display: none; } .glass-header.compact-mode .nav-buttons button .short-text { display: inline; } } .header-pull-tab { position: fixed; top: 0; left: 50%; transform: translate(-50%, -100%); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border: 1px solid rgba(0,0,0,0.1); border-top: none; border-radius: 0 0 16px 16px; width: 100px; height: 32px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; box-shadow: 0 6px 16px rgba(0,0,0,0.15); z-index: 2000; cursor: pointer; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: auto; } .header-pull-tab.visible { transform: translate(-50%, 0); } .header-pull-tab .pull-line { width: 32px; height: 4px; background: #cbd5e1; border-radius: 2px; } .header-pull-tab .pull-text { font-size: 10px; font-weight: 800; color: #64748b; letter-spacing: 1px; line-height: 1; } .project-title { font-size: 18px; font-weight: 800; color: var(--text-main); margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; letter-spacing: 0.5px; transition: 0.3s;} .project-title span.main-title { color: var(--accent-color); margin: 0 6px; } .project-title span.sub-title { font-size: 13px; color: var(--text-muted); font-weight: 600; margin-left: 5px; transition: 0.3s;} .nav-buttons { display: flex; gap: 10px; align-items: center; transition: 0.3s;} .nav-buttons button { background: transparent; border: none; color: #34495e; font-size: 14px; font-weight: 700; cursor: pointer; padding: 8px 14px; border-radius: 8px; transition: 0.3s; display: flex; align-items: center; gap: 6px; } .nav-buttons button:hover { background: rgba(39, 174, 96, 0.08); color: var(--accent-color); } .btn-latest { color: #d35400 !important; } .btn-latest:hover { background: rgba(211, 84, 0, 0.08) !important; } .btn-submit { background: var(--accent-color) !important; color: white !important; box-shadow: 0 4px 12px rgba(39, 174, 96, 0.25); border-radius: 12px !important; } .btn-submit:hover { background: #219150 !important; box-shadow: 0 6px 15px rgba(39, 174, 96, 0.35); } .drawer-panel { position: absolute; left: var(--panel-offset); z-index: 1001; width: 320px; box-sizing: border-box; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .drawer-panel:not(.collapsed) { pointer-events: auto; } /* ===== [FIX START] 收合時仍允許 toggle-btn 被點擊 ===== */ .drawer-panel.collapsed { transform: translateX(calc(-100% - var(--panel-offset) - 10px)); pointer-events: auto; } .drawer-panel.collapsed .drawer-content { pointer-events: none; } /* ===== [FIX END] ===== */ .drawer-content { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-radius: 20px; padding: 25px; pointer-events: auto; max-height: calc(100vh - 160px); overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } .toggle-btn { position: absolute; right: -36px; width: 36px; height: 64px; background: rgba(255, 255, 255, 0.95); border-radius: 0 16px 16px 0; border: 1px solid rgba(255,255,255,0.5); border-left: none; cursor: pointer; display: flex; justify-content: center; align-items: center; color: var(--text-main); box-shadow: 6px 0 12px rgba(0,0,0,0.06); transition: 0.2s; z-index: 1005; pointer-events: auto;} .toggle-btn:hover { color: var(--accent-color); background: #fff; } #sidePanel { top: 90px; } #routePanel { top: 90px; } #sidePanel .toggle-btn { top: 20px; } #routePanel .toggle-btn { top: 90px; } .toggle-icon { width: 20px; height: 20px; transition: transform 0.4s; stroke-width: 2.5;} .drawer-panel.collapsed .toggle-icon.svg-icon { transform: rotate(180deg); } .panel-label { font-size: 14px; font-weight: 800; color: var(--text-main); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; letter-spacing: 0.5px;} .panel-label svg { color: var(--text-muted); } .search-input { width: 100%; padding: 12px 15px; border-radius: 10px; border: 1px solid #dfe4ea; font-size: 14px; outline: none; box-sizing: border-box; background: #f8f9fa; transition: 0.2s;} .search-input:focus { background: #fff; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.15); } .filter-group { display: flex; flex-wrap: wrap; gap: 12px; } .filter-item { display: flex; align-items: center; cursor: pointer; font-size: 13px; color: var(--text-main); font-weight: 600; width: 45%; gap: 6px;} .filter-item input { accent-color: var(--accent-color); width: 16px; height: 16px; margin:0;} .time-slider { width: 100%; accent-color: var(--accent-color); cursor: pointer; margin: 10px 0; } .time-display { font-size: 13px; font-weight: 700; color: var(--accent-color); text-align: center; background: rgba(39, 174, 96, 0.08); padding: 8px; border-radius: 8px; letter-spacing: 0.5px;} .route-list { display: flex; flex-direction: column; gap: 10px; } .route-btn { background: #f8f9fa; border: 1px solid #dfe4ea; color: var(--text-main); font-size: 13px; font-weight: 700; padding: 12px 15px; border-radius: 10px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 10px; text-align: left; } .route-btn svg { width: 18px; height: 18px; color: var(--text-muted); transition: 0.2s;} .route-btn:hover { background: #fff; border-color: #bdc3c7; box-shadow: 0 4px 10px rgba(0,0,0,0.05); } .route-btn.active { background: var(--accent-color); color: white; border-color: var(--accent-color); box-shadow: 0 4px 12px rgba(39,174,96,0.25);} .route-btn.active svg { color: white; } .route-path-animated { animation: dashMap 20s linear infinite; } @keyframes dashMap { to { stroke-dashoffset: -1000; } } .global-player { position: fixed; bottom: -200px; left: 50%; transform: translateX(-50%); width: 92%; max-width: 850px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius: 20px; box-shadow: 0 -10px 40px rgba(0,0,0,0.1); display: flex; align-items: center; padding: 12px 20px; gap: 16px; z-index: 2000; transition: none; border: 1px solid rgba(255,255,255,0.6); pointer-events: auto; } .global-player.active { bottom: 20px; } /* 🚫 如果正在嵌入卡片 or 被 suppress，禁止浮出 */ .global-player.embedded-player.active, .global-player.suppress-floating.active { bottom: -200px !important; } /* 🌟 桌機版：播放器併入作品卡片，不再浮在地圖上遮擋內容 */ @media (min-width: 601px) { .leaflet-popup .global-player.embedded-player { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; max-width: none !important; margin: 10px 0 0 0; padding: 10px 12px; gap: 10px; border-radius: 18px; background: rgba(248, 250, 252, 0.96); border: 1px solid #e2e8f0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 18px rgba(15, 23, 42, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: auto !important; box-sizing: border-box; } .leaflet-popup .global-player.embedded-player.active { bottom: auto !important; transform: none !important; } .leaflet-popup .global-player.embedded-player .player-control-btn { width: 42px; height: 42px; box-shadow: 0 6px 16px rgba(39,174,96,0.28); } .leaflet-popup .global-player.embedded-player .player-main { gap: 5px; min-width: 0; } .leaflet-popup .global-player.embedded-player .player-header-row { gap: 8px; } .leaflet-popup .global-player.embedded-player .player-title { font-size: 12.5px; max-width: 160px; } .leaflet-popup .global-player.embedded-player .player-time-display { font-size: 10.5px; padding: 2px 6px; } .leaflet-popup .global-player.embedded-player .waveform-wrapper { height: 22px; border-radius: 999px; } .leaflet-popup .global-player.embedded-player .volume-control { display: none; } .leaflet-popup .global-player.embedded-player .close-player-btn { width: 28px; height: 28px; } .leaflet-popup .global-player.embedded-player #favBtn { display: none; } } .global-player.suppress-floating { display: none !important; } .embedded-player-slot { width: 100%; margin-top: 10px; } .embedded-player-slot:empty { display: none; } body.player-embedded .leaflet-popup .btn-play-main { display: none !important; } .leaflet-popup .embedded-player-slot .global-player.embedded-player { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 10px 12px; gap: 10px; border-radius: 18px; background: rgba(248, 250, 252, 0.96); border: 1px solid #e2e8f0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 18px rgba(15, 23, 42, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: auto !important; box-sizing: border-box; } .leaflet-popup .embedded-player-slot .global-player.embedded-player.active { bottom: auto !important; transform: none !important; } .leaflet-popup .embedded-player-slot .global-player.embedded-player .player-control-btn { width: 42px; height: 42px; box-shadow: 0 6px 16px rgba(39,174,96,0.28); } .leaflet-popup .embedded-player-slot .global-player.embedded-player .player-main { gap: 5px; min-width: 0; } .leaflet-popup .embedded-player-slot .global-player.embedded-player .player-header-row { gap: 8px; } .leaflet-popup .embedded-player-slot .global-player.embedded-player .player-title { font-size: 12.5px; max-width: 160px; } .leaflet-popup .embedded-player-slot .global-player.embedded-player .player-time-display { font-size: 10.5px; padding: 2px 6px; } .leaflet-popup .embedded-player-slot .global-player.embedded-player .waveform-wrapper { height: 22px; border-radius: 999px; } .leaflet-popup .embedded-player-slot .global-player.embedded-player .volume-control { display: none; } .leaflet-popup .embedded-player-slot .global-player.embedded-player .close-player-btn { width: 28px; height: 28px; } .leaflet-popup .embedded-player-slot .global-player.embedded-player #favBtn { display: none; } .player-control-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-color); color: white; border: none; cursor: pointer; flex-shrink: 0; display: flex; justify-content: center; align-items: center; transition: 0.2s; box-shadow: 0 4px 10px rgba(39,174,96,0.3);} .player-control-btn:hover { transform: scale(1.05); background: #219150;} .player-control-btn:active { transform: scale(0.95); } .player-main { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; justify-content: center;} .player-header-row { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; overflow: hidden; } .player-title-container { flex: 1; overflow: hidden; white-space: nowrap; position: relative; min-width: 0; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%); } .player-title { display: inline-block; font-weight: 800; color: var(--text-main); font-size: 14px; margin: 0; white-space: nowrap; will-change: transform; } .player-title.marquee-text { display: inline-flex; padding-left: 0; animation: marquee-anim 12s linear infinite; } @keyframes marquee-anim { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .player-time-display { font-size: 11px; font-family: 'Courier New', Courier, monospace; color: var(--text-muted); font-weight: 800; flex-shrink: 0; background: rgba(15, 23, 42, 0.05); padding: 2px 6px; border-radius: 6px;} .fav-btn { background: transparent; border: none; cursor: pointer; color: #cbd5e1; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 4px; flex-shrink: 0; outline: none; } .fav-btn:hover { color: #f43f5e; transform: scale(1.15); } .fav-btn:active { transform: scale(0.9); } .fav-btn.active { color: #e11d48; animation: heartBurst 0.4s ease-out forwards; } .fav-btn.active svg { fill: #e11d48; } @keyframes heartBurst { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .waveform-wrapper { position: relative; width: 100%; height: 32px; border-radius: 6px; overflow: hidden; cursor: pointer; background: #f1f2f6; } .wave-base { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0.6; } .wave-progress { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; clip-path: inset(0 100% 0 0); } .volume-control { display: flex; align-items: center; gap: 8px; color: var(--text-muted); width: 130px; flex-shrink: 0;} .volume-slider { width: 100%; accent-color: var(--accent-color); cursor: pointer; height: 4px; } .mute-icon { cursor: pointer; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; transition: 0.2s; flex-shrink: 0;} .mute-icon:hover { color: var(--text-main); } .close-player-btn { background: transparent; border: none; color: #bdc3c7; cursor: pointer; flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: 50%; transition: 0.2s;} .close-player-btn:hover { background: #f1f2f6; color: #e74c3c;} .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: 0.3s ease; pointer-events: auto;} .modal-overlay.active { opacity: 1; visibility: visible; } .modal-box { background: white; border-radius: 20px; width: 90%; max-width: 600px; max-height: 85vh; overflow-y: auto; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.2); pointer-events: auto; overscroll-behavior: contain;} .modal-close-btn { position: absolute; top: 16px; right: 16px; background: rgba(255, 255, 255, 0.95); /* 🌟 高對比的白底 */ backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); /* 🌟 輕微毛玻璃增加質感 */ color: #1e293b !important; /* 🌟 深藍灰色的叉叉，絕對清晰 */ border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; width: 34px; height: 34px; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 10; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* 🌟 加上陰影讓它完全浮出圖片 */ } .modal-close-btn:hover { background: #e74c3c; color: white !important; border-color: #e74c3c; transform: scale(1.1); } .modal-img { width: 100%; height: 220px; object-fit: cover; border-radius: 20px 20px 0 0;} .modal-content { padding: 30px; text-align: justify; } .modal-title { font-size: 22px; color: var(--text-main); margin: 0 0 8px 0; font-weight: 800; line-height: 1.3; display: flex; align-items: center; gap: 8px;} .modal-tag { display: inline-block; background: #f1f5f9; color: #475569; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; margin-bottom: 20px; border: 1px solid #e2e8f0; letter-spacing: 0.5px;} .quote-block { margin-top: 24px; padding: 20px; background: #f8fafc; border-left: 4px solid var(--accent-color); border-radius: 0 12px 12px 0; } /* 📚 延伸閱讀卡片樣式 */ .ext-link-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(to right, #f8fafc, #f1f5f9); border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; text-decoration: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .ext-link-card:hover { border-color: #93c5fd; background: #eff6ff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(59, 130, 246, 0.12); } .ext-link-card:active { transform: translateY(0); } .ext-link-icon { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; width: 34px; height: 34px; display: flex; justify-content: center; align-items: center; color: #3b82f6; flex-shrink: 0; transition: 0.2s; } .ext-link-card:hover .ext-link-icon { background: #3b82f6; color: #fff; border-color: #3b82f6; } .ext-link-text { display: flex; flex-direction: column; min-width: 0; justify-content: center; } .ext-link-label { font-size: 10.5px; font-weight: 800; color: #64748b; letter-spacing: 0.5px; margin-bottom: 2px;} .ext-link-title { font-size: 13.5px; font-weight: 800; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;} /* 🌟 防爆內部滾動條與文字排版設定 */ /* 🌟 防爆內部滾動條與文字排版設定 */ .sound-desc { font-size: 13.5px; color: #475569; line-height: 1.6; margin: 0 0 12px 0; text-align: justify; max-height: 90px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } .sound-desc::-webkit-scrollbar { width: 4px; } .sound-desc::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .modal-text { font-size: 15px; color: #475569; line-height: 1.7; margin: 0 0 16px 0; } .latest-list { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; } /* 🌟 SEL 聽覺回音引導標籤 樣式 */ .reaction-section-title { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 4px 10px; border-radius: 6px; margin: 6px 0 10px 0; letter-spacing: 0.5px; } .reaction-section-title svg { color: #94a3b8; } /* 🌟 SEL 高級質感膠囊情緒徽章 樣式 */ .reaction-box { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .reaction-btn { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 20px; cursor: pointer; color: #64748b; transition: all 0.2s ease; font-size: 11px; font-weight: 700; padding: 6px 0; flex: 1; outline: none; } .reaction-btn svg { width: 14px; height: 14px; transition: all 0.2s ease; } .reaction-btn:hover { background: #e2e8f0; color: #475569; transform: translateY(-1px); } .reaction-btn:active { transform: scale(0.95); } /* 啟用狀態：精美柔和透明漸層 */ .reaction-btn.active { transform: translateY(-1px); border-color: transparent; } .reaction-btn.active[data-type="calm"] { background: #ecfdf5; color: #10b981; border-color: #a7f3d0; box-shadow: 0 2px 6px rgba(16,185,129,0.15); } .reaction-btn.active[data-type="surprise"] { background: #fffbeb; color: #f59e0b; border-color: #fde68a; box-shadow: 0 2px 6px rgba(245,158,11,0.15); } .reaction-btn.active[data-type="curious"] { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; box-shadow: 0 2px 6px rgba(59,130,246,0.15); } .reaction-btn.active[data-type="nostalgic"] { background: #f5f3ff; color: #8b5cf6; border-color: #ddd6fe; box-shadow: 0 2px 6px rgba(139,92,246,0.15); } /* 🌟 成就系統與徽章動畫 樣式 */ .achievement-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 3000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .achievement-overlay.active { opacity: 1; visibility: visible; } .achievement-card { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-radius: 24px; padding: 40px 30px; width: 85%; max-width: 400px; text-align: center; position: relative; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.8); transform: scale(0.8) translateY(20px); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .achievement-overlay.active .achievement-card { transform: scale(1) translateY(0); } .badge-icon-wrapper { width: 100px; height: 100px; margin: 0 auto 20px auto; background: linear-gradient(135deg, #fef08a 0%, #f59e0b 100%); border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 10px 25px rgba(245, 158, 11, 0.4), inset 0 2px 4px rgba(255,255,255,0.6); border: 4px solid #fff; position: relative; animation: badgeFloat 3s ease-in-out infinite; } .badge-icon-wrapper svg { width: 50px; height: 50px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); } /* 閃耀光芒特效 */ .badge-icon-wrapper::before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.8), transparent); animation: badgeShine 4s linear infinite; z-index: -1; opacity: 0.6; } @keyframes badgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes badgeShine { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .achievement-title { font-size: 24px; font-weight: 900; color: #1e293b; margin: 0 0 8px 0; letter-spacing: 1px;} .achievement-desc { font-size: 14px; color: #64748b; line-height: 1.6; margin: 0 0 24px 0;} .btn-claim-badge { background: #1e293b; color: white; border: none; padding: 12px 24px; border-radius: 12px; font-size: 15px; font-weight: 800; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2); width: 100%; } .btn-claim-badge:hover { background: #334155; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(30, 41, 59, 0.3); } /* 側邊欄成就牆樣式 */ .wall-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 15px; } .wall-badge { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; filter: grayscale(100%); opacity: 0.5; transition: 0.3s; } .wall-badge.unlocked { filter: grayscale(0%); opacity: 1; border-color: #fde68a; background: #fffbeb; box-shadow: 0 4px 12px rgba(245,158,11,0.1); } .wall-badge .mini-icon { width: 40px; height: 40px; border-radius: 50%; background: #e2e8f0; display: flex; justify-content: center; align-items: center; } .wall-badge.unlocked .mini-icon { background: linear-gradient(135deg, #fef08a 0%, #f59e0b 100%); } .wall-badge.unlocked .mini-icon svg { color: white; } .wall-badge-name { font-size: 12px; font-weight: 800; color: #475569; } .wall-badge.unlocked .wall-badge-name { color: #b45309; } .wall-badge-desc { font-size: 11px; color: #64748b; line-height: 1.4; margin-top: 4px; padding-top: 6px; border-top: 1px dashed #e2e8f0; } .latest-item { display: flex; gap: 16px; background: #fff; padding: 12px; border-radius: 12px; cursor: pointer; border: 1px solid #e2e8f0; transition: all 0.2s ease; align-items: center;} .latest-item:hover { border-color: #cbd5e1; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.06); } .latest-item img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1);} .latest-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; } .latest-item-title { font-size: 15px; font-weight: 800; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .latest-item-meta { font-size: 12px; color: var(--text-muted); display: flex; justify-content: space-between; font-weight: 600; align-items: center;} .latest-item-meta svg { margin-right: 4px; vertical-align: middle; } /* 🌟 桌機版 popup：完整展開，不使用內部卷軸 */ .leaflet-popup-content-wrapper { border-radius: 16px; overflow: visible; box-shadow: 0 15px 35px rgba(0,0,0,0.25); padding: 0; max-height: none; } .leaflet-popup-content { margin: 0; width: 320px !important; max-height: none; overflow: visible !important; padding-bottom: 0; box-sizing: border-box; } .leaflet-container a.leaflet-popup-close-button { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; background: rgba(15, 23, 42, 0.75) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #ffffff !important; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: bold; text-decoration: none; border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: all 0.2s ease; z-index: 100; } .leaflet-container a.leaflet-popup-close-button:hover { background: #e74c3c !important; color: white !important; transform: scale(1.05); } .leaflet-container a.leaflet-popup-close-button span { margin-top: -2px; } .sound-card { display: flex; flex-direction: column; background: #fff; } .sound-cover { width: 100%; height: 160px; object-fit: cover; transition: 0.3s;} .sound-title { font-size: 19px; font-weight: 900; color: #1e272e; margin: 0 0 10px 0; letter-spacing: 0.5px; line-height: 1.3; } .card-meta-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px;} .meta-row { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 13px; color: #64748b; flex-wrap: wrap; gap: 6px;} .meta-item { display: flex; align-items: center; gap: 6px; font-weight: 600;} .meta-item svg { width: 14px; height: 14px; stroke-width: 2.5; } .meta-author-name { font-weight: 800; color: var(--text-main); max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .meta-date-text { font-family: 'Courier New', Courier, monospace; letter-spacing: 0px; font-size: 11.5px; white-space: nowrap;} .card-tags-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; align-items: center; margin-top: 8px; } .meta-category { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; display: flex; align-items: center; gap: 4px; border: 1px solid rgba(0,0,0,0.05); white-space: nowrap;} .meta-gps { background: #fff; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; font-family: 'Courier New', monospace; color: #64748b; border: 1px solid #cbd5e1; box-shadow: 0 2px 4px rgba(0,0,0,0.02); display: flex; align-items: center; gap: 4px; white-space: nowrap;} .meta-gps svg { color: #e74c3c; width: 12px; height: 12px;} .cat-nature { background: #e8f8f5; color: #0f766e; } .cat-culture { background: #fef9e7; color: #b45309; } .cat-industry { background: #fbeee6; color: #c2410c; } .cat-space { background: #ebf5fb; color: #0369a1; } .cat-history { background: #f4ecf8; color: #7e22ce; } .cat-default { background: #f1f5f9; color: #475569; } .flood-depth-tooltip { background: rgba(255, 251, 235, 0.96); border: 1px solid rgba(245, 158, 11, 0.8); color: #7c2d12; font-size: 11px; font-weight: 900; padding: 2px 6px; border-radius: 6px; box-shadow: 0 4px 10px rgba(120, 53, 15, 0.18); } .flood-depth-tooltip::before { display: none; } .btn-play-main { background: var(--accent-color); color: #fff; border: none; padding: 12px 15px; border-radius: 10px; font-size: 14px; font-weight: 800; cursor: pointer; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(39,174,96,0.25); letter-spacing: 0.5px;} .btn-play-main:hover { background: #219150; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(39,174,96,0.35); } .btn-play-main:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(39,174,96,0.25); } .btn-play-main.playing { background: #e74c3c; box-shadow: 0 4px 12px rgba(231,76,60,0.25); } .btn-play-main.playing:hover { background: #c0392b; box-shadow: 0 6px 15px rgba(231,76,60,0.35); } /* 勘誤選單改到標題右上角，不再佔用卡片底部空間 */ .admin-menu { margin: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; } .admin-menu summary { font-size: 14px; color: #cbd5e1; cursor: pointer; list-style: none; display: inline-flex; align-items: center; justify-content: center; transition: 0.2s; padding: 4px; border-radius: 4px; } .admin-menu summary::-webkit-details-marker { display: none; } .admin-menu summary:hover { color: #64748b; background: #f1f5f9; } .card-admin-menu .admin-dropdown { position: absolute; right: 0; top: 28px; z-index: 9999; background: #fff; border-radius: 8px; padding: 8px 12px; display: inline-flex; gap: 15px; border: 1px solid #e2e8f0; box-shadow: 0 8px 20px rgba(0,0,0,0.12); white-space: nowrap; } .action-link-faint { font-size: 12px; color: #94a3b8; text-decoration: none; font-weight: 700; transition: 0.2s; display: flex; align-items: center; gap: 4px; } .action-link-faint svg { width: 12px; height: 12px; } .action-link-faint:hover { color: #e74c3c; } /* 桌機版小卡高度微壓縮，讓封面更容易完整露出 */ .sound-info { padding: 13px 18px 10px 18px; transition: 0.3s; } .sound-title { font-size: 18px; margin-bottom: 6px; } .card-meta-box { margin-bottom: 9px; padding: 10px; gap: 8px; } .sound-desc { margin: 0 0 9px 0; max-height: 76px; } .reaction-section-title { margin: 4px 0 7px 0; } .reaction-box { margin-bottom: 10px; } .btn-play-main { padding: 11px 15px; } .right-tools-wrapper { position: absolute; right: 20px; top: 90px; z-index: 2500; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; } .tools-toggle-btn { pointer-events: auto; width: 48px; height: 48px; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5)); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 16px; display: flex; justify-content: center; align-items: center; box-shadow: var(--glass-shadow); border: 1px solid var(--glass-border); cursor: pointer; color: var(--text-main); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-bottom: 12px; } .tools-toggle-btn:hover { color: var(--accent-color); transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2); } .tools-menu-container { pointer-events: auto; display: flex; flex-direction: column; align-items: flex-end; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: top right; margin-top: 10px; max-height: calc(100dvh - 170px); overflow-y: auto; overflow-x: visible; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* 移除無效的 padding-bottom，只保留左側縮進 */ padding-left: 8px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } .right-tools-wrapper.open .tools-menu-container { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .right-tools-wrapper:not(.open) .tools-menu-container * { visibility: hidden !important; pointer-events: none !important; } .leaflet-top.leaflet-right { display: none !important; } .tools-menu-container::-webkit-scrollbar { width: 5px; } .tools-menu-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } .custom-layer-control { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 16px; padding: 15px; box-shadow: var(--glass-shadow); border: 1px solid var(--glass-border); width: 220px; box-sizing: border-box; max-height: none; overflow: visible; /* 🌟 終極殺招：改用強制外距！確保南山公墓下方永遠有 80px 的絕對安全距離 */ margin-bottom: 80px; } .custom-layer-control label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; cursor: pointer; color: #34495e; font-weight: 700; font-size: 13px; } .custom-layer-control label svg { color: var(--text-muted); } .custom-layer-control label:last-child { margin-bottom: 0; } .custom-layer-control input[type="radio"] { accent-color: var(--accent-color); width: 17px; height: 17px; margin: 0; flex-shrink: 0; cursor: pointer; } .btn-more-layers { width: 100%; background: #f1f5f9; color: #475569; border: 1px dashed #cbd5e1; padding: 8px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 5px; box-sizing: border-box; } .btn-more-layers:hover { background: #e2e8f0; color: var(--text-main); border-color: #94a3b8; } .more-layers-grid { display: flex; flex-direction: column; gap: 10px; } .layer-card { display: flex; align-items: center; gap: 12px; background: #fff; padding: 12px 16px; border-radius: 12px; border: 1px solid #e2e8f0; cursor: pointer; transition: 0.2s; margin-bottom: 8px;} .layer-card:hover { border-color: var(--accent-color); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(39,174,96,0.1); } .layer-card input { width: 18px; height: 18px; accent-color: var(--accent-color); margin:0; cursor: pointer;} .layer-card-content { flex: 1; font-size: 14px; color: var(--text-main); font-weight: 700; display: flex; flex-direction: column;} .layer-card-content span { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 2px; font-family: 'Courier New', monospace;} .draw-mode-hud { position: absolute; z-index: 1500; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 20px; padding: 6px; box-shadow: var(--glass-shadow); border: 1px solid var(--glass-border); display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); left: 20px; top: 50%; transform: translateY(-50%) translateX(-20px); } .draw-mode-hud.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0); } .custom-geoman-container { display: flex; flex-direction: column; width: 100%; align-items: center; } .custom-geoman-container .leaflet-pm-toolbar { margin: 0; padding: 0; border: none; display: flex; flex-direction: column; gap: 4px; background: transparent !important; box-shadow: none !important;} .custom-geoman-container .button-container { border: none !important; } .custom-geoman-container .leaflet-pm-toolbar:not(:last-child) { border-bottom: 1px solid rgba(148, 163, 184, 0.3) !important; padding-bottom: 4px !important; margin-bottom: 0 !important; } .custom-geoman-container a { width: 36px !important; height: 36px !important; border-radius: 12px !important; color: #475569 !important; display: flex !important; justify-content: center !important; align-items: center !important; transition: 0.2s !important; margin: 0 !important; background: transparent !important; text-decoration: none !important;} .custom-geoman-container a:hover { background: rgba(0,0,0,0.06) !important; color: var(--accent-color) !important; transform: scale(1.05); } .custom-geoman-container a.active { background: rgba(39, 174, 96, 0.15) !important; color: var(--accent-color) !important; } .custom-geoman-container a .control-icon { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 100% !important; } .custom-geoman-container a svg { width: 18px !important; height: 18px !important; display: block !important; flex-shrink: 0 !important; } .custom-clear-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e74c3c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4.8c0-.99.81-1.8 1.8-1.8h4.4c.99 0 1.8.81 1.8 1.8V6'/%3E%3Cpath d='M18 6v12.2c0 .99-.81 1.8-1.8 1.8H7.8c-.99 0-1.8-.81-1.8-1.8V6'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E") !important; background-size: 18px 18px !important; background-position: center !important; background-repeat: no-repeat !important; } .hud-close-btn { width: 36px; height: 36px; border-radius: 12px; background: rgba(231, 76, 60, 0.1); color: #e74c3c; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.2s; margin-top: 4px; padding: 0; flex-shrink: 0; } .hud-close-btn:hover { background: #e74c3c; color: white; transform: scale(1.05); } /* 🌟 功能按鈕組樣式 (分享、導航、收藏) */ .share-icon-btn, .nav-icon-btn { background: transparent; border: none; cursor: pointer; color: #cbd5e1; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 4px; flex-shrink: 0; outline: none; } .share-icon-btn:hover { color: #3b82f6; transform: scale(1.15); } .nav-icon-btn:hover { color: #10b981; transform: scale(1.15); } .nav-icon-btn:active, .share-icon-btn:active { transform: scale(0.9); } @media (max-width: 600px) { :root { --panel-offset: 10px; } .glass-header { flex-direction: column; align-items: flex-start; padding: 12px 16px; border-radius: 16px; width: 94%; height: auto; gap: 10px; } .project-title { font-size: 18px; width: 100%; justify-content: flex-start; flex-direction: row;} .project-title span.sub-title { font-size: 12px; margin-left: 5px; color: var(--text-muted); display: inline-block; margin-top:0;} /* ===== 手機版按鈕修正版 START ===== */ .nav-buttons { width: 100%; justify-content: space-between; gap: 4px; margin-top: 10px; } .nav-buttons button { flex: 1; padding: 8px 4px; border-radius: 8px; width: auto; height: auto; justify-content: center; font-size: 12px; white-space: nowrap; /* ⭐ 核心 */ } /* ===== 手機版按鈕修正版 END ===== */ .drawer-panel { width: calc(100vw - 50px); max-width: 290px; } #sidePanel, #routePanel { top: 125px; } /* ✅ 手機版：圖層按鈕往下移，避免和「登入探險」重疊 */ .right-tools-wrapper { top: 170px; right: 12px; } .tools-menu-container { max-height: calc(100dvh - 235px); overflow-y: auto; overflow-x: visible; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .custom-layer-control { width: min(260px, calc(100vw - 32px)); box-sizing: border-box; max-height: none; overflow: visible; } .draw-mode-hud { left: 10px; } .global-player { display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "play main vol close"; gap: 8px 10px; padding: 10px; width: 94%; border-radius: 20px; bottom: -250px; } .global-player.active { bottom: 15px; } .ios-device .volume-slider { display: none !important; } .ios-device .volume-control { width: auto; background: transparent; border: none; padding: 0; } .player-control-btn { grid-area: play; width: 42px; height: 42px; align-self: center;} .player-main { grid-area: main; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0;} .player-title { font-size: 13px; } .waveform-wrapper { height: 22px; } .volume-control { grid-area: vol; width: 100%; display: flex; align-items: center; justify-content:center; gap: 10px; background: #f8fafc; padding: 8px 14px; border-radius: 12px; box-sizing: border-box; border: 1px solid #e2e8f0; } .volume-slider { height: 24px; margin: 0; } .close-player-btn { grid-area: close; align-self: center; } /* 🌟 手機版極限高度防爆壓縮與捲動修復 */ .leaflet-popup-content-wrapper { max-height: calc(100vh - 160px); display: flex; flex-direction: column; overflow: hidden; } .leaflet-popup-content { width: 280px !important; max-height: calc(100vh - 160px); overflow-y: auto !important; padding-bottom: 10px; } .sound-cover { height: 110px; flex-shrink: 0; } .sound-info { padding: 12px; flex: 1; } .sound-title { font-size: 17px; margin-bottom: 6px;} .sound-desc { max-height: none; font-size: 13px; margin-bottom: 10px; overflow: visible; } .reaction-section-title { margin: 6px 0 8px 0; font-size: 10.5px; padding: 3px 8px; } .reaction-btn { font-size: 10.5px; padding: 6px 0; gap: 3px; border-radius: 12px;} .reaction-btn svg { width: 13px; height: 13px; } .reaction-box { gap: 5px; margin-bottom: 12px; } .card-meta-box { margin-bottom: 8px; padding: 10px; gap: 8px; } } @media (max-height: 500px) and (orientation: landscape) { .glass-header { padding: 6px 16px; top: 10px; flex-direction: row; height: auto; gap: 15px; border-radius: 12px;} .project-title { font-size: 15px; width: auto; } .nav-buttons button { padding: 6px 10px; font-size: 12px; } .leaflet-popup-content-wrapper { max-height: calc(100vh - 120px); overflow-y: auto; pointer-events: auto; } .leaflet-popup-content { width: 260px !important; } .sound-cover { height: 80px; } .sound-info { padding: 10px; } .sound-title { font-size: 16px; margin-bottom: 6px; } .card-meta-box { margin-bottom: 8px; padding: 8px; } .drawer-content { max-height: calc(100vh - 60px); padding: 15px; pointer-events: auto;} .drawer-panel { width: 320px; max-width: 60vw; } .modal-box { max-height: 90vh; } .global-player { bottom: -150px; padding: 6px 16px; border-radius: 12px 12px 0 0; gap: 10px; width: auto; max-width: 90%;} .global-player.active { bottom: 0; } .waveform-wrapper { height: 18px; } .player-control-btn { width: 36px; height: 36px; } .close-player-btn { width: 28px; height: 28px; } .volume-control { display: none; } } /* ===== 手機版按鈕不換行 START ===== */ @media (max-width: 600px) { .nav-buttons { gap: 4px; width: 100%; justify-content: space-between; } .nav-buttons button { font-size: 12px; padding: 8px 4px; white-space: nowrap; /* ⭐ 防止斷行 */ } .nav-buttons button span { white-space: nowrap; } } /* ===== 關於我們標題不換行 START ===== */ .about-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: nowrap; } .about-title-zh, .about-title-en { white-space: nowrap; } .about-title-en { font-size: 16px; color: #7f8c8d; } /* 手機版避免擠爆 */ @media (max-width: 600px) { .about-title { gap: 8px; } .about-title-zh { font-size: 18px; } .about-title-en { font-size: 12px; } } /* ===== 關於我們標題不換行 END ===== */ /* ===== 手機版按鈕不換行 END ===== */ /* 🌟 GPS 定位按鈕與藍色準星樣式 */ .locate-me-wrapper { position: absolute; right: 20px; bottom: 30px; z-index: 1000; pointer-events: auto; } .locate-me-btn { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.95); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 16px; border: 1px solid var(--glass-border); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15); cursor: pointer; display: flex; justify-content: center; align-items: center; color: #3b82f6; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .locate-me-btn:hover { background: #fff; transform: translateY(-2px) scale(1.05); } .locate-me-btn:active { transform: scale(0.95); } .locate-me-btn.locating { animation: locatePulse 1.5s infinite; color: #94a3b8; } @keyframes locatePulse { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); } 100% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); } } @media (max-width: 600px) { .locate-me-wrapper { bottom: 40px; right: 12px; } } /* 🌟 定位提示氣泡專屬美化 */ .custom-hint-popup .leaflet-popup-content-wrapper { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; padding: 4px; box-shadow: 0 10px 25px rgba(59, 130, 246, 0.25); border: 1px solid rgba(59, 130, 246, 0.2); } .custom-hint-popup .leaflet-popup-content { margin: 14px 20px 14px 14px !important; /* 🌟 右側留 20px 完美避開叉叉 */ width: auto !important; min-width: 170px; } .custom-hint-popup .leaflet-popup-close-button { top: 8px !important; right: 8px !important; width: 26px !important; height: 26px !important; /* 🌟 稍微縮小叉叉不搶戲 */ font-size: 16px !important; } .hint-header { display: flex; align-items: center; gap: 6px; font-weight: 900; color: #2563eb; font-size: 15px; border-bottom: 2px dashed #bfdbfe; padding-bottom: 8px; margin-bottom: 8px; margin-right: 15px; /* 標題避開右上角 */ } .hint-body { font-size: 12px; color: #64748b; line-height: 1.6; }         .hint-body strong { color: #e74c3c; background: #fff1f2; padding: 2px 6px; border-radius: 6px; font-weight: 800;}             /* 🌟 南山公墓專屬：狙擊游標、高對比 Popup 與左側分類選單 */ body.nanshan-mode .leaflet-container { cursor: crosshair !important; } .nanshan-category-menu { position: absolute; left: 20px; bottom: 28px; z-index: 1200; width: min(300px, calc(100vw - 40px)); max-height: min(420px, calc(100vh - 180px)); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(221, 214, 254, 0.95); border-radius: 18px; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22); padding: 14px; box-sizing: border-box; display: none; flex-direction: column; gap: 10px; pointer-events: auto; } .nanshan-category-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .nanshan-category-title { display: flex; align-items: center; gap: 8px; color: #6d28d9; font-size: 14px; font-weight: 900; letter-spacing: 0.5px; } .nanshan-category-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } .nanshan-mini-btn { border: 1px solid #ddd6fe; background: #f5f3ff; color: #6d28d9; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 800; cursor: pointer; transition: 0.2s; } .nanshan-mini-btn:hover { background: #ede9fe; transform: translateY(-1px); } .nanshan-category-note { font-size: 11.5px; line-height: 1.5; color: #64748b; background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 10px; padding: 8px 10px; } .nanshan-search-box { display: flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid #ddd6fe; border-radius: 12px; padding: 8px 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); } .nanshan-search-box svg { color: #8b5cf6; flex-shrink: 0; } .nanshan-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: 13px; color: #334155; min-width: 0; font-weight: 700; } .nanshan-search-input::placeholder { color: #94a3b8; font-weight: 600; } .nanshan-search-clear { border: none; background: #f5f3ff; color: #7c3aed; border-radius: 999px; width: 22px; height: 22px; cursor: pointer; font-size: 15px; font-weight: 900; line-height: 1; display: none; align-items: center; justify-content: center; } .nanshan-search-clear:hover { background: #ede9fe; } .nanshan-category-list { overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; max-height: 250px; transition: max-height 0.3s ease; /* 增加滑順動畫 */ } .nanshan-search-status { font-size: 11px; color: #7c3aed; font-weight: 800; padding: 0 2px; flex: 1; /* 🎯 讓搜尋結果自動填滿下方所有剩餘空間 */ overflow-y: auto; /* 🎯 獨立捲動軸 */ scrollbar-width: thin; display: flex; flex-direction: column; } .nanshan-search-status::-webkit-scrollbar { width: 4px; } .nanshan-search-status::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 4px; } .nanshan-category-list::-webkit-scrollbar { width: 4px; } .nanshan-category-list::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 4px; } .nanshan-popup-content { width: 280px; max-height: 450px; overflow-y: auto; padding: 0; font-family: 'Noto Sans TC', 'Helvetica Neue', Arial, '微軟正黑體', sans-serif; } .nanshan-photo-gallery { width: 100%; background: #f8fafc; border-radius: 12px 12px 0 0; border-bottom: 2px solid #e9d5ff; overflow: hidden; } .nanshan-main-photo { display: block; width: 100%; height: 190px; object-fit: contain; background: #f1f5f9; } .nanshan-photo-strip { display: flex; gap: 6px; overflow-x: auto; padding: 7px; background: #faf5ff; scrollbar-width: thin; scrollbar-color: #c4b5fd transparent; } .nanshan-photo-strip::-webkit-scrollbar { height: 4px; } .nanshan-photo-strip::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 4px; } .nanshan-photo-thumb { width: 54px; height: 42px; object-fit: cover; border-radius: 8px; border: 2px solid rgba(255,255,255,0.95); box-shadow: 0 2px 7px rgba(15, 23, 42, 0.12); flex-shrink: 0; background: #f1f5f9; cursor: pointer; transition: 0.2s; } .nanshan-photo-thumb:hover { transform: translateY(-1px) scale(1.04); border-color: #8b5cf6; } .nanshan-photo-count { position: absolute; right: 8px; top: 8px; background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .nanshan-main-photo-wrap { position: relative; display: block; text-decoration: none; } .nanshan-popup-body { padding: 15px; } .nanshan-popup-content h3 { margin: 0 0 10px 0; font-size: 19px; font-weight: 900; color: #7c3aed; line-height: 1.4; } .nanshan-popup-content .bio-text { font-size: 14px; color: #475569; line-height: 1.8; text-align: justify; white-space: pre-wrap; margin-bottom: 15px; } .nanshan-popup-content .bio-text strong { color: #1e293b; font-weight: 900; } .nanshan-popup-content .source-tag { font-size: 11px; color: #94a3b8; border-top: 1px dashed #e2e8f0; padding-top: 10px; font-weight: 600; text-align: center; } .nanshan-popup-content::-webkit-scrollbar { width: 4px; } .nanshan-popup-content::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } @media (max-width: 600px) { .nanshan-category-menu { left: 10px; bottom: 18px; width: calc(100vw - 75px); /* 🌟 稍微加寬，只留右側空間給 GPS 準星按鈕 */ max-height: calc(100dvh - 230px); padding: 12px; } .nanshan-category-title { font-size: 13px; } .nanshan-category-note { font-size: 11px; } } /* 🎯 手機版防打架專屬設定 (結合 V4 模式) */ @media (max-width: 760px) { /* 進入南山模式時，完全隱藏下方的探索主線，讓出畫面空間 */ body.nanshan-mode .haidian-v4-dock { display: none !important; } /* 讓原本被迫懸在半空中的定位準星按鈕，舒適地降落回右下角 */ body.nanshan-mode .locate-me-wrapper { bottom: 18px !important; } } /* ===== haidian-9plus-stable-v4-css ===== */ /* HAIDIAN_9PLUS_STABLE_V4 單一 index.html 穩定版。 修正：入口卡片對比、三模式真實切換、圖資面板可點擊、定位按鈕保留。 */ :root { --haidian-v4-ink: #0f172a; --haidian-v4-muted: #475569; --haidian-v4-soft: #f8fafc; --haidian-v4-paper: #fffdf7; --haidian-v4-green: #0f8f6f; --haidian-v4-green-deep: #047857; --haidian-v4-river: #1f8a93; --haidian-v4-gold: #f7c96f; --haidian-v4-shadow: 0 18px 50px rgba(15, 23, 42, 0.18); } /* 白底入口卡片：文字一律使用高對比色 */ #splashScreen .splash-card { background: #ffffff !important; color: var(--haidian-v4-ink) !important; text-shadow: none !important; } #splashScreen .splash-card *, #splashScreen .splash-title, #splashScreen .featured-title { text-shadow: none !important; } #splashScreen .splash-title, #splashScreen .featured-title { color: var(--haidian-v4-ink) !important; opacity: 1 !important; } #splashScreen .splash-subtitle, #splashScreen .splash-quote-text, #splashScreen .splash-slogan, #splashScreen .splash-card p { color: var(--haidian-v4-muted) !important; opacity: 1 !important; } #splashScreen .splash-quote-title, #splashScreen .featured-label, #splashScreen .splash-slogan span, #splashScreen .splash-quote-text strong { color: var(--haidian-v4-green-deep) !important; opacity: 1 !important; } #splashScreen .splash-quote-text strong { background: #d1fae5 !important; } #splashScreen .btn-enter-map { background: linear-gradient(135deg, #f8c96d, #ffe4a8) !important; color: #17332d !important; box-shadow: 0 16px 34px rgba(120, 74, 20, 0.22) !important; } /* 模式面板抬頭 */ .haidian-v4-panel-head { display: grid; gap: 9px; margin: 0 0 14px 0; padding: 15px; border-radius: 18px; background: linear-gradient(135deg, rgba(31,138,147,0.11), rgba(247,201,111,0.15)), rgba(255,255,255,0.72); border: 1px solid rgba(31,138,147,0.18); } .haidian-v4-panel-head .eyebrow { color: var(--haidian-v4-green-deep); font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; } .haidian-v4-panel-head .title { color: var(--haidian-v4-ink); font-size: 18px; font-weight: 950; letter-spacing: 0.02em; line-height: 1.35; } .haidian-v4-panel-head .copy { color: var(--haidian-v4-muted); font-size: 13px; line-height: 1.55; } .haidian-v4-mode-switcher { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; padding: 8px; margin: 0 0 15px 0; border-radius: 999px; background: rgba(255,255,255,0.82); border: 1px solid rgba(31,138,147,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.92); } .haidian-v4-mode-btn { border: 0; border-radius: 999px; background: transparent; color: #52636f; font-weight: 900; font-size: 13px; padding: 10px 8px; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; } .haidian-v4-mode-btn:hover { transform: translateY(-1px); color: var(--haidian-v4-green-deep); } body.haidian-v4-mode-listen .haidian-v4-mode-btn[data-haidian-v4-mode="listen"], body.haidian-v4-mode-walk .haidian-v4-mode-btn[data-haidian-v4-mode="walk"], body.haidian-v4-mode-data .haidian-v4-mode-btn[data-haidian-v4-mode="data"] { color: #fff; background: linear-gradient(135deg, var(--haidian-v4-green), var(--haidian-v4-river)); box-shadow: 0 10px 20px rgba(15, 143, 111, 0.24); } /* 右下探索主線：z-index 低於圖資面板，避免蓋住圖資選項 */ .haidian-v4-dock { position: fixed; right: 94px; bottom: 18px; width: min(430px, calc(100vw - 140px)); z-index: 1400; pointer-events: auto; background: rgba(255, 253, 247, 0.95); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255,255,255,0.88); border-radius: 22px; box-shadow: var(--haidian-v4-shadow); padding: 14px; } .haidian-v4-dock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .haidian-v4-dock-title strong { display: block; color: var(--haidian-v4-ink); font-size: 14px; font-weight: 950; } .haidian-v4-dock-title span { display: block; margin-top: 2px; color: #64748b; font-size: 11px; font-weight: 700; } .haidian-v4-dock-toggle { border: 0; width: 34px; height: 34px; border-radius: 999px; background: rgba(31,138,147,0.08); color: var(--haidian-v4-green-deep); font-weight: 900; cursor: pointer; } .haidian-v4-dock-body { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; } .haidian-v4-card { border: 1px solid rgba(31,138,147,0.13); border-radius: 16px; background: rgba(255,255,255,0.78); padding: 11px 10px; text-align: left; cursor: pointer; min-height: 66px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; } .haidian-v4-card b { display: block; color: var(--haidian-v4-ink); font-size: 13px; font-weight: 950; margin-bottom: 4px; } .haidian-v4-card small { display: block; color: #52636f; font-size: 11px; font-weight: 700; line-height: 1.45; } .haidian-v4-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(15,23,42,.12); } body.haidian-v4-mode-listen .haidian-v4-card[data-haidian-v4-mode="listen"], body.haidian-v4-mode-walk .haidian-v4-card[data-haidian-v4-mode="walk"], body.haidian-v4-mode-data .haidian-v4-card[data-haidian-v4-mode="data"] { background: linear-gradient(135deg, rgba(15,143,111,0.95), rgba(31,138,147,0.95)); border-color: transparent; box-shadow: 0 12px 26px rgba(15,143,111,.26); } body.haidian-v4-mode-listen .haidian-v4-card[data-haidian-v4-mode="listen"] b, body.haidian-v4-mode-listen .haidian-v4-card[data-haidian-v4-mode="listen"] small, body.haidian-v4-mode-walk .haidian-v4-card[data-haidian-v4-mode="walk"] b, body.haidian-v4-mode-walk .haidian-v4-card[data-haidian-v4-mode="walk"] small, body.haidian-v4-mode-data .haidian-v4-card[data-haidian-v4-mode="data"] b, body.haidian-v4-mode-data .haidian-v4-card[data-haidian-v4-mode="data"] small { color: #fff; } .haidian-v4-dock.is-minimized { width: auto; padding: 10px 12px; } .haidian-v4-dock.is-minimized .haidian-v4-dock-title span, .haidian-v4-dock.is-minimized .haidian-v4-dock-body { display: none; } /* 三模式真實路由 */ body.haidian-v4-mode-listen #sidePanel:not(.collapsed), body.haidian-v4-mode-walk #routePanel:not(.collapsed) { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(0) !important; } body.haidian-v4-mode-listen #routePanel, body.haidian-v4-mode-walk #sidePanel, body.haidian-v4-mode-data #sidePanel, body.haidian-v4-mode-data #routePanel { transform: translateX(calc(-100% - var(--panel-offset) - 10px)) !important; } body.haidian-v4-mode-data #rightToolsWrapper { z-index: 4500 !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; } body.haidian-v4-mode-data #rightToolsWrapper .tools-toggle-btn, body.haidian-v4-mode-data #rightToolsWrapper .tools-menu-container, body.haidian-v4-mode-data #rightToolsWrapper .custom-layer-control { pointer-events: auto !important; } body.haidian-v4-mode-data #rightToolsWrapper.open:not(.haidian-v4-tools-user-hidden) .tools-menu-container { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; } body.haidian-v4-mode-data #rightToolsWrapper label, body.haidian-v4-mode-data #rightToolsWrapper input, body.haidian-v4-mode-data #rightToolsWrapper select, body.haidian-v4-mode-data #rightToolsWrapper button, body.haidian-v4-mode-data #rightToolsWrapper a { pointer-events: auto !important; } .haidian-v4-data-note { background: #f0fdfa; border: 1px solid #99f6e4; color: #115e59; border-radius: 12px; padding: 10px 12px; font-size: 12px; line-height: 1.55; font-weight: 750; margin-bottom: 10px; } /* 我的定位按鈕：保留在右下角，圖資面板開啟時不被蓋掉 */ .locate-me-wrapper { z-index: 3600 !important; right: 20px !important; bottom: 22px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } .locate-me-btn { width: 52px !important; height: 52px !important; border-radius: 18px !important; background: rgba(255,255,255,0.98) !important; color: var(--haidian-v4-green) !important; box-shadow: 0 14px 34px rgba(15,23,42,.20) !important; } .leaflet-control-attribution { margin-right: 92px !important; } @media (max-width: 760px) { .haidian-v4-dock { left: 10px; right: 10px; bottom: 12px; width: auto; padding: 12px; border-radius: 20px; } .haidian-v4-dock-body { gap: 6px; } .haidian-v4-card { padding: 9px 8px; min-height: 58px; } .haidian-v4-card b { font-size: 12px; } .haidian-v4-card small { font-size: 10px; } .locate-me-wrapper { right: 12px !important; bottom: 145px !important; } body.haidian-v4-mode-data .haidian-v4-dock { bottom: 8px; } .leaflet-control-attribution { margin-left: 8px !important; margin-right: 0 !important; margin-bottom: 8px !important; } } /* ===== HAIDIAN_V4_MANUAL_COLLAPSE_FIX_START ===== 修正項目： 1) 左側/走讀面板在 V4 模式下，點擊小耳朵可以真正收合。 2) 圖資模式下，右側圖資工具可由圖層按鈕再次隱藏。 3) 右下「探索主線」的收合按鈕避免被其他圖資層干擾。 */ body.haidian-v4 #sidePanel.collapsed, body.haidian-v4 #routePanel.collapsed { transform: translateX(calc(-100% - var(--panel-offset) - 10px)) !important; pointer-events: auto !important; } body.haidian-v4 #sidePanel.collapsed .drawer-content, body.haidian-v4 #routePanel.collapsed .drawer-content { pointer-events: none !important; } body.haidian-v4 #sidePanel .toggle-btn, body.haidian-v4 #routePanel .toggle-btn { pointer-events: auto !important; } body.haidian-v4 #rightToolsWrapper.haidian-v4-tools-user-hidden .tools-menu-container { opacity: 0 !important; visibility: hidden !important; transform: translateY(-10px) scale(0.95) !important; pointer-events: none !important; } body.haidian-v4 #rightToolsWrapper.haidian-v4-tools-user-hidden .custom-layer-control, body.haidian-v4 #rightToolsWrapper.haidian-v4-tools-user-hidden .tools-menu-container label, body.haidian-v4 #rightToolsWrapper.haidian-v4-tools-user-hidden .tools-menu-container input, body.haidian-v4 #rightToolsWrapper.haidian-v4-tools-user-hidden .tools-menu-container select, body.haidian-v4 #rightToolsWrapper.haidian-v4-tools-user-hidden .tools-menu-container button, body.haidian-v4 #rightToolsWrapper.haidian-v4-tools-user-hidden .tools-menu-container a { pointer-events: none !important; } .haidian-v4-dock-toggle { position: relative; z-index: 2; } .haidian-v4-dock.is-minimized { min-width: 0; } /* ===== HAIDIAN_V4_MANUAL_COLLAPSE_FIX_END ===== */ /* ===== HAIDIAN_V4_CROSS_MODE_DRAWER_FIX_START ===== 右下主線切到任一模式後，左側「聆聽 / 走讀」小耳朵仍可跨模式展開。 這段放在 V4 CSS 最底部，用來覆蓋三模式路由中對非當前面板的強制隱藏。 */ body.haidian-v4 #sidePanel:not(.collapsed), body.haidian-v4 #routePanel:not(.collapsed) { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(0) !important; } body.haidian-v4 #sidePanel:not(.collapsed) .drawer-content, body.haidian-v4 #routePanel:not(.collapsed) .drawer-content { pointer-events: auto !important; } body.haidian-v4 #sidePanel.collapsed, body.haidian-v4 #routePanel.collapsed { transform: translateX(calc(-100% - var(--panel-offset) - 10px)) !important; pointer-events: auto !important; } body.haidian-v4 #sidePanel.collapsed .drawer-content, body.haidian-v4 #routePanel.collapsed .drawer-content { pointer-events: none !important; } /* ===== HAIDIAN_V4_CROSS_MODE_DRAWER_FIX_END ===== */ /* ===== HAIDIAN_96_ENGINEERING_STABLE_UI_STATE_START ===== 9.6 工程穩定版： - 預設 idle：聆聽 / 走讀 / 圖資三模態都不自動開啟。 - 所有面板顯示只跟 collapsed / open 狀態同步，避免模式 CSS 強迫 pop 出。 - 仍保留左右小耳朵與右側圖層工具按鈕可點擊。 */ body.haidian-v4-mode-idle #sidePanel, body.haidian-v4-mode-idle #routePanel { transform: translateX(calc(-100% - var(--panel-offset) - 10px)) !important; pointer-events: auto !important; } body.haidian-v4-mode-idle #sidePanel .drawer-content, body.haidian-v4-mode-idle #routePanel .drawer-content { pointer-events: none !important; } body.haidian-v4-mode-idle #sidePanel .toggle-btn, body.haidian-v4-mode-idle #routePanel .toggle-btn { pointer-events: auto !important; } body.haidian-v4-mode-idle #rightToolsWrapper { pointer-events: none !important; } body.haidian-v4-mode-idle #rightToolsWrapper .tools-toggle-btn { pointer-events: auto !important; } body.haidian-v4-mode-idle #rightToolsWrapper .tools-menu-container { opacity: 0 !important; visibility: hidden !important; transform: translateY(-10px) scale(0.95) !important; pointer-events: none !important; } body.haidian-v4-mode-idle #rightToolsWrapper .custom-layer-control, body.haidian-v4-mode-idle #rightToolsWrapper .tools-menu-container label, body.haidian-v4-mode-idle #rightToolsWrapper .tools-menu-container input, body.haidian-v4-mode-idle #rightToolsWrapper .tools-menu-container select, body.haidian-v4-mode-idle #rightToolsWrapper .tools-menu-container button, body.haidian-v4-mode-idle #rightToolsWrapper .tools-menu-container a { pointer-events: none !important; } body.haidian-v4 .haidian-v4-card[aria-pressed="false"] { outline: none; } /* ===== HAIDIAN_96_ENGINEERING_STABLE_UI_STATE_END ===== */ /* ===== haidian-right-tools-scroll-fix ===== */ /* ===== START: RIGHT TOOLS REAL SCROLL FIX ===== */ /* 外層只負責定位、開關動畫；不再自己承擔捲動。 */ #rightToolsWrapper .tools-menu-container { display: block !important; align-self: flex-end; width: min(300px, calc(100vw - 24px)); min-height: 0 !important; max-height: none !important; margin-top: 10px; padding: 0 !important; overflow: visible !important; } /* 真正的捲動容器：內容再長也可滑到底。 */ #rightToolsWrapper .custom-layer-control { width: 100% !important; box-sizing: border-box !important; max-height: var( --right-tools-scroll-max-height, calc(100dvh - 180px) ) !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important; margin-bottom: 0 !important; scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; scrollbar-gutter: stable; } #rightToolsWrapper .custom-layer-control::-webkit-scrollbar { width: 6px; } #rightToolsWrapper .custom-layer-control::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 999px; } /* 手機版避免圖資卡片貼齊螢幕邊緣。 */ @media (max-width: 600px) { #rightToolsWrapper .tools-menu-container { width: min(280px, calc(100vw - 24px)); } #rightToolsWrapper .custom-layer-control { border-radius: 16px; } } /* 淹水目錄：把潛勢圖與即時感測器收進同一個可展開區塊。 */ .layer-folder { margin: 12px 0; border: 1px solid #fed7aa; border-radius: 12px; background: #fffaf5; overflow: hidden; } .layer-folder > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; cursor: pointer; color: #9a3412; font-size: 12px; font-weight: 900; user-select: none; } .layer-folder > summary::-webkit-details-marker { display: none; } .layer-folder > summary::after { content: "⌄"; flex-shrink: 0; font-size: 16px; line-height: 1; transition: transform 0.2s ease; } .layer-folder[open] > summary::after { transform: rotate(180deg); } .layer-folder > summary small { color: #c2410c; font-size: 10px; font-weight: 800; white-space: nowrap; } .layer-folder-content { padding: 0 10px 10px; } .layer-subsection { padding-top: 10px; } .layer-subsection + .layer-subsection { margin-top: 10px; border-top: 1px dashed #fdba74; } .layer-subsection-title { margin-bottom: 8px; color: #9a3412; font-size: 11px; font-weight: 900; } .layer-subsection-title small { margin-left: 4px; color: #64748b; font-size: 10px; font-weight: 800; } /* ===== END: RIGHT TOOLS REAL SCROLL FIX ===== */ /* ===== right-tools-universal-design ===== */ #rightToolsWrapper { --rt-ink: #12333b; --rt-muted: #60747a; --rt-line: #c7dcda; --rt-surface: rgba(255, 255, 255, 0.97); --rt-soft: #f3f8f7; --rt-primary: #006c73; --rt-primary-dark: #004d55; --rt-focus: #087f96; --rt-shadow: 0 18px 44px rgba(13, 47, 53, 0.22); } #rightToolsWrapper .tools-toggle-btn { width: 52px !important; height: 52px !important; border: 1px solid rgba(255, 255, 255, 0.95) !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.96) !important; color: var(--rt-ink) !important; box-shadow: 0 12px 28px rgba(13, 47, 53, 0.22) !important; } #rightToolsWrapper .tools-toggle-btn:hover, #rightToolsWrapper .tools-toggle-btn:focus-visible { color: var(--rt-primary) !important; background: #fff !important; outline: 3px solid rgba(8, 127, 150, 0.34) !important; outline-offset: 3px; transform: translateY(-2px) !important; } #rightToolsWrapper .tools-menu-container { width: min(342px, calc(100vw - 28px)) !important; } #rightToolsWrapper .custom-layer-control { width: 100% !important; padding: 14px !important; color: var(--rt-ink) !important; background: var(--rt-surface) !important; border: 1px solid var(--rt-line) !important; border-radius: 22px !important; box-shadow: var(--rt-shadow) !important; } #rightToolsWrapper .custom-layer-control > div[style*="color:var(--text-muted)"] { color: var(--rt-primary) !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: 0.07em; } #rightToolsWrapper .custom-layer-control hr, #rightToolsWrapper .custom-layer-control > div[style*="border-top"] { border-color: var(--rt-line) !important; } #rightToolsWrapper .custom-layer-control label { min-height: 42px; padding: 8px; color: var(--rt-ink) !important; border-radius: 10px; line-height: 1.4; } #rightToolsWrapper .custom-layer-control label:hover { background: var(--rt-soft); } #rightToolsWrapper .custom-layer-control label:has(input:checked) { background: #e9f6f4; box-shadow: inset 4px 0 0 var(--rt-primary); } #rightToolsWrapper .custom-layer-control input[type="checkbox"], #rightToolsWrapper .custom-layer-control input[type="radio"] { width: 20px !important; height: 20px !important; min-width: 20px; accent-color: var(--rt-primary) !important; } #rightToolsWrapper .custom-layer-control input[type="range"] { accent-color: var(--rt-primary) !important; } #rightToolsWrapper .custom-layer-control input[type="text"], #rightToolsWrapper .custom-layer-control select { min-height: 40px; color: var(--rt-ink) !important; background: #fff !important; border-color: var(--rt-line) !important; border-radius: 10px !important; } #rightToolsWrapper .custom-layer-control input:focus-visible, #rightToolsWrapper .custom-layer-control select:focus-visible, #rightToolsWrapper .custom-layer-control button:focus-visible, #rightToolsWrapper .custom-layer-control a:focus-visible, #rightToolsWrapper .custom-layer-control label:focus-within { outline: 3px solid rgba(8, 127, 150, 0.35) !important; outline-offset: 2px; } #rightToolsWrapper .history-layer-item { margin-bottom: 4px !important; border-top: 1px solid #e2eceb; } #rightToolsWrapper .history-layer-item:first-of-type { border-top: 0; } #rightToolsWrapper .history-layer-item > div[id^="ctrl_history_"] { padding: 3px 8px 8px 38px !important; } #rightToolsWrapper .layer-folder { margin: 12px 0 !important; background: #fff !important; border: 1px solid var(--rt-line) !important; border-radius: 18px !important; box-shadow: 0 8px 20px rgba(13, 47, 53, 0.08); } #rightToolsWrapper .layer-folder > summary { min-height: 58px; padding: 10px 12px !important; color: var(--rt-ink) !important; background: linear-gradient(180deg, #ffffff, #f3f8f7) !important; } #rightToolsWrapper .layer-folder > summary span { color: var(--rt-ink) !important; font-size: 14px !important; font-weight: 900 !important; } #rightToolsWrapper .layer-folder > summary small { color: var(--rt-muted) !important; font-weight: 800 !important; } #rightToolsWrapper .layer-folder > summary::after { color: var(--rt-primary) !important; } #rightToolsWrapper .layer-folder-content { padding: 2px 10px 12px !important; } #rightToolsWrapper .layer-subsection { padding-top: 12px !important; } #rightToolsWrapper .layer-subsection + .layer-subsection { border-top: 1px solid #dce9e7 !important; } #rightToolsWrapper .layer-subsection-title { color: var(--rt-primary-dark) !important; font-size: 12px !important; font-weight: 900 !important; } #rightToolsWrapper #floodControlPanel, #rightToolsWrapper #tainanHistoryFloodControlPanel, #rightToolsWrapper #realtimeFloodControlPanel, #rightToolsWrapper #hydrologyControlPanel, #rightToolsWrapper #officialHazardControlPanel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); } @media (max-width: 600px) { /* 工具鍵留在右下、避開底部模式列 */ #rightToolsWrapper { position: fixed !important; top: auto !important; right: 12px !important; bottom: calc(146px + env(safe-area-inset-bottom)) !important; } #rightToolsWrapper .tools-toggle-btn { width: 50px !important; height: 50px !important; margin-bottom: 8px !important; } /* 開啟後改為底部抽屜，保留約 48% 地圖畫面 */ #rightToolsWrapper .tools-menu-container { position: fixed !important; top: auto !important; right: 10px !important; bottom: calc(214px + env(safe-area-inset-bottom)) !important; left: 10px !important; width: auto !important; margin: 0 !important; transform-origin: bottom right !important; } #rightToolsWrapper .custom-layer-control { max-height: min(52dvh, 500px) !important; padding: 12px !important; border-radius: 20px !important; } } @media (prefers-reduced-motion: reduce) { #rightToolsWrapper *, #rightToolsWrapper *::before, #rightToolsWrapper *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }