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 */ } }