Diferencia entre revisiones de «MediaWiki:Common.css»
Página de la interfaz de MediaWiki
Más acciones
| Sin resumen de edición | Sin resumen de edición | ||
| Línea 62: | Línea 62: | ||
| /* Estilo para hacer que los iframes de YouTube sean responsivos */ | /* Estilo para hacer que los iframes de YouTube sean responsivos */ | ||
| .ext-YouTube-video, | .ext-YouTube-video, | ||
| .video-container { | |||
|     position: relative; | |||
|     padding-bottom: 56.25%; /* Mantiene la relación de aspecto 16:9 */ | |||
|     height: 0; | |||
|     overflow: hidden; | |||
|      max-width: 100%; |      max-width: 100%; | ||
|      background: #000; | |||
|      margin: 0 auto; |      margin: 0 auto; | ||
| } | |||
| .video-container iframe { | |||
|     position: absolute; | |||
|     top: 0; | |||
|     left: 0; | |||
|     width: 100%; | |||
|     height: 100%; | |||
|     border: 0; | |||
| } | } | ||
Revisión del 18:39 22 ago 2024
/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */
/* TOC escondida en todas las vistas */
.toc, #toc { display: none; }
/* Estilos para dispositivos móviles */
@media screen and (max-width: 767px) {
    .mobile-only {
        display: block;
    }
    .nomobile {
        display: none;
    }
}
/* Estilos para dispositivos de escritorio */
@media screen and (min-width: 768px) {
    .mobile-only {
        display: none;
    }
    .nomobile {
        display: block;
    }
}
/* Estilo cuadrados Página Principal */
.square-container {
    margin: 0 auto;
    width: 90%;
    text-align: center;
    margin-bottom: 15px;
}
.square {
    border-radius: 16px;
    padding: 25px;
    background-color: #f1d7ff;
    margin: 0;
    border: none;
    width: 200px; /* Ancho fijo para todos los cuadrados */
    height: 80px; /* Altura fija para todos los cuadrados */
}
.square-mobile-container {
    margin: 0 auto;
    width: 90%;
    text-align: center;
    margin-bottom: 15px;
}
.square-mobile {
    border-radius: 16px;
    padding: 25px;
    background-color: #f1d7ff;
    margin: 0;
    border: none;
    width: 120px; /* Ancho fijo para todos los cuadrados */
    height: 80px; /* Altura fija para todos los cuadrados */
}
/* Estilo para hacer que los iframes de YouTube sean responsivos */
.ext-YouTube-video,
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Mantiene la relación de aspecto 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 0 auto;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}