본문으로 건너뛰기
사용자

NodeulsumNaru(비교)

보기RAW역사
r12 vs r13
......
147147
}}}[각주]
148148
====== .. ======
149149
{{{#!style
150
/* 전체 컨테이너 및 배경 설정 */
150
/* 전체 컨테이너 */
151151
.stel-tab-container {
152152
margin: 20px auto; max-width: 540px;
153153
border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 35px; overflow: hidden;
......
159159
background-size: 15px 15px, 30px 30px, 100% 100%;
160160
box-shadow: 0 25px 50px rgba(255, 154, 139, 0.4);
161161
}
162
163
/* 탭 네비게이션 */
162164
.stel-tab-nav {
163165
display: flex; justify-content: center; background: rgba(0,0,0,0.1); backdrop-filter: blur(5px);
166
position: relative; z-index: 10;
164167
}
165168
.stel-tab-btn {
166169
padding: 12px 20px; font-weight: bold; font-size: 14px; color: #fff !important; text-decoration: none;
167170
}
171
172
/* 컨텐츠 박스: 그리드를 사용하여 모든 탭을 한 자리에 겹침 */
168173
.stel-content-box {
174
display: grid;
169175
padding: 10px; text-align: center; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(5px);
170
position: relative; min-height: 250px; /* 높이 튀는 현상 방지 */
171176
}
177
178
.tab-item {
179
grid-area: 1 / 1 / 1 / 1; /* 모든 탭이 같은 칸에 위치함 */
180
visibility: hidden; /* 기본적으로 숨김 */
181
opacity: 0;
182
transition: opacity 0.3s;
183
}
184
185
/* 기본 상태: 1기생 노출 */
186
#tab1 {
187
visibility: visible;
188
opacity: 1;
189
z-index: 1;
190
}
191
192
/* 클릭된 탭 노출 (2기, 3기 클릭 시) */
193
#tab2:target, #tab3:target, #tab1:target {
194
visibility: visible !important;
195
opacity: 1 !important;
196
z-index: 5 !important;
197
}
198
199
/* 뱃지 스타일 */
172200
.m-badge-slim {
173201
display: inline-block; padding: 2px 10px; margin: 3px 1.5px; border-radius: 3px;
174202
font-size: 12px; font-weight: 800; color: #5a4fcf !important;
......
176204
border: 1px solid rgba(255, 255, 255, 0.8);
177205
box-shadow: 0 3px 6px rgba(0,0,0,0.05);
178206
}
179
180
/* 탭 전환 로직 ✨ */
181
#tab1 { display: block; } /* 기본으로 1기생 표시 */
182
#tab2, #tab3 { display: none; } /* 나머지는 기본으로 숨김 */
183
184
/* 2기나 3기가 선택되면 1기생을 숨김 */
185
.stel-content-box:has(#tab2:target) #tab1,
186
.stel-content-box:has(#tab3:target) #tab1 { display: none !important; }
187
188
/* 선택된 탭만 보여줌 */
189
#tab2:target, #tab3:target { display: block !important; }
190207
}}}
191208
192209
{{{#!wiki class="stel-tab-container"
......
197214
3기생}}}]]}}}
198215
199216
{{{#!wiki class="stel-content-box"
200
{{{#!wiki id="tab1"
217
{{{#!wiki class="tab-item" id="tab1"
201218
[[파일:스텔 1기.png|width=100%]]
202
{{{#!wiki style="margin-top: 15px; line-height: 1.5;"
219
{{{#!wiki style="margin-top: 15px;"
203220
{{{#!wiki class="m-badge-slim" style="border-left: 5px solid #8182b8;"
204221
[[아이리 칸나|칸나]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #A2D0EF;"
205222
[[아야츠노 유니|유니]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #60497f;"
......
207224
}}}
208225
}}}
209226
210
{{{#!wiki id="tab2"
227
{{{#!wiki class="tab-item" id="tab2"
211228
[[파일:스텔 2기.png|width=100%]]
212
{{{#!wiki style="margin-top: 15px; line-height: 1.5;"
229
{{{#!wiki style="margin-top: 15px;"
213230
{{{#!wiki class="m-badge-slim" style="border-left: 5px solid #9EB5EE;"
214231
[[아라하시 타비|타비]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #610A09;"
215232
[[아카네 리제|리제]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #ff9680;"
......
218235
}}}
219236
}}}
220237
221
{{{#!wiki id="tab3"
238
{{{#!wiki class="tab-item" id="tab3"
222239
[[파일:스텔 3기.png|width=100%]]
223
{{{#!wiki style="margin-top: 15px; line-height: 1.5;"
240
{{{#!wiki style="margin-top: 15px;"
224241
{{{#!wiki class="m-badge-slim" style="border-left: 5px solid #B8A9CA;"
225242
[[텐코 시부키|부키]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #BAC0E6;"
226243
[[아오쿠모 린|린]]}}} {{{#!wiki class="m-badge-slim" style="border-left: 5px solid #8fe0b0;"
......
    ♠ Built with Ace of Spades.