Diferencia entre revisiones de «MediaWiki Common css 20251205»

De FSF
Sin resumen de edición
Sin resumen de edición
 
Línea 161: Línea 161:


</pre>
</pre>
----
[[CATEGORY:WIKICOMMON]]

Revisión actual - 09:03 5 dic 2025

/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */

/* Colocar la Tabla de Contenidos en el lado derecho */
#toc {
    float: right;           /* Mueve la ToC a la derecha */
    margin-left: 1em;       /* Agrega espacio a la izquierda de la ToC */
    width: 400px;           /* Ajusta el ancho de la ToC según lo que necesites */
    background-color: #f9f9f9; /* Color de fondo opcional para destacarla */
    border: 1px solid #ccc; /* Borde opcional para darle un contorno */
    padding: 10px;          /* Espacio interno para que el contenido no esté pegado a los bordes */
}

/* Evitar que el contenido principal se solape con la ToC */
#mw-content-text {
    overflow: hidden;
}

/* Quitar el logo; de todas maneras no funcionaba 20250926 */

#p-logo, .mw-wiki-logo {
    display: none;
}

/************************************************************
   ESTILO FSF — Encabezados, ToC y mejoras de lectura
   Autor: ChatGPT & Ziv — 2025-12-05
*************************************************************/

/* --------------------------
   COLORES ↑ estilo A1/A2
--------------------------- */
h1, h2, h3, h4, h5, h6 {
    color: #00527A !important;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 0.55em !important;
    margin-bottom: 0.28em !important;
    scroll-margin-top: 80px; /* mejor navegación interna */
    transition: color 0.25s ease, letter-spacing 0.25s ease;
}

/* pequeña animación al pasar el cursor */
h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
    color: #007FB3 !important;
    letter-spacing: 0.5px;
}

/* --------------------------
   TOC (Tabla de Contenidos)
--------------------------- */

#toc, .toc, .mw-table-of-contents {
    border: 1px solid #B8D7E6;
    background: #F7FCFE;
    padding: 1em 1.2em;
    border-radius: 0.6em;
    box-shadow: 0 0 4px rgba(0,0,0,0.08);
    font-size: 0.95em;
    color: #003A52;
    width: fit-content;
    max-width: 30%;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* efecto suave al pasar cursor */
#toc:hover {
    box-shadow: 0 0 12px rgba(0,0,0,0.12);
    transform: scale(1.015);
}

/* enlaces del ToC */
#toc a {
    color: #00527A;
    text-decoration: none;
    transition: color 0.2s ease;
}

#toc a:hover {
    color: #0084B8;
    text-decoration: underline;
}

/* numeración más compacta */
#toc ul, #toc ol {
    margin-left: 1em;
}

/* título del ToC */
#toc .toctitle {
    font-weight: 700;
    color: #003A52;
    padding-bottom: 0.3em;
}

/* --------------------------
   MEJORAS EN TEXTO GENERAL
--------------------------- */

body, #content {
    line-height: 1.55;
}

/* enlaces internos más suaves */
a {
    transition: color 0.25s ease;
}
a:hover {
    color: #007FB3;
}

/* --------------------------
   MÓVILES (responsive)
--------------------------- */

@media (max-width: 900px) {

    /* encabezados un poco más compactos */
    h1, h2, h3, h4, h5, h6 {
        margin-top: 0.45em !important;
        margin-bottom: 0.22em !important;
    }

    /* ToC ocupa todo a lo ancho y más legible */
    #toc {
        width: 100%;
        font-size: 1em;
        padding: 1em;
    }

    /* espaciado más cómodo */
    #toc ul, #toc ol {
        margin-left: 0.8em;
    }
}

/* --------------------------
   ULTRA-MÓVIL < 480px
--------------------------- */

@media (max-width: 480px) {
    h1 { font-size: 1.55em; }
    h2 { font-size: 1.35em; }
    h3 { font-size: 1.18em; }
    h4, h5, h6 { font-size: 1.05em; }

    #toc {
        font-size: 1.05em;
        padding: 1em;
    }
}

----
/* Ajusto los espacios en blanco al usar los encabezados y divisiones que se crean para el ToC con la intensión de que sean mas compactos, agradables de leer en textos largo o tratar de que se se parezca mas el contenido a el formato que presentan herramientas como CHATGPT que es una herramientas que estoy utilizando mucho para crear esta wiki FSF. */
/* Nota: En el skin Timeless, los encabezados utilizan márgenes amplios por defecto, lo que genera espacios grandes entre secciones. Los valores típicos son: h1 (1.4em arriba / 0.6em abajo), h2 (1.2em / 0.5em), h3 (1em / 0.4em) y h4–h6 (0.8–0.6em / 0.3–0.2em). Si se desea un estilo más compacto, estos márgenes pueden ajustarse mediante CSS en '''MediaWiki:Common.css'''.*/</small>
h2 { margin-top: 0.25em !important; margin-bottom: 0.10em !important;}
h3 { margin-top: 0.20em !important; margin-bottom: 0.05em !important;}
h4 { margin-top: 0.15em !important; margin-bottom: 0.03em !important;}
h5 { margin-top: 0.10em !important; margin-bottom: 0.02em !important;}
h6 { margin-top: 0.10em !important; margin-bottom: 0.02em !important;}