본문으로 건너뛰기
사용자

NodeulsumNaru(비교)

보기RAW역사
r19 vs r20
......
148148
}}}[각주]
149149
====== .. ======
150150
{{{#!style
151
/* 1. 전체 컨테이너 및 테이블 설정 */
151
/* 1. 전체 테이블 레이아웃 */
152152
table.stel-tab-ui {
153153
width: min(540px, 100%); background: transparent;
154
margin: 20px auto; border-collapse: collapse; /* 테두리 겹침 허용 */
154
margin: 20px auto; border-collapse: collapse;
155155
}
156156
157
/* 2. 탭 버튼 (헤더) 디자인 - 탭끼리 붙어있게 설정 */
157
/* 2. 탭 버튼 (헤더) - 높이를 줄이고 날렵하게 */
158158
table.stel-tab-ui > thead > tr {
159
display: flex; justify-content: flex-start; margin-left: 10px;
159
display: flex; justify-content: flex-start; margin-left: 5px; gap: 2px;
160160
}
161161
table.stel-tab-ui > thead > tr > th {
162
flex: 0 1 100px; padding: 10px 5px !important;
163
cursor: pointer; transition: all 0.2s;
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;
162
flex: 0 1 80px;
163
padding: 6px 0 !important; /* 위아래 패딩을 줄여서 길쭉함 해결 */
164
height: 30px !important; /* 높이 강제 고정 */
165
line-height: 1.5 !important;
166
cursor: pointer; transition: 0.2s;
167
background: #f1f2f6 !important;
168
color: #666 !important; font-size: 12px;
169
border: 1px solid #ddd !important;
170
border-bottom: none !important;
171
border-radius: 8px 8px 0 0;
170172
}
173
table.stel-tab-ui > thead > tr > th:hover { background: #ffaaa5 !important; color: #fff !important; }
171174
172
/* 마우스를 올렸을 때의 피드백 */
173
table.stel-tab-ui > thead > tr > th:hover {
174
background: #ffaaa5 !important;
175
color: #fff !important;
176
}
177
178
/* 정렬 화살표 완전 제거 */
175
/* 정렬 화살표 제거 */
179176
table.stel-tab-ui > thead > tr > th::before,
180177
table.stel-tab-ui > thead > tr > th::after { display: none !important; }
181178
182
/* 3. 본문 영역 - 탭과 연결되는 상자 */
179
/* 3. 본문 영역 - 빈 공간 제거 */
183180
table.stel-tab-ui > tbody > tr { display: none; }
184181
table.stel-tab-ui > tbody > tr:first-child { display: table-row; }
185182
186183
table.stel-tab-ui > tbody > tr > td {
187
border: 1px solid #ccc !important;
184
border: 1px solid #ddd !important;
188185
background: #fff; padding: 0 !important;
189
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);
186
/* 숨겨진 숫자가 자리를 차지하지 못하게 함 */
187
font-size: 0 !important; line-height: 0 !important;
188
border-radius: 0 15px 15px 15px;
192189
}
193190
194
/* 4. 내부 컨텐츠 스타일링 */
191
/* 4. 내부 실제 컨텐츠 (페이지 늘리기 효과) */
195192
.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);
193
font-size: 14px !important; line-height: 1.6 !important;
194
color: #333 !important; padding: 20px 10px; text-align: center;
195
background: linear-gradient(to bottom, #ffffff, #fffdfd);
200196
border-radius: 0 15px 15px 15px;
197
width: 100%; box-sizing: border-box;
201198
}
202199
203200
/* 뱃지 스타일 */
204201
.m-badge-slim {
205
display: inline-block; padding: 3px 12px; margin: 4px 2px; border-radius: 5px;
202
display: inline-block; padding: 2px 10px; margin: 3px 1.5px; border-radius: 4px;
206203
font-size: 12px; font-weight: bold; color: #fff !important;
207
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
208204
}
209205
}}}
210
||<thead><tableclass=stel-tab-ui><sortable> 1기생 ||<sortable> 2기생 ||<sortable> 3기생 ||
206
||<thead><tableclass=stel-tab-ui><sortable> 1기 ||<sortable> 2기 ||<sortable> 3기 ||
211207
|| 0 || 1 || 1 ||<class=stel-body-container> {{{#!wiki class="stel-body-container"
212208
[[파일:스텔 1기.png|width=100%]]
213209
{{{#!wiki style="margin-top: 15px;"
......
    ♠ Built with Ace of Spades.