MediaWiki:Gadget-spawncalc.css

From Pixelrus
Revision as of 08:56, 3 August 2026 by NewAdmin (talk | contribs) (Apply Pixelrus dark theme to Spawn Calculator gadget)
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* Pixelmon spawn-chance calculator gadget styling.
 * Full-page widget on the standalone Spawn Calculator page. */
#spawn-calculator {
	margin: 0.6em 0 1.2em;
	border: 1px solid #c8ccd1;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.1 );
	width: 100%;
}

/* Header bar */
.scalc-header {
	padding: 0.55em 1em;
	background: linear-gradient( 135deg, #14866d, #0f6e58 );
	color: #fff;
}
.scalc-header-title { font-weight: bold; font-size: 1.2em; letter-spacing: 0.01em; }

/* 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: #72777d; margin-bottom: 0.3em;
}
.scalc-top-item {
	display: flex; align-items: baseline; gap: 0.5em;
	padding: 0.35em 0.5em; border: 1px solid #eaecf0; border-radius: 6px;
	margin-bottom: 0.3em; cursor: pointer; background: #fff;
}
.scalc-top-item:hover { background: #f1faf6; border-color: #a6e8d5; }
.scalc-top-active { background: #eafaf4; border-color: #14866d; }
.scalc-top-rank { font-weight: bold; color: #72777d; font-size: 0.85em; }
.scalc-top-pct { font-weight: 800; color: #14866d; font-variant-numeric: tabular-nums; }
.scalc-top-params { font-size: 0.82em; color: #202122; }

/* 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: #72777d; margin-bottom: 0.3em;
}
.scalc-bd-list { max-height: 22em; overflow-y: auto; border: 1px solid #eaecf0; border-radius: 6px; }
.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 #f3f4f6;
}
.scalc-bd-row:last-child { border-bottom: 0; }
.scalc-bd-target { background: #eafaf4; 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: #36c; text-decoration: none; }
.scalc-bd-name:hover { text-decoration: underline; }
.scalc-bd-target .scalc-bd-name { color: #14866d; }
.scalc-bd-pct { color: #14866d; 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: #54595d; }
.scalc-input, .scalc-num {
	padding: 0.2em 0.4em;
	border: 1px solid #a2a9b1;
	border-radius: 4px;
	background: #fff;
	font-size: 0.88em;
}
.scalc-input:focus, .scalc-num:focus {
	outline: none;
	border-color: #36c;
	box-shadow: 0 0 0 2px rgba( 51, 102, 204, 0.2 );
}
.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 dashed #d4d7dc;
	align-items: center;
}
.scalc-meta-label {
	font-weight: bold;
	font-size: 0.68em;
	color: #72777d;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.scalc-btn {
	padding: 0.3em 0.85em;
	border: 0;
	border-radius: 5px;
	background: #36c;
	color: #fff;
	cursor: pointer;
	font-weight: bold;
	font-size: 0.88em;
}
.scalc-btn:hover { background: #2a4b8d; }
.scalc-btn:active { transform: translateY( 1px ); }

/* Result: one compact strip. */
.scalc-results { margin-top: 0.6em; }
.scalc-result {
	border: 1px solid #eaecf0;
	border-radius: 6px;
	padding: 0.45em 0.7em;
	background: #f8f9fa;
}
.scalc-result-hit { border-color: #a6e8d5; background: #eafaf4; }
.scalc-result-best { border-color: #14866d; }
.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: #14866d;
	font-variant-numeric: tabular-nums;
}
.scalc-result-miss .scalc-pct { color: #b32424; }
.scalc-pctlabel { font-size: 0.85em; color: #54595d; }
.scalc-detail { display: block; margin-top: 0.2em; font-size: 0.82em; color: #202122; }
.scalc-note { display: block; font-size: 0.85em; color: #54595d; 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 #d4e9e2;
	border-radius: 999px;
	background: #f1faf6;
	font-size: 0.78em;
	line-height: 1.6;
}
.scalc-chip-time { color: #54595d; }
.scalc-chip-pct { font-weight: 700; color: #14866d; font-variant-numeric: tabular-nums; }
.scalc-chip-click { cursor: pointer; }
.scalc-chip-click:hover { border-color: #14866d; }
.scalc-chip-active { background: #14866d; border-color: #14866d; }
.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: #f0c9c9; background: #fcefef; }
.scalc-chip-dead .scalc-chip-pct { color: #b32424; }

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

/* Strict-block checkbox. */
.scalc-check-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.82em;
	color: #202122;
	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: #72777d;
	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: #54595d;
}
.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; }
}

/* Pixelrus dark calculator theme */
#spawn-calculator {
  background: #210B2E;
  color: #F7EFFB;
  border-color: #59306A;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

#spawn-calculator .scalc-header {
  background: linear-gradient(120deg, #52004C, #310043 58%, #76005D);
  color: #FFFFFF;
  border-bottom: 3px solid #D00080;
}

#spawn-calculator .scalc-body {
  background: #210B2E;
  color: #F7EFFB;
}

#spawn-calculator .scalc-label,
#spawn-calculator .scalc-meta-label,
#spawn-calculator .scalc-top-title,
#spawn-calculator .scalc-bd-title,
#spawn-calculator .scalc-top-rank,
#spawn-calculator .scalc-pctlabel,
#spawn-calculator .scalc-note,
#spawn-calculator .scalc-lock,
#spawn-calculator .scalc-count-wrap,
#spawn-calculator .scalc-chip-time {
  color: #CDBBD7;
}

#spawn-calculator .scalc-top-params,
#spawn-calculator .scalc-detail,
#spawn-calculator .scalc-check-wrap {
  color: #F7EFFB;
}

#spawn-calculator .scalc-input,
#spawn-calculator .scalc-num {
  background: #180722;
  color: #F7EFFB;
  border-color: #59306A;
}

#spawn-calculator .scalc-input:focus,
#spawn-calculator .scalc-num:focus {
  border-color: #F05BB9;
  box-shadow: 0 0 0 3px rgba(208, 0, 128, 0.25);
}

#spawn-calculator .scalc-meta {
  border-top-color: #59306A;
}

#spawn-calculator .scalc-btn {
  background: linear-gradient(110deg, #A00070, #D00080);
  color: #FFFFFF;
  border: 1px solid #ED4DB0;
}

#spawn-calculator .scalc-btn:hover {
  background: linear-gradient(110deg, #D00080, #A000E0);
  border-color: #F28ACC;
}

#spawn-calculator .scalc-result,
#spawn-calculator .scalc-top-item,
#spawn-calculator .scalc-chip,
#spawn-calculator .scalc-bd-list {
  background: #2B103A;
  color: #F7EFFB;
  border-color: #59306A;
}

