본문으로 건너뛰기
사용자

NodeulsumNaru(비교)

보기RAW역사
r18 vs r19
......
148148
}}}[각주]
149149
====== .. ======
150150
{{{#!style
151
/* 전체 테이블 설정 */
152
table.stel-menu {
151
/* 1. 전체 컨테이너 및 테이블 설정 */
152
table.stel-tab-ui {
153153
width: min(540px, 100%); background: transparent;
154
margin: 20px auto; border-collapse: separate; border-spacing: 0;
154
margin: 20px auto; border-collapse: collapse; /* 테두리 겹침 허용 */
155155
}
156156
157
/* 탭 버튼 (헤더) 디자인 개선 */
158
table.stel-menu > thead > tr { display: flex; gap: 8px; margin-bottom: -1px; justify-content: center; }
159
table.stel-menu > thead > tr > th {
160
flex: 1; max-width: 120px; padding: 12px 5px !important;
157
/* 2. 탭 버튼 (헤더) 디자인 - 탭끼리 붙어있게 설정 */
158
table.stel-tab-ui > thead > tr {
159
display: flex; justify-content: flex-start; margin-left: 10px;
160
}
161
table.stel-tab-ui > thead > tr > th {
162
flex: 0 1 100px; padding: 10px 5px !important;
161163
cursor: pointer; transition: all 0.2s;
162
/* 버튼처럼 보이게 배경색과 테두리 강화 */
164
background: #f1f2f6 !important; /* 비활성 탭 느낌의 연회색 */
165
color: #555 !important; font-size: 13px;
166
border: 1px solid #ccc !important;
167
border-bottom: none !important; /* 아래쪽 테두리 제거 */
168
border-radius: 10px 10px 0 0; /* 위쪽만 둥글게 */
169
margin-right: 2px;
170
}
171
172
/* 마우스를 올렸을 때의 피드백 */
173
table.stel-tab-ui > thead > tr > th:hover {
163174
background: #ffaaa5 !important;
164
color: #fff !important; font-weight: bold;
165
border: 2px solid #ff9a8b !important;
166
border-radius: 15px 15px 0 0; border-bottom: none !important;
167
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
175
color: #fff !important;
168176
}
169
table.stel-menu > thead > tr > th:hover { background: #ff8b8b !important; transform: translateY(-2px); }
170177
171
/* 정렬 화살표 제거 */
172
table.stel-menu > thead > tr > th::before,
173
table.stel-menu > thead > tr > th::after { display: none !important; }
178
/* 정렬 화살표 완전 제거 */
179
table.stel-tab-ui > thead > tr > th::before,
180
table.stel-tab-ui > thead > tr > th::after { display: none !important; }
174181
175
/* 핵심 로직: 첫 번째 행만 표시 */
176
table.stel-menu > tbody > tr { display: none; }
177
table.stel-menu > tbody > tr:first-child { display: table-row; }
182
/* 3. 본문 영역 - 탭과 연결되는 상자 */
183
table.stel-tab-ui > tbody > tr { display: none; }
184
table.stel-tab-ui > tbody > tr:first-child { display: table-row; }
178185
179
/* 0, 1 숫자 숨기기 및 컨텐츠 박스 */
180
table.stel-menu > tbody > tr > td {
181
border: 1px solid rgba(255,255,255,0.4) !important;
182
border-radius: 20px; background: #fff; padding: 0 !important;
183
/* 숫자 숨기기용 설정 */
186
table.stel-tab-ui > tbody > tr > td {
187
border: 1px solid #ccc !important;
188
background: #fff; padding: 0 !important;
184189
font-size: 0 !important; color: transparent !important;
190
border-radius: 0 15px 15px 15px; /* 탭과 연결되는 부분 제외하고 둥글게 */
191
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
185192
}
186193
187
.stel-tab-content {
188
/* 내부 실제 글자 크기 복구 */
189
font-size: 14px !important; color: #000 !important;
190
padding: 20px; text-align: center;
191
background: linear-gradient(160deg in oklch, #ffd3b6 0%, #ffaaa5 40%, #d4a5ff 80%, #a29bfe 100%);
192
border-radius: 18px;
194
/* 4. 내부 컨텐츠 스타일링 */
195
.stel-body-container {
196
font-size: 14px !important; color: #333 !important;
197
padding: 25px 15px; text-align: center;
198
/* 스텔라이브 감성 배경 */
199
background: linear-gradient(to bottom, #ffffff, #fff5f5);
200
border-radius: 0 15px 15px 15px;
193201
}
194202
195203
/* 뱃지 스타일 */
196204
.m-badge-slim {
197
display: inline-block; padding: 2px 10px; margin: 3px 1.5px; border-radius: 3px;
198
font-size: 12px; font-weight: 800; color: #5a4fcf !important;
199
background: #fff; border: 1px solid rgba(255, 255, 255, 0.8);
205
display: inline-block; padding: 3px 12px; margin: 4px 2px; border-radius: 5px;
206
font-size: 12px; font-weight: bold; color: #fff !important;
207
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
200208
}
201209
}}}
202
||<thead><tableclass=stel-menu><sortable> 1기생 ||<sortable> 2기생 ||<sortable> 3기생 ||
203
|| 0 || 1 || 1 ||<class=stel-tab-content> {{{#!wiki class="stel-tab-content"
210
||<thead><tableclass=stel-tab-ui><sortable> 1기생 ||<sortable> 2기생 ||<sortable> 3기생 ||
211
|| 0 || 1 || 1 ||<class=stel-body-container> {{{#!wiki class="stel-body-container"
204212
[[파일:스텔 1기.png|width=100%]]
205213
{{{#!wiki style="margin-top: 15px;"
206
{{{#!wiki class="m-badge-slim" style="border-left: 5px solid #8182b8;"
207
[[아이리 칸나|칸나]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #A2D0EF;"
208
[[아야츠노 유니|유니]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #60497f;"
214
{{{#!wiki class="m-badge-slim" style="background: #8182b8;"
215
[[아이리 칸나|칸나]]}}} {{{#!wiki class="m-badge-slim" style="background: #A2D0EF;"
216
[[아야츠노 유니|유니]]}}} {{{#!wiki class="m-badge-slim" style="background: #60497f;"
209217
[[사키하네 후야|후야]]}}}
210218
}}}
211219
}}} ||
212
|| 1 || 0 || 1 ||<class=stel-tab-content> {{{#!wiki class="stel-tab-content"
220
|| 1 || 0 || 1 ||<class=stel-body-container> {{{#!wiki class="stel-body-container"
213221
[[파일:스텔 2기.png|width=100%]]
214222
{{{#!wiki style="margin-top: 15px;"
215
{{{#!wiki class="m-badge-slim" style="border-left: 5px solid #9EB5EE;"
216
[[아라하시 타비|타비]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #610A09;"
217
[[아카네 리제|리제]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #ff9680;"
218
[[시라유키 히나|히나]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #65686a;"
223
{{{#!wiki class="m-badge-slim" style="background: #9EB5EE;"
224
[[아라하시 타비|타비]]}}} {{{#!wiki class="m-badge-slim" style="background: #610A09;"
225
[[아카네 리제|리제]]}}} {{{#!wiki class="m-badge-slim" style="background: #ff9680;"
226
[[시라유키 히나|히나]]}}} {{{#!wiki class="m-badge-slim" style="background: #65686a;"
219227
[[네네코 마시로|시로]]}}}
220228
}}}
221229
}}} ||
222
|| 1 || 1 || 0 ||<class=stel-tab-content> {{{#!wiki class="stel-tab-content"
230
|| 1 || 1 || 0 ||<class=stel-body-container> {{{#!wiki class="stel-body-container"
223231
[[파일:스텔 3기.png|width=100%]]
224232
{{{#!wiki style="margin-top: 15px;"
225
{{{#!wiki class="m-badge-slim" style="border-left: 5px solid #B8A9CA;"
226
[[텐코 시부키|부키]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #BAC0E6;"
227
[[아오쿠모 린|린]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #8fe0b0;"
228
[[유즈하 리코|리코]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #B8A9CA;"
233
{{{#!wiki class="m-badge-slim" style="background: #B8A9CA;"
234
[[텐코 시부키|부키]]}}} {{{#!wiki class="m-badge-slim" style="background: #BAC0E6;"
235
[[아오쿠모 린|린]]}}} {{{#!wiki class="m-badge-slim" style="background: #8fe0b0;"
236
[[유즈하 리코|리코]]}}} {{{#!wiki class="m-badge-slim" style="background: #B8A9CA;"
229237
[[하나코 나나|나나]]}}}
230238
}}}
231239
}}} ||
    ♠ Built with Ace of Spades.