Change : UI/UX design
This commit is contained in:
@@ -836,26 +836,198 @@ a.sidebar-brand-link {
|
||||
.log-elapsed { font-size: 11px; font-family: var(--mono); color: var(--text3); margin-top: 6px; }
|
||||
|
||||
/* ── BACKUP LIST ───────────────────────────────────────────── */
|
||||
.backup-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.backup-item {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 11px 14px; border-radius: var(--radius);
|
||||
background: var(--surface2); gap: 10px; flex-wrap: wrap;
|
||||
/* ── BACKUP LIST ───────────────────────────────────────────── */
|
||||
.backup-columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 22px;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.backup-columns { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.backup-column { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
|
||||
|
||||
.backup-column-header {
|
||||
display: flex; flex-direction: column; gap: 8px;
|
||||
padding: 14px 16px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
transition: border-color var(--trans), background var(--trans), transform var(--trans);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.backup-column-header .section-title { margin: 0; font-size: 12px; }
|
||||
.backup-column-header .card-meta {
|
||||
align-self: flex-start;
|
||||
font-size: 10px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.backup-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
|
||||
.backup-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
padding: 14px 16px;
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
transition: border-color var(--trans), background var(--trans), box-shadow var(--trans);
|
||||
}
|
||||
.backup-item:hover {
|
||||
border-color: rgba(79,140,255,0.25);
|
||||
border-color: rgba(79,140,255,0.28);
|
||||
background: var(--bg4);
|
||||
transform: translateX(2px);
|
||||
box-shadow: var(--glow-accent);
|
||||
}
|
||||
.backup-name { font-family: var(--mono); font-size: 12px; color: var(--text2); flex: 1; min-width: 0; word-break: break-all; }
|
||||
.backup-actions { display: flex; gap: 5px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
|
||||
.btn-delete-backup { color: var(--red) !important; opacity: 0.7; transition: opacity 0.15s; }
|
||||
|
||||
.backup-item-main { min-width: 0; padding-bottom: 12px; }
|
||||
.backup-item:not(:has(.backup-actions)) .backup-item-main { padding-bottom: 0; }
|
||||
|
||||
.backup-name {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: var(--text);
|
||||
word-break: break-all;
|
||||
display: block;
|
||||
}
|
||||
.backup-name i { margin-right: 6px; opacity: 0.85; }
|
||||
|
||||
.backup-meta {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
font-size: 10px;
|
||||
color: var(--text3);
|
||||
font-family: var(--mono);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.backup-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.backup-actions .btn-sm { font-size: 11px; padding: 5px 10px; }
|
||||
.backup-actions .btn-sm:not(.btn-audit):not(.btn-delete-backup) { min-height: 30px; }
|
||||
|
||||
.btn-delete-backup { color: var(--red) !important; opacity: 0.75; transition: opacity 0.15s; }
|
||||
.btn-delete-backup:hover { opacity: 1; }
|
||||
.btn-audit { color: var(--cyan) !important; opacity: 0.85; }
|
||||
.btn-audit { color: var(--cyan) !important; opacity: 0.9; }
|
||||
.btn-audit:hover { opacity: 1; }
|
||||
|
||||
/* ── CLOUD PAGE ────────────────────────────────────────────── */
|
||||
.cloud-status-card .card-header { display: none; }
|
||||
|
||||
.cloud-status-hero {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.cloud-status-hero-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
.cloud-status-icon {
|
||||
width: 48px; height: 48px; border-radius: 14px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 20px; color: var(--accent2); flex-shrink: 0;
|
||||
background: rgba(79,140,255,0.1);
|
||||
border: 1px solid rgba(79,140,255,0.18);
|
||||
box-shadow: var(--glow-accent);
|
||||
}
|
||||
.cloud-status-title {
|
||||
font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
|
||||
color: var(--text); line-height: 1.2;
|
||||
}
|
||||
.cloud-status-sub {
|
||||
font-size: 12px; color: var(--text3); margin-top: 4px; line-height: 1.4;
|
||||
}
|
||||
.cloud-status-hero-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.cloud-conn-badge {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 6px 12px; border-radius: 20px;
|
||||
font-family: var(--mono); font-size: 11px; font-weight: 600;
|
||||
background: rgba(79,140,255,0.1);
|
||||
border: 1px solid rgba(79,140,255,0.2);
|
||||
color: var(--accent2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cloud-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.cloud-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.cloud-stats-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
.cloud-stats-grid .stat-card {
|
||||
text-align: left;
|
||||
padding: 16px 18px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.cloud-stats-grid .stat-number {
|
||||
font-size: 26px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.cloud-stats-grid .stat-number.is-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
word-break: break-all;
|
||||
}
|
||||
.cloud-stats-grid .stat-label {
|
||||
text-align: left;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.cloud-conn-msg {
|
||||
color: var(--text3);
|
||||
font-size: 11px;
|
||||
font-family: var(--mono);
|
||||
margin-top: 14px;
|
||||
padding: 10px 14px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.cloud-upload-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
max-width: 560px;
|
||||
}
|
||||
.cloud-upload-form .form-group { width: 100%; }
|
||||
.cloud-upload-form .btn-primary { align-self: flex-start; }
|
||||
|
||||
.cloud-backup-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* ── MODAL ─────────────────────────────────────────────────── */
|
||||
.modal-overlay {
|
||||
position: fixed; inset: 0; z-index: 1000;
|
||||
|
||||
Reference in New Issue
Block a user