mirror of
https://github.com/BobbyWibowo/lolisafe.git
synced 2024-12-15 00:46:22 +00:00
d5bb5a5bac
* Better thumbnails view in album page (it's now using the same styling as the one in dashboard, minus the on-hover effects and uploader/album names). * Fixed unenclosed p tag in thumbs view at dashboard.js. It did not cause any issue because it's optional to enclose it, but oh well.
80 lines
1.8 KiB
CSS
80 lines
1.8 KiB
CSS
/*
|
|
This is the same sheets used in dashboard.css, minus the on-hover ones.
|
|
I should probably put this in a file named _thumbs.css, remove the ones in dashboard.css,
|
|
and use it for both album and dashboard (which means dashboard will have to load an extra css).
|
|
But oh well, that's something for the future me to think further about.
|
|
*/
|
|
|
|
.image-container {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
width: 200px;
|
|
height: 200px;
|
|
margin: 9px;
|
|
background-color: #31363b;
|
|
overflow: hidden;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
position: relative;
|
|
-webkit-box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
|
|
box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
|
|
}
|
|
|
|
.image-container .title {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.image-container .image {
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.image-container .file-checkbox {
|
|
position: absolute;
|
|
top: .75rem;
|
|
left: .75rem;
|
|
}
|
|
|
|
.image-container .controls {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
position: absolute;
|
|
top: .75rem;
|
|
right: .75rem;
|
|
}
|
|
|
|
.image-container .controls .button {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.image-container .controls .button:not(:active):not(:hover) {
|
|
color: #fff;
|
|
background-color: rgba(49, 54, 59, .75);
|
|
}
|
|
|
|
.image-container .details {
|
|
position: absolute;
|
|
left: .75rem;
|
|
bottom: .75rem;
|
|
right: .75rem;
|
|
background-color: rgba(49, 54, 59, .75);
|
|
color: #eff0f1;
|
|
padding: .25rem;
|
|
font-size: .75rem;
|
|
}
|
|
|
|
.image-container .details p {
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.image-container .details p span {
|
|
font-weight: 800;
|
|
}
|