Friendica/friendica-github
1
0
Fork 0
mirror of https://github.com/friendica/friendica synced 2024-11-15 20:13:55 +00:00
Code Issues Projects Releases Packages Wiki Activity
friendica-github/view/theme/frio/css/dropzone.frio.css

475 lines
11 KiB
CSS
Raw Normal View History

REUSE more work on bin and view directories
2024-08-25 06:45:08 +00:00
/*
* SPDX-FileCopyrightText: 2010-2024 the Friendica project
*
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
@-webkit-keyframes passing-through {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
0% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
30%, 70% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
100% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
@-moz-keyframes passing-through {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
0% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
30%, 70% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
100% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
@keyframes passing-through {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
0% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
30%, 70% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
100% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
@-webkit-keyframes slide-in {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
0% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
30% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
@-moz-keyframes slide-in {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
0% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
30% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
@keyframes slide-in {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
0% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
30% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
@-webkit-keyframes pulse {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
0% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
10% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
20% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
@-moz-keyframes pulse {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
0% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
10% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
20% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
@keyframes pulse {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
0% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
10% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
20% {
fix indentation and remove comment
2023-03-22 15:19:36 +00:00
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
}
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
[frio] Remove scrollbars from preview close button and restore pointer cursor - Address https://libranet.de/display/0b6b25a8-9464-6895-5ede-a3c536914564
2023-05-20 16:44:45 +00:00
.dropzone, .dropzone .dz-default * {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
box-sizing: border-box;
move overflow: auto to css
2023-03-29 11:44:03 +00:00
overflow: auto;
[frio] Remove scrollbars from preview close button and restore pointer cursor - Address https://libranet.de/display/0b6b25a8-9464-6895-5ede-a3c536914564
2023-05-20 16:44:45 +00:00
cursor: default;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
spacing in texara is 10px in dropzone only 0px
2023-03-23 18:31:58 +00:00
.dropzone:not(textarea) {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
border: 1px solid rgba(0, 0, 0, 0.3);
spacing in texara is 10px in dropzone only 0px
2023-03-23 18:31:58 +00:00
padding: 0px 0px 5px 0px;
make font-color of dropzone less focus stealing
2023-03-24 15:20:07 +00:00
color: #999;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone.dz-clickable {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
cursor: pointer;
make dropzone css configureable with variables and set a border-radius for dropzone to reflect theme better
2023-03-22 08:39:11 +00:00
border-radius: 4px;
background-color: $background_color;
insert margin btw. dropzone and buttons
2023-03-29 08:47:27 +00:00
margin-bottom: 10px;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
cursor: pointer;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone.dz-started .dz-message {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
display: none;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone.dz-drag-hover {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
border-style: solid;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone.dz-drag-hover .dz-message {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
opacity: 0.5;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-message {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
text-align: center;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-message .dz-button {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
position: relative;
display: inline-block;
vertical-align: top;
margin: 16px;
min-height: 100px;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview:hover {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
z-index: 1000;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview:hover .dz-details {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
opacity: 1;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview.dz-file-preview .dz-image {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
border-radius: 20px;
background: #999;
background: linear-gradient(to bottom, #eee, #ddd);
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview.dz-file-preview .dz-details {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
opacity: 1;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview.dz-image-preview {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
background: white;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview.dz-image-preview .dz-details {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-remove {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
font-size: 14px;
text-align: center;
display: block;
cursor: pointer;
border: none;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-remove:hover {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
text-decoration: underline;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview:hover .dz-details {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
opacity: 1;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-details {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
z-index: 20;
position: absolute;
top: 0;
left: 0;
opacity: 0;
font-size: 13px;
min-width: 100%;
max-width: 100%;
padding: 2em 1em;
text-align: center;
color: rgba(0, 0, 0, 0.9);
line-height: 150%;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-details .dz-size {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
margin-bottom: 1em;
font-size: 16px;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-details .dz-filename {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
white-space: nowrap;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-details .dz-filename:hover span {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
border: 1px solid rgba(200, 200, 200, 0.8);
background-color: rgba(255, 255, 255, 0.8);
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
overflow: hidden;
text-overflow: ellipsis;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
border: 1px solid transparent;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
background-color: rgba(255, 255, 255, 0.4);
padding: 0 0.4em;
border-radius: 3px;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview:hover .dz-image img {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
-webkit-filter: blur(8px);
filter: blur(8px);
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-image {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
border-radius: 20px;
overflow: hidden;
width: 120px;
height: 120px;
position: relative;
display: block;
z-index: 10;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-image img {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
display: block;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview.dz-success .dz-success-mark {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview.dz-error .dz-error-mark {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
opacity: 1;
-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
pointer-events: none;
opacity: 0;
z-index: 500;
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-left: -27px;
margin-top: -27px;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
display: block;
width: 54px;
height: 54px;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview.dz-processing .dz-progress {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview.dz-complete .dz-progress {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
opacity: 0;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
transition: opacity 0.4s ease-in;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
-webkit-animation: pulse 6s ease infinite;
-moz-animation: pulse 6s ease infinite;
-ms-animation: pulse 6s ease infinite;
-o-animation: pulse 6s ease infinite;
animation: pulse 6s ease infinite;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-progress {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
opacity: 1;
z-index: 1000;
pointer-events: none;
position: absolute;
height: 16px;
left: 50%;
top: 50%;
margin-top: -8px;
width: 80px;
margin-left: -40px;
background: rgba(255, 255, 255, 0.9);
-webkit-transform: scale(1);
border-radius: 8px;
overflow: hidden;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-progress .dz-upload {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
background: #333;
background: linear-gradient(to bottom, #666, #444);
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
-webkit-transition: width 300ms ease-in-out;
-moz-transition: width 300ms ease-in-out;
-ms-transition: width 300ms ease-in-out;
-o-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview.dz-error .dz-error-message {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
display: block;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview.dz-error:hover .dz-error-message {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
opacity: 1;
pointer-events: auto;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-error-message {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
pointer-events: none;
z-index: 1000;
position: absolute;
display: block;
display: none;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
border-radius: 8px;
font-size: 13px;
top: 130px;
left: -10px;
width: 140px;
background: #be2626;
background: linear-gradient(to bottom, #be2626, #a92222);
padding: 0.5em 1.2em;
color: white;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
.dropzone .dz-preview .dz-error-message:after {
make dropzone same color as rest (fixes #12924)
2023-03-22 08:03:26 +00:00
content: "";
position: absolute;
top: -6px;
left: 64px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #be2626;
improve image-upload * create dropzone for editing in jot-modal * customize css for dropzone to make it more beautiful (smaller margin/paddings...) * change position of dropzone-element dircetly to textarea, so button for upload is small and under textarea (it's more clear) * remove previews after upload. this shows the upload-progress, but preview is not needed after upload. you can't do anything with the preview, and dialog gets too big. You see successful upload, when bb-code link to image is inserted on cursor-position in textarea
2023-03-14 09:38:03 +00:00
}
Reference in a new issue Copy permalink