模板:表單/styles.css

/*
 * BenWiki 通用表單呈現層
 *
 * 用途：
 * - 統一 Page Forms 欄位排列
 * - 避免 Page Forms 動態產生的 DOM 打亂欄位位置
 * - 限制輸入元件與圖片預覽不得撐破內容區
 * - 提供桌面雙欄 label/control 與行動版單欄配置
 *
 * 使用方式：
 *
 * 
 *
 * 並以 .benwiki-form 作為表單最外層。
 */


/* ==========================================================
 * Root
 * ========================================================== */

.benwiki-form {
	box-sizing: border-box;

	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.benwiki-form *,
.benwiki-form *::before,
.benwiki-form *::after {
	box-sizing: border-box;
}


/* ==========================================================
 * Sections
 * ========================================================== */

.benwiki-form__section {
	width: 100%;
	max-width: 100%;
	min-width: 0;

	margin-block: 1.75rem;
}

.benwiki-form__section:first-child {
	margin-block-start: 0;
}


/* ==========================================================
 * Fields
 *
 * 每一個 .benwiki-form__field 都是獨立 row。
 *
 * 不要將所有 label/control 直接塞進同一個大 grid；
 * Page Forms 可能在 field 周圍動態插入 preview、OOUI、
 * Select2 等節點，會破壞 CSS Grid auto-placement。
 * ========================================================== */

.benwiki-form__fields {
	display: grid;

	gap: 0.65rem;

	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.benwiki-form__field {
	display: grid;

	grid-template-columns:
		minmax(7.5rem, 10rem)
		minmax(0, 1fr);

	column-gap: 1rem;
	align-items: start;

	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.benwiki-form__label {
	min-width: 0;

	padding-block: 0.45rem;

	font-weight: 600;
	line-height: 1.4;

	overflow-wrap: anywhere;
}

.benwiki-form__control {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}


/*
 * MediaWiki wikitext parser 可能因空行產生空白 paragraph。
 * 這些 paragraph 不應參與表單 layout。
 */

.benwiki-form__fields > p:empty,
.benwiki-form__field > p:empty,
.benwiki-form__control > p:empty {
	display: none;
}


/* ==========================================================
 * Inputs / widgets
 * ========================================================== */

.benwiki-form__control input,
.benwiki-form__control textarea,
.benwiki-form__control select {
	box-sizing: border-box;

	max-width: 100%;
}

.benwiki-form__control input[type="text"],
.benwiki-form__control input[type="url"],
.benwiki-form__control input[type="number"],
.benwiki-form__control textarea {
	width: min(36rem, 100%);
}

.benwiki-form__control .oo-ui-widget,
.benwiki-form__control .oo-ui-inputWidget,
.benwiki-form__control .oo-ui-fieldLayout,
.benwiki-form__control .select2-container {
	max-width: 100%;
}

.benwiki-form__control .select2-container {
	width: min(36rem, 100%) !important;
}


/* ==========================================================
 * Image preview
 * ========================================================== */

.benwiki-form .pfImagePreviewWrapper {
	box-sizing: border-box;

	width: min(20rem, 100%);
	max-width: 100%;
	min-width: 0;

	margin-top: 0.75rem;

	overflow: hidden;
}

.benwiki-form .pfImagePreviewWrapper img {
	display: block;

	width: auto;
	height: auto;

	max-width: 100%;
	max-height: 20rem;

	object-fit: contain;
}


/* ==========================================================
 * Multiple-template instances
 * ========================================================== */

.benwiki-form .multipleTemplateInstance {
	box-sizing: border-box;

	width: 100%;
	max-width: 100%;
	min-width: 0;

	margin-block: 0.55rem;
	padding: 0.8rem 0.9rem;

	border: 1px solid var(--border-color-base);
	border-radius: 8px;
}

.benwiki-form .multipleTemplateInstance .benwiki-form__fields {
	gap: 0.5rem;
}


/* ==========================================================
 * Actions
 * ========================================================== */

.benwiki-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: end;

	gap: 0.6rem;

	width: 100%;
	max-width: 100%;

	margin-top: 1.5rem;
}

.benwiki-form__actions input,
.benwiki-form__actions button {
	max-width: 100%;
}


/* ==========================================================
 * Responsive
 * ========================================================== */

@media (max-width: 720px) {
	.benwiki-form__field {
		grid-template-columns: minmax(0, 1fr);

		row-gap: 0.2rem;
	}

	.benwiki-form__label {
		padding-block-end: 0;
	}

	.benwiki-form__control {
		margin-bottom: 0.55rem;
	}

	.benwiki-form__control input[type="text"],
	.benwiki-form__control input[type="url"],
	.benwiki-form__control input[type="number"],
	.benwiki-form__control textarea,
	.benwiki-form__control .select2-container {
		width: 100% !important;
	}

	.benwiki-form .pfImagePreviewWrapper {
		width: min(16rem, 100%);
	}

	.benwiki-form .multipleTemplateInstance {
		padding: 0.7rem;
	}
}