미디어위키:가사.css

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.

.mw--lyrics-container-before {
	margin-block: var(--space-sm);
}

.mw--lyrics-container[data-lyrics-viewer-multimode="true"] .mw--lyrics-variation-container {
	display: flex;
	gap: var(--space-md);
	overflow-x: scroll;
}

/* 가로 스크롤이 실제로 생겼을 때만 위 요소의 부유를 무시하고 새 줄에서 시작합니다.
   .mw--lyrics-container-before는 뷰어 컨테이너보다 앞에 나오는 요소이므로 :has()로 뒤쪽 형제의 하위 컨테이너를 역참조하고,
   스크롤 생김 여부는 스크립트가 갱신하는 data-lyrics-viewer-overflow 속성으로 판단합니다. */
.mw--lyrics-container-before:has(~ .mw--lyrics-container[data-lyrics-viewer-overflow="true"]),
.mw--lyrics-container-before:has(~ * .mw--lyrics-container[data-lyrics-viewer-overflow="true"]) {
	clear: both;
}

/* 클래스를 반복해 특이성을 높여 멀티모드 규칙(같은 특이성, 더 앞에 선언됨)보다 우선합니다 */
.citizen-overflow-content.citizen-overflow-content > .mw--lyrics-variation-container {
	overflow-x: initial;
}

/* 기본 가사만 존재할 때 spacer를 맨 앞으로 옮겨 추가/설정 버튼을 우측에 모음 */
.mw--lyrics-viewer-bar--no-variation-toggle .mw--lyrics-viewer-bar__spacer {
	order: -1;
}

/* Citizen 스티키 헤더는 다중 선택 모드이고 변형 토글이 존재할 때만 동작하도록 고정합니다.
   Citizen이 밴드 클래스(citizen-overflow-sticky-row)를 사후에 부여하고 wikipage.content마다 되살리므로
   클래스를 제거하는 대신 스티키 이동의 근원인 transform/animation을 무효화합니다. */
.mw--lyrics-container:not( [data-lyrics-viewer-multimode="true"] ) > .citizen-overflow-sticky-row,
.mw--lyrics-container:has( > .citizen-overflow-sticky-row.mw--lyrics-viewer-bar--no-variation-toggle ) > .citizen-overflow-sticky-row {
	transform: none !important;
	animation: none !important;
}

/* 뷰어 바 기본 레이아웃 */
.mw--lyrics-viewer-bar {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	flex-wrap: wrap;
	margin-bottom: var(--space-sm);
}

.mw--lyrics-viewer-bar__spacer {
	flex: 1;
}

.mw--lyrics-variation {
	max-width: 100%;
}

/* Dialog 내부 레이아웃 */
.mw--lyrics-viewer-dialog-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.mw--lyrics-viewer-dialog-target {
	margin: 0;
	color: var(--color-subtle);
	font-size: var(--font-size-small);
}

.mw--lyrics-viewer-type-card {
	border: var(--border-subtle);
	border-radius: var(--border-radius-base);
	padding: var(--space-xs) var(--space-sm);
	cursor: pointer;
}

.mw--lyrics-viewer-type-card:hover {
	background-color: var(--background-color-button-quiet--hover);
}

.mw--lyrics-viewer-type-card__header {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	cursor: pointer;
}

.mw--lyrics-viewer-type-card__description {
	margin: var(--space-xxs) 0 0 var(--space-lg);
	color: var(--color-subtle);
	font-size: var(--font-size-small);
}

.mw--lyrics-viewer-type-card__input-wrap {
	margin: var(--space-xs) 0 0 var(--space-lg);
}

.mw--lyrics-viewer-dialog-preview {
	padding: var(--space-xs);
	background: var(--background-color-neutral-subtle);
	border-radius: var(--border-radius-base);
	font-size: var(--font-size-small);
}

/* 편집 모달 내부 레이아웃 */
.mw--lyrics-viewer-edit-dialog-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.mw--lyrics-viewer-edit-textarea .cdx-text-area__textarea {
	min-height: 50vh;
}

.mw--lyrics-viewer-edit-diff {
	border: var(--border-subtle);
	border-radius: var(--border-radius-base);
	padding: var(--space-xs);
	overflow-x: auto;
}

.mw--lyrics-viewer-edit-diff-empty {
	margin: 0;
	color: var(--color-subtle);
	font-size: var(--font-size-small);
}

.mw--lyrics-viewer-edit-error {
	margin: 0;
	color: var(--color-error);
	font-size: var(--font-size-small);
}

/* Popover 내부 레이아웃 */
.mw--lyrics-viewer-popover-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: max-content;
	max-width: calc(100vw - 32px);
}

.mw--lyrics-viewer-popover-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
}

.mw--lyrics-viewer-popover-row__label {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-small);
}

.mw--lyrics-viewer-popover-section-title {
	margin-bottom: var(--space-xxs);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-small);
}

/* 가사 본문 편집 버튼 — 우상단 절대 위치 */
.mw--lyrics-variation .ts-lyric-content {
	position: relative;
}

.mw--lyrics-variation-edit {
	position: absolute;
	top: var(--space-xs);
	right: var(--space-xs);
}

/* 작은 화면에서 다른 가사 추가 버튼은 아이콘만 표시 */
@media (max-width: 639px) {
	.mw--lyrics-viewer-add__label {
		display: none;
	}
}