filesafe/public/css/home.css
Bobby Wibowo 07b4ef8fc2
Updates
Added a new config entry named "cacheFileIdentifiers". More info in config.sample.js file.

Improved some descriptions in config.sample.js file.

Added some CSS animations wherever applicable.

Bumped v1 version string.
2018-12-04 18:58:53 +07:00

201 lines
4.4 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;
}
#maxFileSize {
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 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-left: -0.25rem;
margin-right: -0.25rem;
-webkit-animation: fadeInOpacity .5s;
animation: fadeInOpacity .5s;
}
#linksColumn .column {
padding-left: 0.25rem;
padding-right: 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;
}