본문으로 건너뛰기
사용자

NodeulsumNaru(비교)

보기RAW역사
r27 vs r28
......
258258
}}} ||
259259
== , ==
260260
{{{#!style
261
/* 1. 전체 레이아웃 (좌우 분할) */
262
table.fx-v2-ui {
261
/* 1. 전체 레이아웃 (좌우 배치) */
262
table.fx-fixed-ui {
263263
display: flex !important; flex-direction: row;
264264
width: min(580px, 100%); background: #ffffff;
265265
margin: 15px auto; border-collapse: collapse;
266266
border: 1px solid #dcdcdc; border-radius: 12px;
267
box-shadow: 0 5px 15px rgba(0,0,0,0.06);
268
overflow: hidden;
267
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
269268
}
270269
271
/* 2. 좌측 탭 바 (파이어폭스 스타일) */
272
table.fx-v2-ui > thead {
270
/* 2. 좌측 탭 메뉴 (사이드바) */
271
table.fx-fixed-ui > thead {
273272
display: block; width: 110px; flex-shrink: 0;
274
background: #f0f0f4; padding: 12px 6px;
273
background: #f0f0f4; padding: 10px 6px;
275274
border-right: 1px solid #dee1e6;
276275
}
277
table.fx-v2-ui > thead > tr { display: flex; flex-direction: column; gap: 4px; }
276
table.fx-fixed-ui > thead > tr { display: flex; flex-direction: column; gap: 4px; }
278277
279
table.fx-v2-ui > thead > tr > th {
278
table.fx-fixed-ui > thead > tr > th {
280279
display: flex; align-items: center; justify-content: flex-start;
281
padding: 10px 12px !important; height: 38px;
282
cursor: pointer; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
280
padding: 8px 12px !important; min-height: 36px;
281
cursor: pointer; transition: 0.2s;
283282
font-size: 13px; color: #15141a !important; font-weight: 500;
284
border: none !important; background: transparent; border-radius: 8px;
283
border: none !important; background: transparent; border-radius: 6px;
285284
}
286
/* 호버 시 파란색 계열 강조 (파이어폭스 느낌) */
287
table.fx-v2-ui > thead > tr > th:hover { background: #e0e0e6 !important; color: #0060df !important; }
285
table.fx-fixed-ui > thead > tr > th:hover { background: #e0e0e6 !important; color: #0060df !important; }
288286
289287
/* 정렬 화살표 제거 */
290
table.fx-v2-ui > thead > tr > th::before,
291
table.fx-v2-ui > thead > tr > th::after { display: none !important; }
288
table.fx-fixed-ui > thead > tr > th::before,
289
table.fx-fixed-ui > thead > tr > th::after { display: none !important; }
292290
293
/* 3. 우측 본문 영역 (절대 좌표 고정) */
294
table.fx-v2-ui > tbody {
295
display: block; flex: 1; position: relative;
296
background: #ffffff; min-height: 320px; /* 높이 고정으로 덜덜거림 방지 */
291
/* 3. 우측 본문 영역 (밀림 방지 핵심) */
292
table.fx-fixed-ui > tbody {
293
display: block; flex: 1; background: #ffffff;
294
min-height: 260px; /* 세로 길이를 줄이기 위해 높이 하향 조정 */
297295
}
298296
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%; }
297
/* 정렬된 첫 번째 행만 표시 */
298
table.fx-fixed-ui > tbody > tr { display: none; }
299
table.fx-fixed-ui > tbody > tr:first-child { display: flex !important; width: 100%; }
302300
303
/* 🔥 핵심: 모든 td를 한 곳에 포개되, 빈 칸은 무시 */
304
table.fx-v2-ui > tbody > tr > td {
305
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
306
border: none !important; padding: 0 !important;
307
font-size: 0; line-height: 0; /* 빈 칸의 텍스트 여백 제거 */
301
/* 🔥 옆으로 밀림 방지: 내용이 없는 칸(숫자만 있는 칸)은 아예 제거 */
302
table.fx-fixed-ui > tbody > tr > td { display: none; } /* 일단 모든 칸을 숨김 */
303
table.fx-fixed-ui > tbody > tr > td:has(.real-content) {
304
display: block !important; /* 진짜 내용이 있는 칸만 표시 */
305
width: 100%; border: none !important; padding: 0 !important;
308306
}
309307
310
/* 정렬용 숫자는 숨김 */
311
.sort-key { position: absolute; font-size: 0; opacity: 0; pointer-events: none; }
308
/* 정렬용 숫자는 보이지 않게 처리 */
309
.sort-key { position: absolute; font-size: 0; opacity: 0; }
312310
313
/* 4. 실제 컨텐츠가 들어가는 박스 (내용이 있을 때만 스타일 적용) */
311
/* 4. 실제 컨텐츠 내부 여백 줄임 */
314312
.real-content {
315313
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;
314
font-size: 14px !important; line-height: 1.5 !important;
315
padding: 15px; /* 세로를 줄이기 위해 패딩 축소 */
316
text-align: center;
319317
}
320318
321
/* 뱃지 스타일 */
322319
.m-badge {
323
display: inline-block; padding: 4px 12px; margin: 3px 2px; border-radius: 12px;
320
display: inline-block; padding: 3px 10px; margin: 3px 2px; border-radius: 10px;
324321
font-size: 12px; font-weight: bold; color: #fff !important;
325
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
326322
}
327323
}}}
328
||<thead><tableclass=fx-v2-ui><sortable> 1기생 ||<sortable> 2기생 ||<sortable> 3기생 ||
329
|| {{{#!wiki class="sort-key"
330
0}}} {{{#!wiki class="real-content"
331
[[파일:스텔 1기.png|width=100%]]
332
{{{#!wiki style="margin-top: 15px;"
324
||<thead><tableclass=fx-fixed-ui><sortable> 1기생 ||<sortable> 2기생 ||<sortable> 3기생 ||
325
|| {{{#!wiki class="real-content"
326
{{{#!wiki class="sort-key"
327
0}}} [[파일:스텔 1기.png|width=100%]]
328
{{{#!wiki style="margin-top: 10px;"
333329
{{{#!wiki class="m-badge" style="background: #8182b8;"
334330
[[아이리 칸나|칸나]]}}} {{{#!wiki class="m-badge" style="background: #A2D0EF;"
335331
[[아야츠노 유니|유니]]}}} {{{#!wiki class="m-badge" style="background: #60497f;"
......
339335
1}}} || {{{#!wiki class="sort-key"
340336
1}}} ||
341337
|| {{{#!wiki class="sort-key"
342
1}}} || {{{#!wiki class="sort-key"
343
0}}} {{{#!wiki class="real-content"
344
[[파일:스텔 2기.png|width=100%]]
345
{{{#!wiki style="margin-top: 15px;"
338
1}}} || {{{#!wiki class="real-content"
339
{{{#!wiki class="sort-key"
340
0}}} [[파일:스텔 2기.png|width=100%]]
341
{{{#!wiki style="margin-top: 10px;"
346342
{{{#!wiki class="m-badge" style="background: #9EB5EE;"
347343
[[아라하시 타비|타비]]}}} {{{#!wiki class="m-badge" style="background: #610A09;"
348344
[[아카네 리제|리제]]}}} {{{#!wiki class="m-badge" style="background: #ff9680;"
......
353349
1}}} ||
354350
|| {{{#!wiki class="sort-key"
355351
1}}} || {{{#!wiki class="sort-key"
356
1}}} || {{{#!wiki class="sort-key"
357
0}}} {{{#!wiki class="real-content"
358
[[파일:스텔 3기.png|width=100%]]
359
{{{#!wiki style="margin-top: 15px;"
352
1}}} || {{{#!wiki class="real-content"
353
{{{#!wiki class="sort-key"
354
0}}} [[파일:스텔 3기.png|width=100%]]
355
{{{#!wiki style="margin-top: 10px;"
360356
{{{#!wiki class="m-badge" style="background: #B8A9CA;"
361357
[[텐코 시부키|부키]]}}} {{{#!wiki class="m-badge" style="background: #BAC0E6;"
362358
[[아오쿠모 린|린]]}}} {{{#!wiki class="m-badge" style="background: #8fe0b0;"
......
    ♠ Built with Ace of Spades.