Diferencia entre revisiones de «MediaWiki:Common.css»
De Amereida
| Línea 245: | Línea 245: | ||
| − | /* Estilos específicos para | + | /* Estilos específicos para los logos flotantes */ |
.logos-flotantes { | .logos-flotantes { | ||
| − | position: sticky; /* | + | position: sticky; /* Mantener posición fija al recorrer */ |
| − | top: | + | top: 20px; /* Distancia desde la parte superior */ |
| + | left: 0; /* Alinear al lado izquierdo */ | ||
display: flex; | display: flex; | ||
| − | flex-direction: column; /* | + | flex-direction: column; /* Alineación vertical */ |
| − | align-items: center; /* Centrar horizontalmente */ | + | align-items: center; /* Centrar los elementos horizontalmente */ |
| − | width: | + | width: 100px; /* Ancho fijo para el contenedor */ |
padding: 8px; /* Espaciado interno */ | padding: 8px; /* Espaciado interno */ | ||
| − | + | z-index: 10; /* Asegurar que esté por encima de otros elementos */ | |
| − | z-index: 10; /* | ||
} | } | ||
.logo-container { | .logo-container { | ||
| − | margin-bottom: | + | margin-bottom: 8px; /* Espaciado entre logos */ |
border-radius: 8px; /* Bordes redondeados */ | border-radius: 8px; /* Bordes redondeados */ | ||
| + | overflow: hidden; /* Asegurar que los bordes redondeados se apliquen */ | ||
} | } | ||
.logo { | .logo { | ||
| − | max-width: 100%; /* | + | max-width: 100%; /* Escalar para que encaje dentro del contenedor */ |
height: auto; /* Mantener proporciones */ | height: auto; /* Mantener proporciones */ | ||
| − | display: block; | + | display: block; |
} | } | ||
| − | /* | + | /* Responsividad para dispositivos móviles */ |
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.logos-flotantes { | .logos-flotantes { | ||
| − | position: fixed; /* | + | position: fixed; /* Fijar al fondo de la pantalla */ |
| − | bottom: 0; /* | + | bottom: 0; /* Alinear al fondo */ |
| − | top: auto; /* | + | top: auto; /* Ignorar el valor superior */ |
| − | width: 100%; /* | + | left: 50%; /* Centrar horizontalmente */ |
| − | flex-direction: row; /* | + | transform: translateX(-50%); /* Centrar el contenedor */ |
| + | width: 100%; /* Ocupa el ancho completo */ | ||
| + | flex-direction: row; /* Cambiar a alineación horizontal */ | ||
justify-content: space-around; /* Espacio uniforme entre logos */ | justify-content: space-around; /* Espacio uniforme entre logos */ | ||
| − | padding: 8px | + | padding: 8px; /* Espaciado reducido */ |
} | } | ||
.logo-container { | .logo-container { | ||
| − | margin-bottom: 0; /* | + | margin-bottom: 0; /* Eliminar espaciado vertical */ |
| − | margin-right: | + | margin-right: 8px; /* Espaciado horizontal */ |
} | } | ||
.logo { | .logo { | ||
| − | max-width: 48px; /* Tamaño | + | max-width: 48px; /* Tamaño más pequeño para pantallas móviles */ |
| − | |||
} | } | ||
} | } | ||
Revisión del 12:48 3 dic 2024
/* Pantallas pequeñas */
@media (max-width: 768px){
div.thumb-text{
float: none !important;
max-width: 100% !important;
margin: 0 0 2em 0 !important;
}
div.footerwrap > div.container{
margin: 0 2em !important;
}
.smwofooterrow nav.navbar ul.navbar-nav{
text-align: center !important;
}
.smwofooterrow .nav > li,
.smwofooterrow .nav > li > a{
display: inline-block !important;
}
}
/* Ancho de las páginas */
.mw-body{
max-width: 52em;
margin: 0 auto;
}
/* Títulos de páginas */
.firstHeading{
font-size: 12px;
font-family: "Alegreya Sans";
letter-spacing: .24ex;
text-transform: uppercase;
font-weight: 600;
}
.poem{
white-space: pre-wrap;
}
.poem p{
font: 18px/24px Alegreya,"Times New Roman", Times, serif;
margin: 0;
}
.poem br{display: none}
.rounded{border-radius:4px}
.note{
font-size: 75%;
margin: 1em 1em 1em 35%;
border: 1px solid #EEE;
border-radius: 4px;
padding: 2em;
}
/* Ajuste de formularios cabeceras de campos en formularios */
table.formtable tr {
border-bottom: 2ex solid transparent;
}
table.formtable tr th{
text-align: right;
padding-right: 1ex;
}
label.checkboxLabel {
font-weight: normal;
margin-right: 1em;
}
.pfAddressInput,
.pfCoordsInput,
.pfLookUpAddress,
.pfUploadable{
padding: 4px 8px;
border: 1px solid rgb(187,187,187);
border-radius: 4px;
}
/* licencias para archivos */
.licence{
padding: 1em 2ex;
border: 1px solid #EEE;
border-radius: 1ex;
font-size: 75%;
line-height: 120%;
}
.licence .image{
float: left;
display: inline-block;
margin-right: 1em;
}
.clearfix {overflow: auto;}
.clearfix::after{
content: "";
clear: both;
display: table;
}
/* color de enlaces a páginas inexistentes */
a.new:link, a.new:hover, a.new:visited{
color: #666;
}
/* ficha de textos */
div.thumb-text{
float: right;
max-width: 320px;
background-color: #EFEFE1;
font-size: 80%;
margin: 0 0 2em 2em;
padding: 0 1em 2em 1em;
line-height: 120%;
break-inside: avoid
}
div.thumb-text .key{
text-align: right;
min-width: 80px;
font-weight: bold;
}
div.thumb-text div.img{
padding: 0;
text-align: center;
margin-bottom: 2ex;
}
div.thumb-text div.img img{border-radius:3px}
div.thumb-text div.title{
font-family: Alegreya;
font-size: 110%;
text-align: center;
vertical-align: text-bottom;
padding: 1em 0 1em 0;
}
/* resultados multicolumna */
.columns{
box-sizing: border-box;
columns: 250px;
column-gap: 20px;
}
.columns-sm{
box-sizing: border-box;
columns: 110px;
column-gap: 20px;
}
/* ficha de acontecer */
.event,
.thumb-event{
background-color: #EFEFE1;
border-radius: 4px;
padding: 8px;
margin-bottom: 2em;
break-inside: avoid;
}
.thumb-event .text{padding: 8px;}
.event .title,
.thumb-event .text .title{
display: inherit;
text-transform: uppercase;
font-weight: 800;
line-height: 100%;
}
.thumb-event .text .date{
margin-top: -5px;
display: inherit;
font-style: italic;
font-weight: 100;
}
.thumb-event .text .excerpt{
font-size: 80%;
line-height: 100%;
}
div.thumb-text .key,
div.thumb-text .value{
display: table-cell;
padding: .3ex 1ex;
vertical-align: top;
}
.event .leyend{padding: 12px;}
.nota{
width: 50%;
float:right;
font-size: 75%;
padding: 1em;
margin: 0 0 1em 1em;
background-colo: #EEE;
}
/* ficha obra */
.obra{
background-color: #EFEFE1;
border-radius: 4px;
padding: 8px;
margin-bottom: 2em;
}
/* ficha documento */
.thumb-doc > .text{
text-align:center;
}
.thumb-doc > .text > .title{
display: block;
line-height: 111%;
font-family: Alegreya;
font-size: 80%;
}
.thumb-doc > .text > .title > a{
display: block;
border-radius: 3px;
padding: 1ex;
}
.thumb-doc > .text > .title > a:hover{
background-color: #EFEFE1;
text-decoration: none;
}
/* Image Uploader Wizard fix */
#mwe-upwiz-steps li {
list-style-image: none;
list-style-type: none;
}
/* Estilos específicos para los logos flotantes */
.logos-flotantes {
position: sticky; /* Mantener posición fija al recorrer */
top: 20px; /* Distancia desde la parte superior */
left: 0; /* Alinear al lado izquierdo */
display: flex;
flex-direction: column; /* Alineación vertical */
align-items: center; /* Centrar los elementos horizontalmente */
width: 100px; /* Ancho fijo para el contenedor */
padding: 8px; /* Espaciado interno */
z-index: 10; /* Asegurar que esté por encima de otros elementos */
}
.logo-container {
margin-bottom: 8px; /* Espaciado entre logos */
border-radius: 8px; /* Bordes redondeados */
overflow: hidden; /* Asegurar que los bordes redondeados se apliquen */
}
.logo {
max-width: 100%; /* Escalar para que encaje dentro del contenedor */
height: auto; /* Mantener proporciones */
display: block;
}
/* Responsividad para dispositivos móviles */
@media (max-width: 768px) {
.logos-flotantes {
position: fixed; /* Fijar al fondo de la pantalla */
bottom: 0; /* Alinear al fondo */
top: auto; /* Ignorar el valor superior */
left: 50%; /* Centrar horizontalmente */
transform: translateX(-50%); /* Centrar el contenedor */
width: 100%; /* Ocupa el ancho completo */
flex-direction: row; /* Cambiar a alineación horizontal */
justify-content: space-around; /* Espacio uniforme entre logos */
padding: 8px; /* Espaciado reducido */
}
.logo-container {
margin-bottom: 0; /* Eliminar espaciado vertical */
margin-right: 8px; /* Espaciado horizontal */
}
.logo {
max-width: 48px; /* Tamaño más pequeño para pantallas móviles */
}
}