Ir al contenido

Diferencia entre revisiones de «MediaWiki:Common.css»

De Wiki Hub De Vors
← Edición anteriorEdición siguiente →
cache bust UI
hdv-pixel-lg 128px portraits
Línea 311: Línea 311:
.mw-parser-output .hdv-infobox img.hdv-pixel-lg,
.mw-parser-output .hdv-infobox img.hdv-pixel-lg,
img.hdv-pixel-lg {
img.hdv-pixel-lg {
   width: 96px !important;
   width: 128px !important;
   height: 96px !important;
   height: 128px !important;
   max-width: 96px !important;
   max-width: 128px !important;
   max-height: 96px !important;
   max-height: 128px !important;
}
}


Revisión del 13:37 4 ago 2026

/* hdv-cache-bust: 2026-08-04-ui1 */ /* Hub De Vors — MediaWiki Common.css (paleta portal + mobile-first) */

root {
 --hdv-bg: #0c0c14;
 --hdv-page: #050508;
 --hdv-surface: #141927;
 --hdv-surface-2: #10131d;
 --hdv-line: rgba(184, 192, 224, 0.26);
 --hdv-text: #eef2ff;
 --hdv-muted: #b8c0e0;
 --hdv-faint: #8b93b5;
 --hdv-primary: #20f08a;
 --hdv-primary-glow: #19f58b;
 --hdv-primary-ink: #04130b;
 --hdv-gold: #f9ab00;
 --hdv-crimson: #ef5350;
 --hdv-blue: #22d3ee;
 --hdv-radius: 8px;
 --hdv-touch: 44px;

}

html, body, .mw-body, .vector-body,

  1. content,
  2. mw-content-text,

.mw-page-container, .mw-workspace-container, .vector-header-container, .mw-header, .vector-sitenotice-container, .mw-footer-container, .vector-main-menu-landmark, .vector-toc-landmark, .vector-page-toolbar, .vector-sticky-header, .mw-sidebar-container, .skin-minerva, .skin-minerva .mw-body, .skin-minerva #content, .skin-minerva .content, .minerva-header, .minerva__body { 

 background: var(--hdv-bg) !important;
 color: var(--hdv-text) !important;

}

.mw-page-container, .mw-body,

  1. content,

.skin-minerva .mw-body { 

 background:
   radial-gradient(ellipse at 20% 0%, rgba(32, 240, 138, 0.08), transparent 42%),
   radial-gradient(ellipse at 80% 10%, rgba(34, 211, 238, 0.05), transparent 36%),
   var(--hdv-bg) !important;

}

/* Links — forzar esmeralda sobre azul Vector/Minerva */ .mw-parser-output a, .mw-parser-output a:link, .mw-parser-output a:visited, .vector-body a, .vector-toc a, .mw-list-item a, .cdx-menu a, a.external, a.hdv-card, a.hdv-wikilink, .skin-minerva a, .skin-minerva .content a { 

 color: var(--hdv-primary) !important;
 text-decoration-color: rgba(32, 240, 138, 0.45) !important;

}

a.hdv-wikilink { 

 text-decoration: underline;
 text-underline-offset: 2px;

}

a.hdv-card { 

 display: block !important;
 padding: 0.75rem 0.9rem !important;
 margin: 0 !important;
 border: 1px solid rgba(32, 240, 138, 0.22) !important;
 border-radius: var(--hdv-radius) !important;
 background: rgba(20, 25, 39, 0.72) !important;
 text-decoration: none !important;
 color: var(--hdv-text) !important;
 min-height: 0 !important;
 box-sizing: border-box;

}

a.hdv-card strong { 

 display: block !important;
 color: var(--hdv-primary-glow) !important;
 margin-bottom: 0.35rem !important;

}

a.hdv-card .hdv-meta, a.hdv-card span { 

 color: var(--hdv-muted) !important;

}

.hdv-grid, .mw-parser-output .hdv-grid { 

 display: grid !important;
 grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
 gap: 12px !important;
 margin: 1rem 0 1.5rem !important;
 width: 100% !important;
 max-width: 100% !important;

}

/* Night mode root paint */ html.skin-theme-clientpref-night, html.skin-theme-clientpref-night body, .skin-theme-clientpref-night .mw-page-container, .skin-theme-clientpref-night .mw-body, html.skin-theme-clientpref-os, .skin-minerva.theme-dark, .skin-minerva { 

 background: var(--hdv-bg) !important;
 color: var(--hdv-text) !important;

}

