미디어위키: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: 0.9rem;
	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: '🔍';
}

/* 찾기/바꾸기 패널 */
#ntb-find-panel.ntb-find-panel {
	display: none;
	padding: 8px 12px;

	border-bottom: 1px solid var(--lightborder);
	background: var(--bg);
	color: var(--text);

	font-size: 13px;
}

.ntb-find-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}

.ntb-find-row label {
	min-width: 48px;
	color: var(--text);
	opacity: 0.7;
}

.ntb-find-row input[type="text"] {
	flex: 1;
	padding: 4px 6px;
	border-radius: 4px;

	background: var(--altbg);
	color: var(--text);
	border: 1px solid var(--border);
}

.ntb-find-buttons {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}

#ntb-find-text, #ntb-replace-text {
background: var(--altbg);
  border: var(--border) 1px solid;
  border-radius: 0.5rem;
  color: var(--text);
  }
  
.ntb-find-buttons button {
	padding: 4px 8px;
	border-radius: 0.5rem;

	border: 1px solid var(--border);
	background: var(--altbg);
	color: var(--text);

	cursor: pointer;
	font-size: 0.9rem;
}

/* hover는 라이트/다크 전용 색을 light-dark()로 지정 */
.ntb-find-buttons button:hover {
	background: light-dark(#eaf3ff, #283040);
	border-color: light-dark(#a2c4ff, #3b4a63);
}

/* wpTextbox1 + preview를 담는 래퍼 */
.ntb-editor-wrapper {
	display: flex;
	gap: 0;
	align-items: stretch; /* textarea 높이에 맞춰 preview도 같은 높이로 */
	width: 100%;
}

/* 미리보기 꺼진 상태에서는 textarea가 전체 폭 사용 */
.ntb-editor-wrapper #wpTextbox1 {
	flex: 1 1 auto;
}

/* 미리보기 켜진 상태: 50% / 50% 비율 */
.ntb-editor-wrapper.ntb-preview-open #wpTextbox1,
.ntb-editor-wrapper.ntb-preview-open #ntb-preview-panel {
	flex: 0 0 50%;
	max-width: 50%;
}

/* textarea 기본 스타일 건드릴 건 없음, 높이는 MediaWiki 슬라이더가 관리 */
.ntb-editor-wrapper #wpTextbox1 {
	box-sizing: border-box;
}

/* 오른쪽 미리보기 패널 */
#ntb-preview-panel {
	box-sizing: border-box;
	border-left: 1px solid #ccc;
	padding: 10px 16px;
	background: #fff;
	overflow: auto;   /* 내용 많으면 패널 안에서 스크롤 */
	display: none;    /* JS에서 토글 */
}

/* 미리보기 제목 */
.ntb-preview-title {
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid #e0e0e0;
}