gru/fuel_track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rewrite styles

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-07-14 11:52:36 +02:00
parent 780681dfd5
commit e200c91881
19 changed files with 220 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/css/charts.css
+2 -1
View File
@@ -1 +1,2 @@
.chart-wrap{height:420px;position:relative;overflow:hidden}.chart-box{height:320px;position:relative;overflow:hidden}.chart-empty{position:absolute;inset:0;display:grid;place-items:center;border:1px dashed var(--bs-border-color);border-radius:var(--bs-border-radius);color:var(--bs-secondary-color)}
.chart-wrap{height:420px;position:relative;overflow:hidden}.chart-box{height:320px;position:relative;overflow:hidden}.chart-empty{position:absolute;inset:0;display:grid;place-items:center;border:1px dashed var(--bs-border-color);border-radius:.85rem;color:var(--bs-secondary-color);background:var(--bs-tertiary-bg)}
@media(max-width:575.98px){.chart-wrap{height:330px}.chart-box{height:270px}}
app/static/css/choices.css
+7 -1
View File
@@ -1,2 +1,8 @@
.choices{margin-bottom:0}.choices__inner,.choices__input,.choices__list--dropdown,.choices__list[aria-expanded]{background-color:var(--bs-body-bg);color:var(--bs-body-color);border-color:var(--bs-border-color)}.choices__input{border-bottom-color:var(--bs-border-color)}.choices__list--dropdown,.choices__list[aria-expanded]{z-index:1080;max-height:260px;overflow:auto}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background-color:var(--bs-tertiary-bg)}.lpg-region-modal .modal-body{min-height:420px}.lpg-region-modal .choices__list--dropdown,.lpg-region-modal .choices__list[aria-expanded]{position:absolute;width:100%}
.choices{margin-bottom:0}.choices__inner,.choices__input,.choices__list--dropdown,.choices__list[aria-expanded]{background-color:var(--bs-body-bg);color:var(--bs-body-color);border-color:var(--bs-border-color)}.choices__inner{border-radius:.7rem;min-height:2.75rem;padding:.45rem .75rem}.choices__input{border-bottom-color:var(--bs-border-color)}.choices__list--dropdown,.choices__list[aria-expanded]{z-index:1080;max-height:260px;overflow:auto}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background-color:var(--bs-tertiary-bg)}.lpg-region-modal .modal-body{min-height:420px}.lpg-region-modal .choices__list--dropdown,.lpg-region-modal .choices__list[aria-expanded]{position:absolute;width:100%}
[data-station-proposal-select]+.choices .choices__list--dropdown,[data-station-proposal-select]+.choices .choices__list[aria-expanded]{min-width:100%;width:max-content;max-width:min(42rem,90vw)}
[data-bs-theme="dark"] .choices__inner,[data-bs-theme="dark"] .choices__input,[data-bs-theme="dark"] .choices__list--dropdown,[data-bs-theme="dark"] .choices__list[aria-expanded]{background:#171a1e!important;border-color:#4a5057!important;color:#f8f9fa!important}
[data-bs-theme="dark"] .choices__input::placeholder{color:#8f969e}
[data-bs-theme="dark"] .choices__list--single .choices__item,[data-bs-theme="dark"] .choices__item--choice{color:#f1f3f5}
[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,[data-bs-theme="dark"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background:#2c3238!important;color:#fff}
[data-bs-theme="dark"] .choices[data-type*=select-one]::after{border-color:#aeb4bb transparent transparent}
[data-bs-theme="dark"] .choices[data-type*=select-one].is-open::after{border-color:transparent transparent #aeb4bb}
app/static/css/components.css
+21 -1
View File
@@ -1 +1,21 @@
.metric strong{display:block;font-size:1.45rem;margin-top:.25rem}.station-brand{font-weight:700}.station-company{font-size:.875rem;color:var(--bs-secondary-color)}
.card{border:1px solid var(--bs-border-color-translucent);border-radius:var(--app-radius);box-shadow:var(--app-shadow);overflow:hidden}.card-body{padding:1.35rem}.card-title,.card h2{letter-spacing:-.02em}.card-header{background:transparent;border-bottom-color:var(--bs-border-color-translucent);padding:1rem 1.35rem}
.metric{height:100%;position:relative;transition:transform .18s ease,box-shadow .18s ease}.metric:hover{transform:translateY(-2px);box-shadow:var(--app-shadow-hover)}.metric small{color:var(--bs-secondary-color);font-weight:600}.metric strong{display:block;font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.2;margin-top:.45rem;letter-spacing:-.035em}.metric::before{content:"";position:absolute;inset:0 auto 0 0;width:.25rem;background:var(--bs-primary)}
.btn{border-radius:.65rem;font-weight:600}.btn-primary{box-shadow:0 .2rem .65rem color-mix(in srgb,var(--bs-primary) 22%,transparent)}.form-control,.form-select{border-radius:.7rem;min-height:2.75rem}.form-control:focus,.form-select:focus{box-shadow:0 0 0 .22rem color-mix(in srgb,var(--bs-primary) 18%,transparent)}.form-label{font-size:.9rem;font-weight:650;margin-bottom:.4rem}
.table{--bs-table-bg:transparent;margin-bottom:0}.table>:not(caption)>*>*{padding:.8rem .75rem;border-bottom-color:var(--bs-border-color-translucent)}.table thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.045em;color:var(--bs-secondary-color);font-weight:700;white-space:nowrap}.table tbody tr:last-child td{border-bottom:0}.table-responsive{border-radius:.7rem}.badge{border-radius:50rem;font-weight:650;padding:.4em .65em}.nav-tabs{gap:.25rem;border-bottom-color:var(--bs-border-color)}.nav-tabs .nav-link{border-radius:.65rem .65rem 0 0;font-weight:600}.list-group-item{padding:.9rem 1rem}.modal-content{border:0;border-radius:var(--app-radius);box-shadow:0 1rem 3rem rgba(0,0,0,.18)}.modal-header,.modal-footer{border-color:var(--bs-border-color-translucent)}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}.empty-state{padding:2.5rem 1rem;text-align:center;color:var(--bs-secondary-color)}.station-brand{font-weight:700}.station-company{font-size:.875rem;color:var(--bs-secondary-color)}
@media(max-width:575.98px){.card-body{padding:1.05rem}.metric .card-body{padding:1rem}.table>:not(caption)>*>*{padding:.7rem .6rem}.btn:not(.btn-sm):not(.btn-link){min-height:2.65rem}}
[data-bs-theme="dark"] .card,[data-bs-theme="dark"] .modal-content,[data-bs-theme="dark"] .list-group-item{background-color:#202327;border-color:#3a3f45;color:#f1f3f5}
[data-bs-theme="dark"] .card-header,[data-bs-theme="dark"] .modal-header,[data-bs-theme="dark"] .modal-footer{border-color:#3a3f45}
[data-bs-theme="dark"] .form-control,[data-bs-theme="dark"] .form-select{background-color:#171a1e;border-color:#4a5057;color:#f8f9fa}
[data-bs-theme="dark"] .form-control::placeholder{color:#8f969e;opacity:1}
[data-bs-theme="dark"] .form-control:focus,[data-bs-theme="dark"] .form-select:focus{background-color:#171a1e;border-color:var(--bs-primary);color:#fff}
[data-bs-theme="dark"] .form-select option{background:#171a1e;color:#f8f9fa}
[data-bs-theme="dark"] .input-group-text{background:#292d32;border-color:#4a5057;color:#d9dde1}
[data-bs-theme="dark"] .table{--bs-table-color:#e9ecef;--bs-table-hover-color:#fff;--bs-table-hover-bg:rgba(255,255,255,.045);--bs-table-striped-color:#e9ecef;--bs-table-striped-bg:rgba(255,255,255,.025)}
[data-bs-theme="dark"] .table thead th{color:#adb5bd}
[data-bs-theme="dark"] .text-body-secondary,[data-bs-theme="dark"] .text-muted{color:#aeb4bb!important}
[data-bs-theme="dark"] .bg-body-tertiary{background-color:#181b1f!important}
[data-bs-theme="dark"] .dropdown-menu{background:#202327;border-color:#3a3f45;box-shadow:0 .75rem 2rem rgba(0,0,0,.35)}
[data-bs-theme="dark"] .dropdown-item{color:#e9ecef}
[data-bs-theme="dark"] .dropdown-item:hover,[data-bs-theme="dark"] .dropdown-item:focus{background:#2b3035;color:#fff}
app/static/css/layout.css
+27 -1
View File
@@ -1 +1,27 @@
html,body{min-height:100%}body{min-height:100vh}main{min-height:calc(100vh - 57px)}.navbar-brand{white-space:nowrap}#live-alerts{max-width:420px}
:root{--app-radius:1rem;--app-shadow:0 .4rem 1.5rem rgba(15,23,42,.07);--app-shadow-hover:0 .75rem 2rem rgba(15,23,42,.11)}
html,body{min-height:100%}body{min-height:100vh;display:flex;flex-direction:column;background:var(--bs-tertiary-bg)}
.app-navbar{background:color-mix(in srgb,var(--bs-body-bg) 92%,transparent);border-bottom:1px solid var(--bs-border-color-translucent);backdrop-filter:blur(14px);box-shadow:0 .15rem .75rem rgba(15,23,42,.04)}
.navbar-brand{font-weight:800;letter-spacing:-.04em;white-space:nowrap}.app-brand,.auth-brand{font-size:1.4rem;line-height:1;text-decoration:none}.brand-fuel{color:var(--bs-emphasis-color)}.brand-track{color:var(--bs-primary)}
.app-brand::after,.auth-brand::after{content:"";display:inline-block;width:.38rem;height:.38rem;margin-left:.18rem;border-radius:50%;background:var(--bs-warning);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--bs-warning) 18%,transparent);vertical-align:.15em}
.app-navbar .nav-link{border-radius:.6rem;padding:.55rem .75rem;font-weight:550;color:var(--bs-secondary-color)}.app-navbar .nav-link:hover{color:var(--bs-emphasis-color);background:var(--bs-tertiary-bg)}.app-navbar .nav-link.active{color:var(--bs-primary);background:color-mix(in srgb,var(--bs-primary) 10%,transparent)}.navbar-divider{height:1.5rem;border-left:1px solid var(--bs-border-color);margin-left:.35rem}
.app-main{flex:1;padding-top:2rem;padding-bottom:3rem}.app-footer{padding:1.25rem 0;border-top:1px solid var(--bs-border-color-translucent);background:var(--bs-body-bg);color:var(--bs-secondary-color)}.app-footer a{color:inherit}
.page-header{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.5rem}.page-header h1{letter-spacing:-.035em}.page-kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--bs-primary);margin-bottom:.3rem}
#live-alerts{max-width:min(420px,calc(100vw - 2rem))}.app-alert{box-shadow:var(--app-shadow);border:0}
.auth-page{background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--bs-primary) 14%,transparent),transparent 34%),radial-gradient(circle at 85% 85%,color-mix(in srgb,var(--bs-warning) 10%,transparent),transparent 30%),var(--bs-tertiary-bg)}.auth-main{display:grid;place-items:center;width:100%;padding-top:2rem;padding-bottom:2rem}.auth-shell{width:min(100%,28rem)}.auth-brand{display:block;width:max-content;margin:0 auto 1.25rem;font-size:1.8rem;font-weight:850;letter-spacing:-.055em}.auth-card{border-color:color-mix(in srgb,var(--bs-primary) 18%,var(--bs-border-color));box-shadow:0 1.25rem 3rem rgba(15,23,42,.13)}
/* Geometria interfejsu jest wspólna dla wszystkich motywów. Motyw zmienia wyłącznie kolory. */
.app-navbar{min-height:4.25rem}
.app-navbar .container{min-height:4.25rem}
.app-navbar .navbar-brand{margin-right:1rem;padding-top:.3125rem;padding-bottom:.3125rem}
.app-navbar .navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;border-width:1px;border-radius:.375rem}
.app-brand{font-family:inherit;font-size:1.4rem!important;font-weight:800!important;line-height:1!important;letter-spacing:-.04em!important}
.app-navbar .nav-link{font-size:1rem;line-height:1.5}
[data-bs-theme="dark"]{--app-shadow:0 .45rem 1.6rem rgba(0,0,0,.28);--app-shadow-hover:0 .8rem 2.2rem rgba(0,0,0,.38)}
[data-bs-theme="dark"] body{background:#17191c;color:#f1f3f5}
[data-bs-theme="dark"] .app-navbar{background:rgba(24,26,29,.94);border-bottom-color:#34383d;box-shadow:0 .2rem 1rem rgba(0,0,0,.32)}
[data-bs-theme="dark"] .app-footer{background:#1b1d20;border-top-color:#34383d}
[data-bs-theme="dark"] .brand-fuel{color:#f8f9fa}
[data-bs-theme="dark"] .auth-page{background:radial-gradient(circle at 20% 10%,rgba(55,139,230,.16),transparent 36%),radial-gradient(circle at 85% 85%,rgba(255,193,7,.08),transparent 32%),#141619}
@media(max-width:991.98px){.app-main{padding-top:1.35rem}.app-navbar .navbar-collapse{border-top:1px solid var(--bs-border-color-translucent);margin-top:.75rem}.app-navbar .nav-link{padding:.7rem .8rem}.page-header{align-items:stretch;flex-direction:column}}
@media(max-width:575.98px){.app-main{padding-left:1rem;padding-right:1rem}.page-header h1{font-size:1.65rem}.auth-main{padding-top:1.25rem;padding-bottom:1.25rem}}
app/static/js/init.js
+1 -1
View File
@@ -1 +1 @@
FuelTrack.initPage=()=>{FuelTrack.bindAjaxForms();FuelTrack.bindFuelPreview();FuelTrack.bindOrlenSync();FuelTrack.bindUserModal();FuelTrack.bindAuth();FuelTrack.bindStationLiveSearch();FuelTrack.bindStationFavoriteToggles();FuelTrack.bindStationInlineCompany();FuelTrack.bindLpgRegionPicker();FuelTrack.bindFavoriteStations();FuelTrack.bindStationProposalSelect();FuelTrack.bindStationPoints()};window.addEventListener('popstate',()=>FuelTrack.replaceMain(location.href));document.addEventListener('DOMContentLoaded',()=>{FuelTrack.initSocket();FuelTrack.initPage()});
FuelTrack.initPage=()=>{FuelTrack.bindAjaxForms();FuelTrack.bindFuelPreview();FuelTrack.bindOrlenSync();FuelTrack.bindUserModal();FuelTrack.bindAuth();FuelTrack.bindStationLiveSearch();FuelTrack.bindStationFavoriteToggles();FuelTrack.bindStationInlineCompany();FuelTrack.bindLpgRegionPicker();FuelTrack.bindFavoriteStations();FuelTrack.bindStationProposalSelect();FuelTrack.bindStationPoints()};window.addEventListener('popstate',()=>FuelTrack.replaceMain(location.href));document.addEventListener('DOMContentLoaded',()=>FuelTrack.initPage());