MediaWiki:Gadget-calculators.css: Difference between revisions

Revision as of 14:58, 24 September 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 input[type="number"], .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;
}
.tc-calc .tc-scores input { width: 5em; }
.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: the browser's default ol padding
   indents the numbers away from every other line. */
.tc-calc-steps {
	font-size: 0.9em;
	color: var( --color-subtle, #54595d );
	margin: 0.5em 0 0;
	padding-left: 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 ); }