Mateusz Gruszczyński
171 lines
4.2 KiB
CSS
171 lines
4.2 KiB
CSS
@font-face {
|
|
font-family: "AppSans";
|
|
src: url("/static/fonts/DejaVuSans.ttf") format("truetype");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "AppSans";
|
|
src: url("/static/fonts/DejaVuSans-Bold.ttf") format("truetype");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
--bg: #f4f7fb;
|
|
--text: #1e2a36;
|
|
--card: #ffffff;
|
|
--muted: #6c7684;
|
|
--border: #edf1f7;
|
|
--row: #f8fafc;
|
|
--input-bg: #ffffff;
|
|
--input-text: #1e2a36;
|
|
--table-border: #e7edf5;
|
|
}
|
|
|
|
body[data-theme="dark"] {
|
|
--bg: #03050a;
|
|
--text: #e5e7eb;
|
|
--card: #0b1220;
|
|
--muted: #9aa7bb;
|
|
--border: #2a3547;
|
|
--row: #101827;
|
|
--input-bg: #050914;
|
|
--input-text: #e5e7eb;
|
|
--table-border: #3b4658;
|
|
}
|
|
|
|
body {
|
|
font-family: "AppSans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.card,
|
|
.hero,
|
|
.stat-card {
|
|
background: var(--card);
|
|
color: var(--text);
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.text-muted,
|
|
.form-label,
|
|
.stat-label,
|
|
#resultText {
|
|
color: var(--muted) !important;
|
|
}
|
|
|
|
.form-control,
|
|
.form-select {
|
|
background-color: var(--input-bg);
|
|
color: var(--input-text);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.form-control:focus,
|
|
.form-select:focus {
|
|
background-color: var(--input-bg);
|
|
color: var(--input-text);
|
|
}
|
|
|
|
.form-control::placeholder { color: var(--muted); }
|
|
|
|
.table {
|
|
color: var(--text);
|
|
--bs-table-color: var(--text);
|
|
--bs-table-bg: transparent;
|
|
--bs-table-border-color: var(--table-border);
|
|
}
|
|
|
|
.app-shell { max-width: 1680px; }
|
|
.hero { border-radius: 20px; }
|
|
.slim-card { top: 1rem; border-radius: 18px; }
|
|
.chart-card canvas { max-height: 330px; }
|
|
.chart-card-sm canvas { max-height: 230px; }
|
|
.form-label { font-size: .78rem; margin-bottom: .2rem; }
|
|
.term-slider-wrap { padding: .25rem .1rem .15rem; }
|
|
.form-range { margin-bottom: 0; }
|
|
.form-control, .form-select { border-radius: 10px; }
|
|
.stack { display: grid; gap: .45rem; }
|
|
.dynamic-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr auto;
|
|
gap: .4rem;
|
|
align-items: end;
|
|
background: var(--row);
|
|
border: 1px solid var(--border);
|
|
padding: .55rem;
|
|
border-radius: 12px;
|
|
}
|
|
.dynamic-row.overpay { grid-template-columns: .65fr 1.35fr .7fr .9fr .9fr .9fr auto; }
|
|
.dynamic-row.historical { grid-template-columns: .65fr .8fr 1fr .9fr .7fr 1.2fr auto; }
|
|
.stat-card { border-radius: 16px; }
|
|
.stat-value { font-size: 1.15rem; font-weight: 700; }
|
|
.table { font-size: .84rem; }
|
|
.btn { border-radius: 999px; }
|
|
|
|
@media (max-width: 768px) {
|
|
.dynamic-row, .dynamic-row.overpay, .dynamic-row.historical { grid-template-columns: 1fr 1fr; }
|
|
.dynamic-row button { grid-column: span 2; }
|
|
}
|
|
|
|
.card { box-shadow: 0 12px 34px rgba(0, 0, 0, .16) !important; }
|
|
body[data-theme="dark"] .card { box-shadow: 0 14px 38px rgba(0, 0, 0, .34) !important; }
|
|
body[data-theme="dark"] .btn-outline-secondary { border-color: var(--border); color: var(--text); }
|
|
body[data-theme="dark"] .btn-outline-primary { border-color: #52637a; }
|
|
|
|
.form-check-input { background-color: var(--input-bg); border-color: var(--border); }
|
|
body[data-theme="dark"] hr { border-color: var(--border); opacity: 1; }
|
|
|
|
@media (min-width: 1200px) {
|
|
.slim-card {
|
|
max-height: calc(100vh - 2rem);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.slim-card > .card-body {
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
scrollbar-gutter: stable;
|
|
padding-right: 1rem;
|
|
}
|
|
}
|
|
|
|
.slim-card > .card-body::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.slim-card > .card-body::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.18);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.slim-card > .card-body::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.28);
|
|
}
|
|
.overpay-slider { grid-column: 1 / -1; min-width: 0; }
|
|
.overpay-slider .form-range { width: 100%; }
|
|
.overpay-amount { min-width: 0; }
|
|
.protection-box {
|
|
border: 1px solid transparent;
|
|
border-radius: 14px;
|
|
padding: .35rem .25rem;
|
|
transition: border-color .15s ease, background-color .15s ease;
|
|
}
|
|
.protection-warning-box {
|
|
border-color: #f59e0b;
|
|
background: rgba(245, 158, 11, .10);
|
|
}
|
|
.btn.protection-warning {
|
|
color: #111827;
|
|
background: #fbbf24;
|
|
border-color: #f59e0b;
|
|
box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .20);
|
|
}
|