cleanup css
This commit is contained in:
Mateusz Gruszczyński
@@ -1,4 +1,4 @@
|
||||
.auth-toolbar {
|
||||
.auth-toolbar{
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
@@ -8,7 +8,7 @@
|
||||
z-index: 130;
|
||||
}
|
||||
|
||||
.auth-toolbar__btn.p-button {
|
||||
.auth-toolbar__btn.p-button{
|
||||
min-width: 2.6rem;
|
||||
height: 2.4rem;
|
||||
padding: 0.35rem 0.65rem;
|
||||
@@ -17,27 +17,25 @@
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.app-auth-view {
|
||||
.app-auth-view{
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.app-auth-view__content {
|
||||
.app-auth-view__content{
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.app-auth-view__content > * {
|
||||
.app-auth-view__content > *{
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.auth-shell,
|
||||
.auth-shell--login,
|
||||
.auth-shell--compact {
|
||||
.auth-shell, .auth-shell--compact{
|
||||
position: relative;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
@@ -48,8 +46,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.auth-card,
|
||||
.app-auth-view__content .auth-card--wide {
|
||||
.auth-card, .app-auth-view__content .auth-card--wide{
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin: 0 auto;
|
||||
@@ -64,12 +61,12 @@
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.auth-card__header {
|
||||
.auth-card__header{
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.auth-card__header h2 {
|
||||
.auth-card__header h2{
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.1;
|
||||
@@ -77,40 +74,38 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.auth-card__header p {
|
||||
.auth-card__header p{
|
||||
margin: 0;
|
||||
color: var(--text-soft);
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
.auth-form{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.auth-form--grid {
|
||||
.auth-form--grid{
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.auth-form--grid > .form-field,
|
||||
.auth-form--grid > small,
|
||||
.auth-form--grid > div {
|
||||
.auth-form--grid > .form-field, .auth-form--grid > small, .auth-form--grid > div{
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.auth-card__actions {
|
||||
.auth-card__actions{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.auth-card__actions > * {
|
||||
.auth-card__actions > *{
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.auth-link {
|
||||
.auth-link{
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
@@ -118,47 +113,45 @@
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.auth-link:hover {
|
||||
.auth-link:hover{
|
||||
color: var(--text-main);
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
|
||||
.p-button.auth-primary-btn {
|
||||
.p-button.auth-primary-btn{
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.form-field--full {
|
||||
.form-field--full{
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.layout-footer--auth {
|
||||
.layout-footer--auth{
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.app-auth-view__content {
|
||||
.app-auth-view__content{
|
||||
align-items: start;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.auth-shell,
|
||||
.auth-shell--login,
|
||||
.auth-shell--compact {
|
||||
.auth-shell, .auth-shell--compact{
|
||||
min-height: 0;
|
||||
padding: 4.5rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.auth-form--grid {
|
||||
.auth-form--grid{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.auth-card__actions--split {
|
||||
.auth-card__actions--split{
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.auth-toolbar {
|
||||
.auth-toolbar{
|
||||
top: 0.9rem;
|
||||
right: 0.9rem;
|
||||
}
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
.dashboard-focus-grid {
|
||||
.dashboard-focus-grid{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1.25rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-block {
|
||||
.dashboard-focus-block{
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-block--pie {
|
||||
.dashboard-focus-block--pie{
|
||||
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard-focus-pie {
|
||||
.dashboard-focus-pie{
|
||||
width: min(100%, 240px);
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
@@ -24,7 +24,7 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dashboard-focus-pie__inner {
|
||||
.dashboard-focus-pie__inner{
|
||||
width: 68%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
@@ -38,37 +38,37 @@
|
||||
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-size: clamp(1.4rem, 2.6vw, 2rem);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.dashboard-focus-pie__inner span {
|
||||
.dashboard-focus-pie__inner span{
|
||||
color: var(--text-soft);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dashboard-focus-summary {
|
||||
.dashboard-focus-summary{
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-summary__lead {
|
||||
.dashboard-focus-summary__lead{
|
||||
margin: 0;
|
||||
color: var(--text-soft);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.dashboard-focus-metrics {
|
||||
.dashboard-focus-metrics{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-metric {
|
||||
.dashboard-focus-metric{
|
||||
padding: 0.95rem 1rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
@@ -77,25 +77,25 @@
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-metric span {
|
||||
.dashboard-focus-metric span{
|
||||
color: var(--text-soft);
|
||||
font-size: 0.76rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dashboard-focus-metric strong {
|
||||
.dashboard-focus-metric strong{
|
||||
font-family: var(--font-title);
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.dashboard-focus-activity {
|
||||
.dashboard-focus-activity{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-activity__summary {
|
||||
.dashboard-focus-activity__summary{
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
@@ -103,18 +103,18 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dashboard-focus-activity__summary p {
|
||||
.dashboard-focus-activity__summary p{
|
||||
margin: 0;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.dashboard-focus-activity__summary strong {
|
||||
.dashboard-focus-activity__summary strong{
|
||||
font-family: var(--font-title);
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.dashboard-focus-columns {
|
||||
.dashboard-focus-columns{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 0.85rem;
|
||||
@@ -122,24 +122,23 @@
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.dashboard-focus-column {
|
||||
.dashboard-focus-column{
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.dashboard-focus-column small,
|
||||
.dashboard-focus-column span {
|
||||
.dashboard-focus-column small, .dashboard-focus-column span{
|
||||
color: var(--text-soft);
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-column strong {
|
||||
.dashboard-focus-column strong{
|
||||
font-family: var(--font-title);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-column__track {
|
||||
.dashboard-focus-column__track{
|
||||
width: 100%;
|
||||
min-height: 140px;
|
||||
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));
|
||||
}
|
||||
|
||||
.dashboard-focus-column__track span {
|
||||
.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 {
|
||||
.dashboard-focus-empty{
|
||||
min-height: 220px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.dashboard-focus-grid,
|
||||
.dashboard-focus-block--pie {
|
||||
.dashboard-focus-grid, .dashboard-focus-block--pie{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.dashboard-focus-metrics {
|
||||
.dashboard-focus-metrics{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dashboard-focus-columns {
|
||||
.dashboard-focus-columns{
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.dashboard-focus-column__track {
|
||||
.dashboard-focus-column__track{
|
||||
min-height: 120px;
|
||||
padding: 0.45rem;
|
||||
}
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
|
||||
.layout-shell {
|
||||
.layout-shell{
|
||||
min-height: 100vh;
|
||||
padding-left: var(--sidebar-width);
|
||||
transition: padding-left 0.2s ease;
|
||||
}
|
||||
|
||||
.layout-shell--collapsed {
|
||||
.layout-shell--collapsed{
|
||||
padding-left: var(--sidebar-collapsed-width);
|
||||
}
|
||||
|
||||
.layout-shell--collapsed .layout-sidebar {
|
||||
.layout-shell--collapsed .layout-sidebar{
|
||||
width: var(--sidebar-collapsed-width);
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
.layout-main{
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
.layout-sidebar{
|
||||
position: fixed;
|
||||
inset: 0 auto 0 0;
|
||||
width: var(--sidebar-width);
|
||||
@@ -27,19 +27,19 @@
|
||||
transition: width 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.layout-sidebar app-sidebar {
|
||||
.layout-sidebar app-sidebar{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
.layout-content{
|
||||
flex: 1;
|
||||
padding: 0 1.5rem 1.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.layout-footer {
|
||||
.layout-footer{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -48,7 +48,7 @@
|
||||
padding: 0 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.layout-overlay {
|
||||
.layout-overlay{
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
@@ -58,12 +58,12 @@
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.layout-overlay.is-visible {
|
||||
.layout-overlay.is-visible{
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
.topbar{
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -79,27 +79,25 @@
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
body.dark-theme .topbar {
|
||||
body.dark-theme .topbar{
|
||||
border-bottom-color: rgba(146, 170, 194, 0.12);
|
||||
background: rgba(23, 33, 43, 0.74);
|
||||
}
|
||||
|
||||
.topbar__right {
|
||||
.topbar__right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topbar__lang-picker,
|
||||
.auth-toolbar__select-wrap {
|
||||
.topbar__lang-picker, .auth-toolbar__select-wrap{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topbar__lang-picker::after,
|
||||
.auth-toolbar__select-wrap::after {
|
||||
content: '\e902';
|
||||
font-family: 'primeicons';
|
||||
.topbar__lang-picker::after, .auth-toolbar__select-wrap::after{
|
||||
content: "";
|
||||
font-family: "primeicons";
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
@@ -109,8 +107,7 @@ body.dark-theme .topbar {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.topbar__lang-select,
|
||||
.auth-toolbar__select {
|
||||
.topbar__lang-select, .auth-toolbar__select{
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
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;
|
||||
}
|
||||
|
||||
.topbar__lang-select:hover,
|
||||
.auth-toolbar__select:hover {
|
||||
.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 {
|
||||
.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 {
|
||||
.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 {
|
||||
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 {
|
||||
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 {
|
||||
.layout-shell, .layout-shell--collapsed{
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
.layout-sidebar{
|
||||
transform: translateX(-100%);
|
||||
width: min(88vw, var(--sidebar-width));
|
||||
}
|
||||
|
||||
.layout-sidebar.is-open {
|
||||
.layout-sidebar.is-open{
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.topbar,
|
||||
.layout-content,
|
||||
.layout-footer {
|
||||
.topbar, .layout-content, .layout-footer{
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
.topbar{
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.topbar__right {
|
||||
.topbar__right{
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
4
frontend/src/styles/styles.css
Normal file
4
frontend/src/styles/styles.css
Normal file
@@ -0,0 +1,4 @@
|
||||
@import "./styles/pages.css";
|
||||
@import "./styles/layout.css";
|
||||
@import "./styles/auth.css";
|
||||
@import "./styles/dashboard.css";
|
||||
Reference in New Issue
Block a user