미디어위키:Minerva.css: 두 판 사이의 차이

미네르바 스킨 메뉴 css
 
디자인 개선
 
1번째 줄: 1번째 줄:
/* All CSS here will be loaded for users of the MinervaNeue skin */
/* All CSS here will be loaded for users of the MinervaNeue skin */
/* 가온 위키 미네르바 전용 메뉴 스타일 */
/* 가온 위키 Minerva 커스텀 메뉴 스타일 */


/* 상위 그룹(게시판 / 버그/기능 개선 / 도구 / 도움말)의 헤더 */
/* 레벨 2, 3 <ul> 기본값 정리 */
.gaon-menu-header > a {
.gaon-menu-level2,
font-weight: bold;
.gaon-menu-level3 {
margin: 0;
padding: 0;
list-style: none;
}
 
/* 상위 그룹(게시판 / 버그/기능 개선 / 도구 / 도움말) 라인 */
.gaon-menu-header > .gaon-menu-header__anchor {
font-weight: 600;
/* Minerva 기본 anchor(.toggle-list-item__anchor)와 동일한 레이아웃 유지 */
display: flex;
align-items: center;
}
 
/* 하위 항목 anchor 의 레이아웃 정리 */
.gaon-menu-item > .gaon-menu-link {
display: flex;
align-items: center;
}
 
/* 아이콘과 텍스트 사이 간격 */
.gaon-menu .minerva-icon + .toggle-list-item__label {
margin-left: 0.6em;
}
}


/* 레벨별 들여쓰기 */
/* 레벨별 들여쓰기
.gaon-menu-level2 {
  - Minerva 기본 padding 에 더해 추가 padding 을 주는 방식 */
margin-left: 1.5em;
.gaon-menu-item-level2 > .gaon-menu-link {
padding-left: 2.5em; /* 2단계는 살짝 들여쓰기 */
}
}


.gaon-menu-level3 {
.gaon-menu-item-level3 > .gaon-menu-link {
margin-left: 3em;
padding-left: 3.5em;  /* 3단계는 조금 더 들여쓰기 */
}
 
/* 펼침/접힘 화살표(상위 그룹 오른쪽) */
.gaon-menu-header > .gaon-menu-header__anchor::after {
content: '▾';
margin-left: auto;
font-size: 0.7em;
opacity: 0.7;
}
}


/* 하위 메뉴는 글자 크기를 조금 줄여 구분합니다. */
/* 접힌 상태의 상위 그룹 화살표 */
.gaon-menu-item-level2 > a span,
.gaon-menu-header--collapsed > .gaon-menu-header__anchor::after {
.gaon-menu-item-level3 > a span {
content: '▸';
font-size: 0.95em;
}
}


/* 클릭 가능한 항목에 호버 시 약간의 배경 강조 */
/* 2단계 중 children 이 있는 항목(예: 파일 올리기)의 화살표 */
.gaon-menu a:hover {
.gaon-menu-item--has-children > .gaon-menu-link::after {
text-decoration: none;
content: '▾';
background-color: rgba(0, 0, 0, 0.06);
margin-left: auto;
font-size: 0.7em;
opacity: 0.7;
}
}


/* 미네르바의 기존 메뉴 아이콘 스타일과 자연스럽게 이어지도록
/* 접힌 상태의 2단계 화살표 */
  아이콘과 텍스트 사이 간격 조정 (필요시 조정 가능) */
.gaon-menu-item--collapsed > .gaon-menu-link::after {
.gaon-menu a.mw-ui-icon.mw-ui-icon-before > span {
content: '▸';
margin-left: 0.4em;
}
}

2025년 11월 19일 (수) 20:12 기준 최신판

/* All CSS here will be loaded for users of the MinervaNeue skin */
/* 가온 위키 Minerva 커스텀 메뉴 스타일 */

/* 레벨 2, 3 <ul> 기본값 정리 */
.gaon-menu-level2,
.gaon-menu-level3 {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 상위 그룹(게시판 / 버그/기능 개선 / 도구 / 도움말) 라인 */
.gaon-menu-header > .gaon-menu-header__anchor {
	font-weight: 600;
	/* Minerva 기본 anchor(.toggle-list-item__anchor)와 동일한 레이아웃 유지 */
	display: flex;
	align-items: center;
}

/* 하위 항목 anchor 의 레이아웃 정리 */
.gaon-menu-item > .gaon-menu-link {
	display: flex;
	align-items: center;
}

/* 아이콘과 텍스트 사이 간격 */
.gaon-menu .minerva-icon + .toggle-list-item__label {
	margin-left: 0.6em;
}

/* 레벨별 들여쓰기
   - Minerva 기본 padding 에 더해 추가 padding 을 주는 방식 */
.gaon-menu-item-level2 > .gaon-menu-link {
	padding-left: 2.5em;  /* 2단계는 살짝 들여쓰기 */
}

.gaon-menu-item-level3 > .gaon-menu-link {
	padding-left: 3.5em;  /* 3단계는 조금 더 들여쓰기 */
}

/* 펼침/접힘 화살표(상위 그룹 오른쪽) */
.gaon-menu-header > .gaon-menu-header__anchor::after {
	content: '▾';
	margin-left: auto;
	font-size: 0.7em;
	opacity: 0.7;
}

/* 접힌 상태의 상위 그룹 화살표 */
.gaon-menu-header--collapsed > .gaon-menu-header__anchor::after {
	content: '▸';
}

/* 2단계 중 children 이 있는 항목(예: 파일 올리기)의 화살표 */
.gaon-menu-item--has-children > .gaon-menu-link::after {
	content: '▾';
	margin-left: auto;
	font-size: 0.7em;
	opacity: 0.7;
}

/* 접힌 상태의 2단계 화살표 */
.gaon-menu-item--collapsed > .gaon-menu-link::after {
	content: '▸';
}

최근 바뀜

더 보기