MediaWiki:Gadget-spawncalc.css: Difference between revisions

Latest revision as of 09:06, 5 August 2026

/* Pixelmon spawn-chance calculator gadget styling.
 * Full-page widget on the standalone Spawn Calculator page. */
#spawn-calculator {
	--scalc-page: #210b2e;
	--scalc-panel: #2b103a;
	--scalc-panel-alt: #351447;
	--scalc-border: #86599a;
	--scalc-accent: #ed4db0;
	--scalc-accent-dark: #c52f91;
	--scalc-link: #73b7ff;
	--scalc-text: #f7effb;
	--scalc-muted: #c9b8d1;
	margin: 0.6em 0 1.2em;
	border: 1px solid var( --scalc-border );
	border-radius: 8px;
	background: var( --scalc-page );
	color: var( --scalc-text );
	color-scheme: dark;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.28 );
	width: 100%;
}

/* Header bar */
.scalc-header {
	padding: 0.55em 1em;
	background: var( --scalc-panel-alt );
	border-bottom: 2px solid var( --scalc-accent );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8em;
}
.scalc-header-title { font-weight: bold; font-size: 1.2em; letter-spacing: 0.01em; }
.scalc-source {
	font-size: 0.72em;
	color: var( --scalc-muted );
	white-space: nowrap;
}

/* Body: two columns (controls left, results/breakdown right). */
.scalc-body { padding: 0.9em 1em 1em; }
.scalc-cols { display: flex; flex-wrap: wrap; gap: 1.2em; align-items: flex-start; }
.scalc-left { flex: 1 1 24em; min-width: 0; }
.scalc-right { flex: 1 1 20em; min-width: 0; }

/* Top areas list (after Find best chance). */
.scalc-top { margin-top: 0.8em; }
.scalc-top-title {
	font-size: 0.72em; font-weight: bold; text-transform: uppercase;
	letter-spacing: 0.05em; color: var( --scalc-muted ); margin-bottom: 0.3em;
}
.scalc-top-item {
	display: flex; align-items: baseline; gap: 0.5em;
	padding: 0.35em 0.5em; border: 1px solid var( --scalc-border ); border-radius: 3px;
	margin-bottom: 0.3em; cursor: pointer; background: var( --scalc-panel );
}
.scalc-top-item:hover { background: var( --scalc-panel-alt ); border-color: var( --scalc-accent ); }
.scalc-top-active { background: var( --scalc-panel-alt ); border-color: var( --scalc-accent ); }
.scalc-top-rank { font-weight: bold; color: var( --scalc-muted ); font-size: 0.85em; }
.scalc-top-pct { font-weight: 800; color: var( --scalc-accent ); font-variant-numeric: tabular-nums; }
.scalc-top-params { font-size: 0.82em; color: var( --scalc-text ); }

/* Spawn breakdown for the current area. */
.scalc-bd { margin-top: 0.9em; }
.scalc-bd-title {
	font-size: 0.72em; font-weight: bold; text-transform: uppercase;
	letter-spacing: 0.05em; color: var( --scalc-muted ); margin-bottom: 0.3em;
}
.scalc-bd-list { max-height: 22em; overflow-y: auto; border: 1px solid var( --scalc-border ); }
.scalc-bd-row {
	display: flex; justify-content: space-between; gap: 0.5em;
	padding: 0.2em 0.6em; font-size: 0.85em; border-bottom: 1px solid var( --scalc-border );
	background: var( --scalc-panel );
}
.scalc-bd-row:last-child { border-bottom: 0; }
.scalc-bd-target { background: var( --scalc-panel-alt ); font-weight: bold; }
.scalc-bd-left { display: flex; align-items: center; gap: 0.45em; min-width: 0; }
.scalc-bd-img {
	width: 28px; height: 28px; flex: 0 0 auto;
	image-rendering: pixelated; object-fit: contain;
}
.scalc-bd-name { color: var( --scalc-link ); text-decoration: none; }
.scalc-bd-name:hover { text-decoration: underline; }
.scalc-bd-target .scalc-bd-name { color: var( --scalc-accent ); }
.scalc-bd-pct { color: var( --scalc-accent ); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* Controls: inline fields that wrap, button included at the end. */
.scalc-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 0.8em;
	align-items: flex-end;
}
.scalc-field { display: flex; flex-direction: column; gap: 0.15em; }
.scalc-label { font-weight: bold; font-size: 0.72em; color: var( --scalc-text ); }
.scalc-input, .scalc-num {
	padding: 0.2em 0.4em;
	border: 1px solid var( --scalc-border );
	border-radius: 3px;
	background: var( --scalc-panel );
	color: var( --scalc-text );
	font-size: 0.88em;
}
.scalc-input:focus, .scalc-num:focus {
	outline: none;
	border-color: var( --scalc-accent );
	box-shadow: 0 0 0 2px rgba( 237, 77, 176, 0.24 );
}
.scalc-num { width: 4.5em; }

