diff --git a/app/static/css/app.css b/app/static/css/app.css index 72887c8..34ba0b3 100644 --- a/app/static/css/app.css +++ b/app/static/css/app.css @@ -1,71 +1,425 @@ -body { min-height: 100vh; background: var(--bs-tertiary-bg); } -pre { white-space: pre-wrap; } -html, body { overflow-x: hidden; } -.app-shell { min-height: 100vh; align-items: stretch; } -.sidebar { width: 292px; min-width: 292px; max-width: 292px; flex: 0 0 292px; min-height: 100vh; position: sticky; top: 0; overflow-y: auto; overflow-x: hidden; } -.main-column { flex: 1 1 auto; min-width: 0; width: calc(100% - 292px); } -.main-column > .p-4, .main-column section.p-4 { width: 100%; max-width: 100%; } -.page-topbar { backdrop-filter: blur(6px); } -.page-content-wrap { background: linear-gradient(180deg, rgba(13,110,253,.03), transparent 180px); } -.brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, #0d6efd, #6ea8fe); color: #fff; } -.menu-section-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); margin-bottom: .5rem; margin-top: 1rem; } -.nav-link { border-radius: .85rem; color: inherit; padding: .7rem .85rem; font-weight: 500; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.nav-link i { width: 1.2rem; text-align: center; flex: 0 0 1.2rem; } -.nav-link:hover { background: rgba(13,110,253,.08); } -.nav-link-accent { background: rgba(13,110,253,.08); border: 1px solid rgba(13,110,253,.14); } -.nav-link-highlight { background: rgba(25,135,84,.08); border: 1px solid rgba(25,135,84,.14); } -.top-chip { padding: .35rem .65rem; border-radius: 999px; background: rgba(127,127,127,.08); } -.readonly-pill { display: inline-flex; align-items: center; padding: .4rem .75rem; border-radius: 999px; background: rgba(255,193,7,.16); color: var(--bs-emphasis-color); border: 1px solid rgba(255,193,7,.35); font-size: .875rem; } -.readonly-pill-compact { font-size: .8rem; padding: .35rem .6rem; } -.page-title { font-size: 1.15rem; } -.card { border: 0; box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .08); border-radius: 1rem; } -.card-header { font-weight: 600; background: color-mix(in srgb, var(--bs-body-bg) 80%, var(--bs-primary-bg-subtle)); border-bottom: 1px solid var(--bs-border-color); border-top-left-radius: 1rem !important; border-top-right-radius: 1rem !important; } -.table thead th { font-size: .85rem; color: var(--bs-secondary-color); } -.page-section-header { padding: 1.25rem; border-radius: 1.1rem; background: var(--bs-body-bg); box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .08); } -.section-eyebrow { letter-spacing: .08em; } -.section-toolbar .btn, .page-section-header .btn { border-radius: .8rem; } -.surface-muted { background: color-mix(in srgb, var(--bs-tertiary-bg) 85%, white); border-radius: 1rem; } -.settings-tab .nav-link { justify-content: flex-start; } -.settings-tab .nav-link.active { background: var(--bs-primary); color: #fff; } -.stat-card { min-height: 120px; border: 0; } -.stat-blue { background: linear-gradient(135deg, #0d6efd, #4aa3ff); } -.stat-green { background: linear-gradient(135deg, #198754, #44c28a); } -.stat-purple { background: linear-gradient(135deg, #6f42c1, #9a6bff); } -.stat-orange { background: linear-gradient(135deg, #fd7e14, #ffad5c); } -.stat-dark { background: linear-gradient(135deg, #343a40, #586069); } -.compact-card-body { padding: .95rem 1.1rem; } -.text-wrap-balanced { max-width: 46rem; } -.nfz-badge { font-size: .78rem; } -[data-bs-theme="dark"] .nav-link:hover { background: rgba(255,255,255,.08); } -[data-bs-theme="dark"] .top-chip { background: rgba(255,255,255,.06); } -[data-bs-theme="dark"] .page-content-wrap { background: linear-gradient(180deg, rgba(13,110,253,.08), transparent 200px); } -@media (max-width: 991px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; min-width: 100%; max-width: 100%; flex-basis: auto; min-height: auto; position: static; } .main-column { width: 100%; } } -.invoice-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; } -.invoice-detail-main, .invoice-detail-sidebar { min-width: 0; } -.invoice-detail-sticky { position: sticky; top: 1rem; } -.invoice-preview-surface { max-height: none; } -.invoice-preview-surface table { min-width: 720px; } -@media (max-width: 991px) { .invoice-detail-layout { grid-template-columns: 1fr; } .invoice-detail-sticky { position: static; } } -.source-switch { display: flex; flex-wrap: wrap; gap: .75rem; } -.btn-source { border: 1px solid var(--bs-border-color); border-radius: 999px; padding: .65rem 1rem; background: var(--bs-body-bg); } -.btn-check:checked + .btn-source { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); } -.source-panel { padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-primary-bg-subtle)); } -.source-panel-note .alert { border-radius: 1rem; } -.settings-module-intro { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; padding: 1rem; border-radius: 1rem; background: color-mix(in srgb, var(--bs-tertiary-bg) 88%, var(--bs-primary-bg-subtle)); } -.login-page { background: linear-gradient(135deg, rgba(13,110,253,.08), rgba(111,66,193,.08)); } -.login-hero { align-items: center; justify-content: center; padding: 3rem; } -.login-hero-card { max-width: 34rem; } -.login-form-card { max-width: 34rem; border-radius: 1.5rem; } -.login-feature-list { display: grid; gap: 1rem; margin-top: 2rem; font-weight: 500; } -.invoice-actions-cell { min-width: 170px; } -.invoice-action-btn { min-width: 88px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: .7rem; white-space: nowrap; flex: 0 0 auto; } -.table td .invoice-action-btn i { line-height: 1; } -.table td.text-end { white-space: nowrap; } -.ksef-break, td.text-break { word-break: break-word; overflow-wrap: anywhere; } -.invoice-ksef-col { min-width: 190px; max-width: 260px; } -.invoice-number-col { min-width: 180px; } -.invoice-actions-stack { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: .5rem; } -.pagination { gap: .2rem; } -.pagination .page-link { border-radius: .65rem; } -@media (max-width: 1400px) { .invoice-actions-cell { min-width: 150px; } .invoice-action-btn { min-width: 80px; padding-left: .6rem; padding-right: .6rem; } .invoice-ksef-col { min-width: 170px; max-width: 220px; } } -@media (max-width: 1200px) { .invoice-actions-stack { flex-wrap: wrap; } .table td.text-end { white-space: normal; } } +*, *::after, *::before { + box-sizing: border-box; +} + +body { + min-height: 100vh; + background: var(--bs-tertiary-bg); +} + +pre { + white-space: pre-wrap; +} + +html, body { + overflow-x: hidden; +} + +.app-shell { + min-height: 100vh; + align-items: stretch; +} + +.sidebar { + width: 292px; + min-width: 292px; + max-width: 292px; + flex: 0 0 292px; + min-height: 100vh; + position: sticky; + top: 0; + overflow-y: auto; + overflow-x: hidden; +} + +.main-column { + flex: 1 1 auto; + min-width: 0; + width: calc(100% - 292px); +} + +.main-column>.p-4, .main-column section.p-4 { + width: 100%; + max-width: 100%; +} + +.page-topbar { + backdrop-filter: blur(6px); +} + +.page-content-wrap { + background: linear-gradient(180deg, rgba(13, 110, 253, .03), transparent 180px); +} + +.brand-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 42px; + height: 42px; + border-radius: 14px; + background: linear-gradient(135deg, #0d6efd, #6ea8fe); + color: #fff; +} + +.menu-section-label { + font-size: .75rem; + text-transform: uppercase; + letter-spacing: .08em; + color: var(--bs-secondary-color); + margin-bottom: .5rem; + margin-top: 1rem; +} + +.nav-link { + border-radius: .85rem; + color: inherit; + padding: .7rem .85rem; + font-weight: 500; + display: flex; + align-items: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.nav-link i { + width: 1.2rem; + text-align: center; + flex: 0 0 1.2rem; +} + +.nav-link:hover { + background: rgba(13, 110, 253, .08); +} + +.nav-link-accent { + background: rgba(13, 110, 253, .08); + border: 1px solid rgba(13, 110, 253, .14); +} + +.nav-link-highlight { + background: rgba(25, 135, 84, .08); + border: 1px solid rgba(25, 135, 84, .14); +} + +.top-chip { + padding: .35rem .65rem; + border-radius: 999px; + background: rgba(127, 127, 127, .08); +} + +.readonly-pill { + display: inline-flex; + align-items: center; + padding: .4rem .75rem; + border-radius: 999px; + background: rgba(255, 193, 7, .16); + color: var(--bs-emphasis-color); + border: 1px solid rgba(255, 193, 7, .35); + font-size: .875rem; +} + +.readonly-pill-compact { + font-size: .8rem; + padding: .35rem .6rem; +} + +.page-title { + font-size: 1.15rem; +} + +.card { + border: 0; + box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .08); + border-radius: 1rem; +} + +.card-header { + font-weight: 600; + background: color-mix(in srgb, var(--bs-body-bg) 80%, var(--bs-primary-bg-subtle)); + border-bottom: 1px solid var(--bs-border-color); + border-top-left-radius: 1rem !important; + border-top-right-radius: 1rem !important; +} + +.table thead th { + font-size: .85rem; + color: var(--bs-secondary-color); +} + +.page-section-header { + padding: 1.25rem; + border-radius: 1.1rem; + background: var(--bs-body-bg); + box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .08); +} + +.section-eyebrow { + letter-spacing: .08em; +} + +.section-toolbar .btn, .page-section-header .btn { + border-radius: .8rem; +} + +.surface-muted { + background: color-mix(in srgb, var(--bs-tertiary-bg) 85%, white); + border-radius: 1rem; +} + +.settings-tab .nav-link { + justify-content: flex-start; +} + +.settings-tab .nav-link.active { + background: var(--bs-primary); + color: #fff; +} + +.stat-card { + min-height: 120px; + border: 0; +} + +.stat-blue { + background: linear-gradient(135deg, #0d6efd, #4aa3ff); +} + +.stat-green { + background: linear-gradient(135deg, #198754, #44c28a); +} + +.stat-purple { + background: linear-gradient(135deg, #6f42c1, #9a6bff); +} + +.stat-orange { + background: linear-gradient(135deg, #fd7e14, #ffad5c); +} + +.stat-dark { + background: linear-gradient(135deg, #343a40, #586069); +} + +.compact-card-body { + padding: .95rem 1.1rem; +} + +.text-wrap-balanced { + max-width: 46rem; +} + +.nfz-badge { + font-size: .78rem; +} + +[data-bs-theme="dark"] .nav-link:hover { + background: rgba(255, 255, 255, .08); +} + +[data-bs-theme="dark"] .top-chip { + background: rgba(255, 255, 255, .06); +} + +[data-bs-theme="dark"] .page-content-wrap { + background: linear-gradient(180deg, rgba(13, 110, 253, .08), transparent 200px); +} + +@media (max-width: 991px) { + .app-shell { + flex-direction: column; + } + + .sidebar { + width: 100%; + min-width: 100%; + max-width: 100%; + flex-basis: auto; + min-height: auto; + position: static; + } + + .main-column { + width: 100%; + } +} + +.invoice-detail-layout { + display: grid; + grid-template-columns: minmax(0, 1fr) 320px; + gap: 1rem; +} + +.invoice-detail-main, .invoice-detail-sidebar { + min-width: 0; +} + +.invoice-detail-sticky { + position: sticky; + top: 1rem; +} + +.invoice-preview-surface { + max-height: none; +} + +.invoice-preview-surface table { + min-width: 720px; +} + +@media (max-width: 991px) { + .invoice-detail-layout { + grid-template-columns: 1fr; + } + + .invoice-detail-sticky { + position: static; + } +} + +.source-switch { + display: flex; + flex-wrap: wrap; + gap: .75rem; +} + +.btn-source { + border: 1px solid var(--bs-border-color); + border-radius: 999px; + padding: .65rem 1rem; + background: var(--bs-body-bg); +} + +.btn-check:checked+.btn-source { + background: var(--bs-primary); + color: #fff; + border-color: var(--bs-primary); +} + +.source-panel { + padding: 1rem; + border: 1px solid var(--bs-border-color); + border-radius: 1rem; + background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-primary-bg-subtle)); +} + +.source-panel-note .alert { + border-radius: 1rem; +} + +.settings-module-intro { + display: flex; + justify-content: space-between; + gap: 1rem; + align-items: flex-start; + margin-bottom: 1rem; + padding: 1rem; + border-radius: 1rem; + background: color-mix(in srgb, var(--bs-tertiary-bg) 88%, var(--bs-primary-bg-subtle)); +} + +.login-page { + background: linear-gradient(135deg, rgba(13, 110, 253, .08), rgba(111, 66, 193, .08)); +} + +.login-hero { + align-items: center; + justify-content: center; + padding: 3rem; +} + +.login-hero-card { + max-width: 34rem; +} + +.login-form-card { + max-width: 34rem; + border-radius: 1.5rem; +} + +.login-feature-list { + display: grid; + gap: 1rem; + margin-top: 2rem; + font-weight: 500; +} + +.invoice-actions-cell { + min-width: 170px; +} + +.invoice-action-btn { + min-width: 88px; + height: 34px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: .7rem; + white-space: nowrap; + flex: 0 0 auto; +} + +.table td .invoice-action-btn i { + line-height: 1; +} + +.table td.text-end { + white-space: nowrap; +} + +.ksef-break, td.text-break { + word-break: break-word; + overflow-wrap: anywhere; +} + +.invoice-ksef-col { + min-width: 190px; + max-width: 260px; +} + +.invoice-number-col { + min-width: 180px; +} + +.invoice-actions-stack { + display: flex; + flex-wrap: nowrap; + justify-content: flex-end; + gap: .5rem; +} + +.pagination { + gap: .2rem; +} + +.pagination .page-link { + border-radius: .65rem; +} + +@media (max-width: 1400px) { + .invoice-actions-cell { + min-width: 150px; + } + + .invoice-action-btn { + min-width: 80px; + padding-left: .6rem; + padding-right: .6rem; + } + + .invoice-ksef-col { + min-width: 170px; + max-width: 220px; + } +} + +@media (max-width: 1200px) { + .invoice-actions-stack { + flex-wrap: wrap; + } + + .table td.text-end { + white-space: normal; + } +} \ No newline at end of file