MediaWiki:Common.css
De TechShareRoom wiki
Nota: Después de publicar, quizás necesite actualizar la caché de su navegador para ver los cambios.
- Firefox/Safari: Mantenga presionada la tecla Shift mientras pulsa el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
- Google Chrome: presione Ctrl+Shift+R (⌘+Shift+R en Mac)
- Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5
/* 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 videos responsivos */
.video-group {
display: flex;
flex-direction: column;
align-items: center;
}
.video-group iframe,
.video-group object,
.video-group embed {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 ratio */
margin-bottom: 20px; /* Espacio entre los videos */
overflow: hidden;
}
.video-group iframe,
.video-group object,
.video-group embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Asegurar que los videos ocupen todo el ancho disponible en vista móvil */
@media screen and (max-width: 767px) {
.video-group iframe,
.video-group object,
.video-group embed {
width: 100%;
}
}
