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

fixes

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-04-14 13:35:40 +02:00
parent 9252915151
commit 1a2ae0d607
8 changed files with 152 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -538,19 +538,35 @@ body.dark-theme .metric-tile, .empty-state{
}
.p-button.p-button-secondary, .p-button.p-button-help, .p-button.p-button-outlined, .p-button.p-button-text{
background: transparent;
background: color-mix(in srgb, var(--surface-1) 88%, white 12%);
color: var(--text-main);
border-color: var(--border-strong);
border-color: color-mix(in srgb, var(--border-strong) 86%, transparent);
}
.p-button.p-button-secondary:not(.p-disabled):hover, .p-button.p-button-help:not(.p-disabled):hover, .p-button.p-button-outlined:not(.p-disabled):hover{
background: color-mix(in srgb, var(--surface-2) 82%, white 18%);
border-color: color-mix(in srgb, var(--border-strong) 96%, transparent);
}
.p-button.p-button-text{
border-color: transparent;
background: transparent;
}
body.dark-theme .p-button.p-button-secondary, body.dark-theme .p-button.p-button-help, body.dark-theme .p-button.p-button-outlined, body.dark-theme .p-button.p-button-text{
color: var(--text-main);
}
body.dark-theme .p-button.p-button-secondary, body.dark-theme .p-button.p-button-help, body.dark-theme .p-button.p-button-outlined{
background: color-mix(in srgb, var(--surface-1) 90%, white 10%);
border-color: rgba(146, 170, 194, 0.22);
}
body.dark-theme .p-button.p-button-secondary:not(.p-disabled):hover, body.dark-theme .p-button.p-button-help:not(.p-disabled):hover, body.dark-theme .p-button.p-button-outlined:not(.p-disabled):hover{
background: color-mix(in srgb, var(--surface-1) 84%, white 16%);
border-color: rgba(146, 170, 194, 0.34);
}
.p-button.p-button-danger{
background: transparent;
border-color: rgba(194, 70, 70, 0.5);
@@ -606,10 +622,14 @@ body.dark-theme .p-inputtext, body.dark-theme .p-inputtextarea, body.dark-theme
.p-tag{
border-radius: 999px;
font-size: 0.72rem;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.12em;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.15;
padding: 0.28rem 0.72rem;
min-width: max-content;
max-width: 100%;
}
@@ -712,10 +732,6 @@ body.dark-theme .app-table .p-datatable-tbody > tr:hover > td{
border-top: 1px solid var(--border-color);
}
.empty-state, .compact-empty{
padding: 1.2rem;
border: 1px dashed var(--border-strong);
@@ -1146,7 +1162,7 @@ body.dark-theme .topbar{
.p-tag{
font-size: 0.66rem;
font-size: 0.6rem;
}
.app-table{
@@ -1929,6 +1945,50 @@ body.dark-theme .inline-summary{
justify-content: center;
}
.operations-center__actions .btn-binary-accent{
background: rgba(141, 89, 58, 0.1);
border-color: rgba(141, 89, 58, 0.34);
color: #6f452d;
}
.operations-center__actions .btn-binary-accent:not(.p-disabled):hover{
background: rgba(141, 89, 58, 0.14);
border-color: rgba(141, 89, 58, 0.42);
}
body.dark-theme .operations-center__actions .btn-binary-accent{
background: rgba(75, 144, 217, 0.09);
border-color: rgba(75, 144, 217, 0.3);
color: #dbe8f5;
}
body.dark-theme .operations-center__actions .btn-binary-accent:not(.p-disabled):hover{
background: rgba(75, 144, 217, 0.13);
border-color: rgba(75, 144, 217, 0.4);
}
.header-actions-row .btn-pushover-neutral{
background: rgba(75, 144, 217, 0.08);
border-color: rgba(75, 144, 217, 0.26);
color: #2f5f8f;
}
.header-actions-row .btn-pushover-neutral:not(.p-disabled):hover{
background: rgba(75, 144, 217, 0.12);
border-color: rgba(75, 144, 217, 0.34);
}
body.dark-theme .header-actions-row .btn-pushover-neutral{
background: rgba(75, 144, 217, 0.08);
border-color: rgba(75, 144, 217, 0.28);
color: #dbe8f5;
}
body.dark-theme .header-actions-row .btn-pushover-neutral:not(.p-disabled):hover{
background: rgba(75, 144, 217, 0.12);
border-color: rgba(75, 144, 217, 0.38);
}
.operations-center__stats{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -2499,8 +2559,8 @@ app-page-header{
}
.repository-table .p-tag{
font-size: 0.68rem;
padding: 0.22rem 0.48rem;
font-size: 0.62rem;
padding: 0.24rem 0.58rem;
}
@@ -3115,29 +3175,52 @@ body.dark-theme .p-button:not(.p-button-secondary):not(.p-button-help):not(.p-bu
}
.p-select, .p-textarea, .p-inputtextarea, .p-inputtext, textarea.p-inputtextarea, textarea.p-textarea{
border-radius: 12px;
border: 1px solid var(--border-strong);
background: color-mix(in srgb, var(--surface-1) 90%, white 10%);
border-radius: 14px;
border: 1px solid rgba(126, 142, 158, 0.24);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 245, 241, 0.98) 100%);
color: var(--text-main);
box-shadow: none;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
body.dark-theme .p-select, body.dark-theme .p-textarea, body.dark-theme .p-inputtextarea, body.dark-theme .p-inputtext, body.dark-theme textarea.p-inputtextarea, body.dark-theme textarea.p-textarea{
background: rgba(255, 255, 255, 0.03);
background: linear-gradient(180deg, rgba(28, 38, 50, 0.98) 0%, rgba(23, 33, 44, 0.98) 100%);
color: var(--text-main);
border-color: var(--border-color);
border-color: rgba(146, 170, 194, 0.18);
box-shadow: 0 12px 24px rgba(5, 10, 18, 0.26);
}
.p-select{
display: flex;
align-items: center;
min-height: 2.95rem;
min-height: 3rem;
overflow: hidden;
}
.p-select:not(.p-disabled):hover{
border-color: rgba(141, 89, 58, 0.42);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 241, 236, 0.98) 100%);
}
body.dark-theme .p-select:not(.p-disabled):hover{
border-color: rgba(75, 144, 217, 0.24);
background: linear-gradient(180deg, rgba(29, 39, 51, 0.985) 0%, rgba(24, 34, 45, 0.985) 100%);
}
.p-select.p-focus, .p-select.p-inputwrapper-focus{
border-color: rgba(141, 89, 58, 0.62);
box-shadow: 0 0 0 3px rgba(141, 89, 58, 0.12), 0 10px 24px rgba(15, 23, 42, 0.06);
}
body.dark-theme .p-select.p-focus, body.dark-theme .p-select.p-inputwrapper-focus{
border-color: #4f95df;
box-shadow: 0 0 0 3px rgba(79, 149, 223, 0.16), 0 16px 30px rgba(5, 10, 18, 0.28);
}
.p-select .p-select-label, .p-select .p-select-label.p-placeholder{
width: 100%;
min-height: 0;
padding: 0.78rem 0 0.78rem 1rem;
padding: 0.84rem 0 0.84rem 1rem;
border: 0;
border-radius: 0;
background: transparent;
@@ -3145,9 +3228,9 @@ body.dark-theme .p-select, body.dark-theme .p-textarea, body.dark-theme .p-input
display: flex;
align-items: center;
font-family: var(--font-body);
font-size: 0.96rem;
font-size: 0.94rem;
font-weight: 500;
line-height: 1.35;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
color: var(--text-main);
@@ -3170,6 +3253,12 @@ body.dark-theme .p-select, body.dark-theme .p-textarea, body.dark-theme .p-input
align-self: stretch;
color: var(--text-soft);
flex: 0 0 2.85rem;
background: transparent;
}
.p-select .p-select-dropdown .p-icon{
width: 0.95rem;
height: 0.95rem;
}
.p-inputtext:enabled:focus, .p-textarea:enabled:focus, .p-inputtextarea:enabled:focus, textarea.p-inputtextarea:enabled:focus, textarea.p-textarea:enabled:focus{
@@ -3192,22 +3281,26 @@ body.dark-theme .auth-card .p-inputtext:enabled:focus, body.dark-theme .auth-car
box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}
.p-select-overlay, .p-component-overlay{
backdrop-filter: blur(12px);
background: color-mix(in srgb, var(--surface-1) 97%, white 3%);
border: 1px solid var(--border-color);
.p-select-overlay{
backdrop-filter: blur(18px);
background: linear-gradient(180deg, rgba(251, 250, 247, 0.98) 0%, rgba(244, 242, 238, 0.98) 100%);
border: 1px solid rgba(126, 142, 158, 0.16);
color: var(--text-main);
box-shadow: var(--shadow-lg);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
border-radius: 16px;
overflow: hidden;
}
body.dark-theme .p-select-overlay, body.dark-theme .p-component-overlay{
background: #1f2935;
border-color: rgba(146, 170, 194, 0.2);
body.dark-theme .p-select-overlay{
background: linear-gradient(180deg, rgba(34, 46, 61, 0.98) 0%, rgba(24, 34, 45, 0.98) 100%);
border-color: rgba(146, 170, 194, 0.12);
box-shadow: 0 22px 48px rgba(5, 10, 18, 0.38);
}
.p-select-list{
padding: 0.35rem;
padding: 0.35rem 0;
background: transparent;
gap: 0;
}
body.dark-theme .p-select-list{
@@ -3215,7 +3308,8 @@ body.dark-theme .p-select-list{
}
.p-select-option{
border-radius: 10px;
border-radius: 0;
padding: 0.82rem 1rem;
font-size: 0.92rem;
line-height: 1.35;
color: var(--text-main);
@@ -3223,13 +3317,18 @@ body.dark-theme .p-select-list{
}
.p-select-option:hover{
background: #dbe5f0;
color: #13202c;
background: rgba(17, 20, 23, 0.045);
color: #111417;
}
.p-select-option.p-focus{
background: rgba(17, 20, 23, 0.055);
color: #111417;
}
.p-select-option.p-select-option-selected{
background: #c8d8ea;
color: #13202c;
background: rgba(141, 89, 58, 0.09);
color: #6f452d;
font-weight: 600;
}
@@ -3238,13 +3337,18 @@ body.dark-theme .p-select-option{
}
body.dark-theme .p-select-option:hover{
background: #314355;
background: rgba(255, 255, 255, 0.03);
color: #f4f8fb;
}
body.dark-theme .p-select-option.p-focus{
background: rgba(255, 255, 255, 0.04);
color: #f4f8fb;
}
body.dark-theme .p-select-option.p-select-option-selected{
background: #d9e1ea;
color: #13202c;
background: rgba(75, 144, 217, 0.22);
color: #f4f8fb;
font-weight: 600;
}