quackscape/assets/css/userarea.css
Kumi 7d78c5d4a0
feat: Introduce file upload functionality
This commit overhauls the user area with the addition of comprehensive
file upload capabilities for images and videos. Notably, it integrates
front-end enhancements for drag-and-drop uploads in the user area and
introduces a secure back-end handling process. The back-end adjustments
include a new media upload view and adjustments to image and video
models to support large file handling through settings for maximum image
pixel limits. Additionally, the refactor standardizes CSRF token
retrieval across JavaScript modules, improving security and code
maintainability.

- Front-end additions include detailed user feedback during the file
upload process, such as progress bars and success/error indicators.
- Back-end improvements ensure large image files are processed
efficiently, mitigating potential memory issues by configuring a maximum
image pixel threshold.
- Consolidating the CSRF token retrieval into the `api.js` module
centralizes security mechanisms, reducing redundancy and enhancing the
codebase's clarity.

Overall, these changes enrich the platform's media management
capabilities, bolster security practices, and improve user experience
through intuitive interface updates and robust back-end processing.
2024-03-16 21:30:12 +01:00

229 lines
4 KiB
CSS

/* Base "admin" layout */
body {
background-color: #2d2d30;
color: #ccc;
font-family: "Courier New", monospace;
}
.admin-header {
background-color: #333333;
padding: 10px 20px;
color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
}
.user-info {
color: #9cdcfe;
text-align: right;
}
.admin-sidebar {
background-color: #1e1e1e;
color: #9cdcfe;
padding: 20px;
overflow-y: auto;
}
.admin-main {
background-color: #252526;
color: #ccc;
padding: 20px;
min-height: calc(100vh - 50px);
}
.admin-sidebar a {
color: #9cdcfe;
text-decoration: none;
padding: 10px;
display: block;
}
.admin-sidebar a:hover {
background-color: #333333;
}
.form-control,
.btn-primary,
.btn-secondary {
background-color: #333333;
color: #9cdcfe;
border: 1px solid #3c3c3c;
}
.btn-primary {
background-color: #007acc;
border-color: #007acc;
}
.btn-secondary {
background-color: #3c3c3c;
border-color: #3c3c3c;
}
/* Tabs */
.nav-tabs {
border-bottom: 1px solid #444;
}
.nav-tabs .nav-link {
border: 1px solid transparent;
border-radius: 0.25rem;
background-color: #333;
color: #9cdcfe;
margin-right: 2px;
}
.nav-tabs .nav-link.active {
color: #fff;
background-color: #007acc;
border-color: #444 #444 #fff;
}
.nav-tabs .nav-link:hover {
border-color: #555 #555 #444;
}
.tab-content {
background-color: #252526;
color: #ccc;
border: 1px solid #444;
padding: 20px;
border-radius: 0.25rem;
}
/* Tables */
.dataTables_wrapper {
font-family: 'Courier New', monospace;
color: #9CDCFE;
font-size: 0.9rem;
margin: 20px 0;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
color: #000;
padding: 0.5rem;
border: 1px solid #3C3C3C;
background-color: #fff;
border-radius: 0.25rem;
margin-left: 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding: 0.5rem 1rem;
background-color: #333;
border: 1px solid #3C3C3C;
border-radius: 0.25rem;
margin-left: 5px;
color: #9CDCFE;
cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background-color: #007ACC;
color: #fff;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background-color: #007ACC;
color: #fff;
}
table.dataTable thead th,
table.dataTable thead td {
padding: 15px 10px;
border-bottom: 1px solid #444;
color: #DCDCAA;
}
table.dataTable tbody tr {
background-color: #252526;
}
table.dataTable tbody tr:hover {
background-color: #333333;
}
table.dataTable tbody td {
padding: 15px 10px;
border-color: #444;
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
margin-top: 0.5em;
font-size: 0.8em;
}
table.dataTable {
width: 100% !important;
}
/* Uploads */
.drop-zone {
max-width: 480px;
height: 150px;
padding: 25px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 2px dashed #009578;
border-radius: 10px;
font-family: sans-serif;
margin: 0 auto;
cursor: pointer;
}
.drop-zone--over {
background-color: #f0f0f0;
}
.drop-zone__input {
display: none;
}
.drop-zone__prompt {
color: #cccccc;
font-size: 20px;
}
.file-upload-wrapper {
margin-top: 20px;
}
.file-details {
display: flex;
align-items: center;
justify-content: space-between;
}
.file-name {
flex-grow: 1;
padding-right: 10px;
}
.thumbnail {
width: 128px;
height: 64px;
object-fit: cover;
}
.progress {
width: 100%;
}
.error-message {
color: red;
}