미디어위키:Common.css: 두 판 사이의 차이
편집 요약 없음 |
편집 요약 없음 |
||
36번째 줄: | 36번째 줄: | ||
.spoiler-text { | .spoiler-text { | ||
position: relative; | |||
background: black; | color: black; | ||
background-color: black; | |||
padding: 2px 4px; | padding: 2px 4px; | ||
border-radius: 4px; | border-radius: 4px; | ||
transition: background-color 0.2s, color 0.2s; | |||
} | |||
.spoiler-text::after { | |||
content: "스포일러"; | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
width: 100%; | |||
height: 100%; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
transition: opacity 0.2s; | |||
pointer-events: none; | |||
} | } | ||
.spoiler-text:hover { | .spoiler-text:hover { | ||
color: inherit; | |||
background: | background-color: #0004; | ||
} | |||
.spoiler-text:hover::after { | |||
opacity: 0; | |||
} | } |
2024년 4월 17일 (수) 00:33 판
/* 이 CSS 설정은 모든 스킨에 적용됩니다 */
td {
position: relative;
}
.mw-collapsible-toggle {
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0;
}
.spoiler {
width: fit-content;
height: fit-content;
border: 1px solid black;
}
.spoiler h4 {
font-size: 14px;
text-align: center;
background: yellow;
border-bottom: 1px solid black;
padding: 4px 0;
margin: 0;
}
.spoiler div {
overflow: hidden;
}
.spoiler .spoiler-img {
overflow: hidden;
filter: blur(20px) saturate(.5) contrast(.5) brightness(1.2);
transition: filter 0.2s;
}
.spoiler .spoiler-img:hover {
filter: none;
}
.spoiler-text {
position: relative;
color: black;
background-color: black;
padding: 2px 4px;
border-radius: 4px;
transition: background-color 0.2s, color 0.2s;
}
.spoiler-text::after {
content: "스포일러";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.2s;
pointer-events: none;
}
.spoiler-text:hover {
color: inherit;
background-color: #0004;
}
.spoiler-text:hover::after {
opacity: 0;
}