first commit
This commit is contained in:
Mateusz Gruszczyński
165
frontend/src/styles/auth.css
Normal file
165
frontend/src/styles/auth.css
Normal file
@@ -0,0 +1,165 @@
|
||||
.auth-toolbar {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
z-index: 130;
|
||||
}
|
||||
|
||||
.auth-toolbar__btn.p-button {
|
||||
min-width: 2.6rem;
|
||||
height: 2.4rem;
|
||||
padding: 0.35rem 0.65rem;
|
||||
border-color: var(--border-color);
|
||||
background: color-mix(in srgb, var(--surface-1) 90%, transparent);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.app-auth-view {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.app-auth-view__content {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.app-auth-view__content > * {
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.auth-shell,
|
||||
.auth-shell--login,
|
||||
.auth-shell--compact {
|
||||
position: relative;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-items: stretch;
|
||||
width: 100%;
|
||||
min-height: min(100%, 720px);
|
||||
padding: clamp(4.5rem, 8vh, 5.5rem) 0 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.auth-card,
|
||||
.app-auth-view__content .auth-card--wide {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 1.2rem;
|
||||
padding: 2rem;
|
||||
border-radius: 24px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.auth-card__header {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.auth-card__header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.1;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.auth-card__header p {
|
||||
margin: 0;
|
||||
color: var(--text-soft);
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.auth-form--grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.auth-form--grid > .form-field,
|
||||
.auth-form--grid > small,
|
||||
.auth-form--grid > div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.auth-card__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.auth-card__actions > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.auth-link {
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-soft);
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.auth-link:hover {
|
||||
color: var(--text-main);
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
|
||||
.p-button.auth-primary-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.form-field--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.layout-footer--auth {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.app-auth-view__content {
|
||||
align-items: start;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.auth-shell,
|
||||
.auth-shell--login,
|
||||
.auth-shell--compact {
|
||||
min-height: 0;
|
||||
padding: 4.5rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.auth-form--grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.auth-card__actions--split {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.auth-toolbar {
|
||||
top: 0.9rem;
|
||||
right: 0.9rem;
|
||||
}
|
||||
}
|
||||
187
frontend/src/styles/dashboard.css
Normal file
187
frontend/src/styles/dashboard.css
Normal file
@@ -0,0 +1,187 @@
|
||||
.dashboard-focus-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1.25rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-block {
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-block--pie {
|
||||
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard-focus-pie {
|
||||
width: min(100%, 240px);
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dashboard-focus-pie__inner {
|
||||
width: 68%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 0.25rem;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
background: color-mix(in srgb, var(--surface-1) 96%, transparent);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.dashboard-focus-pie__inner strong {
|
||||
font-family: var(--font-title);
|
||||
font-size: clamp(1.4rem, 2.6vw, 2rem);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.dashboard-focus-pie__inner span {
|
||||
color: var(--text-soft);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dashboard-focus-summary {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-summary__lead {
|
||||
margin: 0;
|
||||
color: var(--text-soft);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.dashboard-focus-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-metric {
|
||||
padding: 0.95rem 1rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: color-mix(in srgb, var(--surface-1) 92%, transparent);
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-metric span {
|
||||
color: var(--text-soft);
|
||||
font-size: 0.76rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dashboard-focus-metric strong {
|
||||
font-family: var(--font-title);
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.dashboard-focus-activity {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-activity__summary {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dashboard-focus-activity__summary p {
|
||||
margin: 0;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.dashboard-focus-activity__summary strong {
|
||||
font-family: var(--font-title);
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.dashboard-focus-columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 0.85rem;
|
||||
align-items: end;
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.dashboard-focus-column {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.dashboard-focus-column small,
|
||||
.dashboard-focus-column span {
|
||||
color: var(--text-soft);
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-column strong {
|
||||
font-family: var(--font-title);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-column__track {
|
||||
width: 100%;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
padding: 0.6rem;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--border-color);
|
||||
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 {
|
||||
width: min(36px, 100%);
|
||||
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%));
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.dashboard-focus-empty {
|
||||
min-height: 220px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.dashboard-focus-grid,
|
||||
.dashboard-focus-block--pie {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.dashboard-focus-metrics {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dashboard-focus-columns {
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-column__track {
|
||||
min-height: 120px;
|
||||
padding: 0.45rem;
|
||||
}
|
||||
}
|
||||
195
frontend/src/styles/layout.css
Normal file
195
frontend/src/styles/layout.css
Normal file
@@ -0,0 +1,195 @@
|
||||
|
||||
.layout-shell {
|
||||
min-height: 100vh;
|
||||
padding-left: var(--sidebar-width);
|
||||
transition: padding-left 0.2s ease;
|
||||
}
|
||||
|
||||
.layout-shell--collapsed {
|
||||
padding-left: var(--sidebar-collapsed-width);
|
||||
}
|
||||
|
||||
.layout-shell--collapsed .layout-sidebar {
|
||||
width: var(--sidebar-collapsed-width);
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
position: fixed;
|
||||
inset: 0 auto 0 0;
|
||||
width: var(--sidebar-width);
|
||||
z-index: 100;
|
||||
transition: width 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.layout-sidebar app-sidebar {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
flex: 1;
|
||||
padding: 0 1.5rem 1.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.layout-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.85rem 1.2rem;
|
||||
padding: 0 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.layout-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 95;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.layout-overlay.is-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 90;
|
||||
min-height: 68px;
|
||||
padding: 0.85rem 1.5rem;
|
||||
border-bottom: 1px solid rgba(17, 20, 23, 0.1);
|
||||
backdrop-filter: blur(8px);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
body.dark-theme .topbar {
|
||||
border-bottom-color: rgba(146, 170, 194, 0.12);
|
||||
background: rgba(23, 33, 43, 0.74);
|
||||
}
|
||||
|
||||
.topbar__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topbar__lang-picker,
|
||||
.auth-toolbar__select-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topbar__lang-picker::after,
|
||||
.auth-toolbar__select-wrap::after {
|
||||
content: '\e902';
|
||||
font-family: 'primeicons';
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
color: var(--text-soft);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.topbar__lang-select,
|
||||
.auth-toolbar__select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
min-width: 10.5rem;
|
||||
min-height: 2.95rem;
|
||||
padding: 0.72rem 2.7rem 0.72rem 1rem;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: color-mix(in srgb, var(--surface-1) 88%, white 12%);
|
||||
color: var(--text-main);
|
||||
font: inherit;
|
||||
font-size: 0.96rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
|
||||
}
|
||||
|
||||
.topbar__lang-select:hover,
|
||||
.auth-toolbar__select:hover {
|
||||
border-color: color-mix(in srgb, var(--accent) 56%, var(--border-strong));
|
||||
}
|
||||
|
||||
.topbar__lang-select:focus,
|
||||
.auth-toolbar__select:focus {
|
||||
outline: none;
|
||||
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);
|
||||
}
|
||||
|
||||
.topbar__lang-select option,
|
||||
.auth-toolbar__select option {
|
||||
color: var(--text-main);
|
||||
background: var(--surface-1);
|
||||
}
|
||||
|
||||
body.dark-theme .topbar__lang-select,
|
||||
body.dark-theme .auth-toolbar__select {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
body.dark-theme .topbar__lang-select option,
|
||||
body.dark-theme .auth-toolbar__select option {
|
||||
color: #d6e0e8;
|
||||
background: #1c2631;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.layout-shell,
|
||||
.layout-shell--collapsed {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
transform: translateX(-100%);
|
||||
width: min(88vw, var(--sidebar-width));
|
||||
}
|
||||
|
||||
.layout-sidebar.is-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.topbar,
|
||||
.layout-content,
|
||||
.layout-footer {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.topbar__right {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
3817
frontend/src/styles/pages.css
Normal file
3817
frontend/src/styles/pages.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user