#spawn-calculator .scalc-top-item:hover,
#spawn-calculator .scalc-chip-click:hover {
  background: #3A124D;
  border-color: #D00080;
}

#spawn-calculator .scalc-top-active,
#spawn-calculator .scalc-result-hit,
#spawn-calculator .scalc-bd-target {
  background: #390B42;
  border-color: #D00080;
}

#spawn-calculator .scalc-result-best {
  border-color: #F05BB9;
  box-shadow: inset 0 0 0 1px rgba(240, 91, 185, 0.25);
}

#spawn-calculator .scalc-pct,
#spawn-calculator .scalc-top-pct,
#spawn-calculator .scalc-bd-pct,
#spawn-calculator .scalc-chip-pct {
  color: #F05BB9;
}

#spawn-calculator .scalc-bd-row {
  color: #F7EFFB;
  border-bottom-color: #3D1C4C;
}

#spawn-calculator .scalc-bd-name {
  color: #D58AFF;
}

#spawn-calculator .scalc-bd-name:hover {
  color: #F05BB9;
}

#spawn-calculator .scalc-bd-target .scalc-bd-name {
  color: #F05BB9;
}

#spawn-calculator .scalc-chip-active {
  background: linear-gradient(110deg, #A00070, #D00080);
  border-color: #F05BB9;
}

#spawn-calculator .scalc-chip-active .scalc-chip-time,
#spawn-calculator .scalc-chip-active .scalc-chip-pct {
  color: #FFFFFF;
}

#spawn-calculator .scalc-chip-dead {
  background: #3A152A;
  border-color: #93405F;
}

#spawn-calculator .scalc-chip-dead .scalc-chip-pct,
#spawn-calculator .scalc-result-miss .scalc-pct {
  color: #FF8FAE;
}

#spawn-calculator .scalc-warn {
  background: #3A2A12;
  color: #F3D89A;
  border-color: #806126;
}
/* End Pixelrus dark calculator theme */
Retrieved from "https://wiki.pixelrus.net/index.php?title=MediaWiki:Gadget-spawncalc.css&oldid=124785"