본문으로 건너뛰기
사용자

NodeulsumNaru(비교)

보기RAW역사
r25 vs r26
......
258258
}}} ||
259259
== , ==
260260
{{{#!style
261
/* 1. 전체 컨테이너: 슬림하게 최적화 */
262
table.firefox-vertical-ui {
261
/* 1. 전체 컨테이너 */
262
table.firefox-final-ui {
263263
display: flex; flex-direction: row;
264
width: min(520px, 100%); /* 전체 가로폭도 살짝 줄여 세로 비율도 자연스럽게 맞춤 */
265
background: #ffffff;
264
width: min(550px, 100%); background: #ffffff;
266265
margin: 15px auto; border-collapse: collapse;
267
border: 1px solid #dcdcdc; border-radius: 8px;
266
border: 1px solid #dcdcdc; border-radius: 10px;
268267
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
269
overflow: hidden;
270268
}
271269
272
/* 2. 좌측 탭 메뉴바: 세로폭 축소 */
273
table.firefox-vertical-ui > thead {
274
display: block; width: 100px; /* 메뉴바 가로폭 줄임 */
275
background: #f5f5f7;
276
padding: 8px 5px; /* 위아래 여백 대폭 줄임 */
277
border-right: 1px solid #dcdcdc;
270
/* 2. 좌측 탭 메뉴 (세로바) */
271
table.firefox-final-ui > thead {
272
display: block; width: 110px;
273
background: #f5f5f7; padding: 10px 5px;
274
border-right: 1px solid #dee1e6;
278275
}
276
table.firefox-final-ui > thead > tr { display: flex; flex-direction: column; gap: 5px; }
279277
280
table.firefox-vertical-ui > thead > tr {
281
display: flex; flex-direction: column; gap: 4px; /* 버튼 사이 간격 줄임 */
282
}
283
284
/* 탭 버튼 디자인 */
285
table.firefox-vertical-ui > thead > tr > th {
278
table.firefox-final-ui > thead > tr > th {
286279
display: flex; align-items: center; justify-content: flex-start;
287
padding: 8px 10px !important; /* 버튼 자체의 세로 뚱뚱함 해결 */
288
cursor: pointer; transition: 0.15s;
280
padding: 8px 12px !important;
281
cursor: pointer; transition: 0.2s;
289282
font-size: 13px; color: #15141A !important; font-weight: 500;
290
border: none !important;
291
background: transparent;
292
border-radius: 6px;
283
border: none !important; background: transparent; border-radius: 6px;
293284
}
285
table.firefox-final-ui > thead > tr > th:hover { background: #e0e0e6 !important; }
294286
295
table.firefox-vertical-ui > thead > tr > th:hover { background: #e0e0e6 !important; }
296
297287
/* 정렬 화살표 제거 */
298
table.firefox-vertical-ui > thead > tr > th::before,
299
table.firefox-vertical-ui > thead > tr > th::after { display: none !important; }
288
table.firefox-final-ui > thead > tr > th::before,
289
table.firefox-final-ui > thead > tr > th::after { display: none !important; }
300290
301
/* 3. 우측 본문 영역: 🔥 위치 틀어짐 완벽 해결 🔥 */
302
table.firefox-vertical-ui > tbody {
303
display: block; flex: 1;
304
background: #ffffff;
291
/* 3. 우측 본문 영역 (핵심 수정) */
292
table.firefox-final-ui > tbody {
293
display: block; flex: 1; position: relative; background: #ffffff;
294
min-height: 280px; /* 전체 높이를 잡아주어 내용이 보임 */
305295
}
306296
307
table.firefox-vertical-ui > tbody > tr { display: none; }
297
/* 정렬된 첫 번째 행(Row)만 표시 */
298
table.firefox-final-ui > tbody > tr { display: none; }
299
table.firefox-final-ui > tbody > tr:first-child { display: block; width: 100%; }
308300
309
/* Grid를 이용해 숨겨진 td들이 위에서부터 쌓이지 않고 한 칸에 완벽히 겹치게 만듦 */
310
table.firefox-vertical-ui > tbody > tr:first-child {
311
display: grid; grid-template-columns: 100%;
312
}
313
314
table.firefox-vertical-ui > tbody > tr > td {
315
grid-area: 1 / 1; /* 모든 기수의 내용이 같은 좌표에서 시작됨 */
301
/* 모든 td를 한 자리에 겹쳐서 위치 고정 */
302
table.firefox-final-ui > tbody > tr > td {
303
position: absolute; top: 0; left: 0; width: 100%;
316304
border: none !important; padding: 0 !important;
317
background: transparent; line-height: 0 !important;
305
line-height: normal !important; /* 글자 보임 보장 */
318306
}
319307
320
/* 정렬 숫자 완전 격리 */
308
/* 정렬 키(숫자)는 숨김 */
321309
.sort-key { position: absolute; font-size: 0; opacity: 0; pointer-events: none; }
322310
323
/* 4. 실제 컨텐츠 디자인: 여백 최소화 */
324
.content-wrapper {
325
display: block !important;
326
font-size: 13px !important; line-height: 1.5 !important;
327
color: #333 !important;
328
padding: 15px; /* 내부 여백 30px -> 15px로 줄여서 세로 높이 축소 */
329
text-align: center;
330
box-sizing: border-box;
311
/* 4. 실제 컨텐츠 디자인 */
312
.content-area {
313
display: block !important; padding: 20px 15px; text-align: center;
331314
}
332315
333
/* 뱃지 스타일 */
334316
.m-badge {
335317
display: inline-block; padding: 3px 10px; margin: 3px 2px; border-radius: 12px;
336318
font-size: 12px; font-weight: bold; color: #fff !important;
337319
}
338320
}}}
339
||<thead><tableclass=firefox-vertical-ui><sortable> 1기생 ||<sortable> 2기생 ||<sortable> 3기생 ||
321
||<thead><tableclass=firefox-final-ui><sortable> 1기생 ||<sortable> 2기생 ||<sortable> 3기생 ||
340322
|| {{{#!wiki class="sort-key"
341
0}}} {{{#!wiki class="content-wrapper"
323
0}}} {{{#!wiki class="content-area"
342324
[[파일:스텔 1기.png|width=100%]]
343325
{{{#!wiki style="margin-top: 10px;"
344326
{{{#!wiki class="m-badge" style="background: #8182b8;"
......
351333
1}}} ||
352334
|| {{{#!wiki class="sort-key"
353335
1}}} || {{{#!wiki class="sort-key"
354
0}}} {{{#!wiki class="content-wrapper"
336
0}}} {{{#!wiki class="content-area"
355337
[[파일:스텔 2기.png|width=100%]]
356338
{{{#!wiki style="margin-top: 10px;"
357339
{{{#!wiki class="m-badge" style="background: #9EB5EE;"
......
365347
|| {{{#!wiki class="sort-key"
366348
1}}} || {{{#!wiki class="sort-key"
367349
1}}} || {{{#!wiki class="sort-key"
368
0}}} {{{#!wiki class="content-wrapper"
350
0}}} {{{#!wiki class="content-area"
369351
[[파일:스텔 3기.png|width=100%]]
370352
{{{#!wiki style="margin-top: 10px;"
371353
{{{#!wiki class="m-badge" style="background: #B8A9CA;"
......
    ♠ Built with Ace of Spades.