Diferencia entre revisiones de «MediaWiki:Common.css»
De Amereida
Línea 248: | Línea 248: | ||
.logos-flotantes { | .logos-flotantes { | ||
− | position: sticky; /* | + | position: sticky; /* Flotante al desplazarse */ |
top: 20px; /* Distancia desde la parte superior */ | top: 20px; /* Distancia desde la parte superior */ | ||
− | right: 8px; /* Separación | + | right: 8px; /* Separación respecto al lado derecho */ |
display: flex; | display: flex; | ||
flex-direction: column; /* Alineación vertical */ | flex-direction: column; /* Alineación vertical */ | ||
− | align-items: flex-start; /* Alinear los | + | align-items: flex-start; /* Alinear los elementos al inicio horizontalmente */ |
− | width: | + | width: 120px; /* Ajustar el ancho del contenedor */ |
− | + | z-index: 10; /* Prioridad visual por encima de otros elementos */ | |
− | z-index: 10; /* | + | padding: 0; /* Sin padding interno */ |
} | } | ||
.logo-container { | .logo-container { | ||
− | margin-bottom: 8px; /* Espaciado entre | + | margin-bottom: 8px; /* Espaciado entre logos */ |
} | } | ||
.logo { | .logo { | ||
− | max-width: 100%; /* | + | max-width: 100%; /* Tamaño máximo según el contenedor */ |
height: auto; /* Mantener proporciones */ | height: auto; /* Mantener proporciones */ | ||
− | display: block; /* | + | display: block; /* Mostrar como bloque independiente */ |
} | } | ||
− | /* Responsividad para | + | /* Responsividad para pantallas pequeñas */ |
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.logos-flotantes { | .logos-flotantes { | ||
− | position: fixed; /* | + | position: fixed; /* Se fija al fondo en dispositivos móviles */ |
bottom: 0; /* Alinear al fondo */ | bottom: 0; /* Alinear al fondo */ | ||
− | + | right: 0; /* Pegado al lado derecho */ | |
− | right: 0; /* | + | left: 0; /* Abarca todo el ancho */ |
− | left: 0; /* | + | margin: 0 auto; /* Centrado horizontal */ |
− | margin: 0 auto; /* | ||
− | |||
width: 100%; /* Ancho completo */ | width: 100%; /* Ancho completo */ | ||
− | flex-direction: row; /* | + | flex-direction: row; /* Alinear logos horizontalmente */ |
justify-content: space-around; /* Espaciado uniforme entre logos */ | justify-content: space-around; /* Espaciado uniforme entre logos */ | ||
padding: 8px 0; /* Espaciado interno reducido */ | padding: 8px 0; /* Espaciado interno reducido */ | ||
Línea 286: | Línea 284: | ||
.logo-container { | .logo-container { | ||
− | margin-bottom: 0; /* | + | margin-bottom: 0; /* Sin espaciado vertical */ |
margin-right: 8px; /* Espaciado horizontal entre logos */ | margin-right: 8px; /* Espaciado horizontal entre logos */ | ||
} | } | ||
Línea 292: | Línea 290: | ||
.logo { | .logo { | ||
max-width: 48px; /* Tamaño más pequeño para pantallas móviles */ | max-width: 48px; /* Tamaño más pequeño para pantallas móviles */ | ||
− | |||
} | } | ||
} | } |
Revisión del 12:57 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; /* Flotante al desplazarse */ top: 20px; /* Distancia desde la parte superior */ right: 8px; /* Separación respecto al lado derecho */ display: flex; flex-direction: column; /* Alineación vertical */ align-items: flex-start; /* Alinear los elementos al inicio horizontalmente */ width: 120px; /* Ajustar el ancho del contenedor */ z-index: 10; /* Prioridad visual por encima de otros elementos */ padding: 0; /* Sin padding interno */ } .logo-container { margin-bottom: 8px; /* Espaciado entre logos */ } .logo { max-width: 100%; /* Tamaño máximo según el contenedor */ height: auto; /* Mantener proporciones */ display: block; /* Mostrar como bloque independiente */ } /* Responsividad para pantallas pequeñas */ @media (max-width: 768px) { .logos-flotantes { position: fixed; /* Se fija al fondo en dispositivos móviles */ bottom: 0; /* Alinear al fondo */ right: 0; /* Pegado al lado derecho */ left: 0; /* Abarca todo el ancho */ margin: 0 auto; /* Centrado horizontal */ width: 100%; /* Ancho completo */ flex-direction: row; /* Alinear logos horizontalmente */ justify-content: space-around; /* Espaciado uniforme entre logos */ padding: 8px 0; /* Espaciado interno reducido */ } .logo-container { margin-bottom: 0; /* Sin espaciado vertical */ margin-right: 8px; /* Espaciado horizontal entre logos */ } .logo { max-width: 48px; /* Tamaño más pequeño para pantallas móviles */ } }