h1, h2, h3, h4, h5, h6, .firstHeading, .mw-heading, .skin-minerva .page-heading, .skin-minerva h1, .skin-minerva h2 { 

 color: var(--hdv-primary-glow) !important;
 border-color: rgba(32, 240, 138, 0.28) !important;
 font-weight: 700;
 overflow-wrap: anywhere;
 word-break: break-word;

}

.mw-body-content, .mw-parser-output,

  1. mw-content-text p,

.vector-body, .skin-minerva .content p { 

 color: var(--hdv-text) !important;
 line-height: 1.65;
 font-size: 1.02rem;

}

.mw-parser-output .hdv-box, .mw-parser-output .hdv-callout, .mw-parser-output table.wikitable, .mw-parser-output .toc, .mw-parser-output .mw-headline-box, .skin-minerva table.wikitable { 

 background: rgba(20, 25, 39, 0.88) !important;
 border: 1px solid var(--hdv-line) !important;
 border-radius: var(--hdv-radius);
 color: var(--hdv-text) !important;

}

.mw-parser-output table.wikitable > * > tr > th, .skin-minerva table.wikitable th { 

 background: rgba(32, 240, 138, 0.12) !important;
 color: var(--hdv-primary-glow) !important;
 border-color: var(--hdv-line) !important;

}

.mw-parser-output table.wikitable > * > tr > td, .skin-minerva table.wikitable td { 

 border-color: var(--hdv-line) !important;
 background: transparent !important;

}

.mw-parser-output .toc { 

 padding: 1rem 1.2rem;

}

.mw-parser-output pre, .mw-parser-output code, .mw-code { 

 background: var(--hdv-surface-2) !important;
 color: var(--hdv-primary) !important;
 border-color: var(--hdv-line) !important;
 border-radius: 4px;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
 max-width: 100%;

}

.mw-parser-output .hdv-kicker { 

 display: inline-block;
 color: var(--hdv-primary);
 font-size: 0.72rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 font-weight: 700;
 margin: 0 0 0.15rem 0;
 line-height: 1.2;

}

.mw-parser-output .hdv-hero, .hdv-hero { 

 padding: 0.45rem 0.75rem;
 margin: 0 0 0.75rem;
 border-left: 3px solid var(--hdv-primary);
 background: linear-gradient(90deg, rgba(32, 240, 138, 0.10), rgba(20, 25, 39, 0.25));
 border-radius: 0 6px 6px 0;
 line-height: 1.35;

}

.mw-parser-output .hdv-hero p, .hdv-hero p { 

 margin: 0.15rem 0 0 0 !important;
 padding: 0 !important;
 line-height: 1.4 !important;
 font-size: 0.95rem !important;

}

.mw-parser-output .hdv-card, .hdv-card, a.hdv-card { 

 display: block !important;
 padding: 0.75rem 0.9rem !important;
 margin: 0 !important;
 border: 1px solid rgba(32, 240, 138, 0.22) !important;
 border-radius: var(--hdv-radius) !important;
 background: rgba(20, 25, 39, 0.72) !important;
 text-decoration: none !important;
 color: var(--hdv-text) !important;
 transition: border-color 0.15s ease, box-shadow 0.15s ease;
 min-height: 0 !important;
 box-sizing: border-box;

}

.mw-parser-output .hdv-card:hover, a.hdv-card:hover { 

 border-color: var(--hdv-primary);
 transform: none;
 box-shadow: 0 0 18px rgba(32, 240, 138, 0.14);

}

.mw-parser-output .hdv-card strong, a.hdv-card strong { 

 display: block !important;
 color: var(--hdv-primary-glow) !important;
 margin-bottom: 0.25rem !important;
 font-size: 1.02rem;

}

.mw-parser-output .hdv-meta { 

 color: var(--hdv-muted) !important;
 font-size: 0.88rem;
 line-height: 1.35;

}

.mw-parser-output .hdv-steps > li { 

 margin-bottom: 0.55rem;

}

/* Ficha tipo Wikipedia (derecha, compacta, assets pixel) */ .mw-parser-output .hdv-infobox, .hdv-infobox { 

 float: right;
 clear: right;
 width: 220px;
 max-width: 42%;
 margin: 0 0 1rem 1rem;
 padding: 0.55rem 0.6rem 0.7rem;
 background: rgba(16, 19, 29, 0.95);
 border: 1px solid rgba(32, 240, 138, 0.35);
 border-radius: var(--hdv-radius);
 box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
 font-size: 0.82rem;
 line-height: 1.35;

}

