mirror of
https://github.com/BobbyWibowo/lolisafe.git
synced 2024-12-14 16:36:21 +00:00
369b1137a7
* Some structure updates to the homepage and the No-JS uploader form. Making them both somewhat look better, especially in terms of spacing. * Upload URLs form will now show an error alert when there the form is empty or only filled with whitespaces. * Upload URLs form will now automatically remove empty lines or lines that consist of only whitespaces when the upload button is pressed.
185 lines
4.0 KiB
CSS
185 lines
4.0 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.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 .control {
|
|
text-align: inherit;
|
|
}
|
|
|
|
#linksColumn {
|
|
margin-left: -0.25rem;
|
|
margin-right: -0.25rem;
|
|
}
|
|
|
|
#linksColumn .column {
|
|
padding-left: 0.25rem;
|
|
padding-right: 0.25rem;
|
|
}
|
|
|
|
#linksColumn>span {
|
|
padding: 0 0.3rem;
|
|
color: #7f8c8d;
|
|
}
|
|
|
|
#tabs {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
#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;
|
|
}
|