diff --git a/frontend/src/styles/auth.css b/frontend/src/styles/auth.css index 42bccf7..ba63242 100644 --- a/frontend/src/styles/auth.css +++ b/frontend/src/styles/auth.css @@ -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; } diff --git a/frontend/src/styles/dashboard.css b/frontend/src/styles/dashboard.css index 0e26165..ad20d09 100644 --- a/frontend/src/styles/dashboard.css +++ b/frontend/src/styles/dashboard.css @@ -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; } diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css index 4ec88d1..06e7a55 100644 --- a/frontend/src/styles/layout.css +++ b/frontend/src/styles/layout.css @@ -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; diff --git a/frontend/src/styles/pages.css b/frontend/src/styles/pages.css index 37c1769..4023813 100644 --- a/frontend/src/styles/pages.css +++ b/frontend/src/styles/pages.css @@ -89,11 +89,11 @@ body.dark-theme::before{ opacity: 0.15; } -body, .p-component, .p-inputtext, .p-dropdown, .p-button, .p-card, .p-tag, .p-inputswitch, .p-table{ +body, .p-component, .p-inputtext, .p-button, .p-card, .p-tag, .p-table{ font-family: var(--font-body); } -pre, code, .page-header__title, .dashboard-hero__title, .topbar__headline, .sidebar-brand__text h2, .stat-card__value, .stat-card__label, .section-card__title, .hero-spec strong, .hero-terminal__tabs, .runbook-item strong, .table-primary{ +pre, code, .page-header__title, .topbar__headline, .sidebar-brand__text h2, .stat-card__value, .stat-card__label, .section-card__title, .table-primary{ font-family: var(--font-title); } @@ -198,19 +198,19 @@ body.dark-theme .topbar{ background: rgba(23, 33, 43, 0.82); } -.topbar__left, .topbar__right, .header-actions-row, .table-actions, .inline-tags, .filters-actions, .dialog-actions, .hero-actions, .sidebar-brand, .sidebar-footer__card, .activity-item, .runbook-item, .topbar__user, .form-switch-row, .metrics-stack{ +.topbar__left, .topbar__right, .header-actions-row, .table-actions, .inline-tags, .filters-actions, .dialog-actions, .sidebar-brand, .topbar__user{ display: flex; align-items: center; gap: 0.8rem; } -.topbar__left, .topbar__right, .header-actions-row, .table-actions, .inline-tags, .filters-actions, .dialog-actions, .topbar__caption, .page-header__eyebrow, .sidebar-section__label, .stat-card__label, .hero-spec span, .dashboard-hero__eyebrow, .hero-terminal small, .layout-footer span, .sidebar-footer__title{ +.topbar__left, .topbar__right, .header-actions-row, .table-actions, .inline-tags, .filters-actions, .dialog-actions, .topbar__caption, .page-header__eyebrow, .sidebar-section__label, .stat-card__label, .layout-footer span{ font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; } -.topbar__caption, .page-header__eyebrow, .sidebar-section__label, .layout-footer, .sidebar-footer__text, .stat-card__hint, .section-card__subtitle, .page-header__subtitle, .dashboard-hero__text, .metric-tile span, .metric-row span, .activity-item__message + small, .table-secondary, .form-field label, .topbar__user-meta small{ +.topbar__caption, .page-header__eyebrow, .sidebar-section__label, .layout-footer, .stat-card__hint, .section-card__subtitle, .page-header__subtitle, .metric-tile span, .table-secondary, .form-field label, .topbar__user-meta small{ color: var(--text-soft); } @@ -220,26 +220,9 @@ body.dark-theme .topbar{ text-transform: uppercase; } -.topbar__status{ - display: inline-flex; - align-items: center; - gap: 0.55rem; - padding: 0.55rem 0.85rem; - border: 1px solid var(--border-color); - border-radius: 999px; - font-size: 0.78rem; - text-transform: uppercase; - letter-spacing: 0.14em; - background: var(--surface-1); -} -.status-dot, .activity-item__dot{ - width: 0.65rem; - height: 0.65rem; - border-radius: 999px; - background: var(--success); - box-shadow: 0 0 0 4px rgba(79, 181, 147, 0.12); -} + + .topbar__user-meta{ display: flex; @@ -247,7 +230,7 @@ body.dark-theme .topbar{ line-height: 1.2; } -.topbar__action-btn.p-button, .topbar__logout-btn.p-button, .topbar__menu-btn.p-button{ +.topbar__logout-btn.p-button{ min-width: auto; } @@ -271,7 +254,7 @@ body.dark-theme .topbar{ color: #fff; } -.sidebar-brand__text h2, .sidebar-brand__text p, .sidebar-section__label, .sidebar-footer__title, .sidebar-footer__text, .page-header__title, .page-header__subtitle, .section-card__title, .section-card__subtitle, .stat-card__label, .stat-card__value, .stat-card__hint, .metric-tile span, .metric-row span, .activity-item__message, .form-field label, .dashboard-hero__title, .dashboard-hero__text, .hero-terminal__tabs, .hero-spec strong, .hero-spec span{ +.sidebar-brand__text h2, .sidebar-brand__text p, .sidebar-section__label, .page-header__title, .page-header__subtitle, .section-card__title, .section-card__subtitle, .stat-card__label, .stat-card__value, .stat-card__hint, .metric-tile span, .form-field label{ margin: 0; } @@ -282,7 +265,7 @@ body.dark-theme .topbar{ letter-spacing: 0.18em; } -.sidebar-brand__text p, .sidebar-footer__text, .sidebar-section__label{ +.sidebar-brand__text p, .sidebar-section__label{ color: rgba(215, 225, 235, 0.64); } @@ -323,19 +306,9 @@ body.dark-theme .topbar{ width: 1rem; } -.sidebar-footer{ - margin-top: auto; - padding-top: 1rem; -} -.sidebar-footer__card{ - flex-direction: column; - align-items: flex-start; - padding: 1rem; - border-radius: 16px; - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.08); -} + + .page-header{ @@ -362,7 +335,7 @@ body.dark-theme .topbar{ line-height: 1.7; } -.stats-grid, .dashboard-grid, .metric-grid-2, .filters-grid, .two-column-grid, .form-grid-2, .settings-grid{ +.stats-grid, .dashboard-grid, .metric-grid-2, .form-grid-2{ display: grid; gap: 1rem; } @@ -376,7 +349,7 @@ body.dark-theme .topbar{ margin-bottom: 1rem; } -.dashboard-grid, .two-column-grid, .settings-grid{ +.dashboard-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -384,15 +357,9 @@ body.dark-theme .topbar{ grid-template-columns: repeat(2, minmax(0, 1fr)); } -.filters-grid{ - grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)) auto; - align-items: end; -} -.stacked-sections{ - display: grid; - gap: 1rem; -} + + .section-card.p-card, .stat-card.p-card{ border-radius: 20px; @@ -504,7 +471,7 @@ body.dark-theme .metric-tile, .empty-state{ background: var(--surface-2); } -.metric-tile strong, .metric-row strong{ +.metric-tile strong{ font-family: var(--font-title); font-size: 1rem; letter-spacing: 0.06em; @@ -543,11 +510,7 @@ body.dark-theme .metric-tile, .empty-state{ grid-column: 1 / -1; } -.form-switch-row{ - align-items: center; - min-height: 48px; - padding: 0.35rem 0; -} + .form-error, .form-success{ font-size: 0.88rem; @@ -594,7 +557,7 @@ body.dark-theme .p-button.p-button-secondary, body.dark-theme .p-button.p-button color: var(--danger); } -.p-inputtext, .p-dropdown, .p-inputtextarea, textarea.p-inputtextarea{ +.p-inputtext, .p-inputtextarea, textarea.p-inputtextarea{ width: 100%; border-radius: 12px; border: 1px solid var(--border-strong); @@ -604,19 +567,15 @@ body.dark-theme .p-button.p-button-secondary, body.dark-theme .p-button.p-button box-shadow: none; } -body.dark-theme .p-inputtext, body.dark-theme .p-dropdown, body.dark-theme .p-inputtextarea, body.dark-theme textarea.p-inputtextarea{ +body.dark-theme .p-inputtext, body.dark-theme .p-inputtextarea, body.dark-theme textarea.p-inputtextarea{ background: rgba(255, 255, 255, 0.03); } -.p-dropdown .p-dropdown-label{ - padding: 0; -} -.p-dropdown .p-dropdown-trigger{ - width: 2.6rem; -} -.p-inputtext:enabled:focus, .p-dropdown:not(.p-disabled).p-focus, .p-inputtextarea:enabled:focus, textarea.p-inputtextarea:enabled:focus{ + + +.p-inputtext:enabled:focus, .p-inputtextarea:enabled:focus, textarea.p-inputtextarea:enabled:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } @@ -635,34 +594,15 @@ body.dark-theme .p-inputtext, body.dark-theme .p-dropdown, body.dark-theme .p-in padding-left: 2.45rem; } -.p-inputswitch{ - width: 3.5rem; - height: 1.8rem; -} -.p-inputswitch .p-inputswitch-slider{ - background: var(--surface-3); - border: 1px solid var(--border-strong); - border-radius: 999px; -} -.p-inputswitch .p-inputswitch-slider::before{ - width: 1.2rem; - height: 1.2rem; - left: 0.22rem; - margin-top: -0.6rem; - border-radius: 50%; - background: var(--surface-1); - box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18); -} -.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{ - background: color-mix(in srgb, var(--accent) 80%, #fff 20%); -} -body.dark-theme .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{ - background: var(--blue); -} + + + + + .p-tag{ border-radius: 999px; @@ -672,15 +612,9 @@ body.dark-theme .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{ text-transform: uppercase; } -.p-progressbar{ - height: 0.65rem; - border-radius: 999px; - background: var(--surface-3); -} -.p-progressbar .p-progressbar-value{ - background: linear-gradient(90deg, var(--accent), var(--blue)); -} + + .app-table{ border: 1px solid var(--border-color); @@ -733,33 +667,22 @@ body.dark-theme .app-table .p-datatable-tbody > tr:hover > td{ margin-top: 0.3rem; } -.p-checkbox .p-checkbox-box{ - border-radius: 8px; - border-color: var(--border-strong); - background: transparent; -} -.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover, .p-checkbox .p-checkbox-box.p-highlight{ - border-color: var(--accent); - background: color-mix(in srgb, var(--accent) 84%, #fff 16%); -} + + .p-paginator{ border-top: 1px solid var(--border-color); background: var(--surface-1); } -.p-dropdown-panel, .p-component-overlay{ +.p-component-overlay{ backdrop-filter: blur(10px); } -.p-dropdown-panel .p-dropdown-items{ - padding: 0.45rem; -} -.p-dropdown-panel .p-dropdown-item{ - border-radius: 10px; -} + + .p-avatar{ background: var(--primary); @@ -768,11 +691,7 @@ body.dark-theme .app-table .p-datatable-tbody > tr:hover > td{ } -.p-chip{ - background: rgba(255, 255, 255, 0.08); - color: inherit; - border: 1px solid rgba(255, 255, 255, 0.12); -} + .p-dialog{ border-radius: 20px; @@ -793,16 +712,9 @@ body.dark-theme .app-table .p-datatable-tbody > tr:hover > td{ border-top: 1px solid var(--border-color); } -.p-dropdown-panel, .p-multiselect-panel{ - background: var(--surface-1); - border: 1px solid var(--border-color); - color: var(--text-main); -} -.p-dropdown-panel .p-dropdown-item.p-highlight, .p-dropdown-panel .p-dropdown-item:hover{ - background: var(--surface-2); - color: var(--text-main); -} + + .empty-state, .compact-empty{ padding: 1.2rem; @@ -850,9 +762,7 @@ body.dark-theme .app-table .p-datatable-tbody > tr:hover > td{ grid-template-columns: repeat(2, minmax(0, 1fr)); } - .filters-grid{ - grid-template-columns: repeat(3, minmax(0, 1fr)); - } + .dashboard-grid{ grid-template-columns: 1fr; @@ -884,7 +794,7 @@ body.dark-theme .app-table .p-datatable-tbody > tr:hover > td{ } @media (max-width: 720px) { - .page-header, .topbar, .filters-grid, .stats-grid, .metric-grid-2, .form-grid-2{ + .page-header, .topbar, .stats-grid, .metric-grid-2, .form-grid-2{ grid-template-columns: 1fr; } @@ -1035,39 +945,19 @@ body.dark-theme .p-button.p-button-secondary, body.dark-theme .p-button.p-button line-height: 1.5; } -.settings-toggle--full{ - grid-column: 1 / -1; -} -.p-inputswitch{ - width: 3.7rem; - height: 1.95rem; -} -.p-inputswitch .p-inputswitch-slider{ - background: var(--surface-3); - box-shadow: inset 0 0 0 1px var(--border-strong); -} -.p-inputswitch .p-inputswitch-slider::before{ - width: 1.32rem; - height: 1.32rem; - left: 0.2rem; - margin-top: -0.66rem; - background: #fff; -} -body.dark-theme .p-inputswitch .p-inputswitch-slider::before{ - background: #dce5ee; -} -.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{ - background: linear-gradient(90deg, var(--accent), #d38d5a); -} -body.dark-theme .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{ - background: linear-gradient(90deg, #356fae, #4b90d9); -} + + + + + + + @@ -1136,7 +1026,7 @@ body.dark-theme .topbar{ background: rgba(19, 27, 35, 0.88); } -.topbar__caption, .page-header__eyebrow, .sidebar-section__label, .stat-card__label, .hero-spec span, .dashboard-hero__eyebrow, .hero-terminal small, .layout-footer span, .sidebar-footer__title{ +.topbar__caption, .page-header__eyebrow, .sidebar-section__label, .stat-card__label, .layout-footer span{ font-size: 0.68rem; letter-spacing: 0.14em; } @@ -1146,12 +1036,7 @@ body.dark-theme .topbar{ letter-spacing: 0.08em; } -.topbar__status{ - padding: 0.45rem 0.7rem; - font-size: 0.7rem; - letter-spacing: 0.12em; - background: color-mix(in srgb, var(--surface-1) 92%, transparent); -} + .topbar__icon-btn.p-button, .topbar__logout-btn.p-button{ height: 2.45rem; @@ -1214,10 +1099,7 @@ body.dark-theme .topbar{ font-size: 0.78rem; } -body.dark-theme .dashboard-hero__title{ - font-size: clamp(1.8rem, 4vw, 3.1rem); - letter-spacing: 0.04em; -} + .metric-tile strong, .settings-toggle strong{ font-size: 0.88rem; @@ -1252,23 +1134,16 @@ body.dark-theme .dashboard-hero__title{ border-radius: 8px; } -.p-inputtext, .p-dropdown, .p-inputtextarea, textarea.p-inputtextarea{ +.p-inputtext, .p-inputtextarea, textarea.p-inputtextarea{ border-radius: 10px; padding: 0.72rem 0.82rem; font-size: 0.92rem; background: color-mix(in srgb, var(--surface-1) 88%, transparent); } -.p-inputswitch{ - width: 3.2rem; - height: 1.7rem; -} -.p-inputswitch .p-inputswitch-slider::before{ - width: 1.1rem; - height: 1.1rem; - margin-top: -0.55rem; -} + + .p-tag{ font-size: 0.66rem; @@ -1443,15 +1318,12 @@ body.dark-theme .topbar{ font-size: 0.72rem; } -.p-inputtext, .p-dropdown, .p-multiselect, .p-inputnumber-input, .p-password-input{ +.p-inputtext{ min-height: 2.5rem; font-size: 0.84rem; } -.p-inputswitch{ - transform: scale(0.88); - transform-origin: left center; -} + .page-header__title{ font-size: 1.55rem; @@ -1465,9 +1337,7 @@ body.dark-theme .topbar{ font-size: 0.79rem; } -.status-dot{ - display: none; -} + /* v9 UI fixes */ :root{ @@ -1500,12 +1370,7 @@ body.dark-theme{ word-break: break-word; } -.repository-card__actions{ - display: flex; - align-items: center; - gap: 0.75rem; - flex-wrap: wrap; -} + .repository-table .p-datatable-tbody > tr > td{ vertical-align: top; @@ -1610,88 +1475,34 @@ body.dark-theme .topbar__avatar{ border-color: rgba(255, 255, 255, 0.18); } -.dashboard-grid--feature{ - align-items: stretch; - margin-top: 1.5rem; -} + app-section-card.dashboard-operations-card{ display: block; margin-bottom: 0.5rem; } -.storage-panel{ - display: grid; - grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); - gap: 1.25rem; - align-items: center; -} -.storage-panel__visual, .storage-panel__stats{ - min-width: 0; -} -.storage-ring{ - width: 180px; - height: 180px; - border-radius: 50%; - padding: 14px; - margin-bottom: 1rem; -} -.storage-ring__inner{ - width: 100%; - height: 100%; - border-radius: 50%; - background: var(--surface-1); - display: grid; - place-items: center; - text-align: center; - border: 1px solid var(--border-color); -} -.storage-ring__inner strong{ - display: block; - font-size: 1.8rem; - line-height: 1; -} -.storage-ring__inner span{ - color: var(--text-soft); - font-size: 0.78rem; - letter-spacing: 0.12em; - text-transform: uppercase; -} -.storage-bars{ - display: grid; - gap: 0.9rem; -} -.storage-bars__meta{ - display: flex; - justify-content: space-between; - gap: 0.8rem; - margin-bottom: 0.35rem; -} -.storage-bars__track{ - height: 12px; - border-radius: 999px; - background: rgba(128, 145, 164, 0.14); - overflow: hidden; -} -.storage-bars__track span{ - display: block; - height: 100%; - border-radius: inherit; - background: linear-gradient(90deg, var(--accent), var(--blue)); -} -.metric-grid-2--dense{ - gap: 0.95rem; -} + + + + + + + + + + + .metric-tile--feature{ min-height: 106px; @@ -1699,7 +1510,7 @@ app-section-card.dashboard-operations-card{ } -.repository-toolbar, .compare-strip{ +.repository-toolbar{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.9rem; @@ -1719,12 +1530,7 @@ app-section-card.dashboard-operations-card{ align-self: end; } -.compare-strip{ - padding: 1rem; - border: 1px solid var(--border-color); - border-radius: 22px; - background: linear-gradient(180deg, rgba(75, 144, 217, 0.06), rgba(75, 144, 217, 0.02)); -} + .compare-strip__swap{ align-self: end; @@ -1821,9 +1627,7 @@ app-section-card.dashboard-operations-card{ color: var(--warning); } -.settings-grid--enhanced{ - align-items: start; -} + .settings-status-grid{ display: grid; @@ -1890,9 +1694,7 @@ app-section-card.dashboard-operations-card{ gap: 0.45rem; } -.settings-toggle--inline{ - gap: 0.7rem; -} + .settings-actions--sticky{ position: sticky; @@ -1969,7 +1771,7 @@ body.dark-theme .settings-actions--sticky{ grid-template-columns: repeat(2, minmax(0, 1fr)); } - .scheduler-card__grid, .storage-panel, .change-password-shell{ + .scheduler-card__grid, .change-password-shell{ grid-template-columns: 1fr; } } @@ -2244,6 +2046,7 @@ body.dark-theme .inline-summary{ box-shadow: 0 0 0 4px rgba(128, 145, 164, 0.12); } + .layout-footer__status--online::before{ background: var(--success); box-shadow: 0 0 0 4px rgba(79, 181, 147, 0.16); @@ -2259,7 +2062,6 @@ body.dark-theme .inline-summary{ box-shadow: 0 0 0 4px rgba(240, 180, 91, 0.14); } - .api-connection-banner{ position: fixed; right: 1.5rem; @@ -2341,9 +2143,7 @@ body.dark-theme .api-connection-banner{ background: rgba(217, 75, 91, 0.08); } -.router-status-note{ - color: var(--text-soft); -} + .table-actions--tight{ flex-wrap: nowrap; @@ -2545,7 +2345,7 @@ app-page-header{ background: linear-gradient(180deg, rgba(75, 144, 217, 0.05), rgba(75, 144, 217, 0.015)); } -.router-modal-summary strong, .diff-pick-card__meta strong, .activity-feed__header strong{ +.router-modal-summary strong, .diff-pick-card__meta strong{ display: block; margin: 0; } @@ -2560,84 +2360,29 @@ app-page-header{ width: 100%; } -.activity-feed{ - display: grid; - gap: 0.55rem; -} -.activity-feed__item{ - display: grid; - grid-template-columns: 28px minmax(0, 1fr); - gap: 0.75rem; - align-items: start; - padding: 0.75rem 0; - border-bottom: 1px solid var(--border-color); -} -.activity-feed__item:last-child{ - border-bottom: 0; -} -.activity-feed__dot{ - width: 28px; - height: 28px; - border-radius: 999px; - display: grid; - place-items: center; - color: var(--text-soft); - background: rgba(75, 144, 217, 0.08); - border: 1px solid rgba(75, 144, 217, 0.12); - font-size: 0.8rem; -} -.activity-feed__item[data-tone="danger"] .activity-feed__dot{ - color: var(--danger); - background: rgba(227, 122, 122, 0.08); - border-color: rgba(227, 122, 122, 0.18); -} -.activity-feed__item[data-tone="warning"] .activity-feed__dot{ - color: var(--warning); - background: rgba(240, 180, 91, 0.08); - border-color: rgba(240, 180, 91, 0.18); -} -.activity-feed__item[data-tone="success"] .activity-feed__dot{ - color: var(--success); - background: rgba(79, 181, 147, 0.08); - border-color: rgba(79, 181, 147, 0.18); -} -.activity-feed__body{ - min-width: 0; -} -.activity-feed__header{ - display: flex; - justify-content: space-between; - gap: 0.75rem; - align-items: center; - margin-bottom: 0.2rem; -} -.activity-feed__header small{ - color: var(--text-faint); - white-space: nowrap; -} -.activity-feed__message{ - color: var(--text-soft); - line-height: 1.45; - font-size: 0.88rem; -} -.activity-feed__footer{ - display: flex; - justify-content: space-between; - gap: 1rem; - align-items: center; - padding-top: 0.4rem; -} + + + + + + + + + + + + .diff-workspace{ display: grid; @@ -2715,7 +2460,7 @@ app-page-header{ } @media (max-width: 720px) { - .activity-feed__header, .router-modal-summary{ + .router-modal-summary{ flex-direction: column; align-items: flex-start; } @@ -2758,10 +2503,7 @@ app-page-header{ padding: 0.22rem 0.48rem; } -.repository-table .p-checkbox{ - transform: scale(0.92); - transform-origin: center; -} + .repository-table .p-datatable-tbody > tr > td:first-child, .repository-table .p-datatable-thead > tr > th:first-child{ width: 2.6rem; @@ -2791,7 +2533,7 @@ app-page-header{ padding: 0.4rem 0.65rem; } -.repository-table .p-paginator .p-paginator-pages .p-paginator-page, .repository-table .p-paginator .p-paginator-next, .repository-table .p-paginator .p-paginator-prev, .repository-table .p-paginator .p-dropdown{ +.repository-table .p-paginator .p-paginator-pages .p-paginator-page, .repository-table .p-paginator .p-paginator-next, .repository-table .p-paginator .p-paginator-prev{ min-width: 2rem; height: 2rem; } @@ -2831,125 +2573,45 @@ app-page-header{ } /* --- 2026 patch: dashboard storage, confirm dialog, interface prefs, switches --- */ -.storage-panel--enhanced{ - gap: 1.15rem; -} -.storage-browser__switch.is-active{ - color: var(--text-main); - border-color: color-mix(in srgb, var(--accent) 36%, var(--border-color)); - box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 12%, transparent); -} -.storage-browser__switch.is-active{ - background: color-mix(in srgb, var(--surface-1) 96%, transparent); -} -.storage-browser__canvas, .storage-chart{ - display: grid; - gap: 0.85rem; -} -.storage-chart-row{ - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(140px, 1.25fr) auto; - align-items: center; - gap: 0.85rem; -} -.storage-chart-row__meta{ - display: flex; - align-items: baseline; - justify-content: space-between; - gap: 1rem; -} -.storage-chart-row__meta span, .storage-chart-row small, .storage-column small{ - color: var(--text-soft); - font-size: 0.72rem; - letter-spacing: 0.12em; - text-transform: uppercase; -} -.storage-chart-row__meta strong, .storage-column strong{ - font-size: 0.92rem; -} -.storage-bars__track span, .storage-chart-row__track span, .storage-stackbar__segment, .storage-column__track span{ - display: block; - height: 100%; - border-radius: inherit; - background: linear-gradient(90deg, var(--accent), var(--blue)); -} -.storage-bars__track span[data-tone="success"], .storage-chart-row__track span[data-tone="success"], .storage-stackbar__segment[data-tone="success"]{ - background: linear-gradient(90deg, var(--accent-2), var(--success)); -} -.storage-bars__track span[data-tone="warning"], .storage-chart-row__track span[data-tone="warning"], .storage-stackbar__segment[data-tone="warning"]{ - background: linear-gradient(90deg, var(--warning), color-mix(in srgb, var(--warning) 44%, var(--danger))); -} -.storage-bars__track span[data-tone="info"], .storage-chart-row__track span[data-tone="info"], .storage-stackbar__segment[data-tone="info"]{ - background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 78%, #fff 0%), var(--blue)); -} -.storage-stackbar{ - display: flex; - min-height: 16px; - border-radius: 999px; - overflow: hidden; - background: rgba(128, 145, 164, 0.14); -} -.storage-columns{ - display: grid; - grid-template-columns: repeat(7, minmax(0, 1fr)); - gap: 0.75rem; - align-items: end; -} -.storage-column{ - display: grid; - gap: 0.55rem; - justify-items: center; -} -.storage-column__track{ - height: 150px; - width: 100%; - padding: 0 0.35rem; - display: flex; - align-items: flex-end; - border-radius: 18px; - border: 1px solid var(--border-color); - background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 92%, transparent), transparent); -} -.storage-column__track span{ - width: 100%; - min-height: 6px; - border-radius: 14px 14px 8px 8px; - background: linear-gradient(180deg, var(--accent), var(--blue)); -} -.storage-chart-empty{ - padding: 1rem; - border-radius: 18px; - border: 1px dashed var(--border-strong); - color: var(--text-soft); - text-align: center; -} -.storage-snapshot-grid{ - gap: 0.8rem; -} -.storage-snapshot-card{ - min-height: 96px; - border: 1px solid var(--border-color); - background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 94%, transparent), color-mix(in srgb, var(--surface-0) 94%, transparent)); -} + + + + + + + + + + + + + + + + + + + + .layout-footer__author{ display: inline-flex; @@ -2977,38 +2639,23 @@ app-page-header{ } @media (max-width: 1180px) { - .storage-panel{ - grid-template-columns: 1fr; - } + } @media (max-width: 860px) { - .storage-hero{ - grid-template-columns: 1fr; - } + - .storage-ring{ - margin-inline: auto; - } + - .storage-browser__switch{ - flex: 1 1 calc(50% - 0.55rem); - } + } @media (max-width: 720px) { - .storage-chart-row{ - grid-template-columns: 1fr; - } + - .storage-chart-row__meta{ - flex-direction: column; - gap: 0.2rem; - } + - .storage-column__track{ - height: 120px; - } + .layout-footer__author{ width: 100%; @@ -3117,26 +2764,16 @@ body.dark-theme .p-confirm-dialog .p-confirm-dialog-icon{ } @media (max-width: 980px) { - .storage-hero{ - grid-template-columns: 1fr; - justify-items: center; - text-align: center; - } + - .storage-hero__summary{ - width: 100%; - } + } /* --- 2026 patch: dashboard width, auth layout, settings actions --- */ -.dashboard-stack{ - margin-top: 1.5rem; -} -.dashboard-stack > app-section-card{ - display: block; -} + + .settings-actions, .settings-actions--sticky{ justify-content: center; @@ -3155,28 +2792,15 @@ body.dark-theme .p-confirm-dialog .p-confirm-dialog-icon{ } /* patch set: dashboard capacity and switchos beta */ -.storage-browser__header{ - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - align-items: start; -} -.storage-browser__copy, .storage-browser__switcher, .storage-chart-row__meta{ - min-width: 0; -} -.storage-browser__switcher{ - justify-content: flex-end; -} -.storage-chart-row__meta{ - flex-wrap: wrap; -} -.storage-chart-row__meta strong{ - white-space: nowrap; - flex-shrink: 0; -} + + + + + .beta-banner{ display: flex; @@ -3251,14 +2875,9 @@ body.dark-theme .p-confirm-dialog .p-confirm-dialog-icon{ } @media (max-width: 1024px) { - .storage-browser__header{ - grid-template-columns: 1fr; - } + - .storage-browser__switcher{ - width: 100%; - justify-content: flex-start; - } + } @media (max-width: 720px) { @@ -3272,24 +2891,13 @@ body.dark-theme .p-confirm-dialog .p-confirm-dialog-icon{ } } -.storage-browser__header{ - grid-template-columns: minmax(0, 1fr); - gap: 1rem; -} -.storage-browser__copy{ - display: grid; - gap: 0.35rem; -} -.storage-browser__copy strong{ - display: block; -} -.storage-browser__switcher{ - width: 100%; - justify-content: flex-start; -} + + + + @media (max-width: 991px) { @@ -3442,9 +3050,7 @@ body.dark-theme .p-confirm-dialog .p-confirm-dialog-icon{ color: var(--accent); } -.router-dialog .p-inputtext, -.router-dialog .p-dropdown, -.router-dialog .p-inputtextarea{ +.router-dialog .p-inputtext, .router-dialog .p-inputtextarea{ background: rgba(255, 255, 255, 0.02); } @@ -3492,36 +3098,23 @@ body.dark-theme .p-confirm-dialog .p-confirm-dialog-icon{ /* PrimeNG v20 compatibility bridge */ -.p-select, -.p-dropdown, -.p-multiselect, -.p-inputtext, -.p-textarea, -.p-inputtextarea, -textarea.p-inputtextarea, -textarea.p-textarea { +.p-select, .p-inputtext, .p-textarea, .p-inputtextarea, textarea.p-inputtextarea, textarea.p-textarea{ width: 100%; } -.p-button:not(.p-button-secondary):not(.p-button-help):not(.p-button-danger):not(.p-button-text):not(.p-button-outlined) { +.p-button:not(.p-button-secondary):not(.p-button-help):not(.p-button-danger):not(.p-button-text):not(.p-button-outlined){ background: var(--primary); border-color: var(--primary); color: #f8fbff; } -body.dark-theme .p-button:not(.p-button-secondary):not(.p-button-help):not(.p-button-danger):not(.p-button-text):not(.p-button-outlined) { +body.dark-theme .p-button:not(.p-button-secondary):not(.p-button-help):not(.p-button-danger):not(.p-button-text):not(.p-button-outlined){ background: var(--primary); border-color: var(--primary); color: #17212b; } -.p-select, -.p-dropdown, -.p-textarea, -.p-inputtextarea, -.p-inputtext, -textarea.p-inputtextarea, -textarea.p-textarea { +.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%); @@ -3529,32 +3122,19 @@ textarea.p-textarea { box-shadow: none; } -body.dark-theme .p-select, -body.dark-theme .p-dropdown, -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 { +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); color: var(--text-main); border-color: var(--border-color); } -.p-select, -.p-dropdown { +.p-select{ display: flex; align-items: center; min-height: 2.95rem; } -.p-select .p-select-label, -.p-select .p-select-label.p-placeholder, -.p-dropdown .p-dropdown-label, -.p-dropdown .p-dropdown-label.p-inputtext, -.p-dropdown .p-dropdown-label.p-placeholder, -.p-multiselect .p-multiselect-label, -.p-multiselect .p-multiselect-label.p-placeholder { +.p-select .p-select-label, .p-select .p-select-label.p-placeholder{ width: 100%; min-height: 0; padding: 0.78rem 0 0.78rem 1rem; @@ -3573,25 +3153,17 @@ body.dark-theme textarea.p-textarea { color: var(--text-main); } -.p-select .p-select-label.p-placeholder, -.p-dropdown .p-dropdown-label.p-placeholder, -.p-multiselect .p-multiselect-label.p-placeholder { +.p-select .p-select-label.p-placeholder{ font-weight: 400; color: var(--text-soft); } -.repository-toolbar .p-select .p-select-label, -.repository-compare .p-select .p-select-label, -.diff-configs-compare .p-select .p-select-label, -.repository-toolbar .p-dropdown .p-dropdown-label, -.repository-compare .p-dropdown .p-dropdown-label { +.repository-toolbar .p-select .p-select-label, .repository-compare .p-select .p-select-label{ font-size: 0.95rem; line-height: 1.3; } -.p-select .p-select-dropdown, -.p-dropdown .p-dropdown-trigger, -.p-multiselect .p-multiselect-trigger { +.p-select .p-select-dropdown{ width: 2.85rem; display: grid; place-items: center; @@ -3600,46 +3172,27 @@ body.dark-theme textarea.p-textarea { flex: 0 0 2.85rem; } -.p-select.p-focus, -.p-dropdown:not(.p-disabled).p-focus, -.p-inputtext:enabled:focus, -.p-textarea:enabled:focus, -.p-inputtextarea:enabled:focus, -textarea.p-inputtextarea:enabled:focus, -textarea.p-textarea:enabled:focus { +.p-inputtext:enabled:focus, .p-textarea:enabled:focus, .p-inputtextarea:enabled:focus, textarea.p-inputtextarea:enabled:focus, textarea.p-textarea:enabled:focus{ 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); } -body.dark-theme .auth-card .p-inputtext, -body.dark-theme .auth-card .p-password-input, -body.dark-theme .auth-card .p-select, -body.dark-theme .auth-card .p-textarea, -body.dark-theme .auth-card .p-inputtextarea { +body.dark-theme .auth-card .p-inputtext, body.dark-theme .auth-card .p-select, body.dark-theme .auth-card .p-textarea, body.dark-theme .auth-card .p-inputtextarea{ color: var(--text-main); border-color: var(--border-color); background: rgba(255, 255, 255, 0.035); } -body.dark-theme .auth-card .p-inputtext::placeholder, -body.dark-theme .auth-card .p-password-input::placeholder, -body.dark-theme .auth-card .p-textarea::placeholder, -body.dark-theme .auth-card .p-inputtextarea::placeholder { +body.dark-theme .auth-card .p-inputtext::placeholder, body.dark-theme .auth-card .p-textarea::placeholder, body.dark-theme .auth-card .p-inputtextarea::placeholder{ color: var(--text-soft); } -body.dark-theme .auth-card .p-inputtext:enabled:focus, -body.dark-theme .auth-card .p-password-input:enabled:focus, -body.dark-theme .auth-card .p-textarea:enabled:focus, -body.dark-theme .auth-card .p-inputtextarea:enabled:focus { +body.dark-theme .auth-card .p-inputtext:enabled:focus, body.dark-theme .auth-card .p-textarea:enabled:focus, body.dark-theme .auth-card .p-inputtextarea:enabled:focus{ border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); } -.p-select-overlay, -.p-dropdown-panel, -.p-multiselect-panel, -.p-component-overlay { +.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); @@ -3647,30 +3200,21 @@ body.dark-theme .auth-card .p-inputtextarea:enabled:focus { box-shadow: var(--shadow-lg); } -body.dark-theme .p-select-overlay, -body.dark-theme .p-dropdown-panel, -body.dark-theme .p-multiselect-panel, -body.dark-theme .p-component-overlay { +body.dark-theme .p-select-overlay, body.dark-theme .p-component-overlay{ background: #1f2935; border-color: rgba(146, 170, 194, 0.2); } -.p-select-list, -.p-dropdown-panel .p-dropdown-items, -.p-multiselect-panel .p-multiselect-items { +.p-select-list{ padding: 0.35rem; background: transparent; } -body.dark-theme .p-select-list, -body.dark-theme .p-dropdown-panel .p-dropdown-items, -body.dark-theme .p-multiselect-panel .p-multiselect-items { +body.dark-theme .p-select-list{ background: transparent; } -.p-select-option, -.p-dropdown-panel .p-dropdown-item, -.p-multiselect-panel .p-multiselect-item { +.p-select-option{ border-radius: 10px; font-size: 0.92rem; line-height: 1.35; @@ -3678,110 +3222,84 @@ body.dark-theme .p-multiselect-panel .p-multiselect-items { transition: background-color 0.12s ease, color 0.12s ease; } -.p-select-option.p-focus, -.p-select-option:hover, -.p-dropdown-panel .p-dropdown-item.p-focus, -.p-dropdown-panel .p-dropdown-item:hover, -.p-multiselect-panel .p-multiselect-item.p-focus, -.p-multiselect-panel .p-multiselect-item:hover { +.p-select-option:hover{ background: #dbe5f0; color: #13202c; } -.p-select-option.p-select-option-selected, -.p-dropdown-panel .p-dropdown-item.p-highlight, -.p-multiselect-panel .p-multiselect-item.p-highlight { +.p-select-option.p-select-option-selected{ background: #c8d8ea; color: #13202c; font-weight: 600; } -body.dark-theme .p-select-option, -body.dark-theme .p-dropdown-panel .p-dropdown-item, -body.dark-theme .p-multiselect-panel .p-multiselect-item { +body.dark-theme .p-select-option{ color: #dbe5ef; } -body.dark-theme .p-select-option.p-focus, -body.dark-theme .p-select-option:hover, -body.dark-theme .p-dropdown-panel .p-dropdown-item.p-focus, -body.dark-theme .p-dropdown-panel .p-dropdown-item:hover, -body.dark-theme .p-multiselect-panel .p-multiselect-item.p-focus, -body.dark-theme .p-multiselect-panel .p-multiselect-item:hover { +body.dark-theme .p-select-option:hover{ background: #314355; color: #f4f8fb; } -body.dark-theme .p-select-option.p-select-option-selected, -body.dark-theme .p-dropdown-panel .p-dropdown-item.p-highlight, -body.dark-theme .p-multiselect-panel .p-multiselect-item.p-highlight { +body.dark-theme .p-select-option.p-select-option-selected{ background: #d9e1ea; color: #13202c; font-weight: 600; } -.p-textarea, -.p-inputtextarea, -textarea.p-textarea, -textarea.p-inputtextarea { +.p-textarea, .p-inputtextarea, textarea.p-textarea, textarea.p-inputtextarea{ padding: 0.82rem 0.9rem; } -.router-dialog.p-dialog { +.router-dialog.p-dialog{ border: 1px solid var(--border-color); background: var(--surface-1); box-shadow: var(--shadow-lg); } -body.dark-theme .router-dialog.p-dialog { +body.dark-theme .router-dialog.p-dialog{ border-color: color-mix(in srgb, var(--border-color) 65%, transparent); } -.router-dialog .p-dialog-header { +.router-dialog .p-dialog-header{ padding: 1.1rem 1.2rem 0.95rem; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-0) 98%, transparent)); border-bottom: 1px solid var(--border-color); } -.router-dialog .p-dialog-content { +.router-dialog .p-dialog-content{ padding: 0 1.2rem 1.2rem; background: color-mix(in srgb, var(--surface-0) 98%, transparent); } -.router-dialog .p-dialog-header-icons { +.router-dialog .p-dialog-header-icons{ align-self: flex-start; margin-top: 0.2rem; } -.router-dialog-panel { +.router-dialog-panel{ background: color-mix(in srgb, var(--surface-0) 96%, transparent); border: 1px solid var(--border-color); box-shadow: none; } -.router-dialog .p-select, -.router-dialog .p-textarea, -.router-dialog .p-inputtextarea, -.router-dialog .p-inputtext { +.router-dialog .p-select, .router-dialog .p-textarea, .router-dialog .p-inputtextarea, .router-dialog .p-inputtext{ background: color-mix(in srgb, var(--surface-1) 90%, transparent); } -body.dark-theme .router-dialog .p-select, -body.dark-theme .router-dialog .p-textarea, -body.dark-theme .router-dialog .p-inputtextarea, -body.dark-theme .router-dialog .p-inputtext, -body.dark-theme .router-dialog-panel { +body.dark-theme .router-dialog .p-select, body.dark-theme .router-dialog .p-textarea, body.dark-theme .router-dialog .p-inputtextarea, body.dark-theme .router-dialog .p-inputtext, body.dark-theme .router-dialog-panel{ background: rgba(255, 255, 255, 0.03); border-color: var(--border-color); } -.repository-toolbar__search .p-input-icon-left { +.repository-toolbar__search .p-input-icon-left{ position: relative; display: block; width: 100%; } -.repository-toolbar__search .p-input-icon-left > i { +.repository-toolbar__search .p-input-icon-left > i{ position: absolute; top: 50%; left: 0.9rem; @@ -3793,7 +3311,7 @@ body.dark-theme .router-dialog-panel { line-height: 1; } -.repository-toolbar__search .p-input-icon-left > .p-inputtext { +.repository-toolbar__search .p-input-icon-left > .p-inputtext{ display: block; width: 100%; min-height: 2.75rem; @@ -3801,17 +3319,12 @@ body.dark-theme .router-dialog-panel { } -body.dark-theme .p-toast .p-toast-summary, -body.dark-theme .p-toast .p-toast-detail, -body.dark-theme .p-toast .p-toast-message-icon, -body.dark-theme .p-toast .p-toast-icon-close { +body.dark-theme .p-toast .p-toast-summary, body.dark-theme .p-toast .p-toast-detail, body.dark-theme .p-toast .p-toast-message-icon, body.dark-theme .p-toast .p-toast-icon-close{ color: var(--text-main); } -.repository-table .p-paginator .p-paginator-pages .p-paginator-page, -.repository-table .p-paginator .p-paginator-next, -.repository-table .p-paginator .p-paginator-prev, -.repository-table .p-paginator .p-select { +.repository-table .p-paginator .p-paginator-pages .p-paginator-page, .repository-table .p-paginator .p-paginator-next, .repository-table .p-paginator .p-paginator-prev, .repository-table .p-paginator .p-select{ min-width: 2rem; height: 2rem; -} \ No newline at end of file +} + diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css new file mode 100644 index 0000000..11666cc --- /dev/null +++ b/frontend/src/styles/styles.css @@ -0,0 +1,4 @@ +@import "./styles/pages.css"; +@import "./styles/layout.css"; +@import "./styles/auth.css"; +@import "./styles/dashboard.css";