gru/mikrotik_backup_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new features

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-04-14 15:43:25 +02:00
parent 1a2ae0d607
commit 92a0f99fb3
17 changed files with 580 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/styles/pages.css
View File

@@ -2382,12 +2382,15 @@ app-page-header{
}
.router-detail-grid--inspection{
grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.9fr);
align-items: start;
}
.router-detail-inspection-stack{
.router-detail-split-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.router-detail-grid--stack{
@@ -2510,7 +2513,7 @@ app-page-header{
}
@media (max-width: 980px) {
.diff-workspace__pair, .router-detail-grid--inspection{
.diff-workspace__pair, .router-detail-grid--inspection, .router-detail-split-grid{
grid-template-columns: 1fr;
}
@@ -3432,3 +3435,35 @@ body.dark-theme .p-toast .p-toast-summary, body.dark-theme .p-toast .p-toast-det
height: 2rem;
}
.device-settings-form{display:block;}
.device-settings-stack{display:grid;gap:12px;}
.device-settings-actions{margin-top:16px;}
.device-toggle{position:relative;display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--border-color) 88%, transparent);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--surface-1) 92%, transparent),color-mix(in srgb,var(--surface-2) 90%, transparent));cursor:pointer;transition:border-color .15s ease,transform .15s ease,background .15s ease,box-shadow .15s ease;box-shadow:var(--shadow-md);overflow:hidden;}
.device-toggle::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);opacity:0;transition:opacity .15s ease;}
.device-toggle:hover{border-color:color-mix(in srgb,var(--accent) 55%, var(--border-color));transform:translateY(-1px);}
.device-toggle:hover::after,.device-toggle.is-active::after{opacity:1;}
.device-toggle.is-active{border-color:color-mix(in srgb,var(--accent) 60%, var(--border-color));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%, var(--surface-1)),color-mix(in srgb,var(--accent) 6%, var(--surface-2)));box-shadow:0 16px 40px -26px color-mix(in srgb,var(--accent) 45%, transparent),var(--shadow-md);}
.device-toggle input{position:absolute;opacity:0;pointer-events:none;inline-size:1px;block-size:1px;}
.device-toggle__switch{position:relative;display:inline-flex;align-items:center;inline-size:46px;block-size:26px;border-radius:999px;background:color-mix(in srgb,var(--surface-3) 88%, transparent);border:1px solid color-mix(in srgb,var(--border-color) 82%, transparent);box-shadow:inset 0 1px 2px rgba(0,0,0,.16);transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;}
.device-toggle__switch::after{content:"";position:absolute;inset:3px auto 3px 3px;inline-size:18px;block-size:18px;border-radius:50%;background:var(--text-main);box-shadow:0 4px 10px rgba(0,0,0,.18);transition:transform .15s ease,background .15s ease;}
.device-toggle__icon{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:12px;background:color-mix(in srgb,var(--surface-3) 84%, transparent);border:1px solid color-mix(in srgb,var(--border-color) 82%, transparent);color:var(--text-muted);font-size:1rem;}
.device-toggle.is-active .device-toggle__icon{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%, var(--border-color));background:color-mix(in srgb,var(--accent) 12%, var(--surface-3));}
.device-toggle.is-active .device-toggle__switch{background:color-mix(in srgb,var(--accent) 20%, var(--surface-3));border-color:color-mix(in srgb,var(--accent) 35%, var(--border-color));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%, transparent);}
.device-toggle.is-active .device-toggle__switch::after{transform:translateX(20px);background:var(--accent);}
.device-toggle__content{display:grid;gap:4px;min-width:0;}
.device-toggle__content strong{font-size:.94rem;color:var(--text-main);}
.device-toggle__content small{line-height:1.45;color:var(--text-muted);}
.device-toggle__state{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding:8px 10px;border-radius:999px;background:color-mix(in srgb,var(--surface-3) 88%, transparent);border:1px solid color-mix(in srgb,var(--border-color) 82%, transparent);}
.device-toggle.is-active .device-toggle__state{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%, var(--border-color));background:color-mix(in srgb,var(--accent) 12%, var(--surface-3));}
body.dark-theme .device-toggle{background:linear-gradient(135deg,color-mix(in srgb,var(--surface-2) 94%, transparent),color-mix(in srgb,var(--surface-1) 88%, transparent));}
body.dark-theme .device-toggle.is-active{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%, var(--surface-2)),color-mix(in srgb,var(--accent) 7%, var(--surface-1)));}
@media (max-width: 1100px){
.router-detail-split-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width: 720px){
.device-toggle{grid-template-columns:auto auto auto minmax(0,1fr);align-items:start;}
.device-toggle__state{grid-column:2 / -1;justify-self:start;}
}