MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 290: / Line 290: @@
    padding: 0.05em 0.6em;
    font-size: 0.85em;
+}
+/* navbox — full-width navigation block at the foot of pages */
+.pi-navbox {
+  clear: both;
+  position: relative;
+  margin: 1.5em 0 0.5em;
+  border: 1px solid var(--pi-border);
+  border-radius: var(--pi-radius);
+  background: var(--pi-panel-raised);
+  font-size: 0.9em;
+  overflow: hidden;
+}
+.pi-navbox-title {
+  background: linear-gradient(180deg, #202838, #1a2130);
+  color: var(--pi-accent);
+  font-family: var(--pi-display);
+  text-align: center;
+  padding: 0.45em 0.6em;
+  border-bottom: 1px solid var(--pi-border);
+}
+.pi-navbox-row {
+  display: flex;
+  gap: 0.6em;
+  padding: 0.35em 0.7em;
+  border-top: 1px solid var(--pi-border);
+  line-height: 1.7;
+}
+.pi-navbox-row:first-of-type { border-top: 0; }
+.pi-navbox-label {
+  flex: 0 0 8.5em;
+  color: var(--pi-muted);
+  font-weight: 600;
+  text-align: right;
+  border-right: 1px solid var(--pi-border);
+  padding-right: 0.7em;
+}
+.pi-navbox-links { flex: 1; }
+@media (max-width: 640px) {
+  .pi-navbox-row { flex-direction: column; gap: 0.1em; }
+  .pi-navbox-label { flex-basis: auto; text-align: left; border-right: 0; padding-right: 0; }
+}
+/* collapse toggle in the navbox title bar */
+.pi-navbox .mw-collapsible-toggle {
+  position: absolute;
+  top: 0.5em;
+  right: 0.7em;
+  z-index: 1;
+  font-family: system-ui, sans-serif;
+  font-weight: 400;
+  font-size: 0.85em;
+}
+.pi-navbox .mw-collapsible-toggle a,
+.pi-navbox .mw-collapsible-toggle a:hover {
+  color: var(--pi-accent) !important;
+}
+/* infobox — right-floated entity card (creatures, etc.) */
+.pi-infobox {
+  float: right;
+  clear: right;
+  width: 300px;
+  max-width: 92vw;
+  margin: 0 0 1em 1.2em;
+  background: var(--pi-panel-raised);
+  border: 1px solid var(--pi-border);
+  border-radius: var(--pi-radius);
+  overflow: hidden;
+  font-size: 0.92em;
+}
+.pi-infobox .pi-infobox-title {
+  background: linear-gradient(180deg, #202838, #1a2130);
+  color: var(--pi-accent);
+  font-family: var(--pi-display);
+  font-size: 1.15em;
+  text-align: center;
+  padding: 0.5em 0.6em;
+  border-bottom: 1px solid var(--pi-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4em;
+}
+.pi-infobox .pi-infobox-sub {
+  text-align: center;
+  color: var(--pi-muted);
+  padding: 0.35em 0.6em;
+  border-bottom: 1px solid var(--pi-border);
+}
+.pi-infobox table,
+.pi-infobox tr,
+.pi-infobox td,
+.pi-infobox th {
+  border: 0;
+  background: transparent;
+}
+.pi-infobox td,
+.pi-infobox th {
+  padding: 0.3em 0.7em;
+  vertical-align: top;
+}
+.pi-infobox tr:nth-child(even) td,
+.pi-infobox tr:nth-child(even) th {
+  background: rgba(255, 255, 255, 0.02);
+}
+.pi-infobox th {
+  color: var(--pi-muted);
+  font-weight: 600;
+  text-align: left;
+  white-space: nowrap;
+}
+.pi-infobox .pi-infobox-icon {
+  text-align: center;
+  padding: 0.6em;
+  font-size: 2.6em;
+  line-height: 1;
+}
+/* ============================================================================
+ * RESPONSIVE / MOBILE
+ * Vector 2022 is responsive and the viewport meta is present, but MediaWiki
+ * doesn't wrap wide data tables (Achievements, Shop, drop tables, …) in a
+ * scroll container — on a phone they overflow and shove the whole page
+ * sideways. These rules keep every page within the viewport on small screens
+ * without needing the server-side MobileFrontend/Minerva skin.
+ * ==========================================================================*/
+/* Break long words/URLs instead of letting them widen the page. */
+.mw-parser-output { overflow-wrap: break-word; }
+/* Images and thumbnails never exceed their column. */
+.mw-body img { max-width: 100%; height: auto; }
+.mw-body .thumb,
+.mw-body .thumbinner { max-width: 100%; }
+@media (max-width: 720px) {
+  /* Wide tables scroll inside their own box instead of stretching the page.
+     display:block makes the table a scrollable element; text-heavy tables
+     still wrap to fit, and only genuinely wide ones show a scroll strip. */
+  .mw-parser-output .wikitable {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+  }
+  /* Tighter cell padding buys back horizontal room on narrow screens. */
+  .mw-parser-output .wikitable td,
+  .mw-parser-output .wikitable th { padding: 0.3em 0.5em; }
+  /* Infobox: stop floating, sit full-width above the prose. */
+  .pi-infobox {
+    float: none;
+    clear: both;
+    width: 100%;
+    max-width: 100%;
+    margin: 0 0 1em 0;
+  }
+  /* Slightly larger body text + comfortable heading sizes for phones. */
+  .mw-body { font-size: 1.02em; }
+  .mw-body h1 { font-size: 1.6em; }
+  .mw-body h2 { font-size: 1.35em; }
+  /* Long code / preformatted blocks wrap rather than overflow. */
+  .mw-body pre { white-space: pre-wrap; word-break: break-word; }
 }
@@ Line 403: / Line 571: @@
 /* ======================================================================== */
-/* 206 game icons (auto-embedded from {{Icon}} usage in content/). */
+/* 913 game icons (auto-embedded from {{Icon}} usage in content/). */
-.pi-aegis-of-the-deep{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M16%202l11%204v10c0%207-4.5%2011.5-11%2014C9.5%2027.5%205%2023%205%2016V6l11-4z%22%20fill%3D%22%238f7ff0%22%2F%3E%20%3Cpath%20d%3D%22M16%202l11%204v10c0%207-4.5%2011.5-11%2014V2z%22%20fill%3D%22%236355c2%22%2F%3E%20%3Cpath%20d%3D%22M16%208l6%204v5c0%
+.pi-abyssal-amber{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3.5l8.5 6.5-3 15h-11l-3-15L16 3.5z' fill='%23f0a53c'/%3E %3Cpath d='M16 3.5l8.5 6.5-3 15H16V3.5z' fill='%23c27a18'/%3E %3Ccircle cx='14' cy='14.5' r='2.6' fill='%2377492a'/%3E %3Cpath d='M12 8.5l3-2.5' stroke='%23ffe08a' stroke-width='1.6' stroke-linecap='round'/%3E %3Cpath d='M11 25h10v3H11z' fill='%236c7480'/%3E%3C/svg%3E")}
+.pi-abyssal-pearl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 20 Q6 12 16 11 Q26 12 26 20 Q22 17 16 17 Q10 17 6 20 Z' fill='%2333719f'/%3E %3Ccircle cx='16' cy='21' r='6.5' fill='%23bfe4f5'/%3E %3Ccircle cx='16' cy='21' r='6.5' fill='none' stroke='%238ec4dd' stroke-width='1.2'/%3E %3Ccircle cx='13.8' cy='18.8' r='2' fill='%23c2c9d2' opacity='0.9'/%3E%3C/svg%3E")}
+.pi-accord-signet{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='18' r='8.5' fill='none' stroke='%23cd8f3f' stroke-width='3.4'/%3E %3Ccircle cx='16' cy='18' r='8.5' fill='none' stroke='%239c6522' stroke-width='1.2'/%3E %3Crect x='11.6' y='5' width='8.8' height='8' rx='1.6' fill='%23cd8f3f'/%3E %3Cpath d='M13.4 9 L15.4 11 L18.8 6.8' stroke='%231c2028' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
+.pi-aegis-of-the-deep{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2l11 4v10c0 7-4.5 11.5-11 14C9.5 27.5 5 23 5 16V6l11-4z' fill='%238f7ff0'/%3E %3Cpath d='M16 2l11 4v10c0 7-4.5 11.5-11 14V2z' fill='%236355c2'/%3E %3Cpath d='M16 8l6 4v5c0 3.6-2.4 6.2-6 8-3.6-1.8-6-4.4-6-8v-5l6-4z' fill='%232a2f3a'/%3E %3Ccircle cx='16' cy='15.5' r='2.2' fill='%23ffe08a'/%3E%3C/svg%3E")}
+.pi-age-catalyst{background-image:url("data:image/svg+xml,

MediaWiki:Common.css: Difference between revisions

Primal wiki (talk | contribs)