Diferencia entre revisiones de «MediaWiki:Common.css»

Revisión del 21:38 2 abr 2026

/* ========================================================================
   OROZA WIKI - ESTILOS BASE PREMIUM PARA GUIAS
   Archivo pensado para: MediaWiki:Common.css
   ------------------------------------------------------------------------
   Enfoque:
   - Base visual moderna y premium
   - Ideal para guias de sistemas de juego
   - Compatible con MediaWiki
   - Sin estilos de navbar ni sidebar
======================================================================== */


/* ========================================================================
   1. VARIABLES GLOBALES
   ------------------------------------------------------------------------
   Paleta principal, sombras, radios y transiciones reutilizables.
======================================================================== */
:root {
    --oroza-bg: #eef2f7;
    --oroza-bg-soft: #f8fafc;
    --oroza-surface: #ffffff;
    --oroza-surface-2: #f9fbff;

    --oroza-text: #2f3640;
    --oroza-text-soft: #647084;
    --oroza-text-muted: #7d8796;

    --oroza-heading: #203a57;
    --oroza-heading-2: #2b4a6d;
    --oroza-heading-dark: #16283d;

    --oroza-primary: #2f76c2;
    --oroza-primary-soft: #edf5ff;
    --oroza-primary-border: #d6e6f8;

    --oroza-accent: #e5b94b;
    --oroza-accent-strong: #d89a00;
    --oroza-accent-soft: #fff5d9;

    --oroza-success: #2c9c61;
    --oroza-success-soft: #ebfff3;

    --oroza-warning: #d48b1f;
    --oroza-warning-soft: #fff6e8;

    --oroza-danger: #c45454;
    --oroza-danger-soft: #fff1f1;

    --oroza-border: #dbe3ec;
    --oroza-border-soft: #e9eef5;

    --oroza-shadow-xs: 0 2px 6px rgba(23, 39, 58, 0.05);
    --oroza-shadow-sm: 0 8px 20px rgba(23, 39, 58, 0.07);
    --oroza-shadow-md: 0 14px 36px rgba(23, 39, 58, 0.10);
    --oroza-shadow-lg: 0 20px 50px rgba(23, 39, 58, 0.14);

    --oroza-radius-sm: 10px;
    --oroza-radius-md: 16px;
    --oroza-radius-lg: 24px;

    --oroza-transition-fast: 0.2s ease;
    --oroza-transition: 0.28s ease;
}


/* ========================================================================
   2. BASE GENERAL DEL SITIO
   ------------------------------------------------------------------------
   Fondo general con un look más premium y menos plano.
======================================================================== */
body {
    background:
        radial-gradient(circle at top left, rgba(229, 185, 75, 0.10), transparent 24%),
        radial-gradient(circle at top right, rgba(47, 118, 194, 0.08), transparent 28%),
        linear-gradient(180deg, #f8fafd 0%, #eef2f7 100%);
    color: var(--oroza-text);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.7;
}


/* ========================================================================
   3. CONTENEDOR PRINCIPAL
   ------------------------------------------------------------------------
   Caja principal del contenido con más presencia visual.
======================================================================== */
#content {
    max-width: 1220px;
    margin: 26px auto;
    padding: 34px 38px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid rgba(219, 227, 236, 0.9);
    border-radius: var(--oroza-radius-md);
    box-shadow: var(--oroza-shadow-md);
}

.mw-body,
.mw-body-content,
.mw-parser-output {
    color: var(--oroza-text);
    line-height: 1.7;
}

.mw-parser-output p {
    margin: 0 0 18px;
    color: var(--oroza-text);
}


/* ========================================================================
   4. TITULO PRINCIPAL DE PAGINA
   ------------------------------------------------------------------------
   Más imponente, elegante y apropiado para guias destacadas.
======================================================================== */
.firstHeading {
    position: relative;
    margin: 0 0 28px;
    padding-bottom: 18px;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.2px;
    color: var(--oroza-heading);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.firstHeading::after {
    content: "";
    display: block;
    width: 110px;
    height: 4px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--oroza-accent), var(--oroza-primary));
    box-shadow: 0 0 12px rgba(229, 185, 75, 0.22);
}


/* ========================================================================
   5. TABLA DE CONTENIDO
   ------------------------------------------------------------------------
   Se convierte en una caja elegante y más integrada al diseño.
======================================================================== */
#toc {
    margin: 26px 0 30px;
    padding: 18px 20px;
    background: linear-gradient(180deg, #f9fcff 0%, #f1f7ff 100%);
    border: 1px solid var(--oroza-primary-border);
    border-radius: var(--oroza-radius-sm);
    box-shadow: var(--oroza-shadow-sm);
}

#toc .toctitle {
    margin-bottom: 10px;
}

#toc .toctitle h2 {
    margin: 0;
    padding: 0;
    border: none !important;
    text-align: left;
    font-size: 1.15rem;
    color: var(--oroza-heading);
    box-shadow: none;
    background: none !important;
}

