|
|
| 52번째 줄: |
52번째 줄: |
| } | | } |
|
| |
|
| /* =========================================================
| | .mw-collapse-viewport { |
| 사용자 정의 펼치기 · 접기
| | overflow: hidden; |
| ========================================================= */
| |
| | |
| /* =========================================================
| |
| Animated Collapse / Expand
| |
| MediaWiki:Common.css
| |
| ========================================================= */
| |
| | |
| | |
| /* ---------------------------------------------------------
| |
| 1. 펼치기 / 접기 버튼
| |
| --------------------------------------------------------- */
| |
| | |
| .animated-toggle {
| |
| display: block;
| |
| width: 100%;
| |
| | |
| box-sizing: border-box;
| |
| | |
| cursor: pointer;
| |
| user-select: none;
| |
| | |
| text-align: center;
| |
| | |
| outline: none;
| |
| | |
| transition:
| |
| opacity 0.2s ease,
| |
| background-color 0.2s ease;
| |
| }
| |
| | |
| | |
| /* 마우스 오버 */
| |
| .animated-toggle:hover {
| |
| opacity: 0.75;
| |
| }
| |
| | |
| | |
| /* 키보드 접근성 */
| |
| .animated-toggle:focus-visible {
| |
| outline: 2px solid currentColor;
| |
| outline-offset: 2px;
| |
| }
| |
| | |
| | |
| /* ---------------------------------------------------------
| |
| 2. 펼쳐지는 전체 영역
| |
| --------------------------------------------------------- */
| |
| | |
| .animated-content {
| |
| display: grid;
| |
| | |
| /*
| |
| * 닫힌 상태
| |
| *
| |
| * 0fr → 높이 0
| |
| */
| |
| grid-template-rows: 0fr;
| |
| | |
| opacity: 0;
| |
| | |
| transform: translateY(-8px);
| |
| | |
| visibility: hidden;
| |
| | |
| /*
| |
| * 애니메이션
| |
| */
| |
| transition:
| |
| grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
| |
| opacity 0.3s ease,
| |
| transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
| |
| visibility 0s linear 0.4s;
| |
| }
| |
| | |
| | |
| /* ---------------------------------------------------------
| |
| 3. 실제 내용 영역
| |
| --------------------------------------------------------- */
| |
| | |
| .animated-content-inner {
| |
| min-height: 0;
| |
| | |
| overflow: hidden;
| |
| | |
| /*
| |
| * 일부 브라우저에서 큰 표 / 이미지가
| |
| * 펼쳐질 때 생기는 레이아웃 문제 방지
| |
| */
| |
| min-width: 0;
| |
| }
| |
| | |
| | |
| /* ---------------------------------------------------------
| |
| 4. 열린 상태
| |
| --------------------------------------------------------- */
| |
| | |
| .animated-content.is-open {
| |
| /*
| |
| * 0fr → 1fr
| |
| *
| |
| * 내용의 실제 높이에 맞춰 자동으로 펼쳐짐
| |
| */
| |
| grid-template-rows: 1fr;
| |
| | |
| opacity: 1;
| |
| | |
| transform: translateY(0);
| |
| | |
| visibility: visible;
| |
| | |
| transition:
| |
| grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
| |
| opacity 0.3s ease,
| |
| transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
| |
| visibility 0s linear 0s;
| |
| } | | } |
|
| |
|
| | | .mw-collapse-content { |
| /* ---------------------------------------------------------
| | width: 100%; |
| 5. 펼치기 안에 들어가는 이미지
| |
| --------------------------------------------------------- */
| |
| | |
| .animated-content img {
| |
| max-width: 100%;
| |
| }
| |
| | |
| | |
| /* ---------------------------------------------------------
| |
| 6. 펼치기 안에 들어가는 표
| |
| --------------------------------------------------------- */
| |
| | |
| .animated-content table {
| |
| max-width: 100%;
| |
| }
| |
| | |
| | |
| /* ---------------------------------------------------------
| |
| 7. 중앙 정렬 유틸리티
| |
| --------------------------------------------------------- */
| |
| | |
| .text-center {
| |
| text-align: center;
| |
| }
| |
| | |
| | |
| /* ---------------------------------------------------------
| |
| 8. 사용자가 OS에서 애니메이션 감소를 설정한 경우
| |
| --------------------------------------------------------- */
| |
| | |
| @media (prefers-reduced-motion: reduce) {
| |
| | |
| .animated-toggle,
| |
| .animated-content {
| |
| transition: none !important;
| |
| }
| |
| | |
| } | | } |