mirror of
https://github.com/BobbyWibowo/lolisafe.git
synced 2024-12-13 16:06:21 +00:00
8140ff4d71
Rewritten function to generate video thumbnails with ffmpeg. This should be much faster than ever. This should also solve an issue where potrait videos could have their thumbnails be taller than 200px, since it was only forcing width to be no larger than 200px. Updated dashboard's styling to make sure potrait thumbnails (only matter for video thumbnails) not going out of its container. Updated thumbs.js (yarn thumbs) script to display elapsed time for each operation in seconds. Bumped v1 version string (for dashboard.css).
239 lines
4.1 KiB
CSS
239 lines
4.1 KiB
CSS
body {
|
|
-webkit-animation: none;
|
|
animation: none;
|
|
}
|
|
|
|
#auth,
|
|
#dashboard {
|
|
display: none;
|
|
-webkit-animation: fadeInOpacity .5s;
|
|
animation: fadeInOpacity .5s;
|
|
}
|
|
|
|
.section {
|
|
background: none;
|
|
}
|
|
|
|
.menu-list a {
|
|
color: #3794d2;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.menu-list a:hover {
|
|
color: #60a8dc;
|
|
background-color: #4d4d4d;
|
|
}
|
|
|
|
.menu-list a.is-active {
|
|
color: #eff0f1;
|
|
background-color: #3794d2;
|
|
}
|
|
|
|
.menu-list a[disabled] {
|
|
color: #7a7a7a;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.menu-list a[disabled]:hover {
|
|
background: none;
|
|
}
|
|
|
|
ul#albumsContainer {
|
|
border-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
ul#albumsContainer li {
|
|
border-left: 1px solid #898b8d;
|
|
padding-left: .75em;
|
|
-webkit-animation: fadeInOpacity .5s;
|
|
animation: fadeInOpacity .5s;
|
|
}
|
|
|
|
#page.fade-in {
|
|
-webkit-animation: fadeInOpacity .5s;
|
|
animation: fadeInOpacity .5s
|
|
}
|
|
|
|
.pagination a {
|
|
color: #eff0f1;
|
|
border-color: #4d4d4d;
|
|
background-color: #31363b;
|
|
}
|
|
|
|
.pagination-link:hover,
|
|
.pagination-next:hover,
|
|
.pagination-previous:hover {
|
|
color: #eff0f1;
|
|
border-color: #60a8dc;
|
|
background-color: #31363b;
|
|
}
|
|
|
|
.label {
|
|
color: #bdc3c7;
|
|
}
|
|
|
|
.menu-list li ul {
|
|
border-left-color: #898b8d;
|
|
}
|
|
|
|
.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;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.image-container .image {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
height: 100%;
|
|
width: 100%;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.image-container .image img {
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
height: auto;
|
|
width: auto;
|
|
}
|
|
|
|
.image-container .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;
|
|
}
|
|
|
|
/* Make extra info appear on hover only on non-touch devices */
|
|
|
|
.no-touch .image-container .checkbox {
|
|
opacity: .5;
|
|
-webkit-transition: opacity .25s;
|
|
transition: opacity .25s;
|
|
}
|
|
|
|
.no-touch .image-container .controls,
|
|
.no-touch .image-container .details {
|
|
opacity: 0;
|
|
-webkit-transition: opacity .25s;
|
|
transition: opacity .25s;
|
|
}
|
|
|
|
.no-touch .image-container:hover .checkbox,
|
|
.no-touch .image-container:hover .controls,
|
|
.no-touch .image-container:hover .details {
|
|
opacity: 1;
|
|
}
|
|
|
|
#page {
|
|
/* fix overflow issue with flex */
|
|
min-width: 0;
|
|
}
|
|
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.table {
|
|
color: #bdc3c7;
|
|
background-color: #31363b;
|
|
font-size: .75rem;
|
|
}
|
|
|
|
.table tr:hover,
|
|
.table.is-striped tbody tr:nth-child(2n) {
|
|
background: none;
|
|
}
|
|
|
|
.table.is-striped tbody tr:hover,
|
|
.table.is-striped tbody tr:nth-child(2n):hover,
|
|
.tag {
|
|
background-color: #4d4d4d;
|
|
}
|
|
|
|
.table thead td,
|
|
.table thead th {
|
|
color: #eff0f1;
|
|
background-color: #ff3860;
|
|
}
|
|
|
|
.table td,
|
|
.table th {
|
|
border: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table th {
|
|
color: #eff0f1;
|
|
height: 2.25em;
|
|
}
|
|
|
|
.is-linethrough {
|
|
text-decoration: line-through
|
|
}
|