#toc ul {
    margin: 8px 0 0;
    padding-left: 22px;
}

#toc li {
    margin: 6px 0;
}

#toc a {
    color: var(--oroza-primary);
    font-weight: 600;
}


/* ========================================================================
   6. ENLACES
   ------------------------------------------------------------------------
   Enlaces con mejor jerarquía y hover más elegante.
======================================================================== */
a,
.mw-body a,
.mw-parser-output a {
    color: var(--oroza-primary);
    text-decoration: none;
    font-weight: 600;
    transition:
        color var(--oroza-transition-fast),
        opacity var(--oroza-transition-fast);
}

a:hover,
.mw-body a:hover,
.mw-parser-output a:hover {
    color: var(--oroza-heading-dark);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}


/* ========================================================================
   7. TITULOS Y SUBTITULOS
   ------------------------------------------------------------------------
   Jerarquía visual más moderna para guias.
   - h1 se mantiene más hero
   - h2/h3/h4 funcionan como secciones elegantes
======================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: var(--oroza-heading);
    line-height: 1.3;
    border-bottom: none !important;
    background: none !important;
}

/* Titulo mayor dentro del contenido */
h1 {
    margin: 40px 0 20px;
    text-align: center;
    font-size: 2.6rem;
    font-weight: 800;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* Secciones principales */
h2 {
    position: relative;
    margin: 42px 0 18px;
    padding: 0 0 12px 18px;
    text-align: left;
    font-size: 1.9rem;
    font-weight: 800;
    border-left: 5px solid var(--oroza-accent);
}

h2::after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: 0;
    width: 95px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--oroza-accent), transparent);
}

/* Subsecciones */
h3 {
    margin: 30px 0 14px;
    padding-bottom: 8px;
    text-align: left;
    font-size: 1.45rem;
    font-weight: 750;
    color: var(--oroza-heading-2);
    border-bottom: 1px solid var(--oroza-border-soft) !important;
}

/* Niveles menores */
h4 {
    margin: 24px 0 10px;
    text-align: left;
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--oroza-heading-2);
}

h5 {
    margin: 20px 0 10px;
    text-align: left;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--oroza-heading-2);
}

h6 {
    margin: 18px 0 8px;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--oroza-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}


/* ========================================================================
   8. TEXTO AUXILIAR Y ESPACIADOS
   ------------------------------------------------------------------------
   Mejora legibilidad en listas y estructuras de texto comunes.
======================================================================== */
ul,
ol {
    margin: 0 0 22px;
    padding-left: 28px;
}

li {
    margin-bottom: 8px;
}

li > ul,
li > ol {
    margin-top: 8px;
    margin-bottom: 10px;
}

b,
strong {
    color: var(--oroza-heading-dark);
}


/* ========================================================================
   9. BOTONES / ENLACES DESTACADOS
   ------------------------------------------------------------------------
   Pensados para botones de guias, enlaces rapidos o acciones visuales.
======================================================================== */
.button-icon {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--oroza-heading) 0%, var(--oroza-primary) 100%);
    color: #ffffff !important;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-decoration: none;
    box-shadow:
        0 10px 22px rgba(32, 58, 87, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition:
        transform var(--oroza-transition),
        box-shadow var(--oroza-transition),
        filter var(--oroza-transition);
}

.button-icon::before {
    content: "✦";
    font-size: 0.9rem;
    line-height: 1;
    color: #ffe7a2;
}

