Ryan Malloy
e92b7f8700
Because cats have 9 lives, but servers don't - so they need backup-restore! Complete backup solution with S3/MinIO support. - Full WordPress backup (files + database) - S3 / MinIO / S3-compatible storage backends - Scheduled automatic backups - Disaster recovery / one-click restore - Backup integrity validation - Cat-themed admin interface Includes build.sh and .distignore for WordPress-installable release ZIPs.
898 lines
20 KiB
CSS
898 lines
20 KiB
CSS
/**
|
|
* TigerStyle Life9 Admin Styles
|
|
*
|
|
* Modern, accessible admin interface styles for the backup plugin
|
|
* Compatible with WordPress admin and Alpine.js components
|
|
*/
|
|
|
|
/* ============================================================================
|
|
Base Styles & Variables
|
|
========================================================================= */
|
|
|
|
:root {
|
|
/* Color scheme */
|
|
--tigerstyle-primary: #1e40af;
|
|
--tigerstyle-primary-hover: #1d4ed8;
|
|
--tigerstyle-secondary: #059669;
|
|
--tigerstyle-danger: #dc2626;
|
|
--tigerstyle-warning: #d97706;
|
|
--tigerstyle-success: #059669;
|
|
--tigerstyle-info: #0284c7;
|
|
|
|
/* Neutrals */
|
|
--tigerstyle-gray-50: #f9fafb;
|
|
--tigerstyle-gray-100: #f3f4f6;
|
|
--tigerstyle-gray-200: #e5e7eb;
|
|
--tigerstyle-gray-300: #d1d5db;
|
|
--tigerstyle-gray-400: #9ca3af;
|
|
--tigerstyle-gray-500: #6b7280;
|
|
--tigerstyle-gray-600: #4b5563;
|
|
--tigerstyle-gray-700: #374151;
|
|
--tigerstyle-gray-800: #1f2937;
|
|
--tigerstyle-gray-900: #111827;
|
|
|
|
/* Spacing */
|
|
--tigerstyle-spacing-xs: 0.25rem;
|
|
--tigerstyle-spacing-sm: 0.5rem;
|
|
--tigerstyle-spacing-md: 1rem;
|
|
--tigerstyle-spacing-lg: 1.5rem;
|
|
--tigerstyle-spacing-xl: 2rem;
|
|
--tigerstyle-spacing-2xl: 3rem;
|
|
|
|
/* Border radius */
|
|
--tigerstyle-radius-sm: 0.25rem;
|
|
--tigerstyle-radius-md: 0.375rem;
|
|
--tigerstyle-radius-lg: 0.5rem;
|
|
--tigerstyle-radius-xl: 0.75rem;
|
|
|
|
/* Shadows */
|
|
--tigerstyle-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--tigerstyle-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--tigerstyle-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
|
|
/* Transitions */
|
|
--tigerstyle-transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Layout Components
|
|
========================================================================= */
|
|
|
|
.tigerstyle-life9-admin {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.tigerstyle-header {
|
|
margin-bottom: var(--tigerstyle-spacing-xl);
|
|
padding-bottom: var(--tigerstyle-spacing-lg);
|
|
border-bottom: 2px solid var(--tigerstyle-gray-200);
|
|
}
|
|
|
|
.tigerstyle-header h1 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tigerstyle-spacing-sm);
|
|
margin: 0 0 var(--tigerstyle-spacing-sm) 0;
|
|
font-size: 1.875rem;
|
|
font-weight: 700;
|
|
color: var(--tigerstyle-gray-900);
|
|
}
|
|
|
|
.tigerstyle-icon {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.tigerstyle-header .description {
|
|
margin: 0;
|
|
font-size: 1.125rem;
|
|
color: var(--tigerstyle-gray-600);
|
|
}
|
|
|
|
.tigerstyle-card {
|
|
background: white;
|
|
border: 1px solid var(--tigerstyle-gray-200);
|
|
border-radius: var(--tigerstyle-radius-lg);
|
|
padding: var(--tigerstyle-spacing-xl);
|
|
margin-bottom: var(--tigerstyle-spacing-xl);
|
|
box-shadow: var(--tigerstyle-shadow-sm);
|
|
transition: var(--tigerstyle-transition);
|
|
}
|
|
|
|
.tigerstyle-card:hover {
|
|
box-shadow: var(--tigerstyle-shadow-md);
|
|
}
|
|
|
|
.tigerstyle-card h3 {
|
|
margin: 0 0 var(--tigerstyle-spacing-lg) 0;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--tigerstyle-gray-900);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tigerstyle-spacing-sm);
|
|
}
|
|
|
|
/* ============================================================================
|
|
Form Styles
|
|
========================================================================= */
|
|
|
|
.form-section {
|
|
margin-bottom: var(--tigerstyle-spacing-xl);
|
|
}
|
|
|
|
.form-section h4 {
|
|
margin: 0 0 var(--tigerstyle-spacing-md) 0;
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--tigerstyle-gray-800);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: var(--tigerstyle-spacing-lg);
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: var(--tigerstyle-spacing-sm);
|
|
font-weight: 500;
|
|
color: var(--tigerstyle-gray-700);
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select,
|
|
.form-group textarea {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: var(--tigerstyle-spacing-sm) var(--tigerstyle-spacing-md);
|
|
border: 1px solid var(--tigerstyle-gray-300);
|
|
border-radius: var(--tigerstyle-radius-md);
|
|
font-size: 0.875rem;
|
|
transition: var(--tigerstyle-transition);
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus,
|
|
.form-group textarea:focus {
|
|
outline: none;
|
|
border-color: var(--tigerstyle-primary);
|
|
box-shadow: 0 0 0 3px rgb(30 64 175 / 0.1);
|
|
}
|
|
|
|
.form-group textarea {
|
|
min-height: 80px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.form-group small {
|
|
display: block;
|
|
margin-top: var(--tigerstyle-spacing-xs);
|
|
font-size: 0.75rem;
|
|
color: var(--tigerstyle-gray-500);
|
|
}
|
|
|
|
/* ============================================================================
|
|
Option Selection Components
|
|
========================================================================= */
|
|
|
|
.backup-type-grid,
|
|
.storage-options {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: var(--tigerstyle-spacing-md);
|
|
margin: var(--tigerstyle-spacing-lg) 0;
|
|
}
|
|
|
|
.backup-type-option,
|
|
.storage-option,
|
|
.source-option {
|
|
position: relative;
|
|
border: 2px solid var(--tigerstyle-gray-200);
|
|
border-radius: var(--tigerstyle-radius-lg);
|
|
padding: var(--tigerstyle-spacing-lg);
|
|
cursor: pointer;
|
|
transition: var(--tigerstyle-transition);
|
|
background: white;
|
|
}
|
|
|
|
.backup-type-option:hover,
|
|
.storage-option:hover,
|
|
.source-option:hover {
|
|
border-color: var(--tigerstyle-primary);
|
|
box-shadow: var(--tigerstyle-shadow-md);
|
|
}
|
|
|
|
.backup-type-option.selected,
|
|
.storage-option.selected,
|
|
.source-option.selected {
|
|
border-color: var(--tigerstyle-primary);
|
|
background: rgb(30 64 175 / 0.05);
|
|
}
|
|
|
|
.backup-type-option input,
|
|
.storage-option input,
|
|
.source-option input {
|
|
position: absolute;
|
|
top: var(--tigerstyle-spacing-sm);
|
|
right: var(--tigerstyle-spacing-sm);
|
|
margin: 0;
|
|
width: auto;
|
|
max-width: none;
|
|
}
|
|
|
|
.option-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tigerstyle-spacing-sm);
|
|
}
|
|
|
|
.option-icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.option-title {
|
|
font-weight: 600;
|
|
color: var(--tigerstyle-gray-900);
|
|
}
|
|
|
|
.option-description {
|
|
font-size: 0.875rem;
|
|
color: var(--tigerstyle-gray-600);
|
|
}
|
|
|
|
/* ============================================================================
|
|
Progress Components
|
|
========================================================================= */
|
|
|
|
.tigerstyle-progress-container {
|
|
padding: var(--tigerstyle-spacing-lg);
|
|
border-radius: var(--tigerstyle-radius-lg);
|
|
background: white;
|
|
border: 1px solid var(--tigerstyle-info);
|
|
}
|
|
|
|
.tigerstyle-progress {
|
|
width: 100%;
|
|
}
|
|
|
|
.progress-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--tigerstyle-spacing-md);
|
|
}
|
|
|
|
.progress-header h3 {
|
|
margin: 0;
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--tigerstyle-gray-900);
|
|
}
|
|
|
|
.progress-percentage {
|
|
font-weight: 700;
|
|
color: var(--tigerstyle-primary);
|
|
}
|
|
|
|
.progress-bar-container {
|
|
width: 100%;
|
|
height: 12px;
|
|
background: var(--tigerstyle-gray-200);
|
|
border-radius: var(--tigerstyle-radius-lg);
|
|
overflow: hidden;
|
|
margin-bottom: var(--tigerstyle-spacing-md);
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--tigerstyle-primary), var(--tigerstyle-secondary));
|
|
border-radius: var(--tigerstyle-radius-lg);
|
|
transition: width 0.3s ease-in-out;
|
|
min-width: 2px;
|
|
}
|
|
|
|
.progress-details p {
|
|
margin: 0 0 var(--tigerstyle-spacing-sm) 0;
|
|
font-weight: 500;
|
|
color: var(--tigerstyle-gray-700);
|
|
}
|
|
|
|
.progress-stats {
|
|
display: flex;
|
|
gap: var(--tigerstyle-spacing-lg);
|
|
font-size: 0.875rem;
|
|
color: var(--tigerstyle-gray-600);
|
|
}
|
|
|
|
/* ============================================================================
|
|
Button Styles
|
|
========================================================================= */
|
|
|
|
.button.button-primary {
|
|
background: var(--tigerstyle-primary);
|
|
border-color: var(--tigerstyle-primary);
|
|
color: white;
|
|
font-weight: 500;
|
|
transition: var(--tigerstyle-transition);
|
|
}
|
|
|
|
.button.button-primary:hover,
|
|
.button.button-primary:focus {
|
|
background: var(--tigerstyle-primary-hover);
|
|
border-color: var(--tigerstyle-primary-hover);
|
|
color: white;
|
|
}
|
|
|
|
.button.button-danger {
|
|
background: var(--tigerstyle-danger);
|
|
border-color: var(--tigerstyle-danger);
|
|
color: white;
|
|
}
|
|
|
|
.button.button-danger:hover,
|
|
.button.button-danger:focus {
|
|
background: #b91c1c;
|
|
border-color: #b91c1c;
|
|
color: white;
|
|
}
|
|
|
|
.button.button-large {
|
|
padding: var(--tigerstyle-spacing-sm) var(--tigerstyle-spacing-lg);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: var(--tigerstyle-spacing-md);
|
|
margin-top: var(--tigerstyle-spacing-xl);
|
|
padding-top: var(--tigerstyle-spacing-lg);
|
|
border-top: 1px solid var(--tigerstyle-gray-200);
|
|
}
|
|
|
|
.step-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: var(--tigerstyle-spacing-xl);
|
|
padding-top: var(--tigerstyle-spacing-lg);
|
|
border-top: 1px solid var(--tigerstyle-gray-200);
|
|
}
|
|
|
|
/* ============================================================================
|
|
File Selection Components
|
|
========================================================================= */
|
|
|
|
.file-selection-container {
|
|
border: 1px solid var(--tigerstyle-gray-200);
|
|
border-radius: var(--tigerstyle-radius-lg);
|
|
padding: var(--tigerstyle-spacing-lg);
|
|
background: var(--tigerstyle-gray-50);
|
|
}
|
|
|
|
.exclude-patterns {
|
|
margin-top: var(--tigerstyle-spacing-lg);
|
|
}
|
|
|
|
.exclude-patterns h4 {
|
|
margin: 0 0 var(--tigerstyle-spacing-sm) 0;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--tigerstyle-gray-800);
|
|
}
|
|
|
|
.pattern-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--tigerstyle-spacing-sm);
|
|
margin-bottom: var(--tigerstyle-spacing-md);
|
|
}
|
|
|
|
.pattern-tag {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tigerstyle-spacing-xs);
|
|
padding: var(--tigerstyle-spacing-xs) var(--tigerstyle-spacing-sm);
|
|
background: var(--tigerstyle-primary);
|
|
color: white;
|
|
border-radius: var(--tigerstyle-radius-md);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.pattern-tag button {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.add-pattern {
|
|
display: flex;
|
|
gap: var(--tigerstyle-spacing-sm);
|
|
margin-bottom: var(--tigerstyle-spacing-md);
|
|
}
|
|
|
|
.add-pattern input {
|
|
flex: 1;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.pattern-presets {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--tigerstyle-spacing-sm);
|
|
align-items: center;
|
|
}
|
|
|
|
.pattern-presets h5 {
|
|
margin: 0;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--tigerstyle-gray-700);
|
|
}
|
|
|
|
.pattern-presets button {
|
|
font-size: 0.75rem;
|
|
padding: var(--tigerstyle-spacing-xs) var(--tigerstyle-spacing-sm);
|
|
}
|
|
|
|
/* ============================================================================
|
|
Upload Components
|
|
========================================================================= */
|
|
|
|
.upload-area {
|
|
border: 2px dashed var(--tigerstyle-gray-300);
|
|
border-radius: var(--tigerstyle-radius-lg);
|
|
padding: var(--tigerstyle-spacing-2xl);
|
|
text-align: center;
|
|
transition: var(--tigerstyle-transition);
|
|
background: var(--tigerstyle-gray-50);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.upload-area:hover,
|
|
.upload-area.drag-over {
|
|
border-color: var(--tigerstyle-primary);
|
|
background: rgb(30 64 175 / 0.05);
|
|
}
|
|
|
|
.upload-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--tigerstyle-spacing-md);
|
|
}
|
|
|
|
.upload-icon {
|
|
font-size: 3rem;
|
|
color: var(--tigerstyle-gray-400);
|
|
}
|
|
|
|
.upload-content h4 {
|
|
margin: 0;
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--tigerstyle-gray-900);
|
|
}
|
|
|
|
.upload-content p {
|
|
margin: 0;
|
|
color: var(--tigerstyle-gray-600);
|
|
}
|
|
|
|
.uploaded-file-info {
|
|
margin-top: var(--tigerstyle-spacing-lg);
|
|
padding: var(--tigerstyle-spacing-lg);
|
|
background: white;
|
|
border: 1px solid var(--tigerstyle-gray-200);
|
|
border-radius: var(--tigerstyle-radius-lg);
|
|
}
|
|
|
|
.file-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tigerstyle-spacing-xs);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Security Components
|
|
========================================================================= */
|
|
|
|
.password-strength {
|
|
margin-top: var(--tigerstyle-spacing-sm);
|
|
}
|
|
|
|
.strength-meter {
|
|
width: 100%;
|
|
height: 6px;
|
|
background: var(--tigerstyle-gray-200);
|
|
border-radius: var(--tigerstyle-radius-md);
|
|
overflow: hidden;
|
|
margin-bottom: var(--tigerstyle-spacing-xs);
|
|
}
|
|
|
|
.strength-fill {
|
|
height: 100%;
|
|
transition: width 0.3s ease-in-out;
|
|
border-radius: var(--tigerstyle-radius-md);
|
|
}
|
|
|
|
.strength-meter.weak .strength-fill {
|
|
background: var(--tigerstyle-danger);
|
|
}
|
|
|
|
.strength-meter.fair .strength-fill {
|
|
background: var(--tigerstyle-warning);
|
|
}
|
|
|
|
.strength-meter.good .strength-fill {
|
|
background: #eab308;
|
|
}
|
|
|
|
.strength-meter.strong .strength-fill {
|
|
background: var(--tigerstyle-success);
|
|
}
|
|
|
|
.strength-text {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.password-mismatch {
|
|
color: var(--tigerstyle-danger);
|
|
font-size: 0.75rem;
|
|
margin-top: var(--tigerstyle-spacing-xs);
|
|
}
|
|
|
|
/* ============================================================================
|
|
Warning & Alert Styles
|
|
========================================================================= */
|
|
|
|
.tigerstyle-warning-banner {
|
|
border-left: 4px solid var(--tigerstyle-warning);
|
|
margin-bottom: var(--tigerstyle-spacing-xl);
|
|
}
|
|
|
|
.final-warning {
|
|
background: rgb(220 38 38 / 0.05);
|
|
border: 2px solid var(--tigerstyle-danger);
|
|
border-radius: var(--tigerstyle-radius-lg);
|
|
padding: var(--tigerstyle-spacing-lg);
|
|
margin: var(--tigerstyle-spacing-lg) 0;
|
|
}
|
|
|
|
.final-warning h4 {
|
|
margin: 0 0 var(--tigerstyle-spacing-sm) 0;
|
|
color: var(--tigerstyle-danger);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tigerstyle-spacing-sm);
|
|
}
|
|
|
|
.confirmation-section {
|
|
margin: var(--tigerstyle-spacing-lg) 0;
|
|
}
|
|
|
|
.confirmation-checkbox {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--tigerstyle-spacing-sm);
|
|
padding: var(--tigerstyle-spacing-md);
|
|
background: var(--tigerstyle-gray-50);
|
|
border-radius: var(--tigerstyle-radius-md);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.confirmation-checkbox input {
|
|
margin: 0;
|
|
width: auto;
|
|
max-width: none;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Backup List Components
|
|
========================================================================= */
|
|
|
|
.backup-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tigerstyle-spacing-md);
|
|
}
|
|
|
|
.backup-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--tigerstyle-spacing-lg);
|
|
border: 1px solid var(--tigerstyle-gray-200);
|
|
border-radius: var(--tigerstyle-radius-lg);
|
|
background: white;
|
|
cursor: pointer;
|
|
transition: var(--tigerstyle-transition);
|
|
}
|
|
|
|
.backup-item:hover {
|
|
border-color: var(--tigerstyle-primary);
|
|
box-shadow: var(--tigerstyle-shadow-md);
|
|
}
|
|
|
|
.backup-item.selected {
|
|
border-color: var(--tigerstyle-primary);
|
|
background: rgb(30 64 175 / 0.05);
|
|
}
|
|
|
|
.backup-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.backup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--tigerstyle-spacing-sm);
|
|
}
|
|
|
|
.backup-header h4 {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--tigerstyle-gray-900);
|
|
}
|
|
|
|
.backup-date {
|
|
font-size: 0.75rem;
|
|
color: var(--tigerstyle-gray-500);
|
|
}
|
|
|
|
.backup-details {
|
|
display: flex;
|
|
gap: var(--tigerstyle-spacing-md);
|
|
margin-bottom: var(--tigerstyle-spacing-sm);
|
|
font-size: 0.875rem;
|
|
color: var(--tigerstyle-gray-600);
|
|
}
|
|
|
|
.backup-contents {
|
|
display: flex;
|
|
gap: var(--tigerstyle-spacing-sm);
|
|
}
|
|
|
|
.content-badge {
|
|
padding: var(--tigerstyle-spacing-xs) var(--tigerstyle-spacing-sm);
|
|
background: var(--tigerstyle-gray-100);
|
|
border-radius: var(--tigerstyle-radius-md);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--tigerstyle-gray-700);
|
|
}
|
|
|
|
.backup-actions {
|
|
display: flex;
|
|
gap: var(--tigerstyle-spacing-sm);
|
|
}
|
|
|
|
/* ============================================================================
|
|
Advanced Options
|
|
========================================================================= */
|
|
|
|
.advanced-options {
|
|
border: 1px solid var(--tigerstyle-gray-200);
|
|
border-radius: var(--tigerstyle-radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.advanced-options summary {
|
|
padding: var(--tigerstyle-spacing-md) var(--tigerstyle-spacing-lg);
|
|
background: var(--tigerstyle-gray-50);
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
color: var(--tigerstyle-gray-700);
|
|
border-bottom: 1px solid var(--tigerstyle-gray-200);
|
|
}
|
|
|
|
.advanced-options summary:hover {
|
|
background: var(--tigerstyle-gray-100);
|
|
}
|
|
|
|
.advanced-content {
|
|
padding: var(--tigerstyle-spacing-lg);
|
|
}
|
|
|
|
.checkbox-option {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--tigerstyle-spacing-sm);
|
|
margin-bottom: var(--tigerstyle-spacing-md);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox-option input {
|
|
margin: 0;
|
|
width: auto;
|
|
max-width: none;
|
|
}
|
|
|
|
.checkbox-option span {
|
|
font-weight: 500;
|
|
color: var(--tigerstyle-gray-700);
|
|
}
|
|
|
|
.checkbox-option small {
|
|
display: block;
|
|
margin-top: var(--tigerstyle-spacing-xs);
|
|
color: var(--tigerstyle-gray-500);
|
|
}
|
|
|
|
/* ============================================================================
|
|
System Information
|
|
========================================================================= */
|
|
|
|
.extension-status {
|
|
display: flex;
|
|
gap: var(--tigerstyle-spacing-md);
|
|
font-family: monospace;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.system-actions {
|
|
margin-top: var(--tigerstyle-spacing-lg);
|
|
padding-top: var(--tigerstyle-spacing-lg);
|
|
border-top: 1px solid var(--tigerstyle-gray-200);
|
|
display: flex;
|
|
gap: var(--tigerstyle-spacing-sm);
|
|
}
|
|
|
|
.test-connection {
|
|
margin-top: var(--tigerstyle-spacing-md);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tigerstyle-spacing-md);
|
|
}
|
|
|
|
.test-success {
|
|
color: var(--tigerstyle-success);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.test-error {
|
|
color: var(--tigerstyle-danger);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Responsive Design
|
|
========================================================================= */
|
|
|
|
@media (max-width: 768px) {
|
|
.backup-type-grid,
|
|
.storage-options {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.progress-stats {
|
|
flex-direction: column;
|
|
gap: var(--tigerstyle-spacing-sm);
|
|
}
|
|
|
|
.form-actions,
|
|
.step-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.backup-item {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--tigerstyle-spacing-md);
|
|
}
|
|
|
|
.backup-details {
|
|
flex-direction: column;
|
|
gap: var(--tigerstyle-spacing-sm);
|
|
}
|
|
|
|
.system-actions {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Animation & Transitions
|
|
========================================================================= */
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.loading-spinner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--tigerstyle-spacing-xl);
|
|
color: var(--tigerstyle-gray-500);
|
|
}
|
|
|
|
.loading-spinner::before {
|
|
content: "⏳";
|
|
margin-right: var(--tigerstyle-spacing-sm);
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Alpine.js transition classes */
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
|
|
.x-transition-enter {
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
.x-transition-leave {
|
|
animation: fadeIn 0.3s ease-out reverse;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Utility Classes
|
|
========================================================================= */
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.font-mono {
|
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
|
|
}
|
|
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.text-sm {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.text-xs {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.mt-0 { margin-top: 0; }
|
|
.mb-0 { margin-bottom: 0; }
|
|
.mt-2 { margin-top: var(--tigerstyle-spacing-sm); }
|
|
.mb-2 { margin-bottom: var(--tigerstyle-spacing-sm); }
|
|
.mt-4 { margin-top: var(--tigerstyle-spacing-md); }
|
|
.mb-4 { margin-bottom: var(--tigerstyle-spacing-md); } |