.mw-parser-output .hdv-infobox-title, .hdv-infobox-title { 

 text-align: center;
 font-weight: 700;
 color: var(--hdv-primary-glow) !important;
 margin: 0 0 0.4rem;
 font-size: 0.92rem;

}

.mw-parser-output .hdv-infobox-img, .hdv-infobox-img { 

 text-align: center;
 margin: 0 0 0.45rem;
 padding: 0.35rem;
 background: rgba(5, 8, 6, 0.85);
 border: 1px solid rgba(32, 240, 138, 0.18);
 border-radius: 4px;

}

.mw-parser-output .hdv-infobox img, .hdv-infobox img, .mw-parser-output img.hdv-pixel, img.hdv-pixel { 

 image-rendering: pixelated;
 image-rendering: crisp-edges;
 width: 64px !important;
 height: 64px !important;
 max-width: 64px !important;
 max-height: 64px !important;
 object-fit: contain;
 vertical-align: middle;

}

.mw-parser-output .hdv-infobox img.hdv-pixel-lg, img.hdv-pixel-lg { 

 width: 128px !important;
 height: 128px !important;
 max-width: 128px !important;
 max-height: 128px !important;

}

.mw-parser-output .hdv-infobox table, .hdv-infobox table { 

 width: 100%;
 border-collapse: collapse;
 margin: 0;

}

.mw-parser-output .hdv-infobox th, .hdv-infobox th { 

 text-align: left;
 color: var(--hdv-faint) !important;
 font-weight: 600;
 padding: 0.2rem 0.25rem 0.2rem 0;
 width: 38%;
 vertical-align: top;
 border: none !important;
 background: transparent !important;

}

.mw-parser-output .hdv-infobox td, .hdv-infobox td { 

 color: var(--hdv-text) !important;
 padding: 0.2rem 0;
 border: none !important;
 background: transparent !important;
 vertical-align: top;

}

.mw-parser-output .hdv-layout, .hdv-layout { 

 display: block;
 overflow: auto;

}

.mw-parser-output .hdv-boss { 

 display: grid;
 grid-template-columns: 96px 1fr;
 gap: 0.75rem;
 align-items: start;
 padding: 0.75rem;
 margin: 0.75rem 0;
 border: 1px solid rgba(32, 240, 138, 0.22);
 border-radius: var(--hdv-radius);
 background: rgba(20, 25, 39, 0.75);

}

.mw-parser-output .hdv-boss img { 

 width: 64px !important;
 height: 64px !important;
 max-width: 64px !important;
 image-rendering: pixelated;
 image-rendering: crisp-edges;
 object-fit: contain;
 background: #050806;
 border: 1px solid rgba(32, 240, 138, 0.25);
 border-radius: 4px;

}

/* Logo Vector: icono pixel pequeño, sin wordmark gigante ni inversión "negativo" */ .mw-logo-container.skin-invert, .mw-logo.skin-invert, .skin-invert .mw-logo-icon, .skin-invert .mw-logo img, .mw-logo-container { 

 filter: none !important;
 -webkit-filter: none !important;

}

.mw-logo-icon, .vector-icon.mw-logo-icon, .mw-logo img, .cdx-button .mw-logo-icon, a.mw-logo img { 

 width: 40px !important;
 height: 40px !important;
 max-width: 40px !important;
 max-height: 40px !important;
 object-fit: contain !important;
 image-rendering: pixelated !important;
 image-rendering: crisp-edges !important;
 filter: none !important;

}

.mw-logo-wordmark, .mw-logo-tagline { 

 display: none !important;

}

/* Ocultar Crear cuenta / Acceder (wiki de lectura) */

  1. pt-createaccount,
  2. pt-login,
  3. pt-login-2,
  4. pt-userpage,
  5. p-personal,
  6. p-vector-user-menu-overflow,
  7. vector-user-links-dropdown,

.vector-user-links-main, .vector-user-links-wide, .vector-user-menu-logged-out, .vector-user-menu-login, .vector-user-menu-create-account, li#pt-login, li#pt-login-2, li#pt-createaccount, a[href*="Special:CreateAccount"], a[href*="Special:UserLogin"], a[href*="Especial:Crear_una_cuenta"], a[href*="Especial:Entrar"] { 

 display: none !important;
 visibility: hidden !important;
 width: 0 !important;
 height: 0 !important;
 overflow: hidden !important;
 margin: 0 !important;
 padding: 0 !important;

}

