미디어위키: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);
}

/* 전체 화면 분할 모드 */
body.ntb-preview-open #wpTextbox1 {
    width: 50% !important;
    float: left;
}

#ntb-preview-panel {
    width: 50%;
    float: right;
    height: calc(100vh - 120px);
    overflow-y: auto;
    border-left: 1px solid #dcdcdc;
    background: #fff;
    padding: 12px;
    display: none;
}

.ntb-preview-title {
    font-weight: 700;
    margin-bottom: 8px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 4px;
}

button:focus {
  outline: none;
}

/* 미리보기 분할 모드 */
body.ntb-preview-open #wpTextbox1 {
    width: 49% !important;
    float: left;
}

/* 오른쪽에 붙는 패널 */
#ntb-preview-panel {
    width: 49%;
    float: right;
    min-height: 600px;
    height: auto;
    background: #fff;
    border-left: 1px solid #ccc;
    padding: 10px 16px;
    overflow-y: auto;
    display: none;
}

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

/* 에디터 + 미리보기 flex 레이아웃 */
.ntb-edit-area {
	display: flex;
	align-items: stretch;
	gap: 0;
}

/* 텍스트 영역이 flex child가 되도록 */
.ntb-edit-area #wpTextbox1 {
	box-sizing: border-box;
	width: auto !important; /* 기존 width 강제 제거 */
	min-height: 400px;
	font-family: monospace;
}

/* 미리보기 패널 */
#ntb-preview-panel {
	box-sizing: border-box;
	min-height: 400px;
	background: #fff;
	border-left: 1px solid #ccc;
	padding: 10px 16px;
	overflow-y: auto;
	display: none; /* toggle에서 show */
}

.ntb-preview-title {
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid #e0e0e0;
}

/* 가운데 splitter 핸들 */
#ntb-splitter {
	width: 6px;
	cursor: col-resize;
	background: #e0e0e0;
	box-sizing: border-box;
}

/* 드래그 중 표시(선택 방지 등 활용 가능) */
body.ntb-splitting {
	user-select: none;
}

/* 미리보기 꺼졌을 때는 textarea가 자연스럽게 100% 차지 */
body:not(.ntb-preview-open) .ntb-edit-area #wpTextbox1 {
	flex: 0 0 100%;
}