본문으로 건너뛰기
사용자

NodeulsumNaru(비교)

보기RAW역사
r16 vs r17
......
148148
}}}[각주]
149149
====== .. ======
150150
{{{#!style
151
/* 1. 전체 외곽 디자인 */
152
.stel-tab-container {
153
margin: 20px auto; max-width: 540px;
154
border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 35px; overflow: hidden;
155
background: linear-gradient(160deg in oklch, #ffd3b6 0%, #ffaaa5 40%, #d4a5ff 80%, #a29bfe 100%) !important;
156
box-shadow: 0 25px 50px rgba(255, 154, 139, 0.4);
151
/* 전체 테이블 설정 */
152
table.stel-menu {
153
width: min(540px, 100%); background: transparent;
154
margin: 20px auto; border-collapse: separate; border-spacing: 0;
157155
}
158156
159
/* 2. 상단 탭 네비게이션 */
160
.stel-tab-nav {
161
display: flex; justify-content: center; background: rgba(0,0,0,0.1); backdrop-filter: blur(5px);
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;
161
cursor: pointer; transition: all 0.2s;
162
background: rgba(255, 255, 255, 0.2);
163
color: #fff !important; font-weight: bold; border: 1px solid rgba(255,255,255,0.4) !important;
164
border-radius: 15px 15px 0 0; border-bottom: none !important;
162165
}
163
.stel-tab-btn {
164
padding: 12px 20px; font-weight: bold; font-size: 14px; color: #fff !important; text-decoration: none;
165
}
166
table.stel-menu > thead > tr > th:hover { background: rgba(255, 255, 255, 0.4); }
166167
167
/* 3. 🔥 핵심: 내용이 보이는 창 (이 높이 밖의 내용은 숨김) */
168
.stel-content-window {
169
height: 460px !important; /* 창 높이: 내용물 크기에 맞춰 조절 */
170
overflow: hidden !important;
171
position: relative;
172
background: rgba(255, 255, 255, 0.05);
168
/* 화살표 등 불필요한 요소 제거 */
169
table.stel-menu > thead > tr > th::before,
170
table.stel-menu > thead > tr > th::after { display: none !important; }
171
172
/* 핵심 로직: 첫 번째 행만 보여주고 나머지는 숨김 */
173
table.stel-menu > tbody > tr { display: none; }
174
table.stel-menu > tbody > tr:first-child { display: table-row; }
175
176
/* 컨텐츠 영역 디자인 */
177
table.stel-menu > tbody > tr > td {
178
border: 1px solid rgba(255,255,255,0.4) !important;
179
border-radius: 20px; background: #fff; padding: 0 !important;
173180
}
174181
175
/* 4. 각 기수별 페이지 (창 높이와 똑같이 맞춰야 함) */
176
.tab-page {
177
height: 460px !important;
178
padding: 15px 10px;
179
box-sizing: border-box;
180
text-align: center;
182
.stel-tab-content {
183
padding: 20px; text-align: center;
184
background: linear-gradient(160deg in oklch, #ffd3b6 0%, #ffaaa5 40%, #d4a5ff 80%, #a29bfe 100%);
185
border-radius: 18px;
181186
}
182187
183
/* 뱃지 디자인 */
188
/* 뱃지 스타일 */
184189
.m-badge-slim {
185190
display: inline-block; padding: 2px 10px; margin: 3px 1.5px; border-radius: 3px;
186191
font-size: 12px; font-weight: 800; color: #5a4fcf !important;
187192
background: #fff; border: 1px solid rgba(255, 255, 255, 0.8);
188193
}
189194
}}}
190
191
{{{#!wiki class="stel-tab-container"
192
{{{#!wiki class="stel-tab-nav"
193
[[#s-gen1|{{{#!wiki class="stel-tab-btn"
194
1기생}}}]] [[#s-gen2|{{{#!wiki class="stel-tab-btn"
195
2기생}}}]] [[#s-gen3|{{{#!wiki class="stel-tab-btn"
196
3기생}}}]]}}}
197
198
{{{#!wiki class="stel-content-window"
199
[anchor(gen1)]
200
{{{#!wiki class="tab-page"
195
||<thead><tableclass=stel-menu><sortable> 1기생 ||<sortable> 2기생 ||<sortable> 3기생 ||
196
|| 0 || 1 || 1 ||<class=stel-tab-content> {{{#!wiki class="stel-tab-content"
201197
[[파일:스텔 1기.png|width=100%]]
202198
{{{#!wiki style="margin-top: 15px;"
203199
{{{#!wiki class="m-badge-slim" style="border-left: 5px solid #8182b8;"
......
205201
[[아야츠노 유니|유니]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #60497f;"
206202
[[사키하네 후야|후야]]}}}
207203
}}}
208
}}}
209
210
[anchor(gen2)]
211
{{{#!wiki class="tab-page"
204
}}} ||
205
|| 1 || 0 || 1 ||<class=stel-tab-content> {{{#!wiki class="stel-tab-content"
212206
[[파일:스텔 2기.png|width=100%]]
213207
{{{#!wiki style="margin-top: 15px;"
214208
{{{#!wiki class="m-badge-slim" style="border-left: 5px solid #9EB5EE;"
......
217211
[[시라유키 히나|히나]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #65686a;"
218212
[[네네코 마시로|시로]]}}}
219213
}}}
220
}}}
221
222
[anchor(gen3)]
223
{{{#!wiki class="tab-page"
214
}}} ||
215
|| 1 || 1 || 0 ||<class=stel-tab-content> {{{#!wiki class="stel-tab-content"
224216
[[파일:스텔 3기.png|width=100%]]
225217
{{{#!wiki style="margin-top: 15px;"
226218
{{{#!wiki class="m-badge-slim" style="border-left: 5px solid #B8A9CA;"
......
229221
[[유즈하 리코|리코]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #B8A9CA;"
230222
[[하나코 나나|나나]]}}}
231223
}}}
232
}}}
233
}}}
234
}}}
224
}}} ||
    ♠ Built with Ace of Spades.