MediaWiki:Gadget-VEBulkUpload.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
* Styles for the VEBulkUpload gadget (bulk file upload in VisualEditor).
* Documentation: [[Help:Uploading files]]
*/
/* Hint shown while files are dragged over the editing surface */
.ve-bulkupload-toast {
position: fixed;
top: 12px;
left: 50%;
transform: translateX( -50% );
z-index: 200;
padding: 8px 16px;
border-radius: 2px;
background: #36c;
color: #fff;
font-size: 0.95em;
box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.25 );
opacity: 0;
pointer-events: none;
transition: opacity 100ms ease;
}
.ve-bulkupload-toast-visible {
opacity: 1;
}
/* Drop zone inside the dialog */
.ve-bulkupload-dropzone {
border: 2px dashed #c8ccd1;
border-radius: 2px;
padding: 16px;
margin-bottom: 12px;
text-align: center;
background: #f8f9fa;
}
.ve-bulkupload-dropzone-active {
border-color: #36c;
background: #eaf3ff;
}
.ve-bulkupload-dropzone p {
margin: 0 0 8px;
color: #54595d;
}
.ve-bulkupload-fileinput {
display: none;
}
/* Queued files */
.ve-bulkupload-files {
max-height: 40vh;
overflow-y: auto;
margin-bottom: 12px;
}
.ve-bulkupload-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid #eaecf0;
}
.ve-bulkupload-row-thumb {
flex: 0 0 64px;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #eaecf0;
border-radius: 2px;
color: #54595d;
font-size: 0.8em;
font-weight: bold;
}
.ve-bulkupload-row-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ve-bulkupload-row-body {
flex: 1 1 auto;
min-width: 0;
}
.ve-bulkupload-row-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
font-size: 0.9em;
}
.ve-bulkupload-row-size {
color: #72777d;
}
.ve-bulkupload-row-remove {
flex: 0 0 auto;
}
.ve-bulkupload-status-warning {
color: #ac6600;
}
.ve-bulkupload-status-error {
color: #d73333;
}
.ve-bulkupload-status-done {
color: #14866d;
}
.ve-bulkupload-status {
display: block;
margin-top: 8px;
color: #54595d;
}
.ve-bulkupload-results {
margin-top: 12px;
font-size: 0.95em;
}
.ve-bulkupload-results pre {
max-height: 20vh;
overflow: auto;
white-space: pre-wrap;
}