리브레위키>Liebesfreud m (다크모드 대응) |
m (판 44개를 가져왔습니다: 리브레위키에서 가져옴) |
||
(사용자 4명의 중간 판 37개는 보이지 않습니다) | |||
3번째 줄: | 3번째 줄: | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
list-style: none; | list-style: none; | ||
margin: | margin: 1rem auto 2.5em; | ||
justify-content: center; | |||
} | } | ||
.libre-tab .libre-tab-btn { | .libre-tab .libre-tab-btn { | ||
position: relative; | position: relative; | ||
display: | display: grid; | ||
flex: 1 auto; | flex: 1 auto; | ||
padding: 0. | padding: 0.4rem; | ||
text-align: center; | text-align: center; | ||
width: | word-break: keep-all; | ||
align-items: center; | |||
max-width: 14rem; | |||
cursor: pointer; | cursor: pointer; | ||
border-bottom: 2px solid #e1e8ed; | |||
border-bottom: | |||
transition: 0.2s; | transition: 0.2s; | ||
} | |||
@media (min-width: 544px) { | |||
.libre-tab .libre-tab-btns { | |||
max-width: 90%; | |||
} | |||
} | } | ||
.libre-tab .libre-tab-btn-active, | .libre-tab .libre-tab-btn-active, | ||
.libre-tab .libre-tab-btn:hover { | .libre-tab .libre-tab-btn:hover { | ||
font-weight: bold; | |||
} | |||
@media (hover: hover) and (pointer: fine) { | |||
.libre-tab .libre-tab-btn:hover { | |||
background: rgba(213,225,230,0.35); | |||
} | |||
} | } | ||
32번째 줄: | 39번째 줄: | ||
.libre-tab .libre-tab-btn:hover::before { | .libre-tab .libre-tab-btn:hover::before { | ||
position: absolute; | position: absolute; | ||
left: | left: 0; | ||
bottom: | bottom: 0; | ||
content: ' '; | content: ' '; | ||
width: 100%; | width: 100%; | ||
display: block; | display: block; | ||
border-bottom: 2px solid #4188F1; | border-bottom: 2px solid #4188F1; | ||
margin-bottom: -2px; | |||
} | } | ||
.libre-tab .libre-tab-main { | .libre-tab .libre-tab-main { | ||
border: 1px solid #e1e8ed; | border: 1px solid #e1e8ed; | ||
padding: 1.5rem; | padding: 1.5rem; | ||
} | } |
2022년 10월 28일 (금) 10:13 기준 최신판
.libre-tab .libre-tab-btns {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 1rem auto 2.5em;
justify-content: center;
}
.libre-tab .libre-tab-btn {
position: relative;
display: grid;
flex: 1 auto;
padding: 0.4rem;
text-align: center;
word-break: keep-all;
align-items: center;
max-width: 14rem;
cursor: pointer;
border-bottom: 2px solid #e1e8ed;
transition: 0.2s;
}
@media (min-width: 544px) {
.libre-tab .libre-tab-btns {
max-width: 90%;
}
}
.libre-tab .libre-tab-btn-active,
.libre-tab .libre-tab-btn:hover {
font-weight: bold;
}
@media (hover: hover) and (pointer: fine) {
.libre-tab .libre-tab-btn:hover {
background: rgba(213,225,230,0.35);
}
}
.libre-tab .libre-tab-btn-active::before,
.libre-tab .libre-tab-btn:hover::before {
position: absolute;
left: 0;
bottom: 0;
content: ' ';
width: 100%;
display: block;
border-bottom: 2px solid #4188F1;
margin-bottom: -2px;
}
.libre-tab .libre-tab-main {
border: 1px solid #e1e8ed;
padding: 1.5rem;
}
.libre-tab .libre-tab-main-content {
display: none;
}
.libre-tab .libre-tab-main-content-active {
display: block;
}