본문으로 건너뛰기
사용자

NodeulsumNaru(비교)

보기RAW역사
r26 vs r27
......
258258
}}} ||
259259
== , ==
260260
{{{#!style
261
/* 1. 전체 컨테이너 */
262
table.firefox-final-ui {
263
display: flex; flex-direction: row;
264
width: min(550px, 100%); background: #ffffff;
261
/* 1. 전체 레이아웃 (좌우 분할) */
262
table.fx-v2-ui {
263
display: flex !important; flex-direction: row;
264
width: min(580px, 100%); background: #ffffff;
265265
margin: 15px auto; border-collapse: collapse;
266
border: 1px solid #dcdcdc; border-radius: 10px;
267
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
266
border: 1px solid #dcdcdc; border-radius: 12px;
267
box-shadow: 0 5px 15px rgba(0,0,0,0.06);
268
overflow: hidden;
268269
}
269270
270
/* 2. 좌측 탭 메뉴 (세로바) */
271
table.firefox-final-ui > thead {
272
display: block; width: 110px;
273
background: #f5f5f7; padding: 10px 5px;
271
/* 2. 좌측 탭 바 (파이어폭스 스타일) */
272
table.fx-v2-ui > thead {
273
display: block; width: 110px; flex-shrink: 0;
274
background: #f0f0f4; padding: 12px 6px;
274275
border-right: 1px solid #dee1e6;
275276
}
276
table.firefox-final-ui > thead > tr { display: flex; flex-direction: column; gap: 5px; }
277
table.fx-v2-ui > thead > tr { display: flex; flex-direction: column; gap: 4px; }
277278
278
table.firefox-final-ui > thead > tr > th {
279
table.fx-v2-ui > thead > tr > th {
279280
display: flex; align-items: center; justify-content: flex-start;
280
padding: 8px 12px !important;
281
cursor: pointer; transition: 0.2s;
282
font-size: 13px; color: #15141A !important; font-weight: 500;
283
border: none !important; background: transparent; border-radius: 6px;
281
padding: 10px 12px !important; height: 38px;
282
cursor: pointer; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
283
font-size: 13px; color: #15141a !important; font-weight: 500;
284
border: none !important; background: transparent; border-radius: 8px;
284285
}
285
table.firefox-final-ui > thead > tr > th:hover { background: #e0e0e6 !important; }
286
/* 호버 시 파란색 계열 강조 (파이어폭스 느낌) */
287
table.fx-v2-ui > thead > tr > th:hover { background: #e0e0e6 !important; color: #0060df !important; }
286288
287289
/* 정렬 화살표 제거 */
288
table.firefox-final-ui > thead > tr > th::before,
289
table.firefox-final-ui > thead > tr > th::after { display: none !important; }
290
table.fx-v2-ui > thead > tr > th::before,
291
table.fx-v2-ui > thead > tr > th::after { display: none !important; }
290292
291
/* 3. 우측 본문 영역 (핵심 수정) */
292
table.firefox-final-ui > tbody {
293
display: block; flex: 1; position: relative; background: #ffffff;
294
min-height: 280px; /* 전체 높이를 잡아주어 내용이 보임 */
293
/* 3. 우측 본문 영역 (절대 좌표 고정) */
294
table.fx-v2-ui > tbody {
295
display: block; flex: 1; position: relative;
296
background: #ffffff; min-height: 320px; /* 높이 고정으로 덜덜거림 방지 */
295297
}
296298
297
/* 정렬된 첫 번째 행(Row)만 표시 */
298
table.firefox-final-ui > tbody > tr { display: none; }
299
table.firefox-final-ui > tbody > tr:first-child { display: block; width: 100%; }
299
/* 정렬된 첫 행만 표시 */
300
table.fx-v2-ui > tbody > tr { display: none; }
301
table.fx-v2-ui > tbody > tr:first-child { display: block; width: 100%; height: 100%; }
300302
301
/* 모든 td를 한 자리에 겹쳐서 위치 고정 */
302
table.firefox-final-ui > tbody > tr > td {
303
position: absolute; top: 0; left: 0; width: 100%;
303
/* 🔥 핵심: 모든 td를 한 곳에 포개되, 빈 칸은 무시 */
304
table.fx-v2-ui > tbody > tr > td {
305
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
304306
border: none !important; padding: 0 !important;
305
line-height: normal !important; /* 글자 보임 보장 */
307
font-size: 0; line-height: 0; /* 빈 칸의 텍스트 여백 제거 */
306308
}
307309
308
/* 정렬 키(숫자)는 숨김 */
310
/* 정렬용 숫자는 숨김 */
309311
.sort-key { position: absolute; font-size: 0; opacity: 0; pointer-events: none; }
310312
311
/* 4. 실제 컨텐츠 디자인 */
312
.content-area {
313
display: block !important; padding: 20px 15px; text-align: center;
313
/* 4. 실제 컨텐츠가 들어가는 박스 (내용이 있을 때만 스타일 적용) */
314
.real-content {
315
display: block !important;
316
font-size: 14px !important; line-height: 1.6 !important;
317
padding: 25px 15px; text-align: center;
318
background: #fff; width: 100%; box-sizing: border-box;
314319
}
315320
321
/* 뱃지 스타일 */
316322
.m-badge {
317
display: inline-block; padding: 3px 10px; margin: 3px 2px; border-radius: 12px;
323
display: inline-block; padding: 4px 12px; margin: 3px 2px; border-radius: 12px;
318324
font-size: 12px; font-weight: bold; color: #fff !important;
325
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
319326
}
320327
}}}
321
||<thead><tableclass=firefox-final-ui><sortable> 1기생 ||<sortable> 2기생 ||<sortable> 3기생 ||
328
||<thead><tableclass=fx-v2-ui><sortable> 1기생 ||<sortable> 2기생 ||<sortable> 3기생 ||
322329
|| {{{#!wiki class="sort-key"
323
0}}} {{{#!wiki class="content-area"
330
0}}} {{{#!wiki class="real-content"
324331
[[파일:스텔 1기.png|width=100%]]
325
{{{#!wiki style="margin-top: 10px;"
332
{{{#!wiki style="margin-top: 15px;"
326333
{{{#!wiki class="m-badge" style="background: #8182b8;"
327334
[[아이리 칸나|칸나]]}}} {{{#!wiki class="m-badge" style="background: #A2D0EF;"
328335
[[아야츠노 유니|유니]]}}} {{{#!wiki class="m-badge" style="background: #60497f;"
......
333340
1}}} ||
334341
|| {{{#!wiki class="sort-key"
335342
1}}} || {{{#!wiki class="sort-key"
336
0}}} {{{#!wiki class="content-area"
343
0}}} {{{#!wiki class="real-content"
337344
[[파일:스텔 2기.png|width=100%]]
338
{{{#!wiki style="margin-top: 10px;"
345
{{{#!wiki style="margin-top: 15px;"
339346
{{{#!wiki class="m-badge" style="background: #9EB5EE;"
340347
[[아라하시 타비|타비]]}}} {{{#!wiki class="m-badge" style="background: #610A09;"
341348
[[아카네 리제|리제]]}}} {{{#!wiki class="m-badge" style="background: #ff9680;"
......
347354
|| {{{#!wiki class="sort-key"
348355
1}}} || {{{#!wiki class="sort-key"
349356
1}}} || {{{#!wiki class="sort-key"
350
0}}} {{{#!wiki class="content-area"
357
0}}} {{{#!wiki class="real-content"
351358
[[파일:스텔 3기.png|width=100%]]
352
{{{#!wiki style="margin-top: 10px;"
359
{{{#!wiki style="margin-top: 15px;"
353360
{{{#!wiki class="m-badge" style="background: #B8A9CA;"
354361
[[텐코 시부키|부키]]}}} {{{#!wiki class="m-badge" style="background: #BAC0E6;"
355362
[[아오쿠모 린|린]]}}} {{{#!wiki class="m-badge" style="background: #8fe0b0;"
......
    ♠ Built with Ace of Spades.