模板:創作者/styles.css

/*
 * BenWiki 創作者 Infobox 專用樣式
 *
 * 僅處理創作者領域的 presentation。
 *
 * 目前包含：
 * - 平台帳號
 *
 * 通用 Infobox 外框、圖片、正式欄位、
 * collection 與 responsive foundation 位於：
 * 模板:Infobox/styles.css
 *
 * 色彩直接使用 MediaWiki / Citizen semantic tokens。
 *
 * 模板說明：模板:創作者
 */


/* ==========================================================
 * Platform account
 * ========================================================== */

.benwiki-infobox--creator
.benwiki-creator-account {
	display: grid;

	grid-template-columns:
		minmax(5.75rem, 0.8fr)
		minmax(0, 1.35fr);

	gap: 0.75rem;

	min-width: 0;

	padding:
		0.72rem
		0.95rem;

	color:
		var(--color-base);
}


.benwiki-infobox--creator
.benwiki-creator-account
+ .benwiki-creator-account {
	border-top-width: 1px;
	border-top-style: solid;

	border-top-color:
		var(--border-color-subtle);
}


/* ==========================================================
 * Platform
 * ========================================================== */

.benwiki-infobox--creator
.benwiki-creator-account__platform {
	min-width: 0;

	color:
		var(--color-emphasized);

	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.35;

	overflow-wrap: anywhere;
}


/* ==========================================================
 * Account body
 * ========================================================== */

.benwiki-infobox--creator
.benwiki-creator-account__body {
	min-width: 0;
}


/* ==========================================================
 * Account name / identifier disclosure
 * ========================================================== */

.benwiki-infobox--creator
.benwiki-creator-account__name-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;

	column-gap: 0.18rem;

	min-width: 0;
}


.benwiki-infobox--creator
.benwiki-creator-account__name {
	order: 1;

	flex:
		0
		1
		auto;

	min-width: 0;

	color:
		var(--color-emphasized);

	font-size: 0.94rem;
	font-weight: 700;
	line-height: 1.35;

	overflow-wrap: anywhere;
}


.benwiki-infobox--creator
.benwiki-creator-account__name
a {
	color:
		var(--color-progressive);

	text-decoration: none;
}


.benwiki-infobox--creator
.benwiki-creator-account__name
a:hover {
	color:
		var(--color-progressive--hover);

	text-decoration: underline;
}


/* ==========================================================
 * Identifier disclosure toggle
 * ========================================================== */

.benwiki-infobox--creator
.benwiki-creator-account__name-row
> .mw-collapsible-toggle {
	order: 2;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex:
		0
		0
		auto;

	float: none;

	box-sizing: border-box;

	width: 1.25rem;
	height: 1.25rem;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 999px;

	color:
		var(--color-subtle);

	background-color:
		transparent;

	line-height: 1;

	cursor: pointer;
}


.benwiki-infobox--creator
.benwiki-creator-account__name-row
> .mw-collapsible-toggle:hover {
	color:
		var(--color-progressive);

	background-color:
		var(--background-color-interactive);
}


.benwiki-infobox--creator
.benwiki-creator-account__name-row
> .mw-collapsible-toggle:focus {
	outline-width: 2px;
	outline-style: solid;

	outline-color:
		var(--color-progressive);

	outline-offset: 1px;
}


.benwiki-infobox--creator
.benwiki-creator-account__name-row
> .mw-collapsible-toggle
.mw-collapsible-text {
	font-size: 0;
	line-height: 0;
}


.benwiki-infobox--creator
.benwiki-creator-account__name-row
> .mw-collapsible-toggle::before {
	content: "▾";

	font-size: 0.7rem;
	line-height: 1;
}


.benwiki-infobox--creator
.benwiki-creator-account__name-row
> .mw-collapsible-toggle-collapsed::before {
	content: "▸";
}


/* 移除 MediaWiki 預設 toggle 裝飾 */

.benwiki-infobox--creator
.benwiki-creator-account__name-row
> .mw-collapsible-toggle-default::after {
	content: none;
}


/* ==========================================================
 * Account identifiers
 * ========================================================== */

.benwiki-infobox--creator
.benwiki-creator-account__ids {
	order: 3;

	flex:
		0
		0
		100%;

	box-sizing: border-box;

	width: 100%;
	min-width: 0;

	margin-top: 0.18rem;
}


.benwiki-infobox--creator
.benwiki-creator-account__id {
	min-width: 0;

	color:
		var(--color-subtle);

	font-size: 0.82rem;
	font-weight: 400;
	line-height: 1.4;

	overflow-wrap: anywhere;
}


.benwiki-infobox--creator
.benwiki-creator-account__id
+ .benwiki-creator-account__id {
	margin-top: 0.06rem;
}


/* ==========================================================
 * Metadata / usage
 * ========================================================== */

.benwiki-infobox--creator
.benwiki-creator-account__meta {
	display: flex;
	flex-wrap: wrap;

	gap: 0.24rem;

	min-width: 0;

	margin-top: 0.32rem;
}


.benwiki-infobox--creator
.benwiki-creator-account__purpose {
	display: inline-block;

	padding:
		0.1rem
		0.42rem;

	color:
		var(--color-subtle);

	background-color:
		var(--background-color-interactive);

	border-radius: 999px;

	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.4;

	overflow-wrap: anywhere;
}


/* ==========================================================
 * Aliases
 * ========================================================== */

.benwiki-infobox--creator
.benwiki-creator-account__aliases {
	margin-top: 0.28rem;

	color:
		var(--color-subtle);

	font-size: 0.76rem;
	line-height: 1.4;

	overflow-wrap: anywhere;
}


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

@media (max-width: 420px) {
	.benwiki-infobox--creator
	.benwiki-creator-account {
		grid-template-columns:
			minmax(0, 1fr);

		gap: 0.28rem;
	}


	.benwiki-infobox--creator
	.benwiki-creator-account__platform {
		font-size: 0.8rem;
	}


	.benwiki-infobox--creator
	.benwiki-creator-account__name {
		font-size: 0.92rem;
	}
}