mirror of
https://github.com/calibrain/shelfmark.git
synced 2026-04-20 22:09:28 -04:00
0f7d4292a4
- Add theme toggle (light/dark/auto) - Improve text contrast and readability - Fix viewport height issues - Ensure consistent styling across components
545 lines
10 KiB
CSS
545 lines
10 KiB
CSS
/* Base styles and CSS reset */
|
|
:root {
|
|
/* Light theme variables */
|
|
--primary-color: #0073e6;
|
|
--primary-dark: #005bb5;
|
|
--text-color: #333;
|
|
--background-color: #f8f8f8;
|
|
--border-color: #e5e5e5;
|
|
--header-bg: #333;
|
|
--header-text: #fff;
|
|
--loading-overlay: rgba(0, 0, 0, 0.5);
|
|
--card-background: #fff;
|
|
--table-background: #fff;
|
|
--table-hover-background: #f8f8f8;
|
|
--table-border-color: #e5e5e5;
|
|
--input-background: #fff;
|
|
--heading-color: #333;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
/* Dark theme variables with improved contrast */
|
|
--background-color: #121212;
|
|
--text-color: #ffffff;
|
|
--heading-color: #ffffff;
|
|
--card-background: #1e1e1e;
|
|
--border-color: #404040;
|
|
--table-background: #1e1e1e;
|
|
--table-hover-background: #2d2d2d;
|
|
--table-border-color: #404040;
|
|
--input-background: #2d2d2d;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Typography */
|
|
html, body {
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: var(--text-color);
|
|
background: var(--background-color);
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
min-height: 100%;
|
|
background: var(--background-color);
|
|
}
|
|
|
|
/* Layout */
|
|
header {
|
|
background: var(--header-bg);
|
|
color: var(--header-text);
|
|
padding: 1rem;
|
|
text-align: center;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
background: var(--header-bg);
|
|
color: var(--header-text);
|
|
margin-top: auto;
|
|
}
|
|
|
|
/* Search Section */
|
|
.search-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.search-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.search-container input {
|
|
flex: 1;
|
|
padding: 0.75rem;
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
.search-container input:focus {
|
|
border-color: var(--primary-color);
|
|
outline: none;
|
|
}
|
|
|
|
.search-filter {
|
|
max-width: 210px;
|
|
}
|
|
|
|
/* Table Styles */
|
|
.table-responsive {
|
|
margin-bottom: 1rem;
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: white;
|
|
}
|
|
|
|
th, td {
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
text-align: left;
|
|
justify-content:center;
|
|
}
|
|
|
|
th {
|
|
background: #f5f5f5;
|
|
font-weight: 600;
|
|
}
|
|
|
|
tbody tr:hover {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.details-button {
|
|
padding: 0.75rem 1.5rem;
|
|
background: #27ae60;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
transition: background-color 0.3s ease;
|
|
width: 100%;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.details-button:hover {
|
|
background: #1f894b;
|
|
}
|
|
|
|
/* Results Section */
|
|
.results-section {
|
|
margin-bottom: 2rem;
|
|
background: white;
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.results-heading {
|
|
padding: 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toggle-icon {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.collapsed .toggle-icon {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.results-content {
|
|
transition: max-height 0.3s ease;
|
|
}
|
|
|
|
.collapsed .results-content {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
th[data-sort="index"] {
|
|
min-width: 60px;
|
|
}
|
|
|
|
/* Loading Indicator */
|
|
.loading-indicator {
|
|
display: none;
|
|
text-align: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.spinner {
|
|
display: inline-block;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border: 3px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 50%;
|
|
border-top-color: var(--primary-color);
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Modal Styles */
|
|
.modal-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--loading-overlay);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal-overlay.active {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.details-container {
|
|
background: white;
|
|
padding: 0.25rem 0.25rem 2rem 3rem;
|
|
border-radius: 4px;
|
|
max-width: 800px;
|
|
width: 90%;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.details-header {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 2rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.details-header img {
|
|
max-width: 200px;
|
|
height: auto;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.details-info h3 {
|
|
margin-bottom: 1rem;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.details-info p {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.details-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.details-actions button {
|
|
padding: 0.75rem 1.5rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.details-actions button:first-child {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.details-actions button:last-child {
|
|
background: #f5f5f5;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.details-actions button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.search-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.details-header {
|
|
grid-template-columns: 1fr;
|
|
text-align: center;
|
|
}
|
|
|
|
.details-header img {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.details-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
th, td {
|
|
padding: 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
/* Accessibility */
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* Status indicators */
|
|
.status-queued {
|
|
color: #f39c12;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
|
|
.status-downloading {
|
|
color: #3498db;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
|
|
.status-available {
|
|
color: #27ae60;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
|
|
.status-error {
|
|
color: #e74c3c;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
|
|
.status-done {
|
|
color: black;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Status table specific styles */
|
|
#status-table img {
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
#status-table td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.error-message {
|
|
color: #e74c3c;
|
|
text-align: center;
|
|
padding: 1rem !important;
|
|
}
|
|
|
|
/* Dark mode specific styles */
|
|
[data-theme="dark"] .uk-card,
|
|
[data-theme="dark"] .uk-modal-dialog {
|
|
background-color: var(--card-background);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
[data-theme="dark"] .uk-table {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
[data-theme="dark"] .uk-table-hover tbody tr:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .uk-button-default {
|
|
background-color: var(--card-background);
|
|
color: var(--text-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .uk-search-input {
|
|
background-color: var(--card-background);
|
|
color: var(--text-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .uk-select {
|
|
background-color: var(--card-background);
|
|
color: var(--text-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
/* Table styles */
|
|
.uk-table {
|
|
background-color: var(--table-background);
|
|
color: var(--text-color);
|
|
border-color: var(--table-border-color);
|
|
}
|
|
|
|
.uk-table th {
|
|
color: var(--text-color);
|
|
background-color: var(--table-background);
|
|
border-bottom-color: var(--table-border-color);
|
|
}
|
|
|
|
.uk-table td {
|
|
color: var(--text-color);
|
|
background-color: var(--table-background);
|
|
border-bottom-color: var(--table-border-color);
|
|
}
|
|
|
|
.uk-table-hover tbody tr:hover,
|
|
.uk-table-hover tbody tr:hover td {
|
|
background-color: var(--table-hover-background);
|
|
}
|
|
|
|
/* Input styles */
|
|
.uk-search-input,
|
|
.uk-input,
|
|
.uk-select,
|
|
.uk-textarea {
|
|
background-color: var(--input-background);
|
|
color: var(--text-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
/* Button styles */
|
|
.uk-button-default {
|
|
background-color: var(--card-background);
|
|
color: var(--text-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.uk-button-default:hover {
|
|
background-color: var(--table-hover-background);
|
|
color: var(--text-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
/* Dropdown styles */
|
|
.uk-dropdown {
|
|
background-color: var(--card-background);
|
|
color: var(--text-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.uk-dropdown-nav > li > a {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.uk-dropdown-nav > li > a:hover {
|
|
background-color: var(--table-hover-background);
|
|
}
|
|
|
|
/* Modal styles */
|
|
.modal-overlay {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.details-container {
|
|
background-color: var(--card-background);
|
|
color: var(--text-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
/* Status colors - ensure they remain visible in dark mode */
|
|
.status-downloading {
|
|
color: #4CAF50 !important;
|
|
}
|
|
|
|
.status-available {
|
|
color: #2196F3 !important;
|
|
}
|
|
|
|
.status-error {
|
|
color: #f44336 !important;
|
|
}
|
|
|
|
/* Header specific button styles */
|
|
header .uk-button-default {
|
|
color: var(--header-text) !important;
|
|
background-color: transparent;
|
|
border-color: var(--header-text);
|
|
}
|
|
|
|
header .uk-button-default:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-color: var(--header-text);
|
|
color: var(--header-text) !important;
|
|
}
|
|
|
|
/* Ensure dropdown text is visible when opened */
|
|
header .uk-dropdown {
|
|
background-color: var(--card-background);
|
|
}
|
|
|
|
header .uk-dropdown-nav > li > a {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
header .uk-dropdown-nav > li > a:hover {
|
|
color: var(--text-color);
|
|
background-color: var(--table-hover-background);
|
|
}
|
|
|
|
/* Update headings to use heading color */
|
|
h1, h2, h3, h4, h5, h6,
|
|
.uk-heading-small,
|
|
.uk-heading-medium,
|
|
.uk-heading-large,
|
|
.uk-heading-xlarge,
|
|
.uk-heading-2xlarge {
|
|
color: var(--heading-color) !important;
|
|
}
|
|
|
|
/* Ensure accordion titles are visible */
|
|
.uk-accordion-title {
|
|
color: var(--heading-color) !important;
|
|
}
|
|
|
|
/* Ensure search results heading is visible */
|
|
#results-section-accordion .uk-accordion-title h1 {
|
|
color: var(--heading-color) !important;
|
|
}
|