MediaWiki:Gadget-calculators.css: Difference between revisions

← Older edit

@@ Line 11: / Line 11: @@
 .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 {
+.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 );
@@ Line 19: / Line 23: @@
 	width: 9em;
 }
-.tc-calc .tc-scores input { width: 5em; }
+/* 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 );
@@ Line 26: / Line 33: @@
 }
 .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
+/* Flush left with the rest of the box. Needs to out-specify the skins' own
-    indents the numbers away from every other line. */
+   content-list indents — Vector's `ol` and Minerva's `.content ol`, the latter
-.tc-calc-steps {
+   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-left: 0;
+	padding: 0;
+	padding-inline: 0;
 	list-style-position: inside;
 }
@@ Line 71: / Line 82: @@
 .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;
+	}
+}