filesafe/public/css/home.css
Bobby Wibowo 3a398721b5
Updated
* Replaced all instances of getElementById and getElementsByClassName
with querySelector or querySelectorAll.

* Updated utilsController.js to stop disabling
no-async-promise-executor eslint rule.

* Removed unused lines in dashboard.njk.

* Refactored maxFileSize to maxSize in home.{css,js,njk}.

* Updated ClamAV codes in lolisafe.js. No more pinging.
Since querying version will also check connection anyway.

* Option "Upload to album" in homepage is now selectable.
Selecting this option will restore the uploader to not associate files
with an album.

* Fixed uploader to properly respect server's max file size.
Also updated error message of file size to use MB instead of MiB.

* Creating an album from homepage will automatically select the album.

* Updated Dropzone.js to v5.5.0.

* Bumped v1 & v3 version strings.

* Various other small fixes.
2019-08-20 09:16:34 +07:00

214 lines
4.6 KiB
CSS

#b {
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-bottom: 40px;
position: relative;
vertical-align: top;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: floatUp;
animation-name: floatUp;
-webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
-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);
}
#b img.logo {
max-height: 200px;
}
#dropzone * {
pointer-events: none;
}
#tokenContainer,
#panel {
display: none;
}
#maxSize {
font-size: 1rem;
}
.dz-preview .dz-details {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.dz-preview .dz-details .dz-size,
.dz-preview .dz-details .dz-filename {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.dz-preview img,
.dz-preview .dz-success-mark,
.dz-preview .dz-error-mark {
display: none;
}
@-webkit-keyframes floatUp {
0% {
opacity: 0;
-webkit-box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
-webkit-transform: scale(0.86);
transform: scale(0.86);
}
25% {
opacity: 100;
}
67% {
-webkit-box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-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);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes floatUp {
0% {
opacity: 0;
-webkit-box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
-webkit-transform: scale(0.86);
transform: scale(0.86);
}
25% {
opacity: 100;
}
67% {
-webkit-box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-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);
-webkit-transform: scale(1);
transform: scale(1);
}
}
.uploads {
padding-top: 1rem;
margin-bottom: 1rem;
}
.uploads>div {
-webkit-animation: fadeInOpacity .5s;
animation: fadeInOpacity .5s;
}
.uploads.nojs {
margin-bottom: 0;
}
.uploads .icon:not(.icon-block) {
color: #3794d2;
}
.uploads .icon.icon-block {
color: #da4453;
}
.uploads progress {
margin-top: .5rem;
margin-bottom: 1rem;
}
.uploads img {
max-width: 200px;
}
.name {
font-size: 1rem;
color: #bdc3c7;
word-break: break-all;
}
.link>a {
word-break: break-all;
}
.clipboard-mobile {
margin-top: 5px;
}
#albumDiv {
-webkit-animation: fadeInOpacity .5s;
animation: fadeInOpacity .5s;
}
#albumDiv .control {
text-align: inherit;
}
#linksColumn {
margin-top: -0.25rem;
margin-left: -0.25rem;
margin-right: -0.25rem;
-webkit-animation: fadeInOpacity .5s;
animation: fadeInOpacity .5s;
}
#linksColumn .column {
padding: 0.25rem;
}
#linksColumn>span {
padding: 0 0.3rem;
color: #7f8c8d;
}
#tabs {
margin-bottom: 1rem;
-webkit-animation: fadeInOpacity .5s;
animation: fadeInOpacity .5s;
}
#tabs ul {
border-bottom: 1px solid #bdc3c7;
}
#tabs li:not(.is-active) a {
color: #bdc3c7;
}
#tabs li:not(.is-active) a:hover {
color: #7f8c8d;
border-bottom-color: #7f8c8d;
}
.tabs li.is-active a {
border-bottom-color: #3794d2;
color: #3794d2;
}
.tab-content {
margin-bottom: -.75rem;
-webkit-animation: fadeInOpacity .5s;
animation: fadeInOpacity .5s;
}
.git-commit a {
display: inline-block;
word-break: break-all;
}