/* Meta/analysis section: visually separated from the spawn-condition inputs. */
.scalc-meta {
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top: 1px solid var( --scalc-border );
	align-items: center;
}
.scalc-meta-label {
	font-weight: bold;
	font-size: 0.68em;
	color: var( --scalc-muted );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.scalc-btn {
	padding: 0.3em 0.85em;
	border: 0;
	border-radius: 3px;
	background: var( --scalc-accent );
	color: #fff;
	cursor: pointer;
	font-weight: bold;
	font-size: 0.88em;
}
.scalc-btn:hover { background: var( --scalc-accent-dark ); }
.scalc-btn:active { transform: translateY( 1px ); }

/* Result: one compact strip. */
.scalc-results { margin-top: 0.6em; }
.scalc-result {
	border: 1px solid var( --scalc-border );
	border-radius: 3px;
	padding: 0.45em 0.7em;
	background: var( --scalc-panel );
}
.scalc-result-hit { border-color: var( --scalc-accent ); background: var( --scalc-panel-alt ); }
.scalc-result-best { border-color: var( --scalc-accent ); }
.scalc-result-head {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	flex-wrap: wrap;
}
.scalc-pct {
	font-size: 2.6em;
	font-weight: 800;
	line-height: 1;
	color: var( --scalc-accent );
	font-variant-numeric: tabular-nums;
}
.scalc-result-miss .scalc-pct { color: #ff8fad; }
.scalc-pctlabel { font-size: 0.85em; color: var( --scalc-muted ); }
.scalc-detail { display: block; margin-top: 0.2em; font-size: 0.82em; color: var( --scalc-text ); }
.scalc-note { display: block; font-size: 0.85em; color: var( --scalc-muted ); font-style: italic; }

/* Per-time breakdown for a consecutive-time block: compact pill row. */
.scalc-breakdown {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 0.4em;
	margin-top: 0.4em;
}
.scalc-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3em;
	padding: 0.08em 0.5em;
	border: 1px solid var( --scalc-border );
	border-radius: 999px;
	background: var( --scalc-panel );
	font-size: 0.78em;
	line-height: 1.6;
}
.scalc-chip-time { color: var( --scalc-muted ); }
.scalc-chip-pct { font-weight: 700; color: var( --scalc-accent ); font-variant-numeric: tabular-nums; }
.scalc-chip-click { cursor: pointer; }
.scalc-chip-click:hover { border-color: var( --scalc-accent ); }
.scalc-chip-active { background: var( --scalc-accent ); border-color: var( --scalc-accent ); }
.scalc-chip-active .scalc-chip-time, .scalc-chip-active .scalc-chip-pct { color: #fff; }
/* A time inside the block where the species does not spawn (0%). */
.scalc-chip-dead { border-color: #a84f70; background: #3b142d; }
.scalc-chip-dead .scalc-chip-pct { color: #ff8fad; }

/* Optimizer warning (e.g. strict block had to be shortened). */
.scalc-warn {
	margin-bottom: 0.45em;
	padding: 0.35em 0.6em;
	border: 1px solid #b58a42;
	border-radius: 5px;
	background: #3a2b19;
	color: #f0cf8a;
	font-size: 0.82em;
}

/* Strict-block checkbox. */
.scalc-check-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.82em;
	color: var( --scalc-text );
	padding: 0.2em 0;
}
.scalc-check { margin: 0; }

/* Species picker (standalone page only). */
.scalc-species { min-width: 12em; }
.scalc-field-species { flex: 1 1 14em; }

/* Per-field lock toggle, sits next to the field label. */
.scalc-lock {
	display: inline-flex;
	align-items: center;
	gap: 0.2em;
	margin-left: 0.5em;
	font-weight: normal;
	font-size: 0.92em;
	color: var( --scalc-muted );
	cursor: pointer;
}
.scalc-lock-chk { margin: 0; }

/* Number-of-results control sits beside the Find best chance button. */
.scalc-count-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.85em;
	color: var( --scalc-muted );
}
.scalc-count-label { white-space: nowrap; }

/* Result strip becomes a prominent panel on the full page. */
.scalc-actions { margin-top: 0.8em; display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; }
.scalc-results { margin-top: 0.9em; }
.scalc-result { padding: 0.8em 1em; }
.scalc-pctlabel { font-size: 1em; }
.scalc-btn { font-size: 0.95em; padding: 0.45em 1.1em; }

/* Narrow screens: stack fields full width. */
@media ( max-width: 480px ) {
	.scalc-field { flex: 1 1 100%; }
	.scalc-input, .scalc-num, .scalc-btn { width: 100%; box-sizing: border-box; }
}