Rules:
- DO NOT add `is-multiline` — it sets flex-wrap: wrap and the cards
wrap into a grid instead of extending off-screen.
- DO NOT add width classes (is-6-mobile / is-4-desktop / is-3-fullhd) to
the columns — the slider owns the card width via --cs-card.
- No inline display/overflow styles needed on the container.
Tune per-slider by overriding the custom properties inline, e.g.
--------------------------------------------------------------------------- */
.cardslider {
--cs-card: 78%; /* track width of a single card (peek = 100% - this) */
--cs-gap: 12px; /* space between cards */
--cs-lift: 14px; /* headroom so :hover scale + shadow aren't clipped */
/* Horizontal runway. The track bleeds out by this much and pads back in by
the same amount, so cards stay aligned with the section heading while
still scrolling to the screen edge. Keep it equal to the horizontal
padding of the page container (#carList uses 8px). */
--cs-edge: 8px;
display: flex;
flex-wrap: nowrap; /* beats .columns.is-multiline */
gap: var(--cs-gap);
align-items: stretch;
padding: var(--cs-lift) var(--cs-edge);
overflow-x: auto;
overflow-y: hidden; /* overflow-x already forces this */
-webkit-overflow-scrolling: touch;
overscroll-behavior-inline: contain; /* don't trigger browser back-swipe */
scroll-snap-type: x proximity; /* swap to `x mandatory` for hard snap */
scroll-padding-inline: var(--cs-edge);
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* old Edge */
}
.cardslider::-webkit-scrollbar {
display: none;
}
/* .columns sets negative inline/top margins and a negative bottom margin via
:last-child / :not(:last-child). Those break a scroll box, so zero them out
at matching specificity (these rules come later in the file, so they win). */
.cardslider,
.cardslider:last-child,
.cardslider:not(:last-child) {
margin-block: 0 0;
margin-inline: calc(-1 * var(--cs-edge));
}
.cardslider > .column,
.cardslider > div {
flex: 0 0 var(--cs-card); /* fixed track width, never squashed */
width: auto; /* beats .column.is-*-mobile widths */
max-width: none;
min-width: 0;
margin: 0;
padding: 0;
scroll-snap-align: start;
}
/* let the card fill the stretched column so uneven content stays aligned */
.cardslider > .column > .card,
.cardslider > div > .card {
height: 100%;
}
@media screen and (max-width: 768px) {
.cardslider {
--cs-card: 47%;
--cs-gap: 8px;
}
}
@media screen and (min-width: 769px) {
.cardslider {
--cs-card: 47%;
--cs-gap: 16px;
}
}
@media screen and (min-width: 1024px) {
.cardslider {
--cs-card: 300px;
}
}
@media screen and (min-width: 1408px) {
.cardslider {
--cs-card: 330px;
}
}
/* mouse users get a slim visible scrollbar as an extra affordance */
@media (hover: hover) and (pointer: fine) {
.cardslider {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
padding-bottom: calc(var(--cs-lift) + 6px);
}
.cardslider::-webkit-scrollbar {
display: block;
height: 6px;
}
.cardslider::-webkit-scrollbar-track {
background: transparent;
}
.cardslider::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.22);
border-radius: 999px;
}
.cardslider:hover::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.38);
}
}
@media (prefers-reduced-motion: reduce) {
.cardslider {
scroll-snap-type: none;
}
}
/* // TABLE CSS */
.trow {
line-height: 1.2;
vertical-align: middle !important;
height: var(--row-h, 60px);
}
@media screen and (max-width: 768px) {
/* /quotes/ (quotes_tableRow(), core/quotes.php): cells start at the top of the
row, so a two-line client name or car doesn't push its neighbours down to the middle */
#quoteList .trow { vertical-align: top !important; }
/* A pending request on a quote (core/quoteRequests.php): a badge that pulses
so an admin notices it on /quote/ and in the /quotes/ list. Still, not
pulsing, for anyone who asked the system for less motion. */
.quoteRequestBadge { font-weight: 600; animation: quoteRequestPulse 1.6s ease-in-out infinite; }
.quoteRequestBadge.is-compact { font-size: 0.7rem; height: auto; padding: 2px 6px; margin-top: 4px; display: inline-flex; }
@keyframes quoteRequestPulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 196, 0, 0.55); }
50% { opacity: .55; box-shadow: 0 0 0 5px rgba(255, 196, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .quoteRequestBadge { animation: none; } }
.quoteRequestNote { white-space: normal; line-height: 1.3; min-width: 220px; cursor: default; }
/* Units unlocked for external sales agents (core/externo.php): an open lock
beside the status in the admin stock lists; the switch is dim while closed */
.externoUnitIcon { margin-left: 6px; color: #3ec46d; }
.externoToggle { opacity: .85; } /* the colour says it: has-text-light open, has-text-danger closed (carStock_externoToggle()) */
.externoToggle:hover { opacity: 1; }
/* …and open to clients' QR quotes (carStock.publico, core/selfService.php): same look */
.publicoUnitIcon { margin-left: 6px; color: #3ec46d; }
.publicoToggle { opacity: .85; }
.publicoToggle:hover { opacity: 1; }
/* both switches on their own line under the Estado menu, side by side */
.unitAccessToggles { display: inline-flex; gap: 14px; align-items: center; }
.unitAccessToggles > a { margin-left: 0 !important; }
}
/* ---------------------------------------------------------------------------
RESPONSIVE TABLE COLUMNS
---------------------------------------------------------------------------
Drop a whole column below a breakpoint.
A table column has no single element you can style —
only accepts a
handful of properties and `visibility: collapse` on it is not dependable in
WebKit, which matters here because this app runs as an iOS PWA. So the class
goes on the
AND on every
of that column:
Color
…
Space Gray
Breakpoints mirror Bulma's:
.col-hide-mobile hidden <= 768px (phones)
.col-hide-touch hidden <= 1023px (phones + tablets)
.col-hide-desktop shown only below 1024px (the mobile-only counterpart)
Note: the inline width:% on the remaining
no longer sums to 100% once a
column is dropped. That is fine — the table redistributes the leftover space
proportionally across the columns that are still visible.
--------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
.col-hide-mobile {
display: none !important;
}
}
@media screen and (max-width: 1023px) {
.col-hide-touch {
display: none !important;
}
}
@media screen and (min-width: 1024px) {
.col-hide-desktop {
display: none !important;
}
}
/* .show-mobile-only — the opposite of .col-hide-mobile: shown on phones
(<= 768px) with its own display, hidden from 769px up. */
@media screen and (min-width: 769px) {
.show-mobile-only {
display: none !important;
}
}
@media screen and (max-width: 768px) {
.plainmodal {
width: 96%;
margin-left: auto;
margin-right: auto;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
-webkit-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
-moz-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
}
.appmodal {
width: 96%;
margin-left: auto;
margin-right: auto;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
-webkit-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
-moz-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
}
.searchmodal {
width: 96%;
margin-left: auto;
margin-right: auto;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
-webkit-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
-moz-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
}
.carCardMakeLogo {
width:100%;
max-width:40px;
padding: 4px;
}
.carCardContents {
padding-left: 8px!important;
padding-right: 8px!important;
padding-top: 5px!important;
padding-bottom: 5px!important;
min-height:120px;
}
}
@media screen and (min-width: 769px) {
.plainmodal {
width: 66%;
margin-left: auto;
margin-right: auto;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
-webkit-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
-moz-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
}
.appmodal {
width: 66%;
margin-left: auto;
margin-right: auto;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
-webkit-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
-moz-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
}
.searchmodal {
width: 66%;
margin-left: auto;
margin-right: auto;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
-webkit-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
-moz-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
}
.carCardMakeLogo {
width:100%;
max-width:45px;
padding: 5px;
}
.carCardContents {
padding-left: 16px!important;
padding-right: 16px!important;
padding-top: 6px!important;
padding-bottom: 6px!important;
min-height:160px;
}
}
@media screen and (min-width: 1201px) {
.plainmodal {
width: 46%;
margin-left: auto;
margin-right: auto;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
-webkit-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
-moz-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
}
.appmodal {
width: 46%;
margin-left: auto;
margin-right: auto;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
-webkit-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
-moz-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
}
.searchmodal {
width: 46%;
margin-left: auto;
margin-right: auto;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
-webkit-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
-moz-box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
box-shadow: 0px -3px 13px 2px rgba(0,0,0,0.31);
}
.carCardMakeLogo {
width:100%;
max-width:55px;
padding: 6px;
}
}
.carColorCircle {
/* --circle-size sets both axes; --circle-w / --circle-h override one axis
each when you want an ellipse. Omit all three and it stays 50px. */
width: var(--circle-w, var(--circle-size, 50px));
height: var(--circle-h, var(--circle-size, 50px));
border-radius: 50%;
/* don't let a flex or grid parent squash it out of round */
flex: 0 0 auto;
/* flat fallback: still correct when only --circle-bg is set */
background-color: var(--circle-bg, #dbdbdb);
/* --circle-bg2 falls back to --circle-bg, so existing one-variable markup
renders a flat circle instead of a broken gradient. */
background-image: linear-gradient(
145deg,
var(--circle-bg, #dbdbdb) 0%,
var(--circle-bg2, var(--circle-bg, #dbdbdb)) 100%
);
}
/* one colour (flat), default 50px:
two colours (gradient) — generate with colorGradientVars() in core/functions.php:
resized — any CSS length (px, rem, em, %, cqw…):
responsive, because a custom property is just a value:
@media screen and (max-width: 768px) { .carColorCircle { --circle-size: 32px; } }
*/
/* ---------------------------------------------------------------------------
TECHNICAL DRAWINGS ON DARK
---------------------------------------------------------------------------
Line-art diagrams ship as black-on-white. Inverting at paint time keeps one
source file, avoids a second lossy JPEG pass over the thin lines, and flips
automatically with the theme.
The second rule covers the Lightbox2 overlay, which builds its own and
so never sees the class. It is scoped by filename on purpose — the page also
lightboxes real photographs, and those must not be inverted.
--------------------------------------------------------------------------- */
.theme-dark .invertImageIfDark {
filter: invert(1);
}
.theme-dark .carSchema,
.theme-dark .lb-image[src*="car-schema-black"] {
filter: invert(1);
}
.lineheight-1 {
line-height: var(--lh, 1);
}
tr.client-row .clientSelector {
opacity: 0.2;
}
tr.client-row:hover .clientSelector {
opacity: 1;
}
.newContactProcess {
opacity: 0.2;
transition: opacity 0.25s ease;
}
.newContactProcess.is-ready {
opacity: 1;
}
.has-opacity-1 {
opacity: 0.1;
}
.has-opacity-2 {
opacity: 0.2;
}
.has-opacity-3 {
opacity: 0.3;
}
.has-opacity-4 {
opacity: 0.4;
}
.has-opacity-5 {
opacity: 0.5;
}
.has-opacity-6 {
opacity: 0.6;
}
.has-opacity-7 {
opacity: 0.7;
}
.has-opacity-8 {
opacity: 0.8;
}
.has-opacity-9 {
opacity: 0.9;
}
// filters internal piping
.filterContainer {
width:100%;
display: inline-flex;
flex-direction: row;
}
/* ---------------------------------------------------------------------------
ADMIN STOCK LIST — the inline dropdowns
---------------------------------------------------------------------------
carStock_tableListRow_edit() swaps three cells for
The second rule covers the Lightbox2 overlay, which builds its own