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

cleanup css

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-04-14 11:56:32 +02:00
parent 14ccb23967
commit 8ea6652062
5 changed files with 261 additions and 764 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/styles/auth.css
View File

@@ -1,4 +1,4 @@
.auth-toolbar { .auth-toolbar{
position: fixed; position: fixed;
top: 1rem; top: 1rem;
right: 1rem; right: 1rem;
@@ -8,7 +8,7 @@
z-index: 130; z-index: 130;
} }
.auth-toolbar__btn.p-button { .auth-toolbar__btn.p-button{
min-width: 2.6rem; min-width: 2.6rem;
height: 2.4rem; height: 2.4rem;
padding: 0.35rem 0.65rem; padding: 0.35rem 0.65rem;
@@ -17,27 +17,25 @@
color: var(--text-main); color: var(--text-main);
} }
.app-auth-view { .app-auth-view{
min-height: 100vh; min-height: 100vh;
display: grid; display: grid;
grid-template-rows: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto;
} }
.app-auth-view__content { .app-auth-view__content{
min-height: 0; min-height: 0;
display: grid; display: grid;
place-items: center; place-items: center;
padding: 1.5rem; padding: 1.5rem;
} }
.app-auth-view__content > * { .app-auth-view__content > *{
width: 100%; width: 100%;
max-width: 720px; max-width: 720px;
} }
.auth-shell, .auth-shell, .auth-shell--compact{
.auth-shell--login,
.auth-shell--compact {
position: relative; position: relative;
display: grid; display: grid;
align-items: center; align-items: center;
@@ -48,8 +46,7 @@
margin: 0; margin: 0;
} }
.auth-card, .auth-card, .app-auth-view__content .auth-card--wide{
.app-auth-view__content .auth-card--wide {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
margin: 0 auto; margin: 0 auto;
@@ -64,12 +61,12 @@
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
.auth-card__header { .auth-card__header{
display: grid; display: grid;
gap: 0.45rem; gap: 0.45rem;
} }
.auth-card__header h2 { .auth-card__header h2{
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.1; line-height: 1.1;
@@ -77,40 +74,38 @@
text-transform: uppercase; text-transform: uppercase;
} }
.auth-card__header p { .auth-card__header p{
margin: 0; margin: 0;
color: var(--text-soft); color: var(--text-soft);
font-size: 0.82rem; font-size: 0.82rem;
line-height: 1.6; line-height: 1.6;
} }
.auth-form { .auth-form{
display: grid; display: grid;
gap: 1rem; gap: 1rem;
} }
.auth-form--grid { .auth-form--grid{
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.auth-form--grid > .form-field, .auth-form--grid > .form-field, .auth-form--grid > small, .auth-form--grid > div{
.auth-form--grid > small,
.auth-form--grid > div {
min-width: 0; min-width: 0;
} }
.auth-card__actions { .auth-card__actions{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: 1rem;
} }
.auth-card__actions > * { .auth-card__actions > *{
min-width: 0; min-width: 0;
} }
.auth-link { .auth-link{
font-size: 0.78rem; font-size: 0.78rem;
letter-spacing: 0.14em; letter-spacing: 0.14em;
text-transform: uppercase; text-transform: uppercase;
@@ -118,47 +113,45 @@
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
} }
.auth-link:hover { .auth-link:hover{
color: var(--text-main); color: var(--text-main);
border-bottom-color: currentColor; border-bottom-color: currentColor;
} }
.p-button.auth-primary-btn { .p-button.auth-primary-btn{
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
.form-field--full { .form-field--full{
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.layout-footer--auth { .layout-footer--auth{
padding-top: 0.5rem; padding-top: 0.5rem;
} }
@media (max-width: 991px) { @media (max-width: 991px) {
.app-auth-view__content { .app-auth-view__content{
align-items: start; align-items: start;
padding: 1rem; padding: 1rem;
} }
.auth-shell, .auth-shell, .auth-shell--compact{
.auth-shell--login,
.auth-shell--compact {
min-height: 0; min-height: 0;
padding: 4.5rem 0 0.5rem; padding: 4.5rem 0 0.5rem;
} }
.auth-form--grid { .auth-form--grid{
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.auth-card__actions--split { .auth-card__actions--split{
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
} }
.auth-toolbar { .auth-toolbar{
top: 0.9rem; top: 0.9rem;
right: 0.9rem; right: 0.9rem;
} }

58
frontend/src/styles/dashboard.css
View File

@@ -1,21 +1,21 @@
.dashboard-focus-grid { .dashboard-focus-grid{
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem; gap: 1.25rem;
margin-top: 1.5rem; margin-top: 1.5rem;
} }
.dashboard-focus-block { .dashboard-focus-block{
display: grid; display: grid;
gap: 1.25rem; gap: 1.25rem;
} }
.dashboard-focus-block--pie { .dashboard-focus-block--pie{
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
align-items: center; align-items: center;
} }
.dashboard-focus-pie { .dashboard-focus-pie{
width: min(100%, 240px); width: min(100%, 240px);
aspect-ratio: 1; aspect-ratio: 1;
border-radius: 50%; border-radius: 50%;
@@ -24,7 +24,7 @@
margin: 0 auto; margin: 0 auto;
} }
.dashboard-focus-pie__inner { .dashboard-focus-pie__inner{
width: 68%; width: 68%;
aspect-ratio: 1; aspect-ratio: 1;
border-radius: 50%; border-radius: 50%;
@@ -38,37 +38,37 @@
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
} }
.dashboard-focus-pie__inner strong { .dashboard-focus-pie__inner strong{
font-family: var(--font-title); font-family: var(--font-title);
font-size: clamp(1.4rem, 2.6vw, 2rem); font-size: clamp(1.4rem, 2.6vw, 2rem);
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.dashboard-focus-pie__inner span { .dashboard-focus-pie__inner span{
color: var(--text-soft); color: var(--text-soft);
font-size: 0.78rem; font-size: 0.78rem;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
} }
.dashboard-focus-summary { .dashboard-focus-summary{
display: grid; display: grid;
gap: 0.75rem; gap: 0.75rem;
} }
.dashboard-focus-summary__lead { .dashboard-focus-summary__lead{
margin: 0; margin: 0;
color: var(--text-soft); color: var(--text-soft);
line-height: 1.6; line-height: 1.6;
} }
.dashboard-focus-metrics { .dashboard-focus-metrics{
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem; gap: 0.75rem;
} }
.dashboard-focus-metric { .dashboard-focus-metric{
padding: 0.95rem 1rem; padding: 0.95rem 1rem;
border-radius: 16px; border-radius: 16px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
@@ -77,25 +77,25 @@
gap: 0.35rem; gap: 0.35rem;
} }
.dashboard-focus-metric span { .dashboard-focus-metric span{
color: var(--text-soft); color: var(--text-soft);
font-size: 0.76rem; font-size: 0.76rem;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
} }
.dashboard-focus-metric strong { .dashboard-focus-metric strong{
font-family: var(--font-title); font-family: var(--font-title);
font-size: 1rem; font-size: 1rem;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.dashboard-focus-activity { .dashboard-focus-activity{
display: grid; display: grid;
gap: 1rem; gap: 1rem;
} }
.dashboard-focus-activity__summary { .dashboard-focus-activity__summary{
display: flex; display: flex;
align-items: baseline; align-items: baseline;
justify-content: space-between; justify-content: space-between;
@@ -103,18 +103,18 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.dashboard-focus-activity__summary p { .dashboard-focus-activity__summary p{
margin: 0; margin: 0;
color: var(--text-soft); color: var(--text-soft);
} }
.dashboard-focus-activity__summary strong { .dashboard-focus-activity__summary strong{
font-family: var(--font-title); font-family: var(--font-title);
font-size: 1.5rem; font-size: 1.5rem;
letter-spacing: 0.06em; letter-spacing: 0.06em;
} }
.dashboard-focus-columns { .dashboard-focus-columns{
display: grid; display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.85rem; gap: 0.85rem;
@@ -122,24 +122,23 @@
min-height: 220px; min-height: 220px;
} }
.dashboard-focus-column { .dashboard-focus-column{
display: grid; display: grid;
gap: 0.55rem; gap: 0.55rem;
justify-items: center; justify-items: center;
} }
.dashboard-focus-column small, .dashboard-focus-column small, .dashboard-focus-column span{
.dashboard-focus-column span {
color: var(--text-soft); color: var(--text-soft);
font-size: 0.76rem; font-size: 0.76rem;
} }
.dashboard-focus-column strong { .dashboard-focus-column strong{
font-family: var(--font-title); font-family: var(--font-title);
font-size: 0.9rem; font-size: 0.9rem;
} }
.dashboard-focus-column__track { .dashboard-focus-column__track{
width: 100%; width: 100%;
min-height: 140px; min-height: 140px;
display: flex; display: flex;
@@ -151,36 +150,35 @@
background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 90%, transparent), color-mix(in srgb, var(--surface-0) 94%, transparent)); background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 90%, transparent), color-mix(in srgb, var(--surface-0) 94%, transparent));
} }
.dashboard-focus-column__track span { .dashboard-focus-column__track span{
width: min(36px, 100%); width: min(36px, 100%);
border-radius: 999px; border-radius: 999px;
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 84%, white 8%), color-mix(in srgb, var(--blue) 82%, white 6%)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 84%, white 8%), color-mix(in srgb, var(--blue) 82%, white 6%));
min-height: 0; min-height: 0;
} }
.dashboard-focus-empty { .dashboard-focus-empty{
min-height: 220px; min-height: 220px;
display: grid; display: grid;
place-items: center; place-items: center;
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {
.dashboard-focus-grid, .dashboard-focus-grid, .dashboard-focus-block--pie{
.dashboard-focus-block--pie {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
@media (max-width: 720px) { @media (max-width: 720px) {
.dashboard-focus-metrics { .dashboard-focus-metrics{
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.dashboard-focus-columns { .dashboard-focus-columns{
gap: 0.55rem; gap: 0.55rem;
} }
.dashboard-focus-column__track { .dashboard-focus-column__track{
min-height: 120px; min-height: 120px;
padding: 0.45rem; padding: 0.45rem;
} }

69
frontend/src/styles/layout.css
View File

@@ -1,25 +1,25 @@
.layout-shell { .layout-shell{
min-height: 100vh; min-height: 100vh;
padding-left: var(--sidebar-width); padding-left: var(--sidebar-width);
transition: padding-left 0.2s ease; transition: padding-left 0.2s ease;
} }
.layout-shell--collapsed { .layout-shell--collapsed{
padding-left: var(--sidebar-collapsed-width); padding-left: var(--sidebar-collapsed-width);
} }
.layout-shell--collapsed .layout-sidebar { .layout-shell--collapsed .layout-sidebar{
width: var(--sidebar-collapsed-width); width: var(--sidebar-collapsed-width);
} }
.layout-main { .layout-main{
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.layout-sidebar { .layout-sidebar{
position: fixed; position: fixed;
inset: 0 auto 0 0; inset: 0 auto 0 0;
width: var(--sidebar-width); width: var(--sidebar-width);
@@ -27,19 +27,19 @@
transition: width 0.2s ease, transform 0.2s ease; transition: width 0.2s ease, transform 0.2s ease;
} }
.layout-sidebar app-sidebar { .layout-sidebar app-sidebar{
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.layout-content { .layout-content{
flex: 1; flex: 1;
padding: 0 1.5rem 1.5rem; padding: 0 1.5rem 1.5rem;
min-width: 0; min-width: 0;
} }
.layout-footer { .layout-footer{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -48,7 +48,7 @@
padding: 0 2rem 1.5rem; padding: 0 2rem 1.5rem;
} }
.layout-overlay { .layout-overlay{
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
@@ -58,12 +58,12 @@
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
} }
.layout-overlay.is-visible { .layout-overlay.is-visible{
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
.topbar { .topbar{
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -79,27 +79,25 @@
background: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.12);
} }
body.dark-theme .topbar { body.dark-theme .topbar{
border-bottom-color: rgba(146, 170, 194, 0.12); border-bottom-color: rgba(146, 170, 194, 0.12);
background: rgba(23, 33, 43, 0.74); background: rgba(23, 33, 43, 0.74);
} }
.topbar__right { .topbar__right{
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.8rem; gap: 0.8rem;
min-width: 0; min-width: 0;
} }
.topbar__lang-picker, .topbar__lang-picker, .auth-toolbar__select-wrap{
.auth-toolbar__select-wrap {
position: relative; position: relative;
} }
.topbar__lang-picker::after, .topbar__lang-picker::after, .auth-toolbar__select-wrap::after{
.auth-toolbar__select-wrap::after { content: "";
content: '\e902'; font-family: "primeicons";
font-family: 'primeicons';
position: absolute; position: absolute;
right: 1rem; right: 1rem;
top: 50%; top: 50%;
@@ -109,8 +107,7 @@ body.dark-theme .topbar {
font-size: 0.8rem; font-size: 0.8rem;
} }
.topbar__lang-select, .topbar__lang-select, .auth-toolbar__select{
.auth-toolbar__select {
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
@@ -129,65 +126,57 @@ body.dark-theme .topbar {
transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease; transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
} }
.topbar__lang-select:hover, .topbar__lang-select:hover, .auth-toolbar__select:hover{
.auth-toolbar__select:hover {
border-color: color-mix(in srgb, var(--accent) 56%, var(--border-strong)); border-color: color-mix(in srgb, var(--accent) 56%, var(--border-strong));
} }
.topbar__lang-select:focus, .topbar__lang-select:focus, .auth-toolbar__select:focus{
.auth-toolbar__select:focus {
outline: none; outline: none;
border-color: color-mix(in srgb, var(--blue) 72%, var(--border-strong)); border-color: color-mix(in srgb, var(--blue) 72%, var(--border-strong));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
} }
.topbar__lang-select option, .topbar__lang-select option, .auth-toolbar__select option{
.auth-toolbar__select option {
color: var(--text-main); color: var(--text-main);
background: var(--surface-1); background: var(--surface-1);
} }
body.dark-theme .topbar__lang-select, body.dark-theme .topbar__lang-select, body.dark-theme .auth-toolbar__select{
body.dark-theme .auth-toolbar__select {
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
border-color: var(--border-color); border-color: var(--border-color);
} }
body.dark-theme .topbar__lang-select option, body.dark-theme .topbar__lang-select option, body.dark-theme .auth-toolbar__select option{
body.dark-theme .auth-toolbar__select option {
color: #d6e0e8; color: #d6e0e8;
background: #1c2631; background: #1c2631;
} }
@media (max-width: 991px) { @media (max-width: 991px) {
.layout-shell, .layout-shell, .layout-shell--collapsed{
.layout-shell--collapsed {
padding-left: 0; padding-left: 0;
} }
.layout-sidebar { .layout-sidebar{
transform: translateX(-100%); transform: translateX(-100%);
width: min(88vw, var(--sidebar-width)); width: min(88vw, var(--sidebar-width));
} }
.layout-sidebar.is-open { .layout-sidebar.is-open{
transform: translateX(0); transform: translateX(0);
} }
.topbar, .topbar, .layout-content, .layout-footer{
.layout-content,
.layout-footer {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
.topbar { .topbar{
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
.topbar__right { .topbar__right{
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;

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

File diff suppressed because it is too large Load Diff

4
frontend/src/styles/styles.css Normal file
View File

@@ -0,0 +1,4 @@
@import "./styles/pages.css";
@import "./styles/layout.css";
@import "./styles/auth.css";
@import "./styles/dashboard.css";