feat:完整演唱會曲目修改樣式
This commit is contained in:
+60
-8
@@ -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;
|
||||
|
||||
+123
-16
@@ -3,6 +3,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SECHSKIES Concert Archive</title>
|
||||
<link rel="stylesheet" href="concert.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -181,7 +183,7 @@
|
||||
<label for="expand-con-2-1" class="expand-btn"></label>
|
||||
</div>
|
||||
<div class="con-2-2">
|
||||
<span class="location">光州 | 光州女大世大運體育</span>
|
||||
<span class="location">光州 | 光州女大世大運體育館</span>
|
||||
<input type="checkbox" id="expand-con-2-2" class="expand-trigger">
|
||||
<div class="track-list">
|
||||
<div class="track-item"><span class="track">오랜만이에요（IT'S BEEN A WHILE）</span></div>
|
||||
@@ -210,33 +212,114 @@
|
||||
<label for="expand-con-2-2" class="expand-btn"></label>
|
||||
</div>
|
||||
<div class="con-2-3">
|
||||
<span class="location">光州 | 光州女大世大運體育</span>
|
||||
<input type="checkbox" id="expand-con-2-2" class="expand-trigger">
|
||||
<span class="location">高陽 | 韓國國際展覽中心</span>
|
||||
<input type="checkbox" id="expand-con-2-3" class="expand-trigger">
|
||||
<div class="track-list">
|
||||
<div class="track-item"><span class="track">오랜만이에요（IT'S BEEN A WHILE）</span></div>
|
||||
<div class="track-item"><span class="track">세 단어（THREE WORDS）/ 三個詞</span></div>
|
||||
<div class="track-item"><span class="track">약속된 운명（아마게돈） / 約定的命運</span></div>
|
||||
<div class="track-item"><span class="track">DANCE MEDLEY：COM' BACK + 폼생폼사 + ROAD FIGHTER+기사도 / 騎士道 +
|
||||
학원별곡（RISE UP）/ 學園別曲</span></div>
|
||||
<div class="track-item"><span class="track">연정（HEARTBREAK）/ 戀情</span></div>
|
||||
<div class="track-item"><span class="track">웃어줘（SMILE）</span></div>
|
||||
<div class="track-item"><span class="track">기억해줄래 / 請記得好嗎</span></div>
|
||||
<div class="track-item"><span class="track">SAY</span></div>
|
||||
<div class="track-item"><span class="track">웃어줘（SMILE）</span></div>
|
||||
<div class="track-item"><span class="track">겨울이야기 / 冬天的故事 + White Love － 姜成勳（12月23日）</span></div>
|
||||
<div class="track-item"><span class="track">Beautiful － 張水院（12月24日）</span></div>
|
||||
<div class="track-item"><span class="track">악마의 연기 / 惡魔的煙氣 － 殷志源（12月30日）</span></div>
|
||||
<div class="track-item"><span class="track">네가 필요해（NEED U）</span></div>
|
||||
<div class="track-item"><span class="track">백허그（BACK HUG）</span></div>
|
||||
<div class="track-item"><span class="track">술끊자（DRINKING PROBLEM）</span></div>
|
||||
<div class="track-item"><span class="track">커플（COUPLE）/ 戀人</span></div>
|
||||
<div class="track-item"><span class="track">COME TO ME BABY</span></div>
|
||||
<div class="track-item"><span class="track">예감（GOT A FEELING）/ 預感</span></div>
|
||||
<div class="track-item"><span class="track">고백（Go Back）－ 李宰鎮</span></div>
|
||||
<div class="track-item"><span class="track">슬픈 노래（SAD SONG）/ 悲歌</span></div>
|
||||
<div class="track-item"><span class="track">특별해（SOMETHING SPECIAL）</span></div>
|
||||
<div class="track-item"><span class="track">느낌이 와（FEELING）</span></div>
|
||||
<div class="track-item"><span class="track">현기증（VERTIGO）</span></div>
|
||||
<div class="track-item"><span class="track">아프지마요（BE WELL）</span></div>
|
||||
<div class="track-item"><span class="track">사랑하는 너에게 （DEAR LOVE）/ 給親愛的你</span></div>
|
||||
<div class="track-item"><span class="track">백허그（BACK HUG）</span></div>
|
||||
<div class="track-item"><span class="track">세 단어（THREE WORDS）/ 三個詞</span></div>
|
||||
<div class="track-item"><span class="track">술끊자（DRINKING PROBLEM）</span></div>
|
||||
<div class="track-item"><span class="track">그날까지（TOGETHER FOREVER）/ 直到那一天</span></div>
|
||||
<div class="track-item"><span class="track">ENCORE：세 단어（THREE WORDS）/ 三個詞</span></div>
|
||||
<div class="track-item"><span class="track">특별해（SOMETHING SPECIAL）</span></div>
|
||||
</div>
|
||||
<label for="expand-con-2-3" class="expand-btn"></label>
|
||||
</div>
|
||||
<div class="con-2-4">
|
||||
<span class="location">釜山 | 釜山會展中心</span>
|
||||
<input type="checkbox" id="expand-con-2-4" class="expand-trigger">
|
||||
<div class="track-list">
|
||||
<div class="track-item"><span class="track">오랜만이에요（IT'S BEEN A WHILE）</span></div>
|
||||
<div class="track-item"><span class="track">약속된 운명（아마게돈） / 約定的命運</span></div>
|
||||
<div class="track-item"><span class="track">DANCE MEDLEY：COM' BACK + 폼생폼사 + ROAD FIGHTER+기사도 / 騎士道 +
|
||||
학원별곡（RISE UP）/ 學園別曲</span></div>
|
||||
<div class="track-item"><span class="track">연정（HEARTBREAK）/ 戀情</span></div>
|
||||
<div class="track-item"><span class="track">기억해줄래 / 請記得好嗎</span></div>
|
||||
<div class="track-item"><span class="track">웃어줘（SMILE）</span></div>
|
||||
<div class="track-item"><span class="track">겨울이야기 / 冬天的故事 + White Love － 姜成勳（12月23日）</span></div>
|
||||
<div class="track-item"><span class="track">Beautiful － 張水院（12月24日）</span></div>
|
||||
<div class="track-item"><span class="track">악마의 연기 / 惡魔的煙氣 － 殷志源（12月30日）</span></div>
|
||||
<div class="track-item"><span class="track">네가 필요해（NEED U）</span></div>
|
||||
<div class="track-item"><span class="track">커플（COUPLE）/ 戀人</span></div>
|
||||
<div class="track-item"><span class="track">COME TO ME BABY</span></div>
|
||||
<div class="track-item"><span class="track">예감（GOT A FEELING）/ 預感</span></div>
|
||||
<div class="track-item"><span class="track">슬픈 노래（SAD SONG）/ 悲歌</span></div>
|
||||
<div class="track-item"><span class="track">특별해（SOMETHING SPECIAL）</span></div>
|
||||
<div class="track-item"><span class="track">느낌이 와（FEELING）</span></div>
|
||||
<div class="track-item"><span class="track">현기증（VERTIGO）</span></div>
|
||||
<div class="track-item"><span class="track">아프지마요（BE WELL）</span></div>
|
||||
<div class="track-item"><span class="track">사랑하는 너에게 （DEAR LOVE）/ 給親愛的你</span></div>
|
||||
<div class="track-item"><span class="track">백허그（BACK HUG）</span></div>
|
||||
<div class="track-item"><span class="track">세 단어（THREE WORDS）/ 三個詞</span></div>
|
||||
<div class="track-item"><span class="track">술끊자（DRINKING PROBLEM）</span></div>
|
||||
<div class="track-item"><span class="track">그날까지（TOGETHER FOREVER）/ 直到那一天</span></div>
|
||||
<div class="track-item"><span class="track">ENCORE：특별해（SOMETHING SPECIAL）</span></div>
|
||||
<div class="track-item"><span class="track">느낌이 와（FEELING）</span></div>
|
||||
<div class="track-item"><span class="track">DANCE MEDLEY：</span></div>
|
||||
<div class="track-item"><span class="track">COM' BACK + 폼생폼사 / 品生品死 + ROAD FIGHTER +</span></div>
|
||||
<div class="track-item"><span class="track">기사도 / 騎士道 + 학원별곡（RISE UP）/ 學園別曲</span></div>
|
||||
<div class="track-item"><span class="track">아프지마요（BE WELL）</span></div>
|
||||
<div class="track-item"><span class="track">슬픈 노래（SAD SONG）/ 悲歌</span></div>
|
||||
<div class="track-item"><span class="track">커플（COUPLE）/ 戀人</span></div>
|
||||
<div class="track-item"><span class="track">ENCORE：그날까지（TOGETHER FOREVER）/ 直到那一天</span></div>
|
||||
<div class="track-item"><span class="track">특별해（SOMETHING SPECIAL）</span></div>
|
||||
</div>
|
||||
<label for="expand-con-2-2" class="expand-btn"></label>
|
||||
<label for="expand-con-2-4" class="expand-btn"></label>
|
||||
</div>
|
||||
<div class="con-2-5">
|
||||
<span class="location">大邱 | 大邱會展中心</span>
|
||||
<input type="checkbox" id="expand-con-2-5" class="expand-trigger">
|
||||
<div class="track-list">
|
||||
<div class="track-item"><span class="track">오랜만이에요（IT'S BEEN A WHILE）</span></div>
|
||||
<div class="track-item"><span class="track">약속된 운명（아마게돈） / 約定的命運</span></div>
|
||||
<div class="track-item"><span class="track">DANCE MEDLEY：</span></div>
|
||||
<div class="track-item"><span class="track">COM' BACK + 폼생폼사 / 品生品死 + ROAD FIGHTER +</span></div>
|
||||
<div class="track-item"><span class="track">기사도 / 騎士道 + 학원별곡（RISE UP）/ 學園別曲</span></div>
|
||||
<div class="track-item"><span class="track">연정（HEARTBREAK）/ 戀情</span></div>
|
||||
<div class="track-item"><span class="track">기억해줄래 / 請記得好嗎</span></div>
|
||||
<div class="track-item"><span class="track">웃어줘（SMILE）</span></div>
|
||||
<div class="track-item"><span class="track">겨울이야기 / 冬天的故事 + White Love － 姜成勳</span></div>
|
||||
<div class="track-item"><span class="track">RIGOLETTO － 李宰鎮</span></div>
|
||||
<div class="track-item"><span class="track">Beautiful － 張水院</span></div>
|
||||
<div class="track-item"><span class="track">악마의 연기 / 惡魔的煙氣 － 殷志源</span></div>
|
||||
<div class="track-item"><span class="track">Solo舞蹈：Forbes － 金在德</span></div>
|
||||
<div class="track-item"><span class="track">네가 필요해（NEED U）</span></div>
|
||||
<div class="track-item"><span class="track">커플（COUPLE）/ 戀人</span></div>
|
||||
<div class="track-item"><span class="track">COME TO ME BABY</span></div>
|
||||
<div class="track-item"><span class="track">예감（GOT A FEELING）/ 預感</span></div>
|
||||
<div class="track-item"><span class="track">슬픈 노래（SAD SONG）/ 悲歌</span></div>
|
||||
<div class="track-item"><span class="track">특별해（SOMETHING SPECIAL）</span></div>
|
||||
<div class="track-item"><span class="track">느낌이 와（FEELING）</span></div>
|
||||
<div class="track-item"><span class="track">현기증（VERTIGO）</span></div>
|
||||
<div class="track-item"><span class="track">아프지마요（BE WELL）</span></div>
|
||||
<div class="track-item"><span class="track">ENCORE：</span></div>
|
||||
<div class="track-item"><span class="track">사랑하는 너에게 （DEAR LOVE）/ 給親愛的你</span></div>
|
||||
<div class="track-item"><span class="track">백허그（BACK HUG）</span></div>
|
||||
<div class="track-item"><span class="track">세 단어（THREE WORDS）/ 三個詞</span></div>
|
||||
<div class="track-item"><span class="track">술끊자（DRINKING PROBLEM）</span></div>
|
||||
<div class="track-item"><span class="track">DOUBLE ENCORE：</span></div>
|
||||
<div class="track-item"><span class="track">ROAD FIGHTER</span></div>
|
||||
<div class="track-item"><span class="track">무모한 사랑（RECKLESS LOVE）/ 不可能的愛</span></div>
|
||||
<div class="track-item"><span class="track">기사도 / 騎士道</span></div>
|
||||
<div class="track-item"><span class="track">DANCE MEDLEY：COM' BACK + 폼생폼사 / 品生品死 + ROAD FIGHTER +기사도
|
||||
/ 騎士道 + 학원별곡（RISE UP）/ 學園別曲</span></div>
|
||||
<div class="track-item"><span class="track">그날까지（TOGETHER FOREVER）/ 直到那一天</span></div>
|
||||
</div>
|
||||
<label for="expand-con-2-5" class="expand-btn"></label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 演唱會 03 -->
|
||||
@@ -246,7 +329,31 @@
|
||||
<span class="location">首爾：首爾奧林匹克體操競技場</span>
|
||||
<input type="checkbox" id="expand-con-3-1" class="expand-trigger">
|
||||
<div class="track-list">
|
||||
|
||||
<div class="track-item"><span class="track">약속된 운명（아마게돈） / 約定的命運</span></div>
|
||||
<div class="track-item"><span class="track">FLYING LOVE（천상비애）/ 天上飛愛</span></div>
|
||||
<div class="track-item"><span class="track">무모한 사랑（RECKLESS LOVE）/ 不可能的愛</span></div>
|
||||
<div class="track-item"><span class="track">COM' BACK</span></div>
|
||||
<div class="track-item"><span class="track">학원별곡（RISE UP）/ 學園別曲</span></div>
|
||||
<div class="track-item"><span class="track">ROAD FIGHTER</span></div>
|
||||
<div class="track-item"><span class="track">LAST</span></div>
|
||||
<div class="track-item"><span class="track">세 단어（THREE WORDS）/ 三個詞</span></div>
|
||||
<div class="track-item"><span class="track">少女 － 張水院</span></div>
|
||||
<div class="track-item"><span class="track">Now － 殷志源</span></div>
|
||||
<div class="track-item"><span class="track">Egoist － 李宰鎮</span></div>
|
||||
<div class="track-item"><span class="track">Solo舞蹈：We Still In This Bitch － 金在德</span></div>
|
||||
<div class="track-item"><span class="track">오랜만이에요（IT'S BEEN A WHILE）</span></div>
|
||||
<div class="track-item"><span class="track">네겐 보일수 없었던 세상 / 不能讓你看到的世界</span></div>
|
||||
<div class="track-item"><span class="track">슬픈 노래（SAD SONG）/ 悲歌</span></div>
|
||||
<div class="track-item"><span class="track">특별해（SOMETHING SPECIAL）</span></div>
|
||||
<div class="track-item"><span class="track">느낌이 와（FEELING）</span></div>
|
||||
<div class="track-item"><span class="track">현기증（VERTIGO）</span></div>
|
||||
<div class="track-item"><span class="track">아프지마요（BE WELL）</span></div>
|
||||
<div class="track-item"><span class="track">ENCORE：</span></div>
|
||||
<div class="track-item"><span class="track">예감（GOT A FEELING）/ 預感</span></div>
|
||||
<div class="track-item"><span class="track">그대로 멈춰 / 就那樣停止</span></div>
|
||||
<div class="track-item"><span class="track">커플（COUPLE）/ 戀人</span></div>
|
||||
<div class="track-item"><span class="track">사랑하는 너에게 （DEAR LOVE）/ 給親愛的你（10月14日）</span></div>
|
||||
<div class="track-item"><span class="track">그날까지（TOGETHER FOREVER）/ 直到那一天（10月14日）</span></div>
|
||||
</div>
|
||||
<label for="expand-con-3-1" class="expand-btn"></label>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user