#container { position: relative; height: 100%; min-height: 100px; border-radius: var(--border-radius); overflow: none; box-shadow: #223223aa 1px 1px 4px; background: var(--card-background); } #container img { border-radius: var(--border-radius); max-width: 700px; width: calc(100vw - 20px); visibility: hidden; margin-bottom: -5px; height: calc((100vw - 20px) * 0.8); } #container.loaded img { visibility: visible; width: 100%; height: unset; } @keyframes loader { 0% { width: 60px; height: 60px; } 25% { border: 5px solid var(--page-background); } 50% { width: 80px; height: 80px; } 75% { border: 10px solid var(--page-background); } 100% { width: 60px; height: 60px; } } #loading { position: absolute; border: 10px solid var(--page-background); border-radius: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: 0.5s infinite loader ease; } .loaded #loading { display: none; } #menu { position: absolute; top: 0px; left: 0px; height: 100%; width: 0px; background: #efefef99; backdrop-filter: blur(5px); border-radius: var(--border-radius); transition: width 0.2s ease, padding 0.2s ease; overflow: hidden; align-content: center; overflow: hidden; padding: 0px; display: grid; grid-template-columns: 1fr; gap: 10px; } #menu.open { width: 100%; padding: 10px; } #delete { background: #ee5151; padding: 10px; color: #fff; font-weight: bold; border-radius: var(--border-radius); cursor: pointer; user-select: none; } #download { background: var(--primary); padding: 10px; border-radius: var(--border-radius); color: #fff; font-weight: bold; user-select: none; cursor: pointer; } #label { display: grid; grid-template-columns: 55px auto; } #label #title { padding: 10px; background: var(--primary); border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); color: #fff; font-weight: bold; user-select: none; } .element { background: #efefef99; padding: 10px; font-weight: bold; overflow-x: auto; user-select: none; white-space: nowrap; border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }