/* * Accesos rápidos: diseño base compartido por todos los themes. * * Portado del diseño que ya tenía Arcor (application/views/themes/arcor/front/css/1.styles.css, * bloques .accesos-rapidos / #modal-accesos), promovido a base porque es el diseño de * referencia para el resto de las instancias. * * Se carga acá, en el grupo 'pre' compartido (ver esqueleto.php), para que cargue ANTES * que el CSS propio de cada theme (getThemeCSS(), que se imprime después en el ). * Así un theme puede seguir afinando estas mismas clases sin tocar este archivo: a * igual especificidad, la regla que carga después gana, y el CSS del theme siempre * carga después de este. */ .accesos-rapidos { background-color: rgb(234 234 234); border-radius: 20px; padding: 10px; text-align: center; } .accesos-rapidos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 33% 33% 33%; } .accesos-rapidos .overflow { display: none; } .accesos-rapidos ul li { margin: 2px; padding: 0; background-color: #fff; overflow: hidden; border-radius: 14px; min-height: 68px; display: flex; justify-content: center; align-items: center; } .accesos-rapidos ul li a { border-radius: 14px; display: inline-flex; justify-content: center; align-items: center; opacity: .5; padding: 5px; margin: 0; transition: all .1s ease-in-out; background-color: rgba(255, 255, 255, 0.6); } .accesos-rapidos ul li a img { max-width: 90%; margin: 3px 0; } .accesos-rapidos ul li a:hover { background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 0 20px rgb(186 163 205 / 40%); opacity: 1; } .accesos-rapidos ul li.more { background-color: #ffffff30; } .accesos-rapidos ul li.more a { font-size: .65rem; font-weight: 800; width: 100%; height: 100%; text-decoration: none; box-shadow: none; background-color: transparent; flex-direction: column; justify-content: center; align-items: center; } .accesos-rapidos ul li.more:hover { background-color: #ffffff90; } .accesos-rapidos ul li.more a:hover { color: #000000aa; } .accesos-rapidos ul li a img.hover { display: none; } .accesos-rapidos ul li a:hover img { display: none; } .accesos-rapidos ul li a:hover img.hover { display: inline-block; } /* Fallback para accesos sin imagen cargada: inicial del nombre en un círculo. */ .accesos-rapidos ul li a .acceso-inicial, #modal-accesos ul.main li a .acceso-inicial { display: block; width: 40px; height: 40px; line-height: 40px; margin: 0 auto; border-radius: 50%; background: rgba(0, 0, 0, .08); text-align: center; font-size: 18px; font-weight: bold; text-transform: uppercase; } #modal-accesos .modal-dialog { width: 850px; } #modal-accesos ul.main { display: flex; flex-wrap: nowrap; justify-content: space-between; list-style: none; padding: 0; } #modal-accesos ul.main li { list-style: none; flex-grow: 1; padding: 15px; text-align: center; border-radius: 15px; border: 1px solid transparent; } #modal-accesos ul.main li:hover { border: 1px solid #ccc; } #modal-accesos ul.main li h5 { font-size: .85rem; } #modal-accesos ul.main li img { max-width: 100%; padding: 5px; border-radius: 13px; } #modal-accesos #search-secundarios { flex-basis: 250px; display: flex; } #modal-accesos .seccion-group { margin-top: 15px; list-style: none; padding-top: 15px; border-top: 1px solid #eee; padding-left: 10px; } #modal-accesos .seccion-header { margin-bottom: 8px; display: inline-block; } #modal-accesos ul ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; } @media only screen and (max-width: 768px) { .accesos-rapidos { padding: 8px; } .accesos-rapidos ul { grid-template-columns: 25% 25% 25% 25%; } #modal-accesos ul.main { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } #modal-accesos ul.main li { padding: 3px; } #modal-accesos ul.main li h5 { font-size: .8rem; } #modal-accesos ul.main li img { height: 50px; width: auto; } #modal-accesos h4 { font-size: 1rem; } #modal-accesos #search-secundarios { flex-basis: 150px; display: flex; } #modal-accesos .seccion-group { padding-left: 0; font-size: 90%; } #modal-accesos .modal-dialog { height: 96%; width: 96%; margin: 2%; } #modal-accesos .modal-content { height: 100%; display: flex; flex-direction: column; } #modal-accesos .modal-body { height: 100%; flex-grow: 1; overflow-y: auto; } }