diff --git a/concert/concert.html b/concert/concert.html index 391f529..c4988de 100644 --- a/concert/concert.html +++ b/concert/concert.html @@ -40,7 +40,7 @@ z-index: 5; } - /* 巡迴搜尋:樣式對齊 .search-input;第一列 input+btn,第二列白字結果 */ + /* 巡迴搜尋:輸入列 + 奶油說明/結果卡(對齊 #stage-now 白黃風格) */ .concert-search-box { width: 100%; max-width: 920px; @@ -48,7 +48,7 @@ display: flex; flex-direction: column; align-items: center; - gap: 14px; + gap: 16px; } .concert-search-row { @@ -97,83 +97,156 @@ box-shadow: 0 0 10px rgba(255, 204, 0, 0.35); } + .concert-search-panel { + width: 100%; + max-width: 720px; + background: #fff8df; + border: 1px solid #e9d99d; + border-radius: 16px; + padding: 18px 20px 16px; + box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); + } + + .concert-search-guide-title { + margin: 0 0 14px; + text-align: center; + font-size: 0.95rem; + font-weight: 700; + letter-spacing: 0.12em; + color: #4a4a4a; + } + + .concert-search-guide-list { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 12px; + } + + .concert-search-guide-item { + background: #fff; + border: 1px solid #eadfb2; + border-radius: 12px; + padding: 12px 14px; + } + + .concert-search-guide-item .guide-label { + display: block; + margin: 0 0 6px; + text-align: center; + font-size: 0.88rem; + font-weight: 700; + color: #65510e; + } + + .concert-search-guide-item .guide-desc { + margin: 0; + text-align: left; + font-size: 0.84rem; + line-height: 1.65; + color: #5a5a5a; + } + + .concert-search-guide-item .guide-desc em { + font-style: normal; + color: #7f6712; + font-weight: 600; + } + + .concert-search-guide-steps { + margin: 14px 0 0; + padding-top: 12px; + border-top: 1px dashed #e0d4a8; + text-align: center; + font-size: 0.82rem; + line-height: 1.6; + color: #6a6a6a; + } + + .concert-search-guide-steps strong { + color: #4a4a4a; + font-weight: 700; + } + .concert-search-result { display: block; width: 100%; - margin: 0; + margin: 14px 0 0; + padding-top: 14px; + border-top: 1px solid #eadfb2; } - .concert-search-hint { - width: 100%; - max-width: 720px; - margin: 0 0 12px; - padding: 0 6px; - text-align: left; - font-size: 0.82rem; - line-height: 1.6; - color: rgba(255, 255, 255, 0.78); + .concert-search-result:not(:has(.concert-search-hits)) .concert-search-summary { + margin: 0; } .concert-search-summary { margin: 0 0 12px; text-align: center; - font-size: 0.95rem; - line-height: 1.6; - color: #fff; + font-size: 0.92rem; + line-height: 1.65; + color: #444; } .concert-search-hits { list-style: none; - margin: 0 auto; + margin: 0; padding: 0; - max-width: 720px; + display: grid; + gap: 10px; text-align: left; } .concert-search-hits li { - padding: 10px 14px; - margin-bottom: 8px; - background: rgba(255, 248, 223, 0.1); - border: 1px solid rgba(255, 204, 0, 0.35); + padding: 12px 14px; + background: #fff; + border: 1px solid #eadfb2; border-radius: 12px; - color: #fff; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); font-size: 0.88rem; line-height: 1.5; } .concert-search-hits li.concert-search-hit-jump { cursor: pointer; - transition: background 0.2s ease, border-color 0.2s ease; + transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .concert-search-hits li.concert-search-hit-jump:hover, - .concert-search-hits li.concert-search-hit-jump:focus-visible { - background: rgba(255, 204, 0, 0.15); + .concert-search-hits li.concert-search-hit-jump:focus-visible, + .concert-search-hits li.concert-search-hit-jump.is-active { border-color: #ffcc00; + box-shadow: 0 6px 18px rgba(255, 204, 0, 0.22); + transform: translateY(-1px); outline: none; } .concert-search-hits .hit-track { display: block; font-weight: 700; - color: #ffdd00; + color: #2c2c2c; } .concert-search-hits .hit-meta { display: block; - margin-top: 4px; - color: rgba(255, 255, 255, 0.78); - font-size: 0.82rem; + margin-top: 6px; + color: #6a6a6a; + font-size: 0.8rem; + line-height: 1.5; } .concert-search-hits .hit-more { text-align: center; border-style: dashed; - color: rgba(255, 255, 255, 0.85); + background: #fffef8; + color: #7f6712; + cursor: default; + box-shadow: none; } .track-item.is-search-hit .track { - color: #ffdd00; + color: #c9a100; font-weight: 700; } @@ -200,11 +273,24 @@ placeholder="成員或 ENCORE/Solo…(可空白)" aria-describedby="concert-search-hint"> -
- 曲目或場次:曲名、巡演名或場地(例:COUPLE、釜山、YELLOW NOTE)。成員或段落:可留白;要縮小範圍時可填成員名,或歌單裡的段落標記(例:殷志源、ENCORE、BLACKKIES、Solo)。兩格都有填時,需同時符合。按查詢或 Enter;點結果可跳到下方歌單。 -
-尚未查詢。
+比對曲名、巡演名或場地。例:COUPLE、釜山、YELLOW NOTE
+可留白。要縮小範圍可填成員名,或歌單標記(安可、小分隊、Solo)。例:殷志源、ENCORE、BLACKKIES
+① 查詢或 Enter 顯示結果列表 ② 點列表某一列,跳到下方該場次與曲目(兩格都有填時須同時符合)
+尚未查詢。
+