Kumi
42e9de6942
This update brings several enhancements to the user interface and extends the forms functionality across the application. Specifically, the changes include the introduction of `django-crispy-forms` and `crispy-bootstrap5` to improve form aesthetics and usability significantly. Additionally, the admin area now features enhanced link color for better visibility, and user interface improvements have been made across various templates, like adding direct edit and delete category links and more intuitive navigation options for better user experience. Moreover, the inclusion of new forms for Scene, Category, and Original Media creation aligns with the app's need for structured data entry and complements the existing models by ensuring a more user-friendly interaction with the database. Key changes include: - Introduction of `django-crispy-forms` and `crispy-bootstrap5` for better form rendering. - UI enhancements for clarity and ease of use in the admin area and templates. - New forms for Scene, Category, and Original Media to streamline content creation processes. These changes aim to improve both the appearance and functionality of the application, making it more appealing and accessible to users while facilitating easier content management.
233 lines
No EOL
4 KiB
CSS
233 lines
No EOL
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;
|
|
}
|
|
|
|
.admin-header a {
|
|
color: #9cdcfe;
|
|
} |