92 lines
1.5 KiB
CSS
92 lines
1.5 KiB
CSS
body {
|
|
min-height: 100vh;
|
|
background-color: #282c34;
|
|
color: #B9B8D6;
|
|
}
|
|
|
|
.Header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
padding: 1em;
|
|
}
|
|
|
|
.Contents {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.GalleryItem {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
|
|
background-color: #3B3E49;
|
|
|
|
border-radius: 10px 10px 0px 0px;
|
|
margin: 0 0 1em 0;
|
|
padding: 0em;
|
|
max-width: calc(100vw - 2em);
|
|
}
|
|
|
|
.GalleryItem > a {
|
|
color: inherit;
|
|
|
|
margin: 0.5em;
|
|
overflow: clip;
|
|
}
|
|
|
|
.GalleryItem > img,
|
|
.GalleryItem > video {
|
|
object-fit: contain;
|
|
max-height: 80vh;
|
|
}
|
|
|
|
.DirectoryItem > button {
|
|
background-color: #44655D;
|
|
color: #B9B8D6;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
text-align: center;
|
|
text-decoration: none; /* No underline for text */
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin: 0px 4px 0px 0px;
|
|
cursor: pointer;
|
|
border-radius: 10px; /* Slightly rounded corners for a modern feel */
|
|
transition: background-color 0.3s; /* Smooth transition for hover effect */
|
|
}
|
|
|
|
.DirectoryItem > button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
.PlaceholderItem {
|
|
animation: loading 1.5s infinite;
|
|
}
|
|
|
|
.PlaceholderItem > button,
|
|
.ParentDirectoryItem > button {
|
|
background-color: #4D4F5D;
|
|
}
|
|
|
|
.PlaceholderItem > a {
|
|
height: 1em;
|
|
}
|
|
|
|
.PlaceholderItem > button {
|
|
height: calc(18px + 10px * 2);
|
|
min-width: 4em;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0%, 100% {
|
|
filter: brightness(80%);
|
|
}
|
|
50% {
|
|
filter: brightness(100%);
|
|
}
|
|
}
|