filesafe/public/css/dashboard.css
Bobby Wibowo 8140ff4d71
Updates
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).
2019-01-30 02:50:45 +07:00

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
}