mirror of
https://github.com/BobbyWibowo/lolisafe.git
synced 2024-12-14 16:36:21 +00:00
da86f605c6
Added description column into albums. So yeah, now albums can have description. It'll only be shown in the album's edit popup and public link. HTML chars will now be escaped from album's name and description. Removed message warning about CDN cache from album's public link. A shortened version will be shown as the download button's tooltip. Darkened color of textarea's placeholder. Bumped v1 version string.
101 lines
2.2 KiB
CSS
101 lines
2.2 KiB
CSS
.section {
|
|
background: none;
|
|
}
|
|
|
|
.message {
|
|
background-color: #31363b;
|
|
}
|
|
|
|
.message-body {
|
|
color: #eff0f1;
|
|
border: 0;
|
|
-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);
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.description {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/*
|
|
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;
|
|
}
|