/* Copyright 2023 0xf8.dev@proton.me This file is part of Galerie Galerie is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. Galerie is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with Galerie. If not, see . */ @import url("style.scss"); span#title { position: fixed; display: flex; width: 100vw; height: 100vh; align-content: center; justify-content: center; text-align: center; } #display { display: flex; flex-direction: row; flex-basis: auto; flex-wrap: wrap; justify-content: center; overflow: scroll; position: absolute; margin: 0; margin-top: 2em; padding: 0; height: 100vh; width: 100vw; span { margin: 0.5em 0.3em 1.2em 0.3em; img.resource, video.resource { display: block; object-fit: contain; height: 15em; width: auto; border-radius: 8px; } .resourceh:hover { opacity: 0.8; } span { display: flex; flex-direction: row; justify-content: center; i { padding: 0 .5em; } i:hover { opacity: 80%; } } } } .overlay { @keyframes slowShow { from { background-color: rgba(0, 0, 0, 0) } to { background-color: rgba(0, 0, 0, 0.7) } } overflow: hidden; animation: slowShow .8s ease; position: absolute; display: flex; background-color: rgba(0, 0, 0, 0.7); height: 100vh; width: 100vw; justify-content: center; z-index: 999; .popout { display: block; object-fit: contain; border-radius: 12px; align-self: center; } }