diff --git a/concert.css b/concert.css index 06d5c66..427bacc 100644 --- a/concert.css +++ b/concert.css @@ -156,8 +156,29 @@ body { position: relative; } +/* 針對曲目前方的圖示進行替換 */ [class*="con-"]>div div::before { - content: "🎵 "; + /* 1. 使用 Font Awesome 的音樂符號 Unicode (f001 是音樂符號) */ + content: "\f001"; + + /* 2. 指定字體系列與粗細 (這是顯示圖示的關鍵) */ + font-family: "Font Awesome 6 Free"; + font-weight: 900; + + /* 3. 顏色與大小微調 */ + color: #ffcc00; + /* 使用你的水晶黃 */ + font-size: 0.8rem; + + /* 4. 位置修正：取代原本的 margin-left */ + display: inline-block; + width: 25px; + /* 固定寬度讓文字對齊 */ + margin-right: 5px; + /* 圖示與歌名間距 */ + text-align: center; + + /* 如果你堅持要保留原本的 30px 偏移，可以加在這裡 */ margin-left: 30px; } @@ -171,9 +192,6 @@ body { vertical-align: super; } -[class*="con-"]>div div::before { - content: "🎵 "; -} /* 1. 針對 track-list 容器本身：關閉符號與計數 */ .track-list::before, @@ -193,14 +211,48 @@ body { /* 3. 確保真正的曲目 (track-item) 正常顯示 */ .track-item { display: block; + white-space: nowrap; + /* 強制不換行 */ + overflow: hidden; + /* 隱藏超出部分 */ + text-overflow: ellipsis; + /* 超出部分顯示 ... */ + max-width: 85%; + /* 留空間給右邊的序號 */ position: relative; padding-left: 35px; /* 這裡留給 🎵 圖標 */ } -/* 📍 地點圖示 */ +/* 進階：滑鼠移上去顯示完整文字 */ +.track-item:hover { + overflow: visible; + white-space: normal; + background: #fff; + z-index: 10; + position: relative; +} + +/* 地點圖示 */ .location::before { - content: "📍"; + /* 1. 使用 Unicode 編碼代替貼圖 */ + content: "\f3c5"; + + /* 2. 指定字體系列 (重要！沒寫會變亂碼) */ + font-family: "Font Awesome 6 Free"; + + /* 3. 指定字體粗細 (Solid 圖標通常需要 900) */ + font-weight: 900; + + /* 4. 原有的樣式調整 */ + margin-right: 8px; + /* 這裡改用 margin-right 讓圖示在文字左邊 */ + margin-left: 0; + /* 清除原本可能有的 margin-left */ + color: #ffcc00; + /* 讓圖示顏色跟你的水晶黃對齊 */ + font-size: 1.1rem; + display: inline-block; margin-left: 30px; } @@ -255,8 +307,8 @@ body { display: none; } -/* 2. 預設隱藏第 5 個之後的 track-item */ -.track-list .track-item:nth-child(n+6) { +/* 2. 預設隱藏第 2 個之後的 track-item */ +.track-list .track-item:nth-child(n+3) { display: none; opacity: 0; transition: opacity 0.5s ease; diff --git a/concert.html b/concert.html index 608d70f..f7c69d3 100644 --- a/concert.html +++ b/concert.html @@ -3,6 +3,8 @@ SECHSKIES Concert Archive + + @@ -181,7 +183,7 @@
- 光州 | 光州女大世大運體育 + 光州 | 光州女大世大運體育館
오랜만이에요（IT'S BEEN A WHILE）
@@ -210,33 +212,114 @@
- 光州 | 光州女大世大運體育 - + 高陽 | 韓國國際展覽中心 +
오랜만이에요（IT'S BEEN A WHILE）
-
세 단어（THREE WORDS）/ 三個詞
+
약속된 운명（아마게돈） / 約定的命運
+
DANCE MEDLEY：COM' BACK + 폼생폼사 + ROAD FIGHTER+기사도 / 騎士道 + + 학원별곡（RISE UP）/ 學園別曲
연정（HEARTBREAK）/ 戀情
-
웃어줘（SMILE）
기억해줄래 / 請記得好嗎
-
SAY
+
웃어줘（SMILE）
+
겨울이야기 / 冬天的故事 + White Love － 姜成勳（12月23日）
+
Beautiful － 張水院（12月24日）
+
악마의 연기 / 惡魔的煙氣 － 殷志源（12月30日）
네가 필요해（NEED U）
-
백허그（BACK HUG）
-
술끊자（DRINKING PROBLEM）
+
커플（COUPLE）/ 戀人
+
COME TO ME BABY
예감（GOT A FEELING）/ 預感
-
고백（Go Back）－ 李宰鎮
+
슬픈 노래（SAD SONG）/ 悲歌
특별해（SOMETHING SPECIAL）
느낌이 와（FEELING）
현기증（VERTIGO）
+
아프지마요（BE WELL）
+
사랑하는 너에게 （DEAR LOVE）/ 給親愛的你
+
백허그（BACK HUG）
+
세 단어（THREE WORDS）/ 三個詞
+
술끊자（DRINKING PROBLEM）
+
그날까지（TOGETHER FOREVER）/ 直到那一天
+
ENCORE：세 단어（THREE WORDS）/ 三個詞
+
특별해（SOMETHING SPECIAL）
+
+ +
+
+ 釜山 | 釜山會展中心 + +
+
오랜만이에요（IT'S BEEN A WHILE）
+
약속된 운명（아마게돈） / 約定的命運
+
DANCE MEDLEY：COM' BACK + 폼생폼사 + ROAD FIGHTER+기사도 / 騎士道 + + 학원별곡（RISE UP）/ 學園別曲
+
연정（HEARTBREAK）/ 戀情
+
기억해줄래 / 請記得好嗎
+
웃어줘（SMILE）
+
겨울이야기 / 冬天的故事 + White Love － 姜成勳（12月23日）
+
Beautiful － 張水院（12月24日）
+
악마의 연기 / 惡魔的煙氣 － 殷志源（12月30日）
+
네가 필요해（NEED U）
+
커플（COUPLE）/ 戀人
+
COME TO ME BABY
+
예감（GOT A FEELING）/ 預感
+
슬픈 노래（SAD SONG）/ 悲歌
+
특별해（SOMETHING SPECIAL）
+
느낌이 와（FEELING）
+
현기증（VERTIGO）
+
아프지마요（BE WELL）
+
사랑하는 너에게 （DEAR LOVE）/ 給親愛的你
+
백허그（BACK HUG）
+
세 단어（THREE WORDS）/ 三個詞
+
술끊자（DRINKING PROBLEM）
+
그날까지（TOGETHER FOREVER）/ 直到那一天
+
ENCORE：특별해（SOMETHING SPECIAL）
+
느낌이 와（FEELING）
DANCE MEDLEY：
COM' BACK + 폼생폼사 / 品生品死 + ROAD FIGHTER +
기사도 / 騎士道 + 학원별곡（RISE UP）/ 學園別曲
-
아프지마요（BE WELL）
-
슬픈 노래（SAD SONG）/ 悲歌
-
커플（COUPLE）/ 戀人
-
ENCORE：그날까지（TOGETHER FOREVER）/ 直到那一天
-
특별해（SOMETHING SPECIAL）
- + +
+
+ 大邱 | 大邱會展中心 + +
+
오랜만이에요（IT'S BEEN A WHILE）
+
약속된 운명（아마게돈） / 約定的命運
+
DANCE MEDLEY：
+
COM' BACK + 폼생폼사 / 品生品死 + ROAD FIGHTER +
+
기사도 / 騎士道 + 학원별곡（RISE UP）/ 學園別曲
+
연정（HEARTBREAK）/ 戀情
+
기억해줄래 / 請記得好嗎
+
웃어줘（SMILE）
+
겨울이야기 / 冬天的故事 + White Love － 姜成勳
+
RIGOLETTO － 李宰鎮
+
Beautiful － 張水院
+
악마의 연기 / 惡魔的煙氣 － 殷志源
+
Solo舞蹈：Forbes － 金在德
+
네가 필요해（NEED U）
+
커플（COUPLE）/ 戀人
+
COME TO ME BABY
+
예감（GOT A FEELING）/ 預感
+
슬픈 노래（SAD SONG）/ 悲歌
+
특별해（SOMETHING SPECIAL）
+
느낌이 와（FEELING）
+
현기증（VERTIGO）
+
아프지마요（BE WELL）
+
ENCORE：
+
사랑하는 너에게 （DEAR LOVE）/ 給親愛的你
+
백허그（BACK HUG）
+
세 단어（THREE WORDS）/ 三個詞
+
술끊자（DRINKING PROBLEM）
+
DOUBLE ENCORE：
+
ROAD FIGHTER
+
무모한 사랑（RECKLESS LOVE）/ 不可能的愛
+
기사도 / 騎士道
+
DANCE MEDLEY：COM' BACK + 폼생폼사 / 品生品死 + ROAD FIGHTER +기사도 + / 騎士道 + 학원별곡（RISE UP）/ 學園別曲
+
그날까지（TOGETHER FOREVER）/ 直到那一天
+
+
@@ -246,7 +329,31 @@ 首爾：首爾奧林匹克體操競技場
- +
약속된 운명（아마게돈） / 約定的命運
+
FLYING LOVE（천상비애）/ 天上飛愛
+
무모한 사랑（RECKLESS LOVE）/ 不可能的愛
+
COM' BACK
+
학원별곡（RISE UP）/ 學園別曲
+
ROAD FIGHTER
+
LAST
+
세 단어（THREE WORDS）/ 三個詞
+
少女 － 張水院
+
Now － 殷志源
+
Egoist － 李宰鎮
+
Solo舞蹈：We Still In This Bitch － 金在德
+
오랜만이에요（IT'S BEEN A WHILE）
+
네겐 보일수 없었던 세상 / 不能讓你看到的世界
+
슬픈 노래（SAD SONG）/ 悲歌
+
특별해（SOMETHING SPECIAL）
+
느낌이 와（FEELING）
+
현기증（VERTIGO）
+
아프지마요（BE WELL）
+
ENCORE：
+
예감（GOT A FEELING）/ 預感
+
그대로 멈춰 / 就那樣停止
+
커플（COUPLE）/ 戀人
+
사랑하는 너에게 （DEAR LOVE）/ 給親愛的你（10月14日）
+
그날까지（TOGETHER FOREVER）/ 直到那一天（10月14日）