미디어위키: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: 17px;
	height: 14px;
	display: inline-block;
	/* 텍스트 색과 맞추기 위해 currentColor 사용 */
	color: var(--text);
}

/* 아이콘은 OOUI 아이콘 클래스를 그대로 써도 되고, 나중에 바꿔도 됨 */
.ntb-icon-bold::before {
	content: '\f032';
	font-family: "Font Awesome 5 Free"; font-weight: 900; 
}

.ntb-icon-italic::before {
	content: '\f033';
	font-family: "Font Awesome 5 Free"; font-weight: 900; 
}

.ntb-icon-heading::before {
	content: '\f292';
	font-family: "Font Awesome 5 Free"; font-weight: 900; 
}

.ntb-icon-ul::before {
		content: '\f0ca';
	font-family: "Font Awesome 5 Free"; font-weight: 900; 
}

.ntb-icon-ol::before {
		content: '\f0cb';
	font-family: "Font Awesome 5 Free"; font-weight: 900; 
}

.ntb-icon-link::before {
		content: '\f0c1';
	font-family: "Font Awesome 5 Free"; font-weight: 900; 
}

.ntb-icon-file::before {
		content: '\f03e';
	font-family: "Font Awesome 5 Free"; font-weight: 900; 
}

.ntb-icon-ref::before {
		content: '\f069';
	font-family: "Font Awesome 5 Free"; font-weight: 900; 
}

.ntb-icon-search::before {
	content: '\f002';
	font-family: "Font Awesome 5 Free"; font-weight: 900; 
}

.ntb-icon-preview::before {
	content: '\f06e';
	font-family: "Font Awesome 5 Free"; font-weight: 900; 
}

/* 찾기/바꾸기 패널 */
#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;
    background: var(--bg);
    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;
}

/* 미리보기 분할 모드 *