본문으로 건너뛰기
사용자

NodeulsumNaru(비교)

보기RAW역사
r24 vs r25
......
258258
}}} ||
259259
== , ==
260260
{{{#!style
261
/* 1. 전체 컨테이너: 가로(Flex) 배치 마법 */
261
/* 1. 전체 컨테이너: 슬림하게 최적화 */
262262
table.firefox-vertical-ui {
263
display: flex; flex-direction: row; /* 표를 좌우로 쪼갬! */
264
width: min(650px, 100%); background: #ffffff;
265
margin: 20px auto; border-collapse: collapse;
266
border: 1px solid #dcdcdc; border-radius: 10px;
267
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
268
overflow: hidden; /* 모서리 둥글게 깎기 */
263
display: flex; flex-direction: row;
264
width: min(520px, 100%); /* 전체 가로폭도 살짝 줄여 세로 비율도 자연스럽게 맞춤 */
265
background: #ffffff;
266
margin: 15px auto; border-collapse: collapse;
267
border: 1px solid #dcdcdc; border-radius: 8px;
268
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
269
overflow: hidden;
269270
}
270271
271
/* 2. 좌측 사이드바 (파이어폭스 탭 영역) */
272
/* 2. 좌측 탭 메뉴바: 세로폭 축소 */
272273
table.firefox-vertical-ui > thead {
273
display: block; width: 130px; /* 좌측 메뉴바 넓이 */
274
background: #f0f0f4; /* 파이어폭스 테마 특유의 연한 회색 */
275
padding: 12px 8px;
274
display: block; width: 100px; /* 메뉴바 가로폭 줄임 */
275
background: #f5f5f7;
276
padding: 8px 5px; /* 위아래 여백 대폭 줄임 */
276277
border-right: 1px solid #dcdcdc;
277278
}
278279
279280
table.firefox-vertical-ui > thead > tr {
280
display: flex; flex-direction: column; gap: 6px; /* 탭을 세로로 쌓기 */
281
display: flex; flex-direction: column; gap: 4px; /* 버튼 사이 간격 줄임 */
281282
}
282283
283
/* 개별 탭 버튼 디자인 (파이어폭스 둥근 알약 스타일) */
284
/* 탭 버튼 디자인 */
284285
table.firefox-vertical-ui > thead > tr > th {
285286
display: flex; align-items: center; justify-content: flex-start;
286
padding: 10px 12px !important;
287
padding: 8px 10px !important; /* 버튼 자체의 세로 뚱뚱함 해결 */
287288
cursor: pointer; transition: 0.15s;
288289
font-size: 13px; color: #15141A !important; font-weight: 500;
289290
border: none !important;
290291
background: transparent;
291
border-radius: 6px; /* 둥근 네모 모양 */
292
border-radius: 6px;
292293
}
293294
294
/* 마우스 호버 시 탭 강조 */
295
table.firefox-vertical-ui > thead > tr > th:hover {
296
background: #e0e0e6 !important; /* 살짝 진해지는 회색 */
297
}
295
table.firefox-vertical-ui > thead > tr > th:hover { background: #e0e0e6 !important; }
298296
299297
/* 정렬 화살표 제거 */
300298
table.firefox-vertical-ui > thead > tr > th::before,
301299
table.firefox-vertical-ui > thead > tr > th::after { display: none !important; }
302300
303
/* 3. 우측 본문 영역 (정렬 기능 및 공간 차단) */
301
/* 3. 우측 본문 영역: 🔥 위치 틀어짐 완벽 해결 🔥 */
304302
table.firefox-vertical-ui > tbody {
305
display: block; flex: 1; /* 남은 오른쪽 공간을 전부 차지함 */
303
display: block; flex: 1;
306304
background: #ffffff;
307305
}
308306
309307
table.firefox-vertical-ui > tbody > tr { display: none; }
310
table.firefox-vertical-ui > tbody > tr:first-child { display: block; }
311308
309
/* Grid를 이용해 숨겨진 td들이 위에서부터 쌓이지 않고 한 칸에 완벽히 겹치게 만듦 */
310
table.firefox-vertical-ui > tbody > tr:first-child {
311
display: grid; grid-template-columns: 100%;
312
}
313
312314
table.firefox-vertical-ui > tbody > tr > td {
313
display: block; border: none !important;
314
background: transparent; padding: 0 !important;
315
line-height: 0 !important; position: relative;
315
grid-area: 1 / 1; /* 모든 기수의 내용이 같은 좌표에서 시작됨 */
316
border: none !important; padding: 0 !important;
317
background: transparent; line-height: 0 !important;
316318
}
317319
318
/* 정렬 숫자 격리 */
320
/* 정렬 숫자 완전 격리 */
319321
.sort-key { position: absolute; font-size: 0; opacity: 0; pointer-events: none; }
320322
321
/* 4. 내부 실제 컨텐츠 상자 */
323
/* 4. 실제 컨텐츠 디자인: 여백 최소화 */
322324
.content-wrapper {
323325
display: block !important;
324
font-size: 14px !important; line-height: 1.6 !important;
325
color: #333 !important; padding: 30px; text-align: center;
326
min-height: 250px; /* 탭을 눌렀을 때 전체 창 크기가 덜렁거리지 않게 최소 높이 지정 */
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;
327331
}
328332
329333
/* 뱃지 스타일 */
330334
.m-badge {
331
display: inline-block; padding: 3px 12px; margin: 4px 2px; border-radius: 20px;
335
display: inline-block; padding: 3px 10px; margin: 3px 2px; border-radius: 12px;
332336
font-size: 12px; font-weight: bold; color: #fff !important;
333337
}
334338
}}}
335339
||<thead><tableclass=firefox-vertical-ui><sortable> 1기생 ||<sortable> 2기생 ||<sortable> 3기생 ||
336
||<class=content-wrapper> {{{#!wiki class="sort-key"
340
|| {{{#!wiki class="sort-key"
337341
0}}} {{{#!wiki class="content-wrapper"
338342
[[파일:스텔 1기.png|width=100%]]
339
{{{#!wiki style="margin-top: 15px;"
343
{{{#!wiki style="margin-top: 10px;"
340344
{{{#!wiki class="m-badge" style="background: #8182b8;"
341345
[[아이리 칸나|칸나]]}}} {{{#!wiki class="m-badge" style="background: #A2D0EF;"
342346
[[아야츠노 유니|유니]]}}} {{{#!wiki class="m-badge" style="background: #60497f;"
343347
[[사키하네 후야|후야]]}}}
344348
}}}
345
}}} ||<class=content-wrapper> {{{#!wiki class="sort-key"
346
1}}} ||<class=content-wrapper> {{{#!wiki class="sort-key"
349
}}} || {{{#!wiki class="sort-key"
350
1}}} || {{{#!wiki class="sort-key"
347351
1}}} ||
348
||<class=content-wrapper> {{{#!wiki class="sort-key"
349
1}}} ||<class=content-wrapper> {{{#!wiki class="sort-key"
352
|| {{{#!wiki class="sort-key"
353
1}}} || {{{#!wiki class="sort-key"
350354
0}}} {{{#!wiki class="content-wrapper"
351355
[[파일:스텔 2기.png|width=100%]]
352
{{{#!wiki style="margin-top: 15px;"
356
{{{#!wiki style="margin-top: 10px;"
353357
{{{#!wiki class="m-badge" style="background: #9EB5EE;"
354358
[[아라하시 타비|타비]]}}} {{{#!wiki class="m-badge" style="background: #610A09;"
355359
[[아카네 리제|리제]]}}} {{{#!wiki class="m-badge" style="background: #ff9680;"
356360
[[시라유키 히나|히나]]}}} {{{#!wiki class="m-badge" style="background: #65686a;"
357361
[[네네코 마시로|시로]]}}}
358362
}}}
359
}}} ||<class=content-wrapper> {{{#!wiki class="sort-key"
363
}}} || {{{#!wiki class="sort-key"
360364
1}}} ||
361
||<class=content-wrapper> {{{#!wiki class="sort-key"
362
1}}} ||<class=content-wrapper> {{{#!wiki class="sort-key"
363
1}}} ||<class=content-wrapper> {{{#!wiki class="sort-key"
365
|| {{{#!wiki class="sort-key"
366
1}}} || {{{#!wiki class="sort-key"
367
1}}} || {{{#!wiki class="sort-key"
364368
0}}} {{{#!wiki class="content-wrapper"
365369
[[파일:스텔 3기.png|width=100%]]
366
{{{#!wiki style="margin-top: 15px;"
370
{{{#!wiki style="margin-top: 10px;"
367371
{{{#!wiki class="m-badge" style="background: #B8A9CA;"
368372
[[텐코 시부키|부키]]}}} {{{#!wiki class="m-badge" style="background: #BAC0E6;"
369373
[[아오쿠모 린|린]]}}} {{{#!wiki class="m-badge" style="background: #8fe0b0;"
......
    ♠ Built with Ace of Spades.