jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style 調整配色

Browse Source
This commit is contained in:
jekkinoopy
2026-05-14 13:20:59 +08:00
parent b3592f30b1
commit ff358e76ce
2 changed files with 300 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
variety/NJTW/NJTW5.html
+24 -18
View File
@@ -44,19 +44,12 @@
</header>
<div class="container">
<h2 class="section-title">鬼神介紹</h2>
<!-- 第一排 -->
<!-- tr/td 必須放在 <table> 裡；外層用 div 接在 .container 的 grid 下，佔滿整列 -->
<div class="njtw-member-table-wrap">
<table class="njtw-member-table">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<td>
<div class="member-card m1 parchment-card">
<div class="parchment-inner">
@@ -101,7 +94,8 @@
<p class="parchment-tags">#吃貨精靈 #低聲細語</p>
</div>
</div>
</td>
<td>
<div class="member-card m2 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
@@ -145,7 +139,8 @@
<p class="parchment-tags">#最強短腿 #瘋狂跑動</p>
</div>
</div>
</td>
<td>
<div class="member-card m3 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
@@ -193,8 +188,12 @@
<p class="parchment-tags">#瘋子使者 #最帥鬼怪</p>
</div>
</div>
<!-- 第二排 -->
</td>
<td class="njtw-layout-slot">OB</td>
</tr>
<tr>
<td class="njtw-layout-slot">YB</td>
<td>
<div class="member-card m4 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
@@ -236,7 +235,8 @@
<p class="parchment-tags">#美男殭屍 #運動白痴</p>
</div>
</div>
</td>
<td>
<div class="member-card m5 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
@@ -282,7 +282,8 @@
<p class="parchment-tags">#長髮宋 #綜藝神降臨</p>
</div>
</div>
</td>
<td>
<div class="member-card m6 parchment-card">
<div class="parchment-inner">
<div class="parchment-headline">
@@ -327,6 +328,11 @@
<p class="parchment-tags">#新弟子 #德古拉</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 影片區塊：將 iframe 的 src 換成 https://www.youtube.com/embed/你的影片ID -->
<div class="video-container">
variety/NJTW/njtw5.css
+43 -7
View File
@@ -114,6 +114,44 @@ body.njtw5-page .container {
box-sizing: border-box;
}
/* 成員 2×4 表格：必須為 table > tbody > tr > td，不可把 tr 直接放在 div 裡 */
body.njtw5-page .njtw-member-table-wrap {
grid-column: 1 / -1;
width: 100%;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
body.njtw5-page .njtw-member-table {
width: max-content;
min-width: 100%;
border-collapse: separate;
border-spacing: clamp(10px, 2vw, 18px);
table-layout: auto;
}
body.njtw5-page .njtw-member-table td {
padding: 0;
vertical-align: top;
}
body.njtw5-page .njtw-member-table td:not(.njtw-layout-slot) {
min-width: clamp(220px, 24vw, 300px);
}
body.njtw5-page .njtw-member-table .njtw-layout-slot {
width: 1%;
white-space: nowrap;
vertical-align: middle;
text-align: center;
font-weight: 800;
font-size: clamp(1.35rem, 3.5vw, 1.85rem);
letter-spacing: 0.12em;
color: var(--njtw-ink);
opacity: 0.75;
}
body.njtw5-page .container .section-title,
body.njtw5-page .video-container .video-title {
font-weight: 800;
@@ -348,7 +386,7 @@ body.njtw5-page .parchment-card .parchment-stats {
body.njtw5-page .parchment-card .parchment-stat-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-columns: auto minmax(min-content, 1fr);
align-items: center;
gap: 8px 10px;
margin-bottom: clamp(8px, 1.6vw, 12px);
@@ -368,16 +406,14 @@ body.njtw5-page .parchment-card .parchment-stat-label {
}
body.njtw5-page .parchment-card .parchment-stat-balls {
display: flex;
flex-wrap: nowrap;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 4px;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
min-width: min-content;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 2px;
scrollbar-width: thin;
}
body.njtw5-page .parchment-card .parchment-stat-balls img {