/* ============================================================================ Mad Wild — shared component refresh (buttons + controls) ---------------------------------------------------------------------------- Loaded LAST in every page's , so at equal specificity these rules win over the per-page inline button CSS. This ONLY modernises the shape and feel of buttons and controls. It never changes a page's colours, its status-pill logic, or its layout: no background is assumed here, so nothing that carries a status colour can be broken by this file. The recipe (matches the approved proposal): - softer 10px corners on rectangular buttons - a soft lift + shadow on hover, press-down on active - a gold focus ring for keyboard users, app-wide - gold buttons read in black text ============================================================================ */ :root{ --mwc-rb:10px; /* button corner radius */ --mwc-sh:0 1px 2px rgba(28,28,26,.06),0 3px 10px rgba(28,28,26,.07); --mwc-shl:0 3px 6px rgba(28,28,26,.09),0 12px 26px rgba(28,28,26,.14); --mwc-ring:0 0 0 3px rgba(184,145,42,.32); /* gold focus ring */ --mwc-t:.15s ease-out; } /* ── Universal keyboard focus ring ────────────────────────────────────────── Only fires on keyboard focus (not mouse/touch), so it never nags a tap. */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:none; box-shadow:var(--mwc-ring); } /* ── Rectangular buttons: rounder corners + smooth transitions ─────────────── Every recurring button class in the app. Round/pill/icon buttons are handled separately below so their shape is preserved. */ .print-btn,.header-action,.empty-btn,.add-btn,.delete-btn,.view-btn,.gen-btn, .load-more-btn,.action-btn,.scratch-btn,.pay-email-btn,.payem-btn,.ws-btn, .quick-create-btn,.quick-btn,.period-btn,.dup-item-btn,.client-edit-btn, .sup-action-btn,.ord-supplier-email-btn,.splash-btn,.sb-btn,.who-btn, .win-pick-btn,.pick-btn,.docs-add-btn,.ws-image-link-btn,.quick-create-btn, .gen-btn,.load-more-btn,.hc-btn,.mwc-btn,.btn{ border-radius:var(--mwc-rb) !important; transition:transform var(--mwc-t),box-shadow var(--mwc-t),filter var(--mwc-t), background var(--mwc-t),border-color var(--mwc-t),color var(--mwc-t); } /* Hover: a small lift + soft shadow so a button reads as pressable. Shadow only appears on hover, so a transparent/ghost button never sits under a floating resting shadow. */ .print-btn:hover,.header-action:hover,.empty-btn:hover,.add-btn:hover, .delete-btn:hover,.view-btn:hover,.gen-btn:hover,.load-more-btn:hover, .action-btn:hover,.scratch-btn:hover,.pay-email-btn:hover,.payem-btn:hover, .ws-btn:hover,.quick-create-btn:hover,.quick-btn:hover,.period-btn:hover, .dup-item-btn:hover,.client-edit-btn:hover,.sup-action-btn:hover, .ord-supplier-email-btn:hover,.splash-btn:hover,.sb-btn:hover,.who-btn:hover, .win-pick-btn:hover,.pick-btn:hover,.docs-add-btn:hover,.ws-image-link-btn:hover, .hc-btn:hover,.mwc-btn:hover,.btn:hover{ transform:translateY(-1px); box-shadow:var(--mwc-shl); filter:brightness(1.03); } /* Active: press back down under the finger. */ .print-btn:active,.header-action:active,.empty-btn:active,.add-btn:active, .delete-btn:active,.view-btn:active,.gen-btn:active,.load-more-btn:active, .action-btn:active,.scratch-btn:active,.pay-email-btn:active,.payem-btn:active, .ws-btn:active,.quick-create-btn:active,.quick-btn:active,.period-btn:active, .dup-item-btn:active,.client-edit-btn:active,.sup-action-btn:active, .ord-supplier-email-btn:active,.splash-btn:active,.sb-btn:active,.who-btn:active, .win-pick-btn:active,.pick-btn:active,.docs-add-btn:active,.ws-image-link-btn:active, .hc-btn:active,.mwc-btn:active,.btn:active{ transform:translateY(0); box-shadow:var(--mwc-sh); filter:none; } /* ── Gold buttons read better in black than white ─────────────────────────── edit-item-btn is a gold pill that shipped with white text. */ .edit-item-btn{ color:var(--ink) !important; } /* ── Round / pill / icon buttons: keep their shape, add feel ───────────────── These stay round; they only gain the smooth transition + a gentle hover. */ .edit-item-btn,.modal-x,.wk-btn,.qty-btn,.ibtn{ transition:transform var(--mwc-t),box-shadow var(--mwc-t),background var(--mwc-t), border-color var(--mwc-t),color var(--mwc-t); } .edit-item-btn:hover,.wk-btn:hover,.qty-btn:hover,.ibtn:hover{ transform:translateY(-1px); box-shadow:var(--mwc-shl); } .modal-x:hover{ transform:scale(1.06); } /* ── Filter chips: smooth the state change ────────────────────────────────── Colours + active state stay exactly as each page defines them; this only makes the toggle feel less abrupt. */ .filter-chip,.stage-chip,.status-chip,.seg-btn{ transition:background var(--mwc-t),color var(--mwc-t),border-color var(--mwc-t), box-shadow var(--mwc-t); } .filter-chip:hover,.stage-chip:hover,.status-chip:hover{ border-color:var(--gold-border); } /* ── Form fields: match the buttons' rounded feel ─────────────────────────── Radius only, so it never changes an input's size or shifts a layout. Applies to text-style inputs, selects and textareas across the app; toggles, sliders, colour and file pickers keep their native shape. The gold focus ring is already handled by the universal :focus-visible rule above. */ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea{ border-radius:8px !important; } /* ── Popup windows: softer frame + a real drop shadow ─────────────────────── The window frame gets one consistent modern rounding and a proper shadow so it clearly floats above the page. We do NOT touch overflow: several of these modals scroll their own body, and forcing overflow:hidden would clip that scroll. The close cross + buttons inside already picked up the refresh above. Behaviour (close cross, no backdrop close) is unchanged. */ .modal,.bc-modal,.gen-modal,.hc-card,.inv-modal-card,.jap-modal,.mat-edit-modal, .payem-modal,.ov-card,.who-select{ border-radius:16px !important; box-shadow:0 10px 24px rgba(28,28,26,.18),0 28px 64px rgba(28,28,26,.24) !important; } /* ── Status pills: a soft tint + a colour dot ─────────────────────────────── The status COLOUR is untouched (it still comes from each page's own status class, via the pill's text colour). We only add a leading dot in that same colour and let the active/solid state keep its white dot. This matches the approved proposal without redefining any status colour. */ .build-status-pill,.ord-pill,.trk-pill,.quote-status-pill{ display:inline-flex !important; align-items:center; gap:7px; } .build-status-pill::before,.ord-pill::before,.trk-pill::before, .quote-status-pill::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; opacity:.9; } /* ── Respect reduced-motion ─────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .print-btn,.header-action,.empty-btn,.add-btn,.delete-btn,.view-btn,.gen-btn, .load-more-btn,.action-btn,.scratch-btn,.pay-email-btn,.payem-btn,.ws-btn, .quick-create-btn,.quick-btn,.period-btn,.dup-item-btn,.client-edit-btn, .sup-action-btn,.ord-supplier-email-btn,.splash-btn,.sb-btn,.who-btn, .win-pick-btn,.pick-btn,.docs-add-btn,.ws-image-link-btn,.hc-btn,.mwc-btn,.btn, .edit-item-btn,.modal-x,.wk-btn,.qty-btn,.ibtn, .filter-chip,.stage-chip,.status-chip,.seg-btn{ transition:none !important; } }