- Remove min-width: 580px from body — was forcing horizontal scroll - Reduce container padding to px-2 on mobile - Fix .inv width (was 400px fixed, now auto) - Add @media (max-width: 575.98px) block: smaller card margins, font sizes, full-width forms and select bars - Audit/owner/admin/inspection forms: col-auto → col-12 col-sm-auto - Inspection stats: col-md-3 → col-6 col-md-3 (2x2 grid on mobile) - Inspection action buttons: d-flex flex-wrap gap-2 - Home search input: flex-grow-1 to fill available width - aud-select-bar: stacks vertically on mobile - Bump cache-busting version for styles.css and app.js Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
315 lines
4.8 KiB
CSS
315 lines
4.8 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: #E2F3FD;
|
|
min-width: 0;
|
|
}
|
|
|
|
.row {
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
border: 1px;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
background-color: #6A90B6;
|
|
padding: 2px;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
color: #041322;
|
|
}
|
|
|
|
a {
|
|
color: #041322;
|
|
}
|
|
|
|
.container {
|
|
margin: 10px;
|
|
}
|
|
|
|
button {
|
|
background-color: #E07D54;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
padding: 6px 14px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 20px;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 5px 12px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #E07D54;
|
|
border-color: #E07D54;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
|
|
background-color: #c86a3d;
|
|
border-color: #c86a3d;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
color: #E07D54;
|
|
border-color: #E07D54;
|
|
}
|
|
|
|
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
|
|
background-color: #E07D54;
|
|
border-color: #E07D54;
|
|
color: #fff;
|
|
}
|
|
|
|
.card {
|
|
margin: 10px;
|
|
border-radius: 15px;
|
|
border-color: #E07D54;
|
|
}
|
|
|
|
h5 {
|
|
text-align: center;
|
|
}
|
|
|
|
.hidden-column {
|
|
display: none;
|
|
}
|
|
|
|
nav {
|
|
width: 100%;
|
|
}
|
|
|
|
table {
|
|
word-break: break-all;
|
|
border-collapse: separate !important;
|
|
}
|
|
|
|
.table td {
|
|
font-size: 14px;
|
|
padding: 0;
|
|
max-width: 10rem;
|
|
word-break: break-all;
|
|
border-collapse: separate !important;
|
|
}
|
|
|
|
.aud {
|
|
width: 110px;
|
|
}
|
|
|
|
td.aud-col, th.aud-col {
|
|
width: 70px;
|
|
min-width: 70px;
|
|
max-width: 70px;
|
|
}
|
|
|
|
td.num-col, th.num-col {
|
|
width: 40px;
|
|
min-width: 40px;
|
|
max-width: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
td.inv-col, th.inv-col {
|
|
width: auto;
|
|
}
|
|
|
|
.inv {
|
|
width: auto;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.rasp {
|
|
width: 250px;
|
|
max-width: 250px;
|
|
word-break: break-word;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
white-space: normal !important;
|
|
}
|
|
|
|
#modal_matcenn {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.datatable {
|
|
background-color: whitesmoke;
|
|
}
|
|
|
|
.print-only {
|
|
display: none;
|
|
}
|
|
|
|
.print-title {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.datatable th:nth-child(7) {
|
|
width: 200px;
|
|
}
|
|
|
|
@media (max-width: 575.98px) {
|
|
header h1 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.container-fluid {
|
|
padding-left: 8px !important;
|
|
padding-right: 8px !important;
|
|
}
|
|
|
|
.card {
|
|
margin: 4px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.rasp {
|
|
width: auto;
|
|
max-width: 120px;
|
|
}
|
|
|
|
.table td, .table th {
|
|
font-size: 12px;
|
|
padding: 4px 3px;
|
|
}
|
|
|
|
.aud-select-bar {
|
|
flex-direction: column !important;
|
|
align-items: stretch !important;
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
.aud-select-bar label {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.aud-select-bar select,
|
|
.aud-select-bar .btn {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.form-row-mobile {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.form-row-mobile .col-auto,
|
|
.form-row-mobile [class*="col-"] {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.btn-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn-bar .btn {
|
|
flex: 1 1 auto;
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
* {
|
|
font-family: "Times New Roman", Times, serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
border: none;
|
|
}
|
|
|
|
@page {
|
|
size: A4;
|
|
margin: 10mm;
|
|
}
|
|
|
|
@page :first {
|
|
margin-top: 10mm;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
title {
|
|
display: none;
|
|
}
|
|
|
|
.card {
|
|
border: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
.print-only {
|
|
display: table-cell !important;
|
|
}
|
|
|
|
h2.print-only {
|
|
display: block !important;
|
|
}
|
|
|
|
.table {
|
|
border: 1px solid #E07D54;
|
|
margin-top: 20px;
|
|
font-size: 12pt;
|
|
}
|
|
|
|
.table th, .table td {
|
|
border: 1px solid #E07D54;
|
|
padding: 5px;
|
|
font-size: 12pt;
|
|
word-break: normal;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
white-space: normal;
|
|
}
|
|
|
|
td.inv-col, th.inv-col {
|
|
width: 100px;
|
|
min-width: 100px;
|
|
max-width: 100px;
|
|
}
|
|
|
|
table.rs-table-bordered {
|
|
border: 1px solid #E07D54;
|
|
margin-top: 20px;
|
|
font-size: 14pt;
|
|
}
|
|
|
|
table.rs-table-bordered > thead > tr > th {
|
|
border: 1px solid #E07D54;
|
|
padding: 2px;
|
|
font-size: 14pt;
|
|
}
|
|
|
|
table.rs-table-bordered > tbody > tr > td {
|
|
border: 1px solid #E07D54;
|
|
padding: 10px;
|
|
font-size: 14pt;
|
|
}
|
|
}
|