미디어위키:Gadget-newtoolbar.css 문서 원본 보기

/* MediaWiki:Gadget-NewToolbar.css */

/* 툴바 전체 컨테이너 */
#ntb-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 12px;

	/* 라이트/다크 공통 변수 사용 */
	border-bottom: 1px solid var(--lightborder);
	color: var(--text);

	font-size: 1rem;
}

/* 각 그룹 */
.ntb-group {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px 4px 12px;
	border-radius: 0.5rem;

	/* 그룹 배경/테두리도 토큰 사용 */
	background: var(--altbg);
	border: 1px solid var(--border);
}

.ntb-group-label {
	font-weight: 600;
	margin-right: 4px;
	opacity: 0.7;
	color: var(--text);
}

/* 버튼 */
.ntb-button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 0.5rem;
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	white-space: nowrap;
	color: var(--text);
}

/* hover 색은 light-dark()로 라이트/다크 각각 지정 */
.ntb-button:hover {
	background: light-dark(#eaf3ff, #283040);
	border-color: light-dark(#c8ddff, #3b4a63);
}

/* 아이콘 공통 */
.ntb-icon {
	width: 14px;
	height: 14px;
	display: inline-block;
	/* 텍스트 색과 맞추기 위해 currentColor 사용 */
	color: var(--text);
}

/* 아이콘은 OOUI 아이콘 클래스를 그대로 써도 되고, 나중에 바꿔도 됨 */
.ntb-icon-bold::before {
	content: 'B';
	font-weight: 700;
}

.ntb-icon-italic::before {
	content: 'I';
	font-style: italic;
}

.ntb-icon-heading::before {
	content: 'H';
	font-weight: 700;
}

.ntb-icon-ul::before {
	content: '•';
}

.ntb-icon-ol::before {
	content: '1.';
}

.ntb-icon-link::before {
	content: '🔗';
}

.ntb-icon-file::before {
	content: '🖼';
}

.ntb-icon-ref::before {
	content: '¹';
}

.ntb-icon-search::before {
	content: '🔍';
}