filesafe/public/css/home.css
Bobby Wibowo 1eafafe8a7
Updates
* Fixed home page going out of bound due to git commit message.

* Git commit message will no longer have dotted underline. The old solution by using border-bottom wasn't suitable when the text is being split by word-break, but text-decoration-style wouldn't look as good due to its distance from the text being too close.

* Updated bulma to 0.7.2.

* Bumped v1 and v3 version strings.

* Various other small tweaks.
2018-12-08 05:10:35 +07:00

206 lines
4.5 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-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;
}