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.
352 lines
6.5 KiB
352 lines
6.5 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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@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 {
|
|
opacity: 0;
|
|
transition: opacity 200ms ease-in;
|
|
}
|
|
|
|
.htmx-request .htmx-indicator {
|
|
opacity: 1;
|
|
}
|
|
|
|
.htmx-request.htmx-indicator {
|
|
opacity: 1;
|
|
}
|
|
|
|
.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);
|
|
}
|