본문으로 건너뛰기
사용자

NodeulsumNaru(비교)

보기RAW역사
r20 vs r21
......
148148
}}}[각주]
149149
====== .. ======
150150
{{{#!style
151
/* 1. 전체 테이블 레이아웃 */
152
table.stel-tab-ui {
153
width: min(540px, 100%); background: transparent;
151
/* 1. 전체 배경 및 테이블 레이아웃 */
152
table.chrome-tab-ui {
153
width: min(560px, 100%); background: transparent;
154154
margin: 20px auto; border-collapse: collapse;
155
table-layout: fixed; /* 가로 너비 고정 */
155156
}
156157
157
/* 2. 탭 버튼 (헤더) - 높이를 줄이고 날렵하게 */
158
table.stel-tab-ui > thead > tr {
159
display: flex; justify-content: flex-start; margin-left: 5px; gap: 2px;
158
/* 2. 크롬 스타일 탭 바 (헤더) */
159
table.chrome-tab-ui > thead > tr {
160
display: flex; gap: 4px; padding: 0 10px;
161
background: #dee1e6; /* 크롬 탭 바 특유의 연회색 */
162
border-radius: 12px 12px 0 0;
160163
}
161
table.stel-tab-ui > thead > tr > th {
162
flex: 0 1 80px;
163
padding: 6px 0 !important; /* 위아래 패딩을 줄여서 길쭉함 해결 */
164
height: 30px !important; /* 높이 강제 고정 */
165
line-height: 1.5 !important;
164
table.chrome-tab-ui > thead > tr > th {
165
flex: 1; height: 36px; padding: 0 !important;
166
display: flex; align-items: center; justify-content: center;
166167
cursor: pointer; transition: 0.2s;
167
background: #f1f2f6 !important;
168
color: #666 !important; font-size: 12px;
169
border: 1px solid #ddd !important;
170
border-bottom: none !important;
171
border-radius: 8px 8px 0 0;
168
font-size: 13px; color: #444 !important; font-weight: normal;
169
border: none !important;
170
background: transparent;
171
border-radius: 10px 10px 0 0;
172
position: relative;
172173
}
173
table.stel-tab-ui > thead > tr > th:hover { background: #ffaaa5 !important; color: #fff !important; }
174174
175
/* 탭 호버 효과 (크롬 활성 탭 느낌) */
176
table.chrome-tab-ui > thead > tr > th:hover {
177
background: #ffffff !important;
178
color: #000 !important;
179
font-weight: bold;
180
}
181
175182
/* 정렬 화살표 제거 */
176
table.stel-tab-ui > thead > tr > th::before,
177
table.stel-tab-ui > thead > tr > th::after { display: none !important; }
183
table.chrome-tab-ui > thead > tr > th::before,
184
table.chrome-tab-ui > thead > tr > th::after { display: none !important; }
178185
179
/* 3. 본문 영역 - 빈 공간 제거 */
180
table.stel-tab-ui > tbody > tr { display: none; }
181
table.stel-tab-ui > tbody > tr:first-child { display: table-row; }
186
/* 3. 본문 영역 - 빈 공간 철저히 제거 */
187
table.chrome-tab-ui > tbody > tr { display: none; }
188
table.chrome-tab-ui > tbody > tr:first-child { display: table-row; }
182189
183
table.stel-tab-ui > tbody > tr > td {
184
border: 1px solid #ddd !important;
190
table.chrome-tab-ui > tbody > tr > td {
191
border: none !important;
185192
background: #fff; padding: 0 !important;
186
/* 숨겨진 숫자가 자리를 차지하지 못하게 함 */
187
font-size: 0 !important; line-height: 0 !important;
188
border-radius: 0 15px 15px 15px;
193
vertical-align: top;
194
line-height: 0 !important; /* 텍스트 노드로 인한 하단 공백 제거 */
195
position: relative; /* 정렬 숫자 격리용 */
189196
}
190197
191
/* 4. 내부 실제 컨텐츠 (페이지 늘리기 효과) */
192
.stel-body-container {
198
/* 정렬용 숫자(0, 1)를 레이아웃에서 완전히 제거 */
199
.sort-key {
200
position: absolute; font-size: 0; opacity: 0; left: -9999px;
201
}
202
203
/* 4. 내부 실제 컨텐츠 상자 */
204
.content-box {
205
display: block !important;
193206
font-size: 14px !important; line-height: 1.6 !important;
194
color: #333 !important; padding: 20px 10px; text-align: center;
195
background: linear-gradient(to bottom, #ffffff, #fffdfd);
196
border-radius: 0 15px 15px 15px;
197
width: 100%; box-sizing: border-box;
207
color: #333 !important; padding: 25px 15px; text-align: center;
208
background: #fff;
209
border: 1px solid #dee1e6; border-top: none;
210
border-radius: 0 0 15px 15px;
211
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
198212
}
199213
200
/* 뱃지 스타일 */
201
.m-badge-slim {
202
display: inline-block; padding: 2px 10px; margin: 3px 1.5px; border-radius: 4px;
214
/* 뱃지 스타일 (깔끔한 라운드) */
215
.m-badge {
216
display: inline-block; padding: 3px 12px; margin: 4px 2px; border-radius: 20px;
203217
font-size: 12px; font-weight: bold; color: #fff !important;
218
border: 1px solid rgba(0,0,0,0.05);
204219
}
205220
}}}
206
||<thead><tableclass=stel-tab-ui><sortable> 1기 ||<sortable> 2기 ||<sortable> 3기 ||
207
|| 0 || 1 || 1 ||<class=stel-body-container> {{{#!wiki class="stel-body-container"
221
||<thead><tableclass=chrome-tab-ui><sortable> 1기생 ||<sortable> 2기생 ||<sortable> 3기생 ||
222
||<class=content-box> {{{#!wiki class="sort-key"
223
0}}} {{{#!wiki class="content-box"
208224
[[파일:스텔 1기.png|width=100%]]
209225
{{{#!wiki style="margin-top: 15px;"
210
{{{#!wiki class="m-badge-slim" style="background: #8182b8;"
211
[[아이리 칸나|칸나]]}}} {{{#!wiki class="m-badge-slim" style="background: #A2D0EF;"
212
[[아야츠노 유니|유니]]}}} {{{#!wiki class="m-badge-slim" style="background: #60497f;"
226
{{{#!wiki class="m-badge" style="background: #8182b8;"
227
[[아이리 칸나|칸나]]}}} {{{#!wiki class="m-badge" style="background: #A2D0EF;"
228
[[아야츠노 유니|유니]]}}} {{{#!wiki class="m-badge" style="background: #60497f;"
213229
[[사키하네 후야|후야]]}}}
214230
}}}
215
}}} ||
216
|| 1 || 0 || 1 ||<class=stel-body-container> {{{#!wiki class="stel-body-container"
231
}}} ||<class=content-box> {{{#!wiki class="sort-key"
232
1}}} ||<class=content-box> {{{#!wiki class="sort-key"
233
1}}} ||
234
||<class=content-box> {{{#!wiki class="sort-key"
235
1}}} ||<class=content-box> {{{#!wiki class="sort-key"
236
0}}} {{{#!wiki class="content-box"
217237
[[파일:스텔 2기.png|width=100%]]
218238
{{{#!wiki style="margin-top: 15px;"
219
{{{#!wiki class="m-badge-slim" style="background: #9EB5EE;"
220
[[아라하시 타비|타비]]}}} {{{#!wiki class="m-badge-slim" style="background: #610A09;"
221
[[아카네 리제|리제]]}}} {{{#!wiki class="m-badge-slim" style="background: #ff9680;"
222
[[시라유키 히나|히나]]}}} {{{#!wiki class="m-badge-slim" style="background: #65686a;"
239
{{{#!wiki class="m-badge" style="background: #9EB5EE;"
240
[[아라하시 타비|타비]]}}} {{{#!wiki class="m-badge" style="background: #610A09;"
241
[[아카네 리제|리제]]}}} {{{#!wiki class="m-badge" style="background: #ff9680;"
242
[[시라유키 히나|히나]]}}} {{{#!wiki class="m-badge" style="background: #65686a;"
223243
[[네네코 마시로|시로]]}}}
224244
}}}
225
}}} ||
226
|| 1 || 1 || 0 ||<class=stel-body-container> {{{#!wiki class="stel-body-container"
245
}}} ||<class=content-box> {{{#!wiki class="sort-key"
246
1}}} ||
247
||<class=content-box> {{{#!wiki class="sort-key"
248
1}}} ||<class=content-box> {{{#!wiki class="sort-key"
249
1}}} ||<class=content-box> {{{#!wiki class="sort-key"
250
0}}} {{{#!wiki class="content-box"
227251
[[파일:스텔 3기.png|width=100%]]
228252
{{{#!wiki style="margin-top: 15px;"
229
{{{#!wiki class="m-badge-slim" style="background: #B8A9CA;"
230
[[텐코 시부키|부키]]}}} {{{#!wiki class="m-badge-slim" style="background: #BAC0E6;"
231
[[아오쿠모 린|린]]}}} {{{#!wiki class="m-badge-slim" style="background: #8fe0b0;"
232
[[유즈하 리코|리코]]}}} {{{#!wiki class="m-badge-slim" style="background: #B8A9CA;"
253
{{{#!wiki class="m-badge" style="background: #B8A9CA;"
254
[[텐코 시부키|부키]]}}} {{{#!wiki class="m-badge" style="background: #BAC0E6;"
255
[[아오쿠모 린|린]]}}} {{{#!wiki class="m-badge" style="background: #8fe0b0;"
256
[[유즈하 리코|리코]]}}} {{{#!wiki class="m-badge" style="background: #B8A9CA;"
233257
[[하나코 나나|나나]]}}}
234258
}}}
235259
}}} ||
    ♠ Built with Ace of Spades.