.mw-parser-output .hdv-boss img, .mw-parser-output img, .skin-minerva .content img { 

 max-width: 100% !important;
 height: auto !important;
 image-rendering: pixelated;
 border-radius: 6px;

}

.mw-parser-output .hdv-boss img { 

 width: 100%;
 background: #050806;
 border: 1px solid rgba(32, 240, 138, 0.18);

}

.vector-menu-tabs, .vector-page-toolbar-container, .vector-dropdown-content, .vector-toc, .mw-portlet,

  1. p-logo,

.mw-footer, .minerva-header, .minerva-footer { 

 background: var(--hdv-surface) !important;
 color: var(--hdv-text) !important;
 border-color: var(--hdv-line) !important;

}

input, select, textarea, .oo-ui-inputWidget-input, .cdx-text-input__input, .skin-minerva input, .skin-minerva .search { 

 background: var(--hdv-surface-2) !important;
 color: var(--hdv-text) !important;
 border-color: var(--hdv-line) !important;
 font-size: 16px !important; /* evita zoom iOS */

}

.mw-ui-button.mw-ui-progressive, .cdx-button--action-progressive,

  1. searchButton,

.searchButton, .skin-minerva .mw-ui-button.mw-ui-progressive { 

 background: var(--hdv-primary) !important;
 color: var(--hdv-primary-ink) !important;
 border-color: var(--hdv-primary) !important;
 font-weight: 700;
 min-height: var(--hdv-touch);

}

.catlinks { 

 background: rgba(20, 25, 39, 0.85) !important;
 border: 1px solid var(--hdv-line) !important;
 border-radius: var(--hdv-radius);
 color: var(--hdv-muted) !important;

}

  1. footer-info,
  2. footer-places,
  3. footer-icons,

.mw-footer li, .minerva-footer { 

 color: var(--hdv-faint) !important;

}

/* Tablas: scroll horizontal en lugar de romper el layout */ .mw-parser-output .wikitable, .skin-minerva .wikitable { 

 display: block;
 width: 100%;
 max-width: 100%;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;

}

.mw-parser-output, .mw-body-content, .skin-minerva .content, .skin-minerva .mw-parser-output { 

 overflow-x: hidden;
 max-width: 100%;

}

.mw-parser-output > *, .skin-minerva .content > * { 

 max-width: 100%;

}

/* Minerva = vista móvil: siempre 1 columna, sin depender del ancho del emulador */ .skin-minerva .hdv-grid, .skin-minerva .mw-parser-output .hdv-grid { 

 grid-template-columns: 1fr !important;
 gap: 10px !important;

}

.skin-minerva a.hdv-card, .skin-minerva .mw-parser-output .hdv-card { 

 width: 100% !important;
 max-width: 100% !important;

}

.skin-minerva .hdv-hero, .skin-minerva .mw-parser-output .hdv-hero { 

 padding: 0.4rem 0.7rem;

}

.skin-minerva .mw-parser-output .hdv-boss { 

 grid-template-columns: 1fr !important;

}

.skin-minerva .content, .skin-minerva .mw-body, .skin-minerva .mw-parser-output { 

 overflow-x: hidden !important;

}

.skin-minerva table.wikitable { 

 display: block !important;
 overflow-x: auto !important;
 -webkit-overflow-scrolling: touch;

}

/* ========================= 

  RESPONSIVE — tablet
  ========================= */

@media (max-width: 960px) { 

 .mw-parser-output .hdv-grid,
 .hdv-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }

 .firstHeading,
 .mw-heading h1 {
   font-size: 1.55rem !important;
   line-height: 1.25 !important;
 }

}

/* ========================= 

  RESPONSIVE — móvil
  ========================= */

