Diferencia entre revisiones de «MediaWiki:Common.css»
De FSF
Sin resumen de edición |
Sin resumen de edición Etiqueta: Revertido |
||
| Línea 1: | Línea 1: | ||
/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */ | /* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */ | ||
/* | /* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */ | ||
#toc { | |||
float: right; | /* ============================ | ||
margin-left: 1em; | TOC flotado a la derecha | ||
============================ */ | |||
background-color: #f9f9f9; | |||
border: 1px solid #ccc; | #toc, | ||
padding: 10px; | .mw-parser-output > .toc { | ||
float: right; | |||
width: 400px; | |||
margin-left: 1em; | |||
background-color: #f9f9f9; | |||
border: 1px solid #ccc; | |||
padding: 10px; | |||
border-radius: 10px; | |||
box-shadow: 0 0 10px rgba(0,0,0,0.06); | |||
transition: box-shadow 0.3s ease, border-color 0.3s ease; | |||
} | } | ||
#toc:hover, | |||
.mw-parser-output > .toc:hover { | |||
border-color: #d7bfa2; | |||
box-shadow: 0 0 14px rgba(215, 191, 162, 0.4); | |||
} | } | ||
/* | /* ============================ | ||
Evitar solapamiento de contenido | |||
============================ */ | |||
#mw-content-text { overflow: hidden; } | |||
#p-logo, .mw-wiki-logo { | /* ============================ | ||
Ocultar logo | |||
} | ============================ */ | ||
#p-logo, .mw-wiki-logo { display: none; } | |||
/* | /* ============================ | ||
HR — Estilo colorido FSF | |||
============================ */ | |||
hr { | hr { | ||
border: 0; | border: 0; | ||
height: 2px; | height: 2px; | ||
margin | margin: 0.3em 0 !important; | ||
border-radius: 2px; | border-radius: 2px; | ||
background: linear-gradient( | background: linear-gradient( | ||
| Línea 45: | Línea 56: | ||
} | } | ||
hr:hover { | hr:hover { | ||
transform: scale(1.015); | transform: scale(1.015); | ||
| Línea 51: | Línea 61: | ||
} | } | ||
/* | /* ============================ | ||
ENCABEZADOS — Estilo elegante | |||
============================ */ | |||
ENCABEZADOS | |||
h1, h2, h3 { | .mw-parser-output h1, | ||
.mw-parser-output h2, | |||
.mw-parser-output h3 { | |||
position: relative; | position: relative; | ||
padding-bottom: 0.45em; | padding-bottom: 0.45em; | ||
margin- | scroll-margin-top: 90px; | ||
color: #00527a; | |||
transition: color 0.3s ease, text-shadow 0.3s ease; | transition: color 0.3s ease, text-shadow 0.3s ease; | ||
} | } | ||
/* | /* Compactación real (soluciona espaciado) */ | ||
h1 | .mw-parser-output h1, | ||
h2 { | .mw-parser-output h2, | ||
.mw-parser-output h3, | |||
.mw-parser-output h4, | |||
.mw-parser-output h5, | |||
.mw-parser-output h6 { | |||
margin-top: 0.10em !important; | |||
margin-bottom: 0.02em !important; | |||
} | |||
/* Línea inferior | /* Línea inferior */ | ||
h1::after, | .mw-parser-output h1::after, | ||
h2::after, | .mw-parser-output h2::after, | ||
h3::after { | .mw-parser-output h3::after { | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
| Línea 90: | Línea 95: | ||
bottom: 0; | bottom: 0; | ||
width: 55%; | width: 55%; | ||
height: 2px; | height: 2px; | ||
background: linear-gradient( | background: linear-gradient( | ||
to right, | to right, | ||
| Línea 103: | Línea 108: | ||
} | } | ||
.mw-parser-output h1:hover::after, | |||
h1:hover::after, | .mw-parser-output h2:hover::after, | ||
h2:hover::after, | .mw-parser-output h3:hover::after { | ||
h3:hover::after { | width: 80%; | ||
width: 80%; | |||
opacity: 1; | opacity: 1; | ||
filter: blur(1.3px); | filter: blur(1.3px); | ||
} | } | ||
.mw-parser-output h1:hover, | |||
h1:hover, h2:hover, h3:hover { | .mw-parser-output h2:hover, | ||
.mw-parser-output h3:hover { | |||
text-shadow: 0px 0px 6px rgba(255, 255, 230, 0.4); | text-shadow: 0px 0px 6px rgba(255, 255, 230, 0.4); | ||
} | } | ||
/* | /* ============================ | ||
MÓVILES | |||
============================ */ | |||
MÓVILES | |||
@media (max-width: 720px) { | @media (max-width: 720px) { | ||
h1::after, h2::after, h3::after { | .mw-parser-output h1::after, | ||
.mw-parser-output h2::after, | |||
.mw-parser-output h3::after { | |||
width: 75%; | width: 75%; | ||
opacity: 0.9; | opacity: 0.9; | ||
} | } | ||
#toc { | #toc, | ||
.mw-parser-output > .toc { | |||
font-size: 0.95em; | font-size: 0.95em; | ||
padding: 0.8em 1em; | padding: 0.8em 1em; | ||
} | } | ||
} | } | ||
Revisión del 10:17 5 dic 2025
/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */
/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */
/* ============================
TOC flotado a la derecha
============================ */
#toc,
.mw-parser-output > .toc {
float: right;
width: 400px;
margin-left: 1em;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.06);
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
#toc:hover,
.mw-parser-output > .toc:hover {
border-color: #d7bfa2;
box-shadow: 0 0 14px rgba(215, 191, 162, 0.4);
}
/* ============================
Evitar solapamiento de contenido
============================ */
#mw-content-text { overflow: hidden; }
/* ============================
Ocultar logo
============================ */
#p-logo, .mw-wiki-logo { display: none; }
/* ============================
HR — Estilo colorido FSF
============================ */
hr {
border: 0;
height: 2px;
margin: 0.3em 0 !important;
border-radius: 2px;
background: linear-gradient(
90deg,
#00527A 0%,
#0093C9 25%,
#00BFD6 50%,
#0093C9 75%,
#00527A 100%
);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
hr:hover {
transform: scale(1.015);
box-shadow: 0 0 10px rgba(0, 147, 201, 0.35);
}
/* ============================
ENCABEZADOS — Estilo elegante
============================ */
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3 {
position: relative;
padding-bottom: 0.45em;
scroll-margin-top: 90px;
color: #00527a;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
/* Compactación real (soluciona espaciado) */
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
margin-top: 0.10em !important;
margin-bottom: 0.02em !important;
}
/* Línea inferior */
.mw-parser-output h1::after,
.mw-parser-output h2::after,
.mw-parser-output h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 55%;
height: 2px;
background: linear-gradient(
to right,
rgba(255, 244, 230, 0.0) 0%,
rgba(255, 244, 230, 0.55) 50%,
rgba(255, 244, 230, 0.0) 100%
);
border-radius: 4px;
filter: blur(1.8px);
opacity: 0.85;
transition: width 0.45s ease, opacity 0.3s ease, filter 0.45s ease;
}
.mw-parser-output h1:hover::after,
.mw-parser-output h2:hover::after,
.mw-parser-output h3:hover::after {
width: 80%;
opacity: 1;
filter: blur(1.3px);
}
.mw-parser-output h1:hover,
.mw-parser-output h2:hover,
.mw-parser-output h3:hover {
text-shadow: 0px 0px 6px rgba(255, 255, 230, 0.4);
}
/* ============================
MÓVILES
============================ */
@media (max-width: 720px) {
.mw-parser-output h1::after,
.mw-parser-output h2::after,
.mw-parser-output h3::after {
width: 75%;
opacity: 0.9;
}
#toc,
.mw-parser-output > .toc {
font-size: 0.95em;
padding: 0.8em 1em;
}
}