.button-icon:hover {
    color: #ffffff !important;
    text-decoration: none;
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow:
        0 14px 28px rgba(32, 58, 87, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}


/* ========================================================================
   10. CAJAS INFORMATIVAS
   ------------------------------------------------------------------------
   Ahora se ven más premium y menos planas.
======================================================================== */
.box-info,
.box-warning,
.box-tip {
    position: relative;
    margin: 22px 0;
    padding: 18px 18px 18px 20px;
    border: 1px solid transparent;
    border-radius: 14px;
    box-shadow: var(--oroza-shadow-sm);
    overflow: hidden;
}

.box-info::before,
.box-warning::before,
.box-tip::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.box-info {
    background: linear-gradient(180deg, #f7fbff 0%, var(--oroza-primary-soft) 100%);
    border-color: var(--oroza-primary-border);
}

.box-info::before {
    background: linear-gradient(90deg, var(--oroza-primary), #6bb3ff);
}

.box-warning {
    background: linear-gradient(180deg, #fffaf2 0%, var(--oroza-warning-soft) 100%);
    border-color: #f2d7ac;
}

.box-warning::before {
    background: linear-gradient(90deg, var(--oroza-warning), #ffcf70);
}

.box-tip {
    background: linear-gradient(180deg, #f5fff9 0%, var(--oroza-success-soft) 100%);
    border-color: #cfead9;
}

.box-tip::before {
    background: linear-gradient(90deg, var(--oroza-success), #67d89b);
}


/* ========================================================================
   11. TABLAS PREMIUM
   ------------------------------------------------------------------------
   Más elegantes y modernas para rates, drops, requisitos, premios, etc.
======================================================================== */
.oroza-table {
    width: 100%;
    margin: 24px 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--oroza-surface);
    border: 1px solid var(--oroza-border);
    border-radius: 14px;
    overflow: hidden;
    font-size: 14px;
    box-shadow: var(--oroza-shadow-sm);
}

.oroza-table thead {
    background: linear-gradient(135deg, var(--oroza-heading) 0%, var(--oroza-heading-2) 100%);
    color: #ffffff;
}

.oroza-table th,
.oroza-table td {
    padding: 13px 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--oroza-border-soft);
}

.oroza-table th {
    font-weight: 700;
    letter-spacing: 0.2px;
}

.oroza-table tbody tr {
    transition: background-color var(--oroza-transition-fast);
}

.oroza-table tbody tr:nth-child(even) {
    background: #fbfcfe;
}

.oroza-table tbody tr:hover {
    background: #f3f8ff;
}

.oroza-table tbody tr:last-child td {
    border-bottom: none;
}

.oroza-table .highlight {
    color: var(--oroza-accent-strong);
    font-weight: 800;
}

.oroza-table .center-icon {
    text-align: center;
    font-size: 18px;
}

.oroza-table .zeny {
    color: var(--oroza-success);
    font-weight: 800;
}

.oroza-table.auto-width {
    display: table;
    width: auto !important;
    max-width: 100%;
    margin: 24px auto;
    table-layout: auto !important;
}


/* ========================================================================
   12. IMAGENES
   ------------------------------------------------------------------------
   Mejor presencia visual para capturas, banners, NPCs e items importantes.
======================================================================== */
.zoom-img {
    position: relative;
    z-index: 1;
    cursor: zoom-in;
    border-radius: 12px;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        filter 0.28s ease;
}

.zoom-img:hover {
    z-index: 10;
    transform: scale(1.12);
    filter: saturate(1.03);
    box-shadow: var(--oroza-shadow-lg);
}

img.round-fade {
    display: block;
    width: 58%;
    margin: 16px auto;
    border: 1px solid rgba(219, 227, 236, 0.9);
    border-radius: var(--oroza-radius-lg);
    object-fit: cover;
    opacity: 0.99;
    background: #ffffff;
    box-shadow:
        0 18px 36px rgba(24, 39, 56, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition:
        transform 0.30s ease,
        box-shadow 0.30s ease,
        opacity 0.30s ease;
}

img.round-fade:hover {
    transform: translateY(-2px) scale(1.03);
    opacity: 1;
    box-shadow:
        0 22px 46px rgba(24, 39, 56, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}


/* ========================================================================
   13. DETALLES REUTILIZABLES PARA FUTURAS GUIAS
   ------------------------------------------------------------------------
   Clases extra que te pueden servir mucho como base de todo tu sistema.
======================================================================== */
.oroza-chip {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ead9a4;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff9e8 0%, #fff3cb 100%);
    color: #8a6410;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.oroza-divider {
    height: 1px;
    margin: 28px 0;
    background: linear-gradient(90deg, transparent, rgba(43, 74, 109, 0.18), transparent);
    border: none;
}

.oroza-panel {
    margin: 22px 0;
    padding: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid var(--oroza-border);
    border-radius: 14px;
    box-shadow: var(--oroza-shadow-sm);
}


/* ========================================================================
   14. AJUSTES DE MEDIAWIKI
   ------------------------------------------------------------------------
   Mantengo solo lo minimo que ya estabas usando para el layout.
======================================================================== */
.toggle-checkbox,
.toggle-label {
    display: none !important;
}


/* ========================================================================
   15. RESPONSIVE
   ------------------------------------------------------------------------
   Ajustes para movil y pantallas reducidas.
======================================================================== */
@media screen and (max-width: 768px) {
    #content {
        margin: 14px auto;
        padding: 22px 18px;
        border-radius: 14px;
    }

    .firstHeading {
        font-size: 2rem;
        padding-bottom: 14px;
    }

    h1 {
        font-size: 2.1rem;
    }

    h2 {
        padding-left: 14px;
        font-size: 1.55rem;
    }

    h2::after {
        left: 14px;
        width: 72px;
    }

    h3 {
        font-size: 1.28rem;
    }

    h4 {
        font-size: 1.08rem;
    }

    #toc {
        padding: 16px;
    }

    .oroza-table {
        font-size: 13px;
    }

    .oroza-table th,
    .oroza-table td {
        padding: 11px 12px;
    }

    img.round-fade {
        width: 88%;
    }

    .zoom-img:hover {
        transform: scale(1.05);
    }
}