test #1
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user