You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
698 lines
15 KiB
698 lines
15 KiB
/* Upload Summary Styles */
|
|
.upload-summary {
|
|
margin: 1.5rem 0;
|
|
padding: 1.5rem;
|
|
border-radius: 6px;
|
|
background-color: var(--content-bg);
|
|
box-shadow: var(--dashboard-shadow);
|
|
color: var(--content-text);
|
|
}
|
|
|
|
.upload-summary h3 {
|
|
margin-top: 0;
|
|
font-size: 1.25rem;
|
|
color: var(--dashboard-header-color);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.upload-stats {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.stat-box {
|
|
flex: 1;
|
|
padding: 1rem;
|
|
border-radius: 4px;
|
|
background-color: var(--input-bg);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
color: var(--content-text);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.875rem;
|
|
color: var(--label-color);
|
|
}
|
|
|
|
.success-stat .stat-value {
|
|
color: var(--btn-success-bg);
|
|
}
|
|
|
|
.error-stat .stat-value {
|
|
color: var(--btn-warning-bg);
|
|
}
|
|
|
|
/* Job Results Styles */
|
|
.job-results {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.job-result {
|
|
padding: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
border-radius: 4px;
|
|
border: var(--input-border);
|
|
border-left-width: 4px;
|
|
background-color: var(--content-bg);
|
|
box-shadow: var(--dashboard-shadow);
|
|
color: var(--content-text);
|
|
}
|
|
|
|
.job-result.success {
|
|
border-left-color: var(--btn-success-bg);
|
|
}
|
|
|
|
.job-result.error {
|
|
border-left-color: var(--btn-warning-bg);
|
|
}
|
|
|
|
.job-id {
|
|
font-weight: 600;
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--dashboard-header-color);
|
|
}
|
|
|
|
.file-results {
|
|
margin-left: 1rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.file-result {
|
|
padding: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: var(--input-bg);
|
|
border: var(--input-border);
|
|
}
|
|
|
|
.file-result.success {
|
|
background-color: rgba(var(--btn-success-rgb, 52, 211, 153), 0.1);
|
|
border-color: rgba(var(--btn-success-rgb, 52, 211, 153), 0.3);
|
|
}
|
|
|
|
.file-result.error {
|
|
background-color: rgba(var(--btn-warning-rgb, 248, 113, 113), 0.1);
|
|
border-color: rgba(var(--btn-warning-rgb, 248, 113, 113), 0.3);
|
|
}
|
|
|
|
.status-icon {
|
|
font-size: 1.25rem;
|
|
margin-right: 0.75rem;
|
|
}
|
|
|
|
.success .status-icon {
|
|
color: var(--btn-success-bg);
|
|
}
|
|
|
|
.error .status-icon {
|
|
color: var(--btn-warning-bg);
|
|
}
|
|
|
|
.file-name {
|
|
font-weight: 500;
|
|
margin-right: 0.5rem;
|
|
color: var(--content-text);
|
|
}
|
|
|
|
.file-message {
|
|
color: var(--label-color);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Upload Progress Styles */
|
|
.upload-progress {
|
|
background-color: var(--content-bg);
|
|
border-radius: 6px;
|
|
padding: 1.5rem;
|
|
margin: 1.5rem 0;
|
|
box-shadow: var(--dashboard-shadow);
|
|
}
|
|
|
|
.progress-info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.progress-info span {
|
|
font-weight: 500;
|
|
color: var(--content-text);
|
|
}
|
|
|
|
/* Original Spinner - used for general loading indicators */
|
|
.spinner {
|
|
border: 3px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 50%;
|
|
border-top: 3px solid var(--btn-primary-bg);
|
|
width: 20px;
|
|
height: 20px;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* Larger spinner specifically for overlays */
|
|
.overlay-spinner {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 0 auto;
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
border-top-color: white;
|
|
animation: spin 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.progress {
|
|
height: 0.5rem;
|
|
background-color: var(--progress-bg, #e2e8f0);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: var(--progress-fill, #4299e1);
|
|
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
|
background-size: 1rem 1rem;
|
|
border-radius: 999px;
|
|
animation: progress-animation 1s linear infinite;
|
|
}
|
|
|
|
@keyframes progress-animation {
|
|
0% {
|
|
background-position: 1rem 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
#upload-status {
|
|
margin-top: 0.75rem;
|
|
font-size: 0.875rem;
|
|
color: var(--label-color);
|
|
}
|
|
|
|
.pulsing {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.advice {
|
|
font-weight: 500;
|
|
color: var(--btn-primary-bg);
|
|
}
|
|
|
|
/* CSV Preview styles */
|
|
#csv-preview,
|
|
#csv-preview-removal {
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
background-color: var(--content-bg);
|
|
border-radius: 6px;
|
|
border-left: 4px solid var(--btn-primary-bg);
|
|
}
|
|
|
|
.csv-sample {
|
|
margin-top: 0.5rem;
|
|
padding: 0.75rem;
|
|
background-color: var(--input-bg);
|
|
border-radius: 4px;
|
|
box-shadow: var(--dashboard-shadow);
|
|
}
|
|
|
|
#csv-preview p,
|
|
#csv-preview-removal p {
|
|
margin: 0.5rem 0;
|
|
color: var(--content-text);
|
|
}
|
|
|
|
/* HTMX indicator styles */
|
|
.htmx-indicator {
|
|
display: none;
|
|
opacity: 0;
|
|
transition: opacity 200ms ease-in;
|
|
}
|
|
|
|
.htmx-request .htmx-indicator {
|
|
opacity: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.loading-indicator {
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 2px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 50%;
|
|
border-top-color: var(--btn-primary-bg);
|
|
animation: spin 1s linear infinite;
|
|
margin-left: 0.5rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
:root.dark-theme .spinner,
|
|
:root.dark-theme .loading-indicator {
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
border-top-color: var(--btn-primary-bg);
|
|
}
|
|
|
|
/* Tab buttons */
|
|
.tab-buttons {
|
|
display: flex;
|
|
margin-bottom: 1rem;
|
|
border-bottom: 1px solid var(--dropdown-border);
|
|
}
|
|
|
|
.tab-button {
|
|
padding: 0.5rem 1rem;
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--dropdown-border);
|
|
border-bottom: none;
|
|
border-radius: 4px 4px 0 0;
|
|
color: var(--content-text);
|
|
cursor: pointer;
|
|
margin-right: 0.5rem;
|
|
position: relative;
|
|
bottom: -1px;
|
|
}
|
|
|
|
.tab-button.active {
|
|
background: var(--content-bg);
|
|
border-bottom: 1px solid var(--content-bg);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Checkbox styles */
|
|
.checkbox-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem 1.5rem;
|
|
margin: 0.5rem 0 1rem 0;
|
|
}
|
|
|
|
.checkbox-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.checkbox-item input[type="checkbox"] {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
/* Form groups */
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--label-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.form-actions {
|
|
margin-top: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Job summary in results */
|
|
.job-summary {
|
|
margin: 0.5rem 0;
|
|
font-size: 0.9rem;
|
|
color: var(--soft-text);
|
|
}
|
|
|
|
/* Upload Overlay */
|
|
.upload-container {
|
|
position: relative;
|
|
min-height: 200px;
|
|
width: 100%;
|
|
}
|
|
|
|
.upload-overlay,
|
|
.removal-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 240, 0.95));
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.upload-overlay.htmx-request,
|
|
.removal-overlay.htmx-request {
|
|
display: flex;
|
|
}
|
|
|
|
.upload-overlay-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
max-width: 80%;
|
|
}
|
|
|
|
.upload-overlay h3,
|
|
.removal-overlay h3 {
|
|
margin-bottom: 0.5rem;
|
|
color: #333;
|
|
}
|
|
|
|
.upload-overlay p,
|
|
.removal-overlay p {
|
|
margin-top: 0.5rem;
|
|
color: #555;
|
|
}
|
|
|
|
.upload-overlay .overlay-spinner,
|
|
.removal-overlay .overlay-spinner {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 5px solid #f3f3f3;
|
|
border-top: 5px solid #3498db;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Dark theme support */
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
.upload-overlay,
|
|
.removal-overlay {
|
|
background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(20, 20, 20, 0.95));
|
|
}
|
|
|
|
.upload-overlay h3,
|
|
.removal-overlay h3 {
|
|
color: #fff;
|
|
}
|
|
|
|
.upload-overlay p,
|
|
.removal-overlay p {
|
|
color: #ccc;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Styles for Modal and File Chips */
|
|
|
|
/* Basic Modal Styling */
|
|
.modal {
|
|
display: none;
|
|
/* Hidden by default */
|
|
position: fixed;
|
|
/* Stay in place */
|
|
z-index: 1001;
|
|
/* Sit on top, above overlays which are 1000 */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
/* Full width */
|
|
height: 100%;
|
|
/* Full height */
|
|
overflow: auto;
|
|
/* Enable scroll if needed */
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
/* Semi-transparent black backdrop for light theme */
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: var(--content-bg);
|
|
color: var(--content-text);
|
|
margin: auto;
|
|
padding: 20px;
|
|
/* Standard padding */
|
|
border: 1px solid var(--input-border);
|
|
border-radius: 8px;
|
|
/* Consistent border-radius */
|
|
width: 90%;
|
|
/* Responsive width */
|
|
max-width: 500px;
|
|
/* Max width for the modal */
|
|
box-shadow: var(--dashboard-shadow);
|
|
}
|
|
|
|
/* Modal uses existing .form-group, ensure label is bold if that's the standard */
|
|
.modal-content .form-group label {
|
|
/* font-weight: bold; Inherits from global .form-group label if already bold */
|
|
}
|
|
|
|
.modal-content .card-input {
|
|
/* Ensure modal inputs are full width and box-sizing */
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.close-button {
|
|
color: var(--label-color);
|
|
float: right;
|
|
font-size: 1.75rem;
|
|
/* Clearer size */
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.close-button:hover {
|
|
color: var(--content-text);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* File Chip Styling */
|
|
.selected-files-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
/* padding: 0.5rem 0; No specific padding, gap handles spacing */
|
|
margin-top: 1rem;
|
|
/* Retain consistent margins */
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.file-chip {
|
|
background-color: var(--input-bg);
|
|
border: 1px solid var(--input-border);
|
|
border-radius: 16px;
|
|
/* Pill shape for chips */
|
|
padding: 0.4rem 0.8rem;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.875rem;
|
|
/* Slightly smaller font for chips */
|
|
box-shadow: var(--dashboard-shadow);
|
|
transition: background-color 0.2s, opacity 0.2s, box-shadow 0.2s;
|
|
color: var(--content-text);
|
|
}
|
|
|
|
.file-chip:hover {
|
|
box-shadow: var(--button-shadow);
|
|
/* Use button-shadow for hover if defined and suitable */
|
|
}
|
|
|
|
.file-chip.removed {
|
|
opacity: 0.65;
|
|
/* Make it visibly less prominent */
|
|
background-color: var(--progress-bg);
|
|
/* Using a neutral theme color */
|
|
text-decoration: line-through;
|
|
box-shadow: none;
|
|
/* No shadow for removed items */
|
|
}
|
|
|
|
.file-chip.removed .file-chip-name {
|
|
color: var(--label-color);
|
|
/* Dim the text of removed items */
|
|
}
|
|
|
|
.file-chip-icon {
|
|
margin-right: 0.5rem;
|
|
font-size: 1.1em;
|
|
/* Relative to chip's font size */
|
|
color: var(--btn-primary-bg);
|
|
/* Use a theme color for the icon */
|
|
}
|
|
|
|
.file-chip.removed .file-chip-icon {
|
|
color: var(--label-color);
|
|
/* Dimmed icon for removed items */
|
|
}
|
|
|
|
.file-chip-name {
|
|
margin-right: 0.5rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 150px;
|
|
/* Adjust as needed */
|
|
cursor: pointer;
|
|
/* For the title attribute & clickability */
|
|
}
|
|
|
|
.file-chip-doctype {
|
|
font-size: 0.8em;
|
|
/* Smaller than the filename */
|
|
color: var(--label-color);
|
|
background-color: var(--content-bg);
|
|
/* Slightly different background */
|
|
padding: 0.1em 0.4em;
|
|
border-radius: 4px;
|
|
margin-right: 0.5rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.file-chip-edit,
|
|
.file-chip-remove {
|
|
background: none;
|
|
border: none;
|
|
color: var(--label-color);
|
|
/* Subtler color for actions */
|
|
cursor: pointer;
|
|
font-size: 1em;
|
|
/* Relative to chip's font size */
|
|
padding: 0 0.25rem;
|
|
margin-left: 0.25rem;
|
|
/* Slight spacing */
|
|
line-height: 1;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.file-chip-edit:hover,
|
|
.file-chip-remove:hover {
|
|
color: var(--content-text);
|
|
/* Darker on hover for clarity */
|
|
opacity: 1;
|
|
}
|
|
|
|
.file-chip.removed .file-chip-edit,
|
|
.file-chip.removed .file-chip-remove {
|
|
/* Actions on removed chips */
|
|
color: var(--label-color);
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
/* Make them more faded */
|
|
}
|
|
|
|
#no-files-selected-placeholder {
|
|
color: var(--label-color);
|
|
font-style: italic;
|
|
width: 100%;
|
|
/* Take full width */
|
|
text-align: center;
|
|
/* Center placeholder text */
|
|
padding: 1rem 0;
|
|
/* Give it some space */
|
|
}
|
|
|
|
/* Modal Buttons Styling */
|
|
.modal-content .form-actions {
|
|
/* If you have a .form-actions div in modal */
|
|
margin-top: 1.5rem;
|
|
/* Space above action buttons */
|
|
text-align: right;
|
|
/* Align buttons to the right */
|
|
}
|
|
|
|
.modal-content .btn-primary,
|
|
.modal-content .btn-secondary {
|
|
margin-left: 0.5rem;
|
|
/* Space between buttons if aligned right */
|
|
}
|
|
|
|
/* If not using .form-actions, direct styling: */
|
|
/* .modal-content > button { margin-top: 1rem; margin-right: 0.5rem; } */
|
|
|
|
|
|
/* Dark theme adjustments for modal backdrop & specific modal elements */
|
|
/* Using @media (prefers-color-scheme: dark) as per existing structure at end of file */
|
|
@media (prefers-color-scheme: dark) {
|
|
.modal {
|
|
background-color: rgba(20, 20, 20, 0.75);
|
|
/* Darker, more opaque backdrop for dark theme */
|
|
}
|
|
|
|
.close-button {
|
|
/* Ensure close button is visible in dark mode */
|
|
color: var(--label-color);
|
|
/* Should pick up dark theme var */
|
|
}
|
|
|
|
.close-button:hover {
|
|
color: var(--content-text);
|
|
/* Should pick up dark theme var */
|
|
}
|
|
|
|
/* Specific modal button styling for dark theme if needed, e.g., for btn-secondary */
|
|
.modal-content .btn-secondary {
|
|
/* Assuming global .btn-secondary might not be fully dark-theme aware */
|
|
/* background-color: var(--input-bg); Picks up dark theme variable */
|
|
/* color: var(--content-text); Picks up dark theme variable */
|
|
/* border: 1px solid var(--input-border); Picks up dark theme variable */
|
|
}
|
|
|
|
/* .modal-content .btn-secondary:hover { */
|
|
/* background-color: var(--content-bg); Slightly different hover for dark */
|
|
/* } */
|
|
}
|