@media (max-width: 720px) { 

 .mw-parser-output .hdv-boss {
   grid-template-columns: 1fr;
 }

 .mw-parser-output .hdv-grid,
 .hdv-grid {
   grid-template-columns: 1fr !important;
   gap: 8px !important;
 }

 .mw-parser-output .hdv-hero,
 .hdv-hero {
   padding: 0.4rem 0.65rem !important;
   margin-bottom: 0.65rem !important;
   border-left-width: 3px;
   font-size: 0.92rem !important;
 }

 .mw-parser-output .hdv-infobox,
 .hdv-infobox {
   float: none !important;
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 0 0.85rem 0 !important;
 }

 a.hdv-card,
 .mw-parser-output .hdv-card {
   padding: 0.7rem 0.8rem !important;
   min-height: 0 !important;
 }

 a.hdv-card strong,
 .mw-parser-output .hdv-card strong {
   font-size: 0.95rem !important;
   margin-bottom: 0.2rem !important;
 }

 a.hdv-card .hdv-meta,
 .mw-parser-output .hdv-meta {
   font-size: 0.82rem !important;
 }

 .mw-body-content,
 .mw-parser-output,
 .skin-minerva .content,
 .skin-minerva .mw-parser-output,
 .skin-minerva .content p {
   font-size: 0.92rem !important;
   line-height: 1.45 !important;
 }

 .firstHeading,
 .page-heading h1,
 .mw-heading h1,
 .skin-minerva h1.page-heading,
 .skin-minerva .page-heading {
   font-size: 1.15rem !important;
   line-height: 1.2 !important;
   margin-bottom: 0.35rem !important;
 }

 .mw-heading h2,
 .skin-minerva h2,
 .mw-parser-output h2 {
   font-size: 1.05rem !important;
 }

 .mw-heading h3,
 .skin-minerva h3,
 .mw-parser-output h3 {
   font-size: 0.98rem !important;
 }

 .mw-parser-output .hdv-kicker {
   font-size: 0.65rem !important;
   letter-spacing: 0.06em;
 }

 .mw-body,
 #content,
 .mw-body-content,
 .skin-minerva .mw-body,
 .skin-minerva .content {
   padding-left: 0.65rem !important;
   padding-right: 0.65rem !important;
 }

 .mw-parser-output ol.hdv-steps,
 .mw-parser-output .hdv-steps {
   padding-left: 1rem;
 }

 .mw-parser-output table.wikitable th,
 .mw-parser-output table.wikitable td,
 .skin-minerva table.wikitable th,
 .skin-minerva table.wikitable td {
   font-size: 0.8rem !important;
   padding: 0.4rem 0.45rem !important;
 }

 .mw-parser-output a.image img,
 .skin-minerva .content img,
 .mw-parser-output img {
   max-width: min(100%, 220px) !important;
   max-height: 220px !important;
   object-fit: contain;
 }

 .mw-parser-output .thumb {
   margin: 0.4rem 0 !important;
   float: none !important;
   width: 100% !important;
 }

 .skin-minerva .page-actions-menu,
 .skin-minerva .last-modified-bar,
 .skin-minerva .tagline {
   font-size: 0.75rem !important;
 }

 .skin-minerva .branding-box img,
 .skin-minerva .mw-logo-icon {
   max-height: 28px !important;
   width: auto !important;
 }

}

/* ========================= 

  RESPONSIVE — móvil estrecho
  ========================= */

@media (max-width: 420px) { 

 .mw-body,
 #content,
 .mw-body-content,
 .skin-minerva .mw-body,
 .skin-minerva .content {
   padding-left: 0.7rem !important;
   padding-right: 0.7rem !important;
 }

 .firstHeading,
 .page-heading h1 {
   font-size: 1.22rem !important;
 }

 a.hdv-card strong {
   font-size: 1.02rem;
 }

}

/* Minerva: barra superior y overlays HDV */ .skin-minerva .header-container, .skin-minerva .minerva-header, .skin-minerva .overlay, .skin-minerva .menu, .skin-minerva .drawer { 

 background: var(--hdv-surface) !important;
 color: var(--hdv-text) !important;
 border-color: var(--hdv-line) !important;

}

.skin-minerva .branding-box, .skin-minerva .mw-logo-wordmark, .skin-minerva .last-modified-bar { 

 color: var(--hdv-muted) !important;

}

.skin-minerva .page-actions-menu__list-item a, .skin-minerva .toggle-list-item__label { 

 color: var(--hdv-text) !important;
 min-height: var(--hdv-touch);

}

/* Safe area (notch / home indicator) */ @supports (padding: max(0px)) { 

 .skin-minerva .minerva-header,
 .vector-header-container {
   padding-left: max(0.5rem, env(safe-area-inset-left));
   padding-right: max(0.5rem, env(safe-area-inset-right));
 }

 .skin-minerva .mw-body,
 .mw-body {
   padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
 }

}

Obtenido de «https://wiki.hubdevors.com/index.php?title=MediaWiki:Common.css&oldid=7530»