Kylian Schmidt
dbd67f6039
- Fix template rendering by storing rendered HTML in variable before writing This resolves subdirectories not appearing in navigation despite being correctly detected and included in template variables - Add missing template variables (paths.work_dir) to gallery config - Add CGI refresh handler for web-based gallery regeneration - Improve PDF export functionality with better error handling - Add ESC key shortcut documentation for exiting selection mode - Enhanced export manager with proper dependency checking Fixes issue where new subdirectories were detected but not displayed in browser navigation due to incomplete template rendering.
441 lines
8.4 KiB
CSS
441 lines
8.4 KiB
CSS
/* ========================================
|
|
EXPORT FUNCTIONALITY STYLES
|
|
======================================== */
|
|
|
|
/* Selection mode styles */
|
|
.selection-mode .grid-item {
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.selection-mode .grid-item:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Selection overlay */
|
|
.selection-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 8px;
|
|
z-index: 5;
|
|
}
|
|
|
|
.selection-mode .selection-overlay {
|
|
display: flex;
|
|
}
|
|
|
|
.selection-checkbox {
|
|
background: var(--card-background);
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 50%;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.grid-item.selected .selection-checkbox {
|
|
background: var(--primary-color, #007bff);
|
|
border-color: var(--primary-color, #007bff);
|
|
color: white;
|
|
}
|
|
|
|
.checkbox-icon {
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Selection counter */
|
|
.selection-counter {
|
|
position: fixed;
|
|
bottom: 100px;
|
|
right: 20px;
|
|
background: var(--card-background);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 20px;
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-color);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
z-index: 999;
|
|
}
|
|
|
|
/* Export button styles */
|
|
.export-btn {
|
|
background: #28a745 !important;
|
|
}
|
|
|
|
.export-btn:hover {
|
|
background: #218838 !important;
|
|
}
|
|
|
|
.export-btn:disabled {
|
|
background: #6c757d !important;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Export messages */
|
|
.export-message {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
padding: 12px 24px;
|
|
border-radius: 6px;
|
|
font-weight: 500;
|
|
z-index: 1001;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
|
|
.export-message-info {
|
|
background: #d1ecf1;
|
|
color: #0c5460;
|
|
border: 1px solid #bee5eb;
|
|
}
|
|
|
|
.export-message-success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
.export-message-warning {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
border: 1px solid #ffeaa7;
|
|
}
|
|
|
|
.export-message-error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Selection mode indicator */
|
|
.selection-mode::before {
|
|
content: "Selection Mode - Click plots to select them";
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--primary-color, #007bff);
|
|
color: white;
|
|
text-align: center;
|
|
padding: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Adjust main content when in selection mode */
|
|
.selection-mode {
|
|
padding-top: 40px;
|
|
}
|
|
|
|
/* Export instructions overlay */
|
|
.export-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1002;
|
|
}
|
|
|
|
.export-instructions {
|
|
background: var(--card-background);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
max-width: 600px;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.export-instructions h3 {
|
|
margin: 0 0 16px 0;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.export-instructions p {
|
|
margin: 0 0 16px 0;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.export-data {
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.export-data textarea {
|
|
width: 100%;
|
|
height: 200px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
background: var(--background-color);
|
|
color: var(--text-color);
|
|
resize: vertical;
|
|
}
|
|
|
|
.export-commands {
|
|
margin: 16px 0;
|
|
padding: 12px;
|
|
background: var(--header-background);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.export-command-container {
|
|
margin: 20px 0;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.export-command {
|
|
background: var(--header-background);
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.export-command code {
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
color: var(--text-color);
|
|
word-break: break-all;
|
|
display: block;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.export-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
background: var(--card-background);
|
|
}
|
|
|
|
.export-actions button {
|
|
padding: 8px 16px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background: var(--card-background);
|
|
color: var(--text-color);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.export-actions button:hover {
|
|
background: var(--header-background);
|
|
}
|
|
|
|
.export-actions button:last-child {
|
|
background: var(--primary-color, #007bff);
|
|
color: white;
|
|
border-color: var(--primary-color, #007bff);
|
|
}
|
|
|
|
.export-actions button:last-child:hover {
|
|
background: var(--primary-color-dark, #0056b3);
|
|
}
|
|
|
|
.copy-btn, .close-btn {
|
|
padding: 8px 16px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--card-background);
|
|
color: var(--text-color);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
background: var(--primary-color, #007bff);
|
|
color: white;
|
|
border-color: var(--primary-color, #007bff);
|
|
}
|
|
|
|
.close-btn {
|
|
background: #dc3545;
|
|
color: white;
|
|
border-color: #dc3545;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
background: #c82333;
|
|
border-color: #bd2130;
|
|
}
|
|
|
|
.export-details, .export-tips {
|
|
margin: 20px 0;
|
|
padding: 16px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.export-details {
|
|
background: var(--header-background);
|
|
}
|
|
|
|
.export-tips {
|
|
background: var(--card-background);
|
|
border-color: var(--primary-color, #007bff);
|
|
border-left: 4px solid var(--primary-color, #007bff);
|
|
}
|
|
|
|
.export-details h4, .export-tips h4 {
|
|
margin: 0 0 12px 0;
|
|
color: var(--text-color);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.export-details ul, .export-tips ul {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.export-details li, .export-tips li {
|
|
margin: 8px 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.export-details code, .export-tips code {
|
|
background: var(--background-color);
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 12px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.export-tips kbd {
|
|
background: var(--header-background);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 3px;
|
|
padding: 2px 6px;
|
|
font-family: inherit;
|
|
font-size: 12px;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.copy-feedback {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
z-index: 1003;
|
|
animation: fadeInOut 2s ease-in-out;
|
|
}
|
|
|
|
.copy-feedback-success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
.copy-feedback-error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
|
|
@keyframes fadeInOut {
|
|
0% { opacity: 0; transform: translateY(-10px); }
|
|
20% { opacity: 1; transform: translateY(0); }
|
|
80% { opacity: 1; transform: translateY(0); }
|
|
100% { opacity: 0; transform: translateY(-10px); }
|
|
}
|
|
|
|
/* Dark theme adjustments */
|
|
[data-theme="dark"] .selection-checkbox {
|
|
background: var(--card-background);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .grid-item.selected .selection-checkbox {
|
|
background: var(--primary-color, #0d6efd);
|
|
border-color: var(--primary-color, #0d6efd);
|
|
}
|
|
|
|
[data-theme="dark"] .export-message-info {
|
|
background: #0c5460;
|
|
color: #d1ecf1;
|
|
border-color: #086972;
|
|
}
|
|
|
|
[data-theme="dark"] .export-message-success {
|
|
background: #155724;
|
|
color: #d4edda;
|
|
border-color: #1e7e34;
|
|
}
|
|
|
|
[data-theme="dark"] .export-message-warning {
|
|
background: #856404;
|
|
color: #fff3cd;
|
|
border-color: #b58b14;
|
|
}
|
|
|
|
[data-theme="dark"] .export-message-error {
|
|
background: #721c24;
|
|
color: #f8d7da;
|
|
border-color: #a94442;
|
|
}
|
|
|
|
[data-theme="dark"] .copy-feedback-success {
|
|
background: #155724;
|
|
color: #d4edda;
|
|
border-color: #1e7e34;
|
|
}
|
|
|
|
[data-theme="dark"] .copy-feedback-error {
|
|
background: #721c24;
|
|
color: #f8d7da;
|
|
border-color: #a94442;
|
|
}
|
|
|
|
[data-theme="dark"] .export-tips kbd {
|
|
background: var(--background-color);
|
|
color: var(--text-color);
|
|
}
|