MediaWiki:Gadget-calculators.css: Difference between revisions

Latest revision as of 15:18, 7 October 2026

/* 1TC calculators — theme-aware via Codex tokens, with light-mode fallbacks. */
.tc-calc {
	border: 1px solid var( --border-color-base, #a2a9b1 );
	background: var( --background-color-neutral-subtle, #f8f9fa );
	color: var( --color-base, inherit );
	border-radius: 2px;
	padding: 1em 1.2em;
	margin: 1em 0;
	max-width: 44em;
}
.tc-calc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em 1em; margin-bottom: 0.7em; }
.tc-calc label { min-width: 12em; font-weight: bold; }
.tc-calc-controls { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0.5em; min-width: 0; }

.tc-calc input[type="number"],
.tc-calc input[type="text"],
.tc-calc select {
	padding: 0.3em 0.5em;
	border: 1px solid var( --border-color-base, #a2a9b1 );
	background: var( --background-color-base, #fff );
	color: var( --color-base, inherit );
	border-radius: 2px;
	width: 9em;
}
/* Explicit widths need two classes to out-specify the type selectors above. */
.tc-calc .tc-calc-wide { width: 14em; }
.tc-calc .tc-calc-money { width: 9em; }
.tc-calc .tc-scores input { width: 6em; }
.tc-calc-out {
	border-top: 1px solid var( --border-color-base, #a2a9b1 );
	margin-top: 1em;
	padding-top: 0.9em;
}
.tc-calc-big { font-size: 1.6em; font-weight: bold; line-height: 1.3; }
/* Flush left with the rest of the box. Needs to out-specify the skins' own
   content-list indents — Vector's `ol` and Minerva's `.content ol`, the latter
   using the logical `padding-inline`, so reset that too rather than padding-left
   alone. Hence the ol/ul qualifier and the .tc-calc ancestor. */
.tc-calc ol.tc-calc-steps,
.tc-calc ul.tc-calc-steps {
	font-size: 0.9em;
	color: var( --color-subtle, #54595d );
	margin: 0.5em 0 0;
	padding: 0;
	padding-inline: 0;
	list-style-position: inside;
}
.tc-calc-steps li { margin: 0.15em 0; }
.tc-calc-post {
	font-family: monospace, monospace;
	white-space: pre;
	overflow-x: auto;
	border: 1px solid var( --border-color-base, #a2a9b1 );
	background: var( --background-color-base, #fff );
	color: var( --color-base, inherit );
	padding: 0.7em 0.9em;
	margin-top: 0.8em;
	border-radius: 2px;
}
.tc-calc-warn {
	border-left: 3px solid var( --border-color-error, #bf3c2c );
	background: var( --background-color-error-subtle, #fee7e6 );
	color: var( --color-base, inherit );
	padding: 0.5em 0.8em;
	margin-top: 0.8em;
}
.tc-calc-note { font-size: 0.9em; color: var( --color-subtle, #54595d ); margin-top: 0.6em; }
.tc-calc-postwrap { display: flex; align-items: flex-start; gap: 0.6em; margin-top: 0.8em; }
.tc-calc-postwrap .tc-calc-post { flex: 1; margin-top: 0; }
.tc-calc-copy {
	flex: none;
	padding: 0.4em 0.9em;
	border: 1px solid var( --border-color-base, #a2a9b1 );
	background: var( --background-color-interactive-subtle, #f8f9fa );
	color: var( --color-base, inherit );
	border-radius: 2px;
	cursor: pointer;
	font-size: 0.9em;
	white-space: nowrap;
}
.tc-calc-copy:hover { background: var( --background-color-interactive, #eaecf0 ); }
.tc-calc-actions { margin-top: 0.5em; font-size: 0.9em; }
.tc-calc-inline { color: var( --color-subtle, #54595d ); font-size: 0.9em; white-space: nowrap; }
.tc-calc-use {
	padding: 0.2em 0.7em;
	border: 1px solid var( --border-color-base, #a2a9b1 );
	background: var( --background-color-interactive-subtle, #f8f9fa );
	color: var( --color-base, inherit );
	border-radius: 2px;
	cursor: pointer;
	font-size: inherit;
	white-space: nowrap;
}
.tc-calc-use:hover { background: var( --background-color-interactive, #eaecf0 ); }

/* --- narrow screens ---
 * Below 480px a label plus three 6em score boxes cannot share a line, and the
 * boxes wrap raggedly under it. Stack the label above the controls instead and
 * let the controls divide the width between them. */
@media ( max-width: 480px ) {
	.tc-calc {
		padding: 0.8em;
	}

	.tc-calc-row {
		flex-direction: column;
		align-items: stretch;
		gap: 0.25em;
	}

	.tc-calc label {
		min-width: 0;
	}

	.tc-calc-controls {
		width: 100%;
	}

	/* One control per row fills the width; a readout beside it keeps its size */
	.tc-calc-controls input[type="number"],
	.tc-calc-controls input[type="text"],
	.tc-calc-controls select,
	.tc-calc .tc-calc-wide,
	.tc-calc .tc-calc-money {
		flex: 1 1 6em;
		width: auto;
		min-width: 0;
	}

	.tc-calc-controls .tc-calc-inline {
		flex: 0 0 auto;
	}

	/* The three score boxes share the row evenly */
	.tc-calc .tc-scores .tc-calc-controls input {
		flex: 1 1 0;
	}

	/* A checkbox should not stretch */
	.tc-calc-controls input[type="checkbox"] {
		flex: 0 0 auto;
		align-self: flex-start;
	}

	/* Copy button under the post block rather than squeezed beside it */
	.tc-calc-postwrap {
		flex-direction: column;
		align-items: stretch;
	}

	.tc-calc-copy {
		width: 100%;
	}

	.tc-calc-big {
		font-size: 1.4em;
	}
}