/* ========================================================================== Moveify Track & Trace - design system -------------------------------------------------------------------------- A token-driven re-skin layered over the compiled app. Selectors target the emotion *label* suffixes the build preserves (e.g. mui-1qwgbm-navItem -> [class*="-navItem"]) because the hash portion changes between the light and dark themes. Light/dark is driven by , which the hook in index.html mirrors from the app's own persisted themeMode value. ========================================================================== */ /* --------------------------------------------------------------- tokens -- */ :root, html[data-theme="dark"] { --bg-page: #1b1b1e; --bg-sunken: #151517; --surface-1: #212125; --surface-2: #27272b; --surface-3: #2e2e33; --surface-hover: #34343a; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.13); --text: #f4f4f6; --text-muted: #9a9aa3; --text-dim: #6e6e78; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.38); --call-glyph: #ffffff; --shadow-3: 0 22px 56px rgba(0, 0, 0, 0.5); } html[data-theme="light"] { --bg-page: #f1f1f4; --bg-sunken: #e7e7ec; --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: #f4f4f7; --surface-hover: #ebebf0; --border: rgba(17, 17, 20, 0.09); --border-strong: rgba(17, 17, 20, 0.16); --text: #17171a; --text-muted: #63636e; --text-dim: #8b8b96; --shadow-1: 0 1px 2px rgba(17, 17, 20, 0.06); --shadow-2: 0 10px 28px rgba(17, 17, 20, 0.1); --call-glyph: #000000; --shadow-3: 0 22px 56px rgba(17, 17, 20, 0.14); } :root { /* pastel accents - shared across both themes */ --acc-sky: #a9d7f2; --acc-mint: #a9f0c8; --acc-cyan: #a7eee9; --acc-yellow: #f6ee8e; --acc-lime: #c9f26e; --acc-pink: #f2b8da; --on-accent: #17171a; /* brand, taken from the Moveify logo artwork */ --brand-navy: #334a72; --brand-gray: #626061; /* Primary is a green from the same family as the mint/lime accents. The brand navy is too dark to read as an action colour on the charcoal shell, so it stays a brand/logo colour rather than a UI accent. */ --primary: #2fcf7a; --primary-hover: #26b76c; --on-primary: #0b2417; --success: #5fd39a; --warning: #f0c85a; --danger: #f2685f; --r-xl: 24px; --r-lg: 18px; --r-md: 14px; --r-sm: 10px; --r-pill: 999px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --nav-h: 65px; } /* ----------------------------------------------------------------- base -- */ html, body { height: 100%; background: var(--bg-page) !important; } body { margin: 0; padding: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .root { display: flex; flex-direction: column; height: 100%; } ::selection { background: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--text); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: padding-box; } * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px var(--surface-2) inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text); } /* --------------------------------------------------------------- layout -- */ [class*="-page"] { background: var(--bg-page) !important; gap: 12px !important; padding: 12px !important; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; } /* The app sizes these at width:100%, which overhangs once the shell has padding - let them flex instead so nothing spills past the viewport. */ [class*="-page"] > *, [class*="-mainContent"] > * { min-width: 0; max-width: 100%; } [class*="-mainContent"] { background: transparent !important; gap: 12px !important; min-width: 0 !important; min-height: 0 !important; width: auto !important; flex: 1 1 0% !important; } /* flex children need min-height:0 before they are allowed to shrink and hand scrolling to their own content */ [class*="-page"] > [class*="-root"] > * { min-height: 0; } [class*="-rightPanel"] { min-height: 0 !important; } /* The flex row that actually holds the sidebar + content is the page ROOT; the outer -page element is display:block, so its gap never applied and the sidebar sat flush against the content column. */ [class*="-page"] > [class*="-root"]:has(> [class*="-sidebar"]) { gap: 14px !important; } [class*="-mapContainer"] { border-radius: var(--r-xl) !important; overflow: hidden !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-2) !important; } /* -------------------------------------------------------------- sidebar -- */ [class*="-sidebar"]:not([class*="-sidebarLogo"]):not([class*="-sidebarContent"]) { background: var(--surface-1) !important; border: 1px solid var(--border) !important; border-radius: var(--r-xl) !important; box-shadow: var(--shadow-1) !important; padding: 14px 12px !important; /* On short viewports the nav + user card are taller than the column, and the page root clips the overflow. Let the sidebar scroll on its own so Users / Settings / the account card stay reachable. */ overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; } [class*="-sidebarLogo"] { padding: 10px 8px 18px !important; border-bottom: 1px solid var(--border) !important; margin-bottom: 14px !important; /* stays put while the nav below it scrolls; the box-shadow extends the background across the 14px margin so nothing scrolls through the gap */ position: sticky; top: 0; z-index: 2; background: var(--surface-1); box-shadow: 0 14px 0 var(--surface-1); } /* The Moveify wordmark is much wider than the slot the old mark used, so it is sized by height and allowed to keep its aspect ratio. */ [class*="-sidebarLogo"] img, [class*="-imageCompact"] { object-fit: contain !important; width: auto !important; height: 30px !important; max-width: 100% !important; } [class*="-navSection"]:not([class*="-navSectionTitle"]) { margin-bottom: 18px !important; } [class*="-navSectionTitle"] { color: var(--text-dim) !important; font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 0 10px 8px !important; } [class*="-navItem"] { border-radius: var(--r-md) !important; padding: 10px 12px !important; margin-bottom: 2px !important; color: var(--text-muted) !important; background: transparent !important; border: 1px solid transparent !important; transition: background 0.18s var(--ease), color 0.18s var(--ease) !important; } [class*="-navItem"]:hover { background: var(--surface-3) !important; color: var(--text) !important; } [class*="-navItem"].Mui-selected, [class*="-navItem"][aria-selected="true"], [class*="-navItem"].active { background: var(--surface-3) !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: var(--shadow-1) !important; } [class*="-navItem"].Mui-selected [class*="-navIcon"], [class*="-navItem"].active [class*="-navIcon"] { color: var(--acc-lime) !important; } [class*="-navIcon"] { color: inherit !important; min-width: 0 !important; margin-right: 12px !important; } [class*="-navText"] .MuiTypography-root, [class*="-navText"] { font-size: 0.9rem !important; font-weight: 500 !important; letter-spacing: -0.005em !important; } /* user card pinned to the sidebar footer */ [class*="-userSection"] { margin-top: auto !important; padding-top: 12px !important; } [class*="-userCard"] { background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; padding: 10px !important; box-shadow: var(--shadow-1) !important; } [class*="-userAvatar"] { border-radius: var(--r-md) !important; background: var(--primary) !important; color: var(--on-primary) !important; font-weight: 600 !important; } [class*="-userName"] { color: var(--text) !important; font-weight: 600 !important; font-size: 0.86rem !important; } [class*="-userEmail"] { color: var(--text-dim) !important; font-size: 0.74rem !important; } /* -------------------------------------------------------------- top bar -- */ [class*="-topBar"]:not([class*="-topBarActions"]) { background: transparent !important; border: 0 !important; padding: 0 !important; gap: 12px !important; align-items: stretch !important; min-height: 0 !important; } [class*="-menuButton"], [class*="-closeButton"], [class*="-topBarActions"] .MuiIconButton-root { background: var(--surface-1) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; color: var(--text-muted) !important; width: 40px; height: 40px; transition: background 0.18s var(--ease), color 0.18s var(--ease) !important; } [class*="-menuButton"]:hover, [class*="-closeButton"]:hover, [class*="-topBarActions"] .MuiIconButton-root:hover { background: var(--surface-3) !important; color: var(--text) !important; } /* ------------------------------------------------------------ KPI tiles -- */ /* A tile that sits on a pastel background sets --tile-fg / --tile-chip, and every child reads those with a neutral fallback. The same kpi* components are reused by the map header strip AND the dashboard, so without this the dashboard's dark cards inherit dark-on-dark text. */ /* The global search bar is hidden, so the KPI strip takes over that row and the whole header collapses to a single line. Searching still lives in the Devices panel on the right. */ [class*="-searchBox"] { display: none !important; } [class*="-topBar"]:not([class*="-topBarActions"]) { flex-wrap: wrap !important; } [class*="-topBar"]:not([class*="-topBarActions"]) > * { order: 1; } [class*="-kpiCards"] { order: 1 !important; flex: 1 1 auto !important; gap: 10px !important; display: flex !important; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } [class*="-kpiCards"]::-webkit-scrollbar { display: none; } [class*="-kpiCard"]:not([class*="-kpiCards"]) { background: var(--tile-bg, var(--surface-1)) !important; border-radius: var(--r-lg) !important; border: 0 !important; padding: 13px 15px !important; box-shadow: var(--shadow-1) !important; position: relative; overflow: hidden; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease) !important; } [class*="-kpiCards"] > [class*="-kpiCard"], [class*="-kpiCards"] > * > [class*="-kpiCard"] { min-width: 150px !important; flex: 1 1 0 !important; align-items: center !important; gap: 10px !important; scroll-snap-align: start; } [class*="-kpiCard"]:not([class*="-kpiCards"]):hover { transform: translateY(-2px); box-shadow: var(--shadow-2) !important; } /* a soft top sheen so the tiles are not flat blocks of colour */ [class*="-kpiCard"]:not([class*="-kpiCards"])::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), transparent 55%); pointer-events: none; } /* pastel assignment - map header strip */ [class*="-kpiCards"] > *:nth-child(1) [class*="-kpiCard"], [class*="-kpiCards"] > [class*="-kpiCard"]:nth-child(1) { --tile-bg: var(--acc-sky); } [class*="-kpiCards"] > *:nth-child(2) [class*="-kpiCard"], [class*="-kpiCards"] > [class*="-kpiCard"]:nth-child(2) { --tile-bg: var(--acc-mint); } [class*="-kpiCards"] > *:nth-child(3) [class*="-kpiCard"], [class*="-kpiCards"] > [class*="-kpiCard"]:nth-child(3) { --tile-bg: var(--acc-cyan); } [class*="-kpiCards"] > *:nth-child(4) [class*="-kpiCard"], [class*="-kpiCards"] > [class*="-kpiCard"]:nth-child(4) { --tile-bg: var(--acc-yellow); } /* pastel assignment - dashboard KPI row (the first four grid items) */ .MuiGrid-container > .MuiGrid-root:nth-child(1) > [class*="-kpiCard"] { --tile-bg: var(--acc-sky); } .MuiGrid-container > .MuiGrid-root:nth-child(2) > [class*="-kpiCard"] { --tile-bg: var(--acc-mint); } .MuiGrid-container > .MuiGrid-root:nth-child(3) > [class*="-kpiCard"] { --tile-bg: var(--acc-cyan); } .MuiGrid-container > .MuiGrid-root:nth-child(4) > [class*="-kpiCard"] { --tile-bg: var(--acc-yellow); } /* anything on a pastel tile switches to the dark-on-pastel scale */ [class*="-kpiCards"] [class*="-kpiCard"], .MuiGrid-container > .MuiGrid-root:nth-child(-n + 4) > [class*="-kpiCard"] { --tile-fg: var(--on-accent); --tile-chip: var(--on-accent); --tile-chip-fg: #ffffff; } [class*="-kpiValue"] { color: var(--tile-fg, var(--text)) !important; font-size: 1.55rem !important; font-weight: 700 !important; letter-spacing: -0.03em !important; line-height: 1.05 !important; } [class*="-kpiLabel"] { color: color-mix(in srgb, var(--tile-fg, var(--text)) 68%, transparent) !important; font-size: 0.74rem !important; font-weight: 500 !important; line-height: 1.25 !important; } [class*="-kpiPercentage"], [class*="-kpiTrend"] { color: color-mix(in srgb, var(--tile-fg, var(--text)) 58%, transparent) !important; font-size: 0.68rem !important; font-weight: 600 !important; line-height: 1.25 !important; } [class*="-kpiTrend"] svg { color: inherit !important; font-size: 0.9rem !important; } /* the percentage is a flex sibling of the value/label column on the map strip, so it needs pinning to the top-right or it collides with the label */ [class*="-kpiCards"] [class*="-kpiPercentage"] { margin-left: auto !important; align-self: flex-start !important; text-align: right !important; max-width: 66px !important; flex: 0 0 auto !important; } [class*="-kpiIcon"] { background: var(--tile-chip, var(--surface-3)) !important; color: var(--tile-chip-fg, var(--text)) !important; border-radius: var(--r-sm) !important; width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; } [class*="-kpiIcon"] .MuiSvgIcon-root, [class*="-kpiIcon"] svg { color: inherit !important; font-size: 1.1rem !important; } [class*="-kpiHeader"] { position: relative; z-index: 1; } [class*="-kpiHeader"] .MuiIconButton-root { color: color-mix(in srgb, var(--tile-fg, var(--text)) 55%, transparent) !important; } [class*="-kpiHeader"] .MuiIconButton-root:hover { background: rgba(0, 0, 0, 0.08) !important; } [class*="-kpiContent"] { gap: 2px !important; min-width: 0; flex: 1 1 auto !important; } /* --------------------------------------------------------------- search -- */ [class*="-searchBox"], [class*="-searchDevices"] { background: var(--surface-1) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; transition: border-color 0.18s var(--ease), background 0.18s var(--ease) !important; } [class*="-searchBox"]:focus-within, [class*="-searchDevices"]:focus-within { border-color: var(--primary) !important; background: var(--surface-2) !important; } [class*="-searchInput"] input, [class*="-searchInput"] { color: var(--text) !important; font-size: 0.86rem !important; } [class*="-searchInput"] input::placeholder { color: var(--text-dim) !important; opacity: 1 !important; } [class*="-searchShortcut"] { background: var(--surface-3) !important; border: 1px solid var(--border) !important; border-radius: 7px !important; color: var(--text-dim) !important; font-size: 0.68rem !important; font-weight: 600 !important; padding: 2px 7px !important; } /* ---------------------------------------------------------- right panel -- */ [class*="-rightPanel"] { background: var(--surface-1) !important; border: 1px solid var(--border) !important; border-radius: var(--r-xl) !important; box-shadow: var(--shadow-2) !important; overflow: hidden !important; } [class*="-rightPanelHeader"] { background: transparent !important; border-bottom: 1px solid var(--border) !important; padding: 8px 12px !important; } /* segmented tab control */ [class*="-panelTabs"] { background: var(--surface-3) !important; border-radius: var(--r-pill) !important; padding: 3px !important; min-height: 0 !important; } [class*="-panelTabs"] .MuiTabs-indicator { display: none !important; } [class*="-panelTab"]:not([class*="-panelTabs"]) { border-radius: var(--r-pill) !important; min-height: 32px !important; padding: 0 16px !important; text-transform: none !important; font-size: 0.82rem !important; font-weight: 600 !important; letter-spacing: -0.005em !important; color: var(--text-muted) !important; transition: background 0.18s var(--ease), color 0.18s var(--ease) !important; } [class*="-panelTab"]:not([class*="-panelTabs"]).Mui-selected { background: var(--surface-1) !important; color: var(--text) !important; box-shadow: var(--shadow-1) !important; } [class*="-deviceListHeader"] { padding: 10px 14px !important; border-bottom: 1px solid var(--border) !important; } [class*="-deviceCount"] { color: var(--text-dim) !important; font-size: 0.76rem !important; font-weight: 500 !important; } [class*="-deviceListContainer"] { padding: 10px !important; gap: 10px !important; background: transparent !important; } [class*="-sortSelect"] { color: var(--text-muted) !important; font-size: 0.76rem !important; } [class*="-sortSelect"]::before, [class*="-sortSelect"]::after { display: none !important; } /* ---------------------------------------------------------- device card -- */ [class*="-card"]:not([class*="-userCard"]):not([class*="-kpiCard"]) { background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: none !important; padding: 12px !important; transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease) !important; } [class*="-card"]:not([class*="-userCard"]):not([class*="-kpiCard"]):hover { border-color: var(--border-strong) !important; transform: translateY(-1px); box-shadow: var(--shadow-2) !important; } [class*="-topRow"] { gap: 10px !important; align-items: center !important; } [class*="-iconWrapper"] { background: var(--surface-3) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; width: 38px !important; height: 38px !important; color: var(--text-muted) !important; } [class*="-name"]:not([class*="-userName"]) { color: var(--text) !important; font-weight: 600 !important; font-size: 0.9rem !important; letter-spacing: -0.01em !important; } [class*="-imei"] { color: var(--text-dim) !important; font-size: 0.72rem !important; letter-spacing: 0 !important; } [class*="-statusBadge"] { border-radius: var(--r-pill) !important; padding: 3px 10px !important; font-size: 0.7rem !important; font-weight: 600 !important; border: 0 !important; background: var(--surface-3) !important; color: var(--text-muted) !important; } [class*="-statusDot"] { width: 7px !important; height: 7px !important; border-radius: 50% !important; } /* the online dot breathes slowly so a live device reads as live, without turning into a blinking distraction */ @keyframes moveify-dot-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); opacity: 0.85; } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--success) 4%, transparent); opacity: 1; } } /* No !important on box-shadow here: an important author declaration outranks the animated value, which would freeze the halo at its start frame. */ [class*="-statusDot-online"] { background: var(--success) !important; animation: moveify-dot-pulse 3.4s ease-in-out infinite !important; will-change: box-shadow, opacity; } [class*="-statusDot-offline"] { background: var(--text-dim) !important; box-shadow: none !important; } [class*="-metaRow"], [class*="-infoRow"] { gap: 10px !important; flex-wrap: wrap !important; } [class*="-metaItem"], [class*="-infoItem"] { color: var(--text-muted) !important; font-size: 0.74rem !important; gap: 5px !important; } [class*="-metaIconWrap"] { color: var(--text-dim) !important; } [class*="-metaValueMuted"] { color: var(--text-dim) !important; } /* card action bar */ [class*="-actionBar"]:not([class*="-actionBarBtn"]) { gap: 6px !important; margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid var(--border) !important; justify-content: center !important; } [class*="-actionBarBtn"] { background: var(--surface-3) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; color: var(--text-muted) !important; width: 34px !important; height: 34px !important; transition: background 0.16s var(--ease), color 0.16s var(--ease) !important; } [class*="-actionBarBtn"]:hover { background: var(--surface-hover) !important; color: var(--text) !important; } /* the extra .MuiIconButton-root qualifier outranks the generic icon-button colour defined further down the sheet */ /* the call button picks up the same mint as the "Online" KPI tile */ .MuiIconButton-root[class*="-actionBarBtnCall"], [class*="-actionBarBtnCall"] { background: var(--acc-mint) !important; border-color: transparent !important; color: var(--on-accent) !important; } .MuiIconButton-root[class*="-actionBarBtnCall"]:hover, [class*="-actionBarBtnCall"]:hover { background: color-mix(in srgb, var(--acc-mint) 88%, #000) !important; } /* The phone glyph is painted straight onto the SVG's fill rather than relying on `color` inheritance, which the compiled icon styles were winning. White on the dark theme, black on the light one - see --call-glyph. */ .MuiIconButton-root[class*="-actionBarBtnCall"] svg, .MuiIconButton-root[class*="-actionBarBtnCall"] svg path, [class*="-actionBarBtnCall"] svg, [class*="-actionBarBtnCall"] svg path { color: var(--call-glyph) !important; fill: var(--call-glyph) !important; } [class*="-actionButton"] { border-radius: var(--r-md) !important; text-transform: none !important; font-weight: 600 !important; } /* The connection pill breathes slowly so "Connected" reads as live without pulling attention. Geometry only, so it stays correct in every state. */ @keyframes moveify-status-pulse { 0%, 100% { transform: scale(1); opacity: 0.72; } 50% { transform: scale(1.45); opacity: 1; } } /* De balk bovenaan staat op "align-items: stretch", zodat de tegels even hoog worden. Dat trok deze pil ook uit tot de volle hoogte van de rij - vandaar dat hij zo groot oogde. Hij wordt hier weer op zijn eigen hoogte gezet en krijgt krappere maten. */ [class*="-statusIndicator"] { align-self: center !important; border-radius: var(--r-pill) !important; padding: 3px 10px !important; gap: 5px !important; } [class*="-statusIndicator"] [class*="-statusDot"] { width: 6px !important; height: 6px !important; } [class*="-statusIndicator"] [class*="-statusText"] { font-size: 0.7rem !important; } /* De filterknop links van het belletje is eruit: hij opende een venstertje met kaartfilters waar in de praktijk niemand aan kwam. De knop blijft wel in de bladzijde staan - alleen onzichtbaar - zodat de volgorde van de andere knoppen niet verschuift. */ [class*="-topBarActions"] > *:first-child { display: none !important; } [class*="-statusIndicator"] [class*="-statusDot"] { animation: moveify-status-pulse 3.4s ease-in-out infinite; will-change: transform, opacity; } [class*="-statusText"] { color: var(--text-muted) !important; font-size: 0.76rem !important; } [class*="-imageCompact"] { border-radius: var(--r-md) !important; } /* ------------------------------------------------------- MUI primitives -- */ .MuiPaper-root { background-color: var(--surface-1) !important; color: var(--text) !important; background-image: none !important; border-radius: var(--r-lg) !important; border: 1px solid var(--border); } .MuiDialog-paper { border-radius: var(--r-xl) !important; box-shadow: var(--shadow-3) !important; } .MuiMenu-paper, .MuiPopover-paper, .MuiAutocomplete-paper { box-shadow: var(--shadow-2) !important; } .MuiBackdrop-root { background-color: rgba(0, 0, 0, 0.55) !important; backdrop-filter: blur(2px); } .MuiButton-root { border-radius: var(--r-md) !important; text-transform: none !important; font-weight: 600 !important; letter-spacing: -0.005em !important; box-shadow: none !important; padding: 8px 18px !important; } .MuiButton-contained, .MuiButton-containedPrimary { background: var(--primary) !important; color: var(--on-primary) !important; } .MuiButton-contained:hover, .MuiButton-containedPrimary:hover { background: var(--primary-hover) !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 32%, transparent) !important; } .MuiButton-outlined { border-color: var(--border-strong) !important; color: var(--text) !important; } .MuiButton-outlined:hover { background: var(--surface-3) !important; border-color: var(--text-dim) !important; } .MuiButton-text { color: var(--text-muted) !important; } .MuiButton-text:hover { background: var(--surface-3) !important; color: var(--text) !important; } .MuiIconButton-root { border-radius: var(--r-md) !important; color: var(--text-muted) !important; } .MuiIconButton-root:hover { background: var(--surface-3) !important; color: var(--text) !important; } .MuiOutlinedInput-root { border-radius: var(--r-md) !important; background: var(--surface-2) !important; } .MuiOutlinedInput-notchedOutline { border-color: var(--border) !important; } .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--border-strong) !important; } .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--primary) !important; border-width: 1px !important; } .MuiFilledInput-root { background: var(--surface-2) !important; border-radius: var(--r-md) !important; } .MuiInputLabel-root { color: var(--text-muted) !important; } .MuiInputLabel-root.Mui-focused { color: var(--primary) !important; } .MuiInputBase-input { color: var(--text) !important; } .MuiFormHelperText-root { color: var(--text-dim) !important; } .MuiChip-root { border-radius: var(--r-pill) !important; border-color: var(--border) !important; font-weight: 500 !important; } /* status chips keep the colour the app assigns per state (online / offline); everything else gets the neutral surface treatment */ .MuiChip-root:not([class*="-statusChip"]) { background: var(--surface-3) !important; color: var(--text) !important; } .MuiChip-colorPrimary { background: var(--primary) !important; color: var(--on-primary) !important; } .MuiChip-colorSuccess { background: var(--acc-mint) !important; color: var(--on-accent) !important; } .MuiChip-colorWarning { background: var(--acc-yellow) !important; color: var(--on-accent) !important; } .MuiChip-colorError { background: var(--danger) !important; color: #fff !important; } .MuiBadge-badge { font-weight: 600 !important; border-radius: var(--r-pill) !important; } .MuiBadge-colorError { background: var(--danger) !important; color: #fff !important; } .MuiSwitch-track { background-color: var(--border-strong) !important; opacity: 1 !important; } .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track { background-color: var(--primary) !important; opacity: 1 !important; } .MuiSwitch-thumb { box-shadow: var(--shadow-1) !important; } .MuiTooltip-tooltip { background: var(--surface-3) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important; font-size: 0.74rem !important; box-shadow: var(--shadow-2) !important; } .MuiTooltip-arrow { color: var(--surface-3) !important; } .MuiDivider-root { border-color: var(--border) !important; } .MuiListItemButton-root { border-radius: var(--r-md) !important; } .MuiListItemButton-root:hover { background: var(--surface-3) !important; } .MuiListItemButton-root.Mui-selected { background: var(--surface-3) !important; } .MuiMenuItem-root { border-radius: var(--r-sm) !important; margin: 2px 6px !important; } .MuiMenuItem-root:hover { background: var(--surface-3) !important; } .MuiTableCell-root { border-color: var(--border) !important; color: var(--text) !important; } .MuiTableCell-head { color: var(--text-muted) !important; font-weight: 600 !important; background: var(--surface-1) !important; } .MuiTableRow-root:hover .MuiTableCell-root { background: var(--surface-3) !important; } .MuiTabs-indicator { background-color: var(--primary) !important; background-image: none !important; height: 2px !important; border-radius: var(--r-pill) !important; } .MuiTab-root { text-transform: none !important; font-weight: 600 !important; color: var(--text-muted) !important; } .MuiTab-root.Mui-selected { color: var(--text) !important; } .MuiLinearProgress-root { border-radius: var(--r-pill) !important; background: var(--surface-3) !important; height: 5px !important; } .MuiLinearProgress-bar { border-radius: var(--r-pill) !important; background: var(--primary) !important; } .MuiCircularProgress-root { color: var(--primary) !important; } .MuiAlert-root { border-radius: var(--r-md) !important; border: 1px solid var(--border) !important; } /* ------------------------------------------------------- map + controls -- */ /* background-COLOR only: these buttons carry their glyph as a background-image, so the `background` shorthand would erase every map control icon. */ .maplibregl-ctrl-group, .maplibregl-ctrl-group button { background-color: var(--surface-1) !important; border-color: var(--border) !important; color: var(--text) !important; } .maplibregl-ctrl-group { border-radius: var(--r-md) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-2) !important; overflow: hidden; } .maplibregl-ctrl-group button:hover { background-color: var(--surface-3) !important; } .maplibregl-ctrl-group button + button { border-top-color: var(--border) !important; } /* Only maplibre's built-in icon spans get inverted for the dark shell. The app's own controls carry .maplibregl-ctrl-icon on the button itself, so filtering that class directly would invert the whole button. */ .maplibregl-ctrl-zoom-in span.maplibregl-ctrl-icon, .maplibregl-ctrl-zoom-out span.maplibregl-ctrl-icon, .maplibregl-ctrl-compass span.maplibregl-ctrl-icon, .maplibregl-ctrl-fullscreen span.maplibregl-ctrl-icon, .maplibregl-ctrl-geolocate span.maplibregl-ctrl-icon { filter: invert(1) brightness(0.92); } /* The app's own map controls carry the glyph as a background-image on the button itself. Clearing the button background (the ctrl-group already draws the dark chip) means the filter only touches the glyph. */ .maplibregl-ctrl-group button.maplibregl-ctrl-icon { background-color: transparent !important; filter: invert(1) brightness(0.92); } .maplibregl-ctrl-geocoder svg, .maplibregl-ctrl-geocoder--icon { fill: #e8e8ec !important; } .maplibregl-ctrl-geocoder--button { background-color: transparent !important; } /* geocoder + scale sit outside a ctrl-group and ship their own light styling */ .maplibregl-ctrl-geocoder { background-color: var(--surface-1) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-2) !important; color: var(--text) !important; } .maplibregl-ctrl-geocoder input, .maplibregl-ctrl-geocoder--input { background: transparent !important; color: var(--text) !important; } .maplibregl-ctrl-geocoder input::placeholder, .maplibregl-ctrl-geocoder--input::placeholder { color: var(--text-dim) !important; } .maplibregl-ctrl-geocoder .suggestions, .maplibregl-ctrl-geocoder--suggestion { background-color: var(--surface-2) !important; color: var(--text) !important; } .maplibregl-ctrl-geocoder--icon, .maplibregl-ctrl-geocoder svg { fill: var(--text-muted) !important; } /* basemap picker popup */ .maplibregl-style-list { background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-3) !important; padding: 5px !important; overflow: hidden; } .maplibregl-style-list button { display: block !important; width: 100% !important; text-align: left !important; background-color: transparent !important; border: 0 !important; border-radius: var(--r-sm) !important; padding: 8px 14px !important; font-size: 0.82rem !important; font-weight: 500 !important; color: var(--text) !important; white-space: nowrap; } .maplibregl-style-list button:hover { background-color: var(--surface-3) !important; } .maplibregl-style-list button.active { background-color: color-mix(in srgb, var(--primary) 24%, transparent) !important; font-weight: 600 !important; } .maplibregl-ctrl-scale { background-color: color-mix(in srgb, var(--surface-1) 82%, transparent) !important; border-color: var(--border) !important; color: var(--text-muted) !important; border-radius: var(--r-sm) !important; backdrop-filter: blur(10px); } .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--surface-1) 82%, transparent) !important; backdrop-filter: blur(10px); border-radius: var(--r-sm) !important; padding: 2px 8px !important; color: var(--text-dim) !important; } .maplibregl-ctrl-attrib a { color: var(--text-muted) !important; } .maplibregl-popup-content { background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; color: var(--text) !important; box-shadow: var(--shadow-3) !important; padding: 12px 14px !important; } .maplibregl-popup-close-button { color: var(--text-muted) !important; font-size: 1.1rem !important; } .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--surface-2) !important; } .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--surface-2) !important; } .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface-2) !important; } .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface-2) !important; } html[data-theme="light"] .maplibregl-ctrl-zoom-in span.maplibregl-ctrl-icon, html[data-theme="light"] .maplibregl-ctrl-zoom-out span.maplibregl-ctrl-icon, html[data-theme="light"] .maplibregl-ctrl-compass span.maplibregl-ctrl-icon, html[data-theme="light"] .maplibregl-ctrl-fullscreen span.maplibregl-ctrl-icon, html[data-theme="light"] .maplibregl-ctrl-geolocate span.maplibregl-ctrl-icon { filter: none; } html[data-theme="light"] .maplibregl-ctrl-group button.maplibregl-ctrl-icon { filter: none; } html[data-theme="light"] .maplibregl-ctrl-geocoder svg, html[data-theme="light"] .maplibregl-ctrl-geocoder--icon { fill: var(--text-muted) !important; } /* --------------------------------------------------------------- charts -- */ .recharts-default-tooltip { background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-2) !important; } .recharts-tooltip-label { color: var(--text) !important; font-weight: 600; } .recharts-tooltip-item { color: var(--text-muted) !important; } .recharts-cartesian-grid-horizontal line, .recharts-cartesian-grid-vertical line { stroke: var(--border); } .recharts-text { fill: var(--text-dim); } /* ------------------------------------------------- mobile nav + the FAB -- */ .MuiBottomNavigation-root { background: transparent !important; height: var(--nav-h) !important; } .MuiBox-root:has(> .MuiBottomNavigation-root) { background: var(--surface-1) !important; border-top: 1px solid var(--border) !important; border-radius: var(--r-xl) var(--r-xl) 0 0 !important; box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.28) !important; backdrop-filter: blur(20px); } .MuiBottomNavigationAction-root { color: var(--text-dim) !important; border-radius: var(--r-md) !important; } .MuiBottomNavigationAction-root.Mui-selected { color: var(--acc-lime) !important; } .MuiBottomNavigationAction-label { font-size: 0.7rem !important; font-weight: 600 !important; } .MuiBottomNavigationAction-label.Mui-selected { font-size: 0.7rem !important; } /* The device button: a proper circle, lifted clear of the bottom navigation. The layered shadow gives it a soft halo ring, a coloured glow and a top highlight, so it reads as a raised primary action over the map. */ html[data-moveify-pad="kaart"] .MuiFab-root.MuiFab-circular { bottom: calc(var(--nav-h) + 56px + env(safe-area-inset-bottom, 0px)) !important; width: 58px !important; height: 58px !important; border-radius: 50% !important; border: 0 !important; /* all-blue gradient, light to deep - kept dark enough behind the glyph that the white icon stays above the 3:1 contrast minimum */ background: linear-gradient(140deg, #57aaee 0%, #3a8fdd 50%, #2470c4 100%) !important; color: #ffffff !important; /* crisp white ring + plain elevation, no glow */ box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 4px 12px rgba(0, 0, 0, 0.3) !important; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease) !important; } /* The bundled icon is a generic monitor+phone glyph. It is hidden and a clearer "list of systems" mark is painted with a mask instead, so the colour is ours to set (white) rather than baked into the SVG. */ html[data-moveify-pad="kaart"] .MuiFab-root.MuiFab-circular .MuiSvgIcon-root, html[data-moveify-pad="kaart"] .MuiFab-root.MuiFab-circular svg { display: none !important; } html[data-moveify-pad="kaart"] .MuiFab-root.MuiFab-circular::after { content: ""; width: 27px; height: 27px; background-color: #ffffff; -webkit-mask: var(--fab-icon) center / contain no-repeat; mask: var(--fab-icon) center / contain no-repeat; } :root { --fab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='4.6' cy='6.6' r='1.8'/%3E%3Ccircle cx='4.6' cy='12' r='1.8'/%3E%3Ccircle cx='4.6' cy='17.4' r='1.8'/%3E%3Crect x='8.8' y='5.4' width='11.4' height='2.4' rx='1.2'/%3E%3Crect x='8.8' y='10.8' width='11.4' height='2.4' rx='1.2'/%3E%3Crect x='8.8' y='16.2' width='11.4' height='2.4' rx='1.2'/%3E%3C/svg%3E"); } html[data-moveify-pad="kaart"] .MuiFab-root.MuiFab-circular:hover { transform: translateY(-2px) !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 7px 18px rgba(0, 0, 0, 0.36) !important; } html[data-moveify-pad="kaart"] .MuiFab-root.MuiFab-circular:active { transform: scale(0.94) !important; } /* ------------------------------------------------------------- dashboard -- */ /* the dashboard tiles are far wider than the map strip, so they carry a larger type scale */ .MuiGrid-container > .MuiGrid-root:nth-child(-n + 4) > [class*="-kpiCard"] { padding: 18px 20px !important; min-height: 132px !important; justify-content: space-between !important; } .MuiGrid-container > .MuiGrid-root:nth-child(-n + 4) > [class*="-kpiCard"] [class*="-kpiValue"] { font-size: 2.15rem !important; margin-top: 6px !important; } .MuiGrid-container > .MuiGrid-root:nth-child(-n + 4) > [class*="-kpiCard"] [class*="-kpiLabel"] { font-size: 0.8rem !important; } .MuiGrid-container > .MuiGrid-root:nth-child(-n + 4) > [class*="-kpiCard"] [class*="-kpiTrend"] { font-size: 0.74rem !important; margin-top: 10px !important; } .MuiGrid-container > .MuiGrid-root:nth-child(-n + 4) > [class*="-kpiCard"] [class*="-kpiIcon"] { width: 38px !important; height: 38px !important; border-radius: var(--r-md) !important; } [class*="-header"]:not([class*="-rightPanelHeader"]):not([class*="-deviceListHeader"]):not([class*="-kpiHeader"]):not(.draggable-header) { background: transparent !important; padding: 4px 0 18px !important; } [class*="-refreshButton"] { background: var(--surface-1) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; color: var(--text-muted) !important; } [class*="-refreshButton"]:hover { background: var(--surface-3) !important; color: var(--text) !important; } /* content cards: charts, lists, fleet status */ [class*="-chartCard"] { background: var(--surface-1) !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 42%) !important; border: 1px solid var(--border) !important; border-radius: var(--r-xl) !important; box-shadow: var(--shadow-2) !important; padding: 18px !important; } [class*="-chartTitle"] { color: var(--text) !important; font-weight: 600 !important; font-size: 1rem !important; letter-spacing: -0.01em !important; } [class*="-chipToday"] { background: var(--surface-3) !important; border: 1px solid var(--border) !important; color: var(--text-muted) !important; border-radius: var(--r-pill) !important; font-weight: 600 !important; font-size: 0.72rem !important; } [class*="-viewAll"] { color: var(--primary) !important; font-weight: 600 !important; font-size: 0.78rem !important; text-transform: none !important; } [class*="-viewAll"]:hover { background: color-mix(in srgb, var(--primary) 12%, transparent) !important; } [class*="-deviceList"] { gap: 8px !important; } [class*="-deviceItem"] { background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; padding: 10px 12px !important; transition: border-color 0.18s var(--ease), transform 0.18s var(--ease) !important; } [class*="-deviceItem"]:hover { border-color: var(--border-strong) !important; transform: translateX(2px); } [class*="-deviceIcon"] { background: var(--surface-3) !important; border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important; color: var(--text-muted) !important; } [class*="-deviceName"] { color: var(--text) !important; font-weight: 600 !important; font-size: 0.86rem !important; } /* keeps the app's own status colour (online / offline / idle) and just tints the pill from it, rather than forcing everything green */ [class*="-statusChip"] { border-radius: var(--r-pill) !important; font-size: 0.68rem !important; font-weight: 600 !important; border: 0 !important; background: color-mix(in srgb, currentColor 18%, transparent) !important; } /* ------------------------------------------------- settings / admin pages -- */ /* These pages have their own root that still paints the old navy gradient. The :not([class*="Mui"]) guard keeps this off MuiBox-root and friends. */ [class*="-root"]:not([class*="Mui"]), [class*="-page"] > [class*="-root"] { background-image: none !important; background-color: var(--bg-page) !important; } [class*="-desktopDrawer"] { background-color: var(--surface-1) !important; border-right: 1px solid var(--border) !important; } [class*="-toolbar"] { background: transparent !important; } .MuiContainer-root[class*="-container"] { background-color: transparent !important; } [class*="-pageTitle"] { color: var(--text) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } [class*="-backButton"], [class*="-toggleButton"] { background: var(--surface-1) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; color: var(--text-muted) !important; } [class*="-menuItem"]:not([class*="-menuItemIcon"]):not([class*="-menuItemText"]) { border-radius: var(--r-md) !important; margin: 2px 8px !important; color: var(--text-muted) !important; } [class*="-menuItem"]:not([class*="-menuItemIcon"]):not([class*="-menuItemText"]):hover { background: var(--surface-3) !important; color: var(--text) !important; } [class*="-menuItem"].Mui-selected { background: var(--surface-3) !important; color: var(--text) !important; border-left-color: var(--acc-lime) !important; } [class*="-menuItem"].Mui-selected [class*="-menuItemIcon"] { color: var(--acc-lime) !important; } [class*="-menuItemIcon"] { color: inherit !important; min-width: 38px !important; } [class*="-menuItemText"] .MuiTypography-root { font-size: 0.87rem !important; font-weight: 500 !important; } [class*="-divider"] { border-color: var(--border) !important; } [class*="-verticalActions"], [class*="-buttons"] { gap: 8px !important; } /* accordion sections used throughout settings */ .MuiAccordion-root { background-color: var(--surface-1) !important; background-image: none !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: none !important; margin-bottom: 10px !important; } .MuiAccordion-root::before { display: none !important; } .MuiAccordion-root.Mui-expanded { margin-bottom: 10px !important; } .MuiAccordionSummary-root { border-radius: var(--r-lg) !important; min-height: 52px !important; } .MuiAccordionSummary-root .MuiTypography-root { font-weight: 600 !important; } .MuiAccordionDetails-root { border-top: 1px solid var(--border) !important; padding-top: 14px !important; } .MuiCheckbox-root, .MuiRadio-root { color: var(--text-dim) !important; } .MuiCheckbox-root.Mui-checked, .MuiRadio-root.Mui-checked { color: var(--primary) !important; } /* ----------------------------------------------------------- login page -- */ /* The two halves of the login screen are full-bleed layout panes, not cards. The generic sidebar/paper rules were giving them a 1px border and a 24px radius, which showed up as pale edges around the whole screen. */ [class*="-sidebar"]:has([class*="-sidebarContent"]):not([class*="-sidebarLogo"]), [class*="-paper"]:has([class*="-formContainer"]) { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Doorzichtig, anders ligt dit vlak over de groene waas van de achtergrond heen en zie je er niets van. */ [class*="-paper"]:has([class*="-formContainer"]) { background: transparent !important; } /* De inlogkaart is van glas: half doorzichtig, met de vervaging van de app erachter. Daardoor zie je de groene waas van de achtergrond er vaag doorheen in plaats van een dichte grijze plaat. De eerste regel is de terugval voor browsers die color-mix() nog niet kennen. */ [class*="-formContainer"] { background: rgba(33, 33, 37, 0.76) !important; background: color-mix(in srgb, var(--surface-1) 76%, transparent) !important; border: 1px solid var(--border-strong) !important; border-radius: var(--r-xl) !important; box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; -webkit-backdrop-filter: blur(30px) saturate(140%) !important; backdrop-filter: blur(30px) saturate(140%) !important; } html[data-theme="light"] [class*="-formContainer"] { background: rgba(255, 255, 255, 0.8) !important; background: color-mix(in srgb, var(--surface-1) 80%, transparent) !important; box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important; } [class*="-title"] { color: var(--text) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } [class*="-subtitle"] { color: var(--text-muted) !important; } /* De invulvelden: iets hoger, zodat ze op een telefoon prettig aan te tikken zijn, en een groene rand zodra je erin staat. */ [class*="-inputField"] .MuiOutlinedInput-root { border-radius: var(--r-md) !important; min-height: 50px !important; background: var(--surface-2) !important; transition: box-shadow 0.18s var(--ease), border-color 0.18s var(--ease) !important; } [class*="-inputField"] .MuiOutlinedInput-notchedOutline { border-color: var(--border) !important; } [class*="-inputField"] .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--border-strong) !important; } [class*="-inputField"] .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--primary) !important; border-width: 1px !important; } [class*="-inputField"] .MuiOutlinedInput-root.Mui-focused { box-shadow: 0 0 0 3px rgba(47, 207, 122, 0.2) !important; } [class*="-inputField"] .MuiInputLabel-root.Mui-focused { color: var(--primary) !important; } /* De inlogknop: een groen verloop met een gloed eronder, zoals in het voorbeeld. Ook hier eerst een gewone kleur als terugval. */ [class*="-submitButton"] { background: var(--primary) !important; background: linear-gradient( 135deg, color-mix(in srgb, var(--acc-lime) 32%, var(--primary)), var(--primary) 52%, color-mix(in srgb, var(--brand-navy) 26%, var(--primary)) ) !important; color: var(--on-primary) !important; border-radius: var(--r-md) !important; text-transform: none !important; font-weight: 700 !important; letter-spacing: 0.01em !important; min-height: 50px !important; padding: 11px 18px !important; box-shadow: 0 10px 26px rgba(47, 207, 122, 0.28) !important; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), filter 0.18s var(--ease) !important; } [class*="-submitButton"]:hover { filter: brightness(1.06) !important; transform: translateY(-1px) !important; box-shadow: 0 14px 32px rgba(47, 207, 122, 0.4) !important; } [class*="-submitButton"]:active { transform: translateY(0) !important; } [class*="-link"] { color: var(--primary) !important; font-weight: 600 !important; text-decoration: none !important; } [class*="-link"]:hover { text-decoration: underline !important; } /* De taalkeuze stond rechtsboven in de inlogkaart. Nederlands is nu de vaste taal van het inlogscherm; wie iets anders wil, kiest dat na het inloggen bij Mijn account. Op het inlogscherm heeft die keuze dus niets meer te zoeken. De knop linksboven opende het qr-scherm van Traccar - ook weg. */ [class*="-languageSelect"] { display: none !important; } [class*="-headerLeft"] [class*="-optionButton"] { display: none !important; } /* Wat er dan overblijft is een kop met alleen "Inloggen" erin, netjes in het midden boven de regel eronder. De lege vakjes links en rechts houden hem daar; ze nemen geen hoogte in. */ [class*="-formContainer"] [class*="-headerBar"] { padding-bottom: 0 !important; margin-bottom: 0 !important; } [class*="-formContainer"] [class*="-headerCenter"] [class*="-title"] { font-size: 1.5rem !important; line-height: 1.25 !important; } [class*="-formContainer"] [class*="-header"]:has(> [class*="-subtitle"]) { padding-top: 6px !important; padding-bottom: 0 !important; margin-bottom: 22px !important; } /* Op een smal scherm zet de app de merknaam in de kop van de kaart en het ronde logo eronder - dan staat "Moveify" er twee keer. Het ronde logo is het mooiste, dus de tekst erboven gaat weg. Op een breed scherm staat daar "Inloggen" en is er geen dubbeling, dus daar blijft hij staan. Herkennen gebeurt aan het ronde logo, niet aan de tekst: zo werkt het in elke taal. */ [class*="-formContainer"]:has([class*="-glowRing"]) [class*="-headerCenter"] { display: none !important; } /* --------------------------------------------------- het logo dat ademt -- Achter het Moveify-woordmerk staat een ronde vlek. Dat was een harde schijf met een verloop; nu is het een zachte groene gloed die langzaam op- en afzwelt, en het woordmerk zelf gloeit in hetzelfde ritme mee. De gloed op dat plaatje was cyaan - een restje uit het sjabloon waar de app op gebouwd is - en is nu groen. */ @keyframes moveify-ademen { 0%, 100% { opacity: 0.62; transform: scale(1.24); } 50% { opacity: 0.95; transform: scale(1.42); } } @keyframes moveify-gloeien { 0%, 100% { filter: drop-shadow(0 0 10px rgba(47, 207, 122, 0.24)); } 50% { filter: drop-shadow(0 0 20px rgba(47, 207, 122, 0.46)); } } /* Let op: op deze twee regels staat met opzet GEEN !important. In de rangorde van css gaat een regel met !important namelijk voor op een animatie - met !important erbij blijft de gloed dus gewoon stilstaan. In plaats daarvan is de selector een stap specifieker gemaakt (twee klassen in plaats van een), zodat hij het ook zonder !important wint van de opmaak van de app zelf. De vlek is verder een zacht verloop geworden in plaats van een schijf met blur() erover. Zo'n blur wordt op telefoons in stappen berekend en dat gaf vlekken en een grauwe rand om het witte woordmerk; een verloop is overal even glad. */ [class*="-logoContainer"] [class*="-glowRing"] { background: radial-gradient( circle at 50% 50%, rgba(47, 207, 122, 0.34) 0%, rgba(47, 207, 122, 0.22) 26%, rgba(47, 207, 122, 0.1) 46%, rgba(47, 207, 122, 0.03) 64%, rgba(47, 207, 122, 0) 76% ); filter: none; opacity: 0.78; transform: scale(1.3); animation: moveify-ademen 6s ease-in-out infinite; } [class*="-logoContainer"] [class*="-image"] { filter: drop-shadow(0 0 14px rgba(47, 207, 122, 0.3)); animation: moveify-gloeien 6s ease-in-out infinite; } /* In de lichte stand gebruikt de app op de telefoon nog steeds het WITTE woordmerk, en dat is op een lichte kaart bijna niet te lezen. De src van een plaatje kun je niet met css veranderen, maar content: url() wisselt het hele plaatje om - hier naar de zwarte versie, dezelfde tekening en hetzelfde formaat (1642x460). De gloed eromheen mag hier ook wat zachter. */ html[data-theme="light"] [class*="-logoContainer"] [class*="-image"] { content: url("/logo-black.png"); filter: drop-shadow(0 0 12px rgba(47, 207, 122, 0.3)); } html[data-theme="light"] [class*="-logoContainer"] [class*="-glowRing"] { background: radial-gradient( circle at 50% 50%, rgba(47, 207, 122, 0.26) 0%, rgba(47, 207, 122, 0.16) 28%, rgba(47, 207, 122, 0.07) 50%, rgba(47, 207, 122, 0) 74% ); } /* Staat de telefoon op "minder beweging", dan blijft alles stil staan. */ @media (prefers-reduced-motion: reduce) { [class*="-logoContainer"] [class*="-glowRing"], [class*="-logoContainer"] [class*="-image"], [class*="-sidebar"]:has([class*="-sidebarContent"]) { animation: none !important; } } /* Op een smal scherm staat onder het logo nog "Track & Trace". Dat zegt niets extra naast het logo, dus die regel gaat weg - samen met het vakje eromheen, anders blijft er een gat staan. Op een breed scherm staat daar iets anders ("Vul je gegevens in"); daar blijft het staan. Herkennen gebeurt weer aan het ronde logo, niet aan de tekst: zo werkt het in elke taal. */ [class*="-formContainer"]:has([class*="-glowRing"]) [class*="-header"]:has(> [class*="-subtitle"]) { display: none !important; } /* De achtergrond krijgt een groene waas van bovenaf, een donkerblauwe van rechtsonder en een lichtgroene van linksonder. Zonder die waas is de achtergrond overal even donker en zie je niet dat de kaart doorschijnt. */ [class*="-backgroundAnimation"] { background-color: var(--bg-page) !important; background-image: radial-gradient(1100px 560px at 50% -12%, rgba(47, 207, 122, 0.18), transparent 60%), radial-gradient(820px 520px at 108% 110%, rgba(51, 74, 114, 0.42), transparent 62%), radial-gradient(700px 420px at -12% 86%, rgba(201, 242, 110, 0.1), transparent 60%) !important; } html[data-theme="light"] [class*="-backgroundAnimation"] { background-image: radial-gradient(1100px 560px at 50% -12%, rgba(47, 207, 122, 0.16), transparent 60%), radial-gradient(820px 520px at 108% 110%, rgba(51, 74, 114, 0.14), transparent 62%) !important; } /* Op een smal scherm is de kaart bijna het hele scherm; daar mag wat lucht vanaf, zodat het logo hoger staat en het geheel rustiger oogt. */ [class*="-formContainer"]:has([class*="-glowRing"]) { padding: 26px 18px 32px !important; } /* decorative background orbs, retinted from the old cyan/violet palette */ [class*="-orb1"] { background: radial-gradient(circle, color-mix(in srgb, var(--primary) 40%, transparent), transparent 70%) !important; } [class*="-orb2"] { background: radial-gradient(circle, color-mix(in srgb, var(--acc-lime) 26%, transparent), transparent 70%) !important; } [class*="-orb3"] { background: radial-gradient(circle, color-mix(in srgb, var(--acc-sky) 26%, transparent), transparent 70%) !important; } /* The login art is an inline SVG of the previous brand mark baked into the bundle. It is kept in the layout (so nothing shifts) but hidden, and the Moveify wordmark is painted over its container instead. */ [class*="-animatedLogo"] { visibility: hidden !important; } [class*="-sidebarContent"] { background-image: url("/logo-white.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: min(72%, 440px) auto !important; } html[data-theme="light"] [class*="-sidebarContent"] { background-image: url("/logo-black.png") !important; } /* Op een breed scherm staat het woordmerk in de linkerhelft. Die helft is nu doorzichtig, zodat de waas van de achtergrond over het hele scherm doorloopt in plaats van halverwege op te houden. De groene gloed erachter zwelt in hetzelfde rustige ritme op en af als op de telefoon. Hij staat op dit vlak en niet op het vlak met het woordmerk zelf, want dan zou hij eroverheen liggen in plaats van erachter. */ @keyframes moveify-halo { 0%, 100% { background-size: 60% 40%; } 50% { background-size: 74% 52%; } } /* Ook hier geen !important op background-size en animation: die twee worden door de animatie aangestuurd. "background: transparent" mag hier niet als verkorte schrijfwijze staan, want dan zet die ook background-size vast. */ [class*="-sidebar"]:has([class*="-sidebarContent"]):not([class*="-sidebarLogo"]) { background-color: transparent !important; background-image: radial-gradient( closest-side circle at 50% 50%, rgba(47, 207, 122, 0.22), rgba(47, 207, 122, 0.06) 55%, transparent 100% ) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 66% 46%; animation: moveify-halo 5.5s ease-in-out infinite; } html[data-theme="light"] [class*="-sidebar"]:has([class*="-sidebarContent"]):not([class*="-sidebarLogo"]) { background-image: radial-gradient( closest-side circle at 50% 50%, rgba(47, 207, 122, 0.16), transparent 100% ) !important; } /* ----------------------------------------------------------- responsive -- */ /* The hamburger only opens the mobile nav drawer - on desktop the sidebar is already permanent, so the button does nothing and is hidden there. */ @media (min-width: 900px) { [class*="-menuButton"] { display: none !important; } } /* Below this the four tiles no longer share a line with the status pill and the action buttons, so they take a row of their own instead of wrapping the header into three. */ @media (max-width: 1100px) { [class*="-kpiCards"] { order: 2 !important; flex: 1 1 100% !important; } } /* Tablet - tighten the shell and let the map keep the space. */ @media (max-width: 1200px) { [class*="-page"] { padding: 10px !important; gap: 10px !important; } [class*="-rightPanel"] { width: 320px !important; min-width: 320px !important; } [class*="-kpiCard"]:not([class*="-kpiCards"]) { min-width: 132px !important; padding: 12px 14px !important; } [class*="-kpiCard"]:not([class*="-kpiCards"]) [class*="-kpiValue"] { font-size: 1.4rem !important; } } /* Small tablet / large phone - KPI row becomes a snap-scrolling strip. */ @media (max-width: 900px) { [class*="-page"] { padding: 8px !important; gap: 8px !important; } [class*="-kpiCards"] { overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 2px !important; scrollbar-width: none; } [class*="-kpiCards"]::-webkit-scrollbar { display: none; } [class*="-kpiCard"]:not([class*="-kpiCards"]) { scroll-snap-align: start; flex: 0 0 auto !important; min-width: 144px !important; } [class*="-rightPanel"] { width: 100% !important; min-width: 0 !important; border-radius: var(--r-xl) !important; } [class*="-mapContainer"] { border-radius: var(--r-lg) !important; } [class*="-sidebar"]:not([class*="-sidebarLogo"]):not([class*="-sidebarContent"]) { border-radius: 0 var(--r-xl) var(--r-xl) 0 !important; } } /* Phone - full-bleed surfaces, larger touch targets, clear the bottom nav. */ @media (max-width: 600px) { [class*="-page"] { padding: 6px !important; gap: 6px !important; } [class*="-mainContent"] { padding-bottom: calc(var(--nav-h) + 8px) !important; } /* row 1: menu + actions, row 2: search, row 3: the KPI strip */ [class*="-kpiCards"] { order: 3 !important; } [class*="-topBarActions"] { margin-left: auto !important; } [class*="-kpiCard"]:not([class*="-kpiCards"]) { min-width: 136px !important; padding: 11px 13px !important; } [class*="-kpiCard"]:not([class*="-kpiCards"]) [class*="-kpiValue"] { font-size: 1.3rem !important; } [class*="-kpiIcon"] { width: 30px !important; height: 30px !important; } [class*="-rightPanel"] { border-radius: var(--r-lg) !important; } [class*="-deviceListContainer"] { padding: 8px !important; } /* comfortable tap targets */ [class*="-actionBarBtn"] { width: 40px !important; height: 40px !important; } [class*="-navItem"] { padding: 12px !important; } .MuiIconButton-root { padding: 9px !important; } .MuiDialog-paper { margin: 8px !important; width: calc(100% - 16px) !important; max-height: calc(100% - 16px) !important; border-radius: var(--r-lg) !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ------------------------------------------------- phone: KPI grid 2x2 -- */ /* On a phone the four tiles no longer fit on one scrollable line, so they become a 2x2 grid instead. The secondary percentage ("67% of fleet") is dropped at this width - there is no room for it beside the value. */ @media (max-width: 600px) { [class*="-kpiCards"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; overflow: visible !important; scroll-snap-type: none !important; } [class*="-kpiCards"] > [class*="-kpiCard"], [class*="-kpiCards"] > * > [class*="-kpiCard"] { min-width: 0 !important; width: auto !important; flex: initial !important; padding: 11px 12px !important; } [class*="-kpiCards"] [class*="-kpiPercentage"] { display: none !important; } [class*="-kpiCards"] [class*="-kpiValue"] { font-size: 1.25rem !important; } [class*="-kpiCards"] [class*="-kpiLabel"] { font-size: 0.72rem !important; } [class*="-kpiIcon"] { width: 28px !important; height: 28px !important; } } /* ------------------------------------------- closed drawer swallows taps -- */ /* The compiled app keeps the mobile device drawer mounted when it is closed: the modal root stays fixed at inset 0 with pointer-events:auto and z-index 1200, so it intercepts every tap on the header, map controls and bottom nav. When closed it carries aria-hidden="true", so make it inert then. */ .MuiDrawer-root.MuiDrawer-modal[aria-hidden="true"], .MuiModal-root[aria-hidden="true"] { pointer-events: none !important; } /* ------------------------------------------------ larger map controls -- */ .maplibregl-ctrl-group button, .maplibregl-ctrl-geocoder--button { width: 38px !important; height: 38px !important; } .maplibregl-ctrl-group button span.maplibregl-ctrl-icon, .maplibregl-ctrl-group button.maplibregl-ctrl-icon { background-size: 23px 23px !important; background-position: center !important; background-repeat: no-repeat !important; } .maplibregl-ctrl-geocoder { min-width: 38px !important; min-height: 38px !important; } .maplibregl-ctrl-geocoder svg, .maplibregl-ctrl-geocoder--icon { width: 22px !important; height: 22px !important; } /* phone: value and label sit on one line, at a readable size */ @media (max-width: 600px) { [class*="-kpiCards"] [class*="-kpiContent"] { flex-direction: row !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 0 7px !important; } [class*="-kpiCards"] [class*="-kpiValue"] { font-size: 1.5rem !important; font-weight: 800 !important; line-height: 1.1 !important; } [class*="-kpiCards"] [class*="-kpiLabel"] { font-size: 0.88rem !important; font-weight: 700 !important; line-height: 1.2 !important; } [class*="-kpiCards"] [class*="-kpiCard"] { gap: 9px !important; padding: 12px 12px !important; } [class*="-kpiIcon"] { width: 30px !important; height: 30px !important; } } /* ------------------------------------------------ online status = green -- */ /* The badge itself carries no state class we can rely on (the emotion hash differs per theme), but the card it sits in has an online/offline dot, so the state is read from there. */ [class*="-card"]:has([class*="-statusDot-online"]) [class*="-statusBadge"] { background: color-mix(in srgb, var(--success) 18%, transparent) !important; color: var(--success) !important; } [class*="-card"]:has([class*="-statusDot-online"]) [class*="-statusBadge"] svg { color: inherit !important; } /* --------------------------------------- ontbrekende NL tab-vertalingen -- */ /* De drie tabs in het rechterpaneel gebruiken eigen vertaalsleutels (moveifyTrayDevices / -Expired / -Alerts) die alleen in het Engels bestaan. Bij een andere taal rendert de app een LEGE knop. Deze regels vullen de tekst alleen aan wanneer de knop daadwerkelijk leeg is, zodat er niets dubbel komt te staan zodra de vertalingen wel worden toegevoegd. */ [class*="-panelTabs"] [class*="-panelTab"]:empty::after, [class*="-panelTabs"] [class*="-panelTab"]:has(> :empty)::after { font-size: 0.82rem; font-weight: 600; letter-spacing: -0.005em; } [class*="-panelTabs"] .MuiTabs-flexContainer > [class*="-panelTab"]:nth-child(1):empty::after, [class*="-panelTabs"] .MuiTabs-flexContainer > [class*="-panelTab"]:nth-child(1):has(> :empty)::after { content: "Apparaten"; } [class*="-panelTabs"] .MuiTabs-flexContainer > [class*="-panelTab"]:nth-child(2):empty::after, [class*="-panelTabs"] .MuiTabs-flexContainer > [class*="-panelTab"]:nth-child(2):has(> :empty)::after { content: "Verlopen"; } [class*="-panelTabs"] .MuiTabs-flexContainer > [class*="-panelTab"]:nth-child(3):empty::after, [class*="-panelTabs"] .MuiTabs-flexContainer > [class*="-panelTab"]:nth-child(3):has(> :empty)::after { content: "Meldingen"; } /* ------------------------------------------- kaartkiezer niet afknippen -- */ /* Het uitklapmenu zit in een besturingsgroep van ~52px breed met overflow:hidden (nodig voor de afgeronde hoeken), waardoor de namen werden afgekapt. Het menu wordt nu absoluut geplaatst en opent naar links, binnen de kaart, zodat de volledige namen zichtbaar zijn. */ .maplibregl-ctrl-group:has(> .maplibregl-style-list) { overflow: visible !important; position: relative; } .maplibregl-style-list { position: absolute !important; top: 0 !important; right: calc(100% + 8px) !important; width: max-content !important; min-width: 168px !important; overflow: visible !important; z-index: 5; } .maplibregl-style-list button { width: 100% !important; height: auto !important; text-align: left !important; } /* ------------------------------------ sluitknop paneel alleen op mobiel -- */ /* Sluit je het apparatenpaneel op desktop, dan is er geen enkele knop om het terug te halen: de app rendert de ronde knop uitsluitend op mobiel, en ook wegnavigeren of de filterknop brengt het paneel niet terug - alleen de pagina herladen. Om die doodlopende weg te voorkomen is de sluitknop op desktop verborgen. Op mobiel blijft hij staan, want daar brengt de ronde knop het paneel gewoon weer terug. */ @media (min-width: 900px) { [class*="-rightPanelHeader"] [class*="-closeButton"] { display: none !important; } } /* -------------------------------------------------- meldingenpaneel -- */ /* Het meldingenoverzicht in het rechterpaneel had nog het oude donkerblauw (rgba(26,26,46,.9)) en grijsblauwe tijdstempels. Dit paneel was eerder nooit zichtbaar omdat er geen meldingen waren. */ [class*="-rightPanel"] [class*="-container"] { background: transparent !important; } [class*="-listItemSecondary"] { color: var(--text-dim) !important; } [class*="-rightPanel"] .MuiListItem-root, [class*="-rightPanel"] .MuiListItemButton-root { border-radius: var(--r-md) !important; } [class*="-rightPanel"] .MuiListItem-root + .MuiListItem-root { border-top: 1px solid var(--border) !important; } /* ================================================================ mobiel == Losse verzameling correcties om de app op een telefoon als een app te laten aanvoelen, en om oudere browsers niet te laten struikelen. ========================================================================== */ /* Geen vertraging van 300 ms bij het aantikken van knoppen, en geen grijze flits eromheen. Beide zijn het duidelijkste verschil tussen "website" en "app" op een telefoon. */ html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } button, [role="button"], [role="tab"], a, label, .MuiButtonBase-root { touch-action: manipulation; } /* Safari op iOS zoomt de hele pagina in zodra je een veld aanraakt met een lettergrootte onder 16px. Daarmee staat de layout scheef en moet de gebruiker terugknijpen. */ @media (max-width: 767px) { input, select, textarea, .MuiInputBase-input, .MuiOutlinedInput-input { font-size: 16px !important; } } /* De inlogkaart heeft een vaste breedte van 420px en valt daarmee buiten een telefoonscherm van 375px. */ @media (max-width: 480px) { [class*="-formContainer"] { width: 100% !important; max-width: calc(100vw - 26px) !important; min-width: 0 !important; box-sizing: border-box !important; padding-left: 18px !important; padding-right: 18px !important; } [class*="-formContainer"] > * { max-width: 100% !important; min-width: 0 !important; } [class*="-form"] { width: 100% !important; min-width: 0 !important; } } /* Binnen een lijst doorscrollen mag de pagina zelf niet meesleuren; dat is wat "verder trekken en de hele pagina beweegt" veroorzaakt. */ [class*="-deviceList"], [class*="-rightPanel"], [class*="-sidebar"] { overscroll-behavior: contain; } /* Terugval voor browsers zonder color-mix() (Safari onder 16.2, Chrome onder 111): die negeren de hele regel, dus hier eerst een gewone kleur zetten. */ [class*="-orb1"] { background: rgba(47, 207, 122, 0.22); } [class*="-orb2"] { background: rgba(201, 242, 110, 0.16); } [class*="-orb3"] { background: rgba(169, 215, 242, 0.16); } /* Terugval voor browsers zonder :has() (Safari onder 15.4, Chrome onder 105): daar bleef een pale rand om de inlogpagina staan. */ [class*="-paper"] [class*="-formContainer"] { border-radius: var(--r-xl); } /* Zelfde terugval voor de dubbele merknaam hierboven: onder 900px laat de app het ronde logo zien, dus daar mogen de merknaam en de regel eronder hoe dan ook weg. */ @media (max-width: 899.95px) { [class*="-formContainer"] [class*="-headerCenter"] { display: none; } [class*="-formContainer"] [class*="-subtitle"] { display: none; } } /* ------------------------------------------ tabbladen zonder grijze balk -- De tabbladen stonden op een grijze pil die over de volle breedte van het paneel doorliep. Zonder die achtergrond staat het rustiger; het gekozen tabblad blijft herkenbaar aan zijn eigen vlakje. */ [class*="-panelTabs"] { background: transparent !important; padding: 0 !important; } [class*="-panelTab"]:not([class*="-panelTabs"]).Mui-selected { background: var(--surface-3) !important; } /* De kop van het rechterpaneel werd meegenomen door de algemene kaartstijl voor [class*="-rightPanel"] - die selector raakt ook "-rightPanelHeader". Daardoor stond er een omlijnd vakje met schaduw om de tabbladen. */ [class*="-rightPanelHeader"] { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Het derde tabblad "Meldingen" is weggehaald: dezelfde meldingen staan al achter het belletje in de bovenbalk, met een eigen teller. Zo blijft de balk rustig met twee tabbladen. */ [class*="-panelTabs"] .MuiTabs-flexContainer > [class*="-panelTab"]:nth-child(3) { display: none !important; } /* Het schuifpijltje dat MUI erbij zet omdat het verborgen derde tabblad nog meetelt. */ [class*="-panelTabs"] .MuiTabs-scrollButtons, [class*="-panelTabs"] .MuiTabScrollButton-root { display: none !important; } /* ====================================== statuskaart op de kaart ========== Het paneel dat opent als je een systeem aanklikt. Dit was het enige deel van de app dat bij de herstyling was overgeslagen: het had nog de cyaan/ paarse kop, grijsblauwe labels en een marineblauwe voet uit de bronversie. Aangrijpingspunten zijn hier ".react-draggable" en ".draggable-header", want de klasse "-card" wordt in deze app óók voor de rijen in de apparatenlijst gebruikt. ========================================================================= */ .react-draggable > [class*="-card"] { width: 380px !important; max-width: calc(100vw - 24px) !important; background: var(--surface-1) !important; border: 1px solid var(--border) !important; border-radius: 16px !important; box-shadow: var(--shadow-3) !important; overflow: hidden !important; } /* ---- de foto van het systeem ---- */ /* Als afgeronde tegel binnen de kaart, niet als plaat over de volle breedte: dat laatste oogde alsof er een blok achter de kaart zat. */ .react-draggable [class*="-media"] { position: relative !important; margin: 10px 10px 0 !important; border-radius: 12px !important; background-color: var(--surface-3) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border: 1px solid var(--border) !important; overflow: hidden !important; } /* donkere sluier onderlangs, zodat de naam op een lichte foto leesbaar blijft */ .react-draggable [class*="-media"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to top, rgba(8, 8, 10, 0.72), transparent); pointer-events: none; } /* de sluitknop op de foto was met mixBlendMode gedaan en verdween in een lichte of donkere foto; nu een eigen vlakje dat altijd leesbaar is */ .react-draggable [class*="-mediaButton"] { position: relative !important; z-index: 1 !important; margin: 8px 8px 0 0 !important; width: 32px !important; height: 32px !important; mix-blend-mode: normal !important; background: rgba(12, 12, 14, 0.62) !important; color: #ffffff !important; border-radius: 50% !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .react-draggable [class*="-mediaButton"]:hover { background: rgba(12, 12, 14, 0.85) !important; } /* ---- geen foto beschikbaar ---- */ /* moveify-extra.js hangt deze klasse eraan wanneer er geen afbeelding is of wanneer die niet laadt. Dan vervalt het vlak van 160px tot een gewone titelbalk - een leeg grijs blok van 160px oogt als een fout. */ .react-draggable [class*="-media"].moveify-geenfoto { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 15px 16px 13px !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; background-color: transparent !important; background-image: none !important; justify-content: space-between !important; align-items: center !important; } .react-draggable [class*="-media"].moveify-geenfoto::after { display: none !important; } .moveify-geenfoto [class*="-mediaButton"] { margin: 0 !important; width: 30px !important; height: 30px !important; background: var(--surface-3) !important; color: var(--text-muted) !important; backdrop-filter: none; -webkit-backdrop-filter: none; } .moveify-geenfoto [class*="-mediaButton"]:hover { background: var(--surface-hover) !important; color: var(--text) !important; } .moveify-geenfoto .moveify-kaartnaam { position: static !important; order: -1; /* de naam links, de sluitknop rechts */ flex: 1 1 auto; margin-right: 10px; color: var(--text); text-shadow: none; } /* ---- de kop, wanneer er geen foto is ---- */ .draggable-header { background: transparent !important; background-image: none !important; border-bottom: 1px solid var(--border) !important; padding: 15px 16px 13px !important; cursor: move; } [class*="-headerTitle"] { color: var(--text) !important; font-size: 0.98rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } .draggable-header [class*="-closeButton"] { width: 30px !important; height: 30px !important; border-radius: 50% !important; background: var(--surface-3) !important; color: var(--text-muted) !important; } .draggable-header [class*="-closeButton"]:hover { background: var(--surface-hover) !important; color: var(--text) !important; } /* ---- de gegevensregels ---- */ .react-draggable [class*="-content"] { padding: 4px 16px 12px !important; /* de app zette hier 280px; met de ruimere regelafstand paste de inhoud daar net niet meer in, en kreeg je een schuifbalkje in de kaart */ max-height: min(46vh, 360px) !important; } .react-draggable table { border-collapse: collapse !important; } /* Eén doorlopende scheidingslijn per regel. Stond de lijn op de cellen, dan kreeg je twee losse streepjes met een knik ertussen. */ .react-draggable tbody tr { border-bottom: 1px solid var(--border) !important; } .react-draggable tbody tr:last-child { border-bottom: 0 !important; } .react-draggable [class*="-cell"] { border-bottom: 0 !important; padding-top: 11px !important; padding-bottom: 11px !important; vertical-align: baseline !important; } .react-draggable [class*="-cellLabel"] { color: var(--text-muted) !important; font-size: 0.67rem !important; font-weight: 700 !important; letter-spacing: 0.07em !important; line-height: 1.5 !important; white-space: nowrap !important; /* "TOTALE AFSTAND" niet over twee regels */ width: 1% !important; /* label zo smal als hij hoeft te zijn */ padding-right: 18px !important; } .react-draggable [class*="-cellValue"] { color: var(--text) !important; font-size: 0.86rem !important; font-weight: 600 !important; line-height: 1.5 !important; } /* "Meer details" was cyaan */ [class*="-detailsLink"] { display: inline-block !important; color: var(--primary) !important; font-weight: 600 !important; font-size: 0.83rem !important; padding: 2px 0 !important; } /* ---- de knoppenrij ---- */ .react-draggable [class*="-actions"] { background: transparent !important; border-top: 1px solid var(--border) !important; padding: 12px 16px !important; gap: 8px !important; } [class*="-actionButton"] { width: 40px !important; height: 40px !important; border-radius: 12px !important; background: var(--surface-3) !important; color: var(--text-muted) !important; transition: background 0.18s var(--ease), color 0.18s var(--ease) !important; } [class*="-actionButton"]:hover { background: var(--surface-hover) !important; color: var(--text) !important; } [class*="-deleteButton"]:hover { background: rgba(242, 104, 95, 0.14) !important; color: var(--danger) !important; } /* ---- het menu achter de drie puntjes ---- */ [class*="-menuPaper"] { background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-2) !important; } [class*="-menuItem"] { color: var(--text) !important; } [class*="-menuItem"]:hover { background: var(--surface-hover) !important; } /* De naam van het systeem over de foto. Laat de app zelf weg zodra er een foto is - dan staat er nergens meer om welk systeem het gaat. Wordt door moveify-extra.js in de fotobalk gezet. */ .moveify-kaartnaam { position: absolute; left: 16px; right: 54px; bottom: 11px; z-index: 1; margin: 0; font: 700 1rem/1.3 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -0.01em; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================ zwevende knop buiten de kaart ============== De blauwe ronde knop met het lijstje hoort bij de kaart: daar opent hij het apparatenpaneel. Op de instellingenbladzijden staat op diezelfde plek de knop "toevoegen", en die kreeg per ongeluk hetzelfde blauw én hetzelfde lijst-icoon - een knop die nergens op sloeg. Hieronder krijgt die zijn eigen, rustige vorm in de huisstijl. ========================================================================= */ html:not([data-moveify-pad="kaart"]) .MuiFab-root.MuiFab-circular { bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; right: 24px !important; width: 52px !important; height: 52px !important; border-radius: 16px !important; border: 0 !important; background: var(--primary) !important; color: var(--on-primary) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34) !important; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease) !important; } html:not([data-moveify-pad="kaart"]) .MuiFab-root.MuiFab-circular:hover { background: var(--primary-hover) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4) !important; } html:not([data-moveify-pad="kaart"]) .MuiFab-root.MuiFab-circular:active { transform: scale(0.95) !important; } /* hier geen masker: het plusje van de app zelf mag gewoon blijven staan */ html:not([data-moveify-pad="kaart"]) .MuiFab-root.MuiFab-circular svg, html:not([data-moveify-pad="kaart"]) .MuiFab-root.MuiFab-circular .MuiSvgIcon-root { display: inline-block !important; width: 24px !important; height: 24px !important; } /* ---- de meldingenbladzijde in het instellingenscherm ---- De tabel van de app blijft staan maar wordt verborgen; onze eigen bladzijde met schakelaars komt ervoor in de plaats. */ html[data-moveify-pad="meldingen"] [class*="-content"] > *:not(#moveify-meldframe) { display: none !important; } html[data-moveify-pad="meldingen"] #moveify-meldframe { display: block; width: 100%; border: 0; background: transparent; height: calc(100vh - 130px); min-height: 420px; } (max-width: 899px) { html[data-moveify-pad="meldingen"] #moveify-meldframe { height: calc(100vh - 190px); } } /* de zwevende plusknop hoort hier niet: meldingen zet je met de schakelaars aan en uit, niet door een regel toe te voegen */ html[data-moveify-pad="meldingen"] .MuiFab-root { display: none !important; } /* ---- terug naar de kaart, bovenin het instellingenmenu ---- Op een telefoon vult dat menu het hele scherm en heeft het geen uitgang. Deze regel staat er in dezelfde vorm als de menu-items eronder. */ .moveify-terugitem { display: flex; align-items: center; gap: 14px; margin: 8px 8px 4px; padding: 11px 12px; border-radius: 10px; color: var(--primary); text-decoration: none; font: 600 0.92rem/1.3 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: color-mix(in srgb, var(--primary) 12%, transparent); touch-action: manipulation; } /* terugval voor browsers zonder color-mix() */ @supports not (background: color-mix(in srgb, red 10%, transparent)) { .moveify-terugitem { background: rgba(47, 207, 122, 0.12); } } .moveify-terugitem svg { flex: none; } .moveify-terugitem:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); } /* ================================ schermhoogte op een telefoon =========== De app zet zijn buitenste schil op height:100vh. Op iOS Safari telt 100vh de ruimte mee die de browserbalk onderaan bedekt, dus viel de onderste balk van de app daar precies achter - onzichtbaar tot je ging scrollen. Op Chrome en in de geïnstalleerde app viel dat niet op, vandaar dat het per toestel verschilde. dvh ("dynamic viewport height") is wél de hoogte die je echt ziet. Dat is de enige aanpassing hier: aan de balk zelf wordt niets veranderd, want iedere ingreep daarin pakte op een echte iPhone anders uit dan verwacht. Browsers zonder dvh (Safari onder 15.4) slaan dit hele blok over en houden het gedrag van daarvoor. ========================================================================= */ @supports (height: 100dvh) { @media (max-width: 899px) { /* alleen de aanhechting van de app zelf, niet html en body: die laten we met rust zodat er zo min mogelijk verschuift */ #root { height: 100dvh !important; } /* de vaste schil van de kaartweergave en het vlak eronder */ [class*="-mainContent"] { height: 100dvh !important; } [class*="-root"]:has(> [class*="-mainContent"]) { height: 100dvh !important; } } } /* ================== instellingen: menu en lijsten opgeruimd ============== Vier onderdelen die jullie niet gebruiken staan het overzicht in de weg. Ze worden op adres verborgen, niet op tekst, zodat het in elke taal werkt en niet stukgaat bij een vertaling. Wil je er een terug: haal hier de bijbehorende regel weg. ========================================================================= */ [class*="-menuItem"][href="/settings/calendars"], [class*="-menuItem"][href="/settings/attributes"], [class*="-menuItem"][href="/settings/maintenances"], [class*="-menuItem"][href="/settings/commands"] { display: none !important; } /* ---- de lijsten in de instellingen ---- Meer lucht tussen de regels, een duidelijke kop, en een regel die laat merken dat je erop kunt klikken. */ [class*="-page"] .MuiTableCell-head { font: 700 0.68rem/1.4 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--text-dim) !important; background: transparent !important; border-bottom: 1px solid var(--border) !important; padding: 14px 16px !important; white-space: nowrap !important; } [class*="-page"] .MuiTableBody-root .MuiTableCell-root { padding: 14px 16px !important; border-bottom: 1px solid var(--border) !important; font-size: 0.86rem !important; } [class*="-page"] .MuiTableBody-root .MuiTableRow-root { cursor: pointer; transition: background 0.15s var(--ease); } [class*="-page"] .MuiTableBody-root .MuiTableRow-root:hover .MuiTableCell-root { background: var(--surface-2) !important; } [class*="-page"] .MuiTableBody-root .MuiTableRow-root:last-child .MuiTableCell-root { border-bottom: 0 !important; } /* de knopjes achteraan: rustiger, en pas opvallend als je erover gaat */ [class*="-page"] .MuiTableBody-root .MuiIconButton-root { color: var(--text-dim) !important; transition: color 0.15s var(--ease), background 0.15s var(--ease); } [class*="-page"] .MuiTableBody-root .MuiTableRow-root:hover .MuiIconButton-root { color: var(--text-muted) !important; } [class*="-page"] .MuiTableBody-root .MuiIconButton-root:hover { color: var(--text) !important; background: var(--surface-3) !important; } /* ---- het formulier van de app verbergen achter onze eigen vensters ---- Zolang "Mijn account", "Nieuwe klant" of "Klant bewerken" openstaat, hoort het formulier van Traccar er niet doorheen te schemeren. De zijbalk blijft wel staan, zodat je ziet waar je bent. visibility in plaats van display: dan blijft de bladzijde even hoog en springt er niets wanneer het venster sluit. */ html[data-moveify-venster] [class*="-page"] [class*="-content"] { visibility: hidden !important; } /* ===================== telefoon: kaartknoppen en tegels opgeruimd ======== Op een telefoon stond er rechts een kolom van zeven knoppen over de kaart: in- en uitzoomen, noorden, kaartlagen, mijn locatie, zoeken en meldingen. Die nemen de halve kaart in beslag terwijl je op een telefoon toch met je vingers zoomt. Alleen "mijn locatie" blijft over. Het ⓘ-tekentje rechtsonder blijft wel staan: dat is de bronvermelding van de kaart en die is verplicht van de kaartleverancier. ======================================================================== */ @media (max-width: 899.95px) { .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in), .maplibregl-ctrl-group:has(.maplibregl-style-switcher), .maplibregl-ctrl-group:has(.maplibre-ctrl-notification), .maplibregl-ctrl-geocoder { display: none !important; } /* De knop "mijn locatie" wordt een losse ronde knop in plaats van een vakje in een grijze balk. */ .maplibregl-ctrl-group:has(.maplibregl-ctrl-geolocate) { background: none !important; border: 0 !important; box-shadow: none !important; } .maplibregl-ctrl-group button.maplibregl-ctrl-geolocate { width: 46px !important; height: 46px !important; border-radius: 50% !important; background: var(--surface-1) !important; border: 1px solid var(--border-strong) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important; } .maplibregl-ctrl-group button.maplibregl-ctrl-geolocate:active { transform: scale(0.94); } /* Eigen tekening in het blauw van het locatiebolletje. Let op "filter: none": verderop staat een invert(1) op dit pictogram voor de donkere stand, en omgekeerd groen is knalroze - dat was het roze dat je zag. */ .maplibregl-ctrl-group button.maplibregl-ctrl-geolocate span.maplibregl-ctrl-icon { filter: none !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%233b82f6' stroke='none'/%3E%3Cpath d='M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3'/%3E%3C/svg%3E") !important; background-size: 24px 24px !important; background-position: center !important; background-repeat: no-repeat !important; } } /* De vier tegels bovenaan stonden op een telefoon in twee rijen van twee en namen zo 118 pixels hoogte in. Nu staan ze naast elkaar in een rij: het plaatje boven, het getal eronder, en daaronder waar het over gaat. */ @media (max-width: 600px) { [class*="-kpiCards"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; overflow: visible !important; } [class*="-kpiCard"]:not([class*="-kpiCards"]) { min-width: 0 !important; padding: 8px 4px !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; text-align: center !important; } [class*="-kpiCard"] [class*="-kpiIcon"] { width: 22px !important; height: 22px !important; min-width: 0 !important; border-radius: 7px !important; } [class*="-kpiCard"] [class*="-kpiIcon"] svg { width: 13px !important; height: 13px !important; } [class*="-kpiCard"] [class*="-kpiContent"] { min-width: 0 !important; text-align: center !important; } [class*="-kpiValue"] { font-size: 1rem !important; line-height: 1.1 !important; } [class*="-kpiLabel"] { font-size: 0.58rem !important; line-height: 1.15 !important; letter-spacing: 0 !important; white-space: normal !important; } } /* De inhoud van zo'n tegel staat van huis uit naast elkaar (getal links, tekst rechts). Op een telefoon past dat niet in een vakje van tachtig pixels, dus daar zetten we het onder elkaar. */ @media (max-width: 600px) { [class*="-kpiCard"] [class*="-kpiContent"] { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 1px !important; } } /* ================== inlogscherm: rustig bewegende achtergrond ============ De app laat de drie vlekken al drijven (orbFloat1/2/3), maar in 12 tot 18 seconden - dat oogt gejaagd. Hier wordt alleen de duur verlengd; de beweging zelf blijft die van de app. ======================================================================== */ [class*="-orb1"] { animation-duration: 42s !important; } [class*="-orb2"] { animation-duration: 55s !important; } [class*="-orb3"] { animation-duration: 48s !important; } @media (prefers-reduced-motion: reduce) { [class*="-orb1"], [class*="-orb2"], [class*="-orb3"] { animation: none !important; } } /* ---- de lichte stand ---- Daar lag een groene waas over de hele bladzijde. Op een donkere ondergrond werkt dat als gloed, op een lichte wordt het een vuile vlek. De vaste waas gaat daarom bijna helemaal weg; wat je ziet bewegen zijn de vlekken zelf, en die krijgen juist iets meer kleur. */ html[data-theme="light"] [class*="-backgroundAnimation"] { background-image: radial-gradient(1200px 620px at 50% -18%, rgba(47, 207, 122, 0.07), transparent 62%), radial-gradient(900px 560px at 110% 112%, rgba(120, 150, 190, 0.08), transparent 64%) !important; } html[data-theme="light"] [class*="-orb1"] { background: radial-gradient(circle, rgba(47, 207, 122, 0.24), transparent 70%) !important; } html[data-theme="light"] [class*="-orb2"] { background: radial-gradient(circle, rgba(169, 215, 242, 0.28), transparent 70%) !important; } html[data-theme="light"] [class*="-orb3"] { background: radial-gradient(circle, rgba(201, 242, 110, 0.2), transparent 70%) !important; } /* Geen groene gloed achter het woordmerk in de lichte stand - dat was precies die vage vlek. Een zachte witte gloed tilt het logo juist op. */ html[data-theme="light"] [class*="-sidebar"]:has([class*="-sidebarContent"]):not([class*="-sidebarLogo"]) { background-image: radial-gradient( closest-side circle at 50% 50%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 100% ) !important; } /* De app zet op die drie vlekken een animatie met de namen orbFloat1, 2 en 3, maar die bewegingen zijn nergens gedefinieerd - ze staan in de gebouwde schil als losse verwijzing. Daardoor bewoog er al die tijd niets; het was een stilstaand plaatje. Hier staan ze alsnog. Rustig gehouden: hooguit vijftig pixels verschuiving over drie kwartier, en nauwelijks schaalverandering. Het mag opvallen als je ernaar kijkt, niet als je iets aan het invullen bent. */ @keyframes orbFloat1 { 0%, 100% { transform: translate(0, 0) scale(1); } 30% { transform: translate(-46px, 34px) scale(1.07); } 60% { transform: translate(28px, -24px) scale(0.96); } } @keyframes orbFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); } 35% { transform: translate(38px, -30px) scale(1.05); } 70% { transform: translate(-24px, 26px) scale(0.97); } } @keyframes orbFloat3 { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-30px, -36px) scale(1.08); } 75% { transform: translate(34px, 18px) scale(0.95); } } /* De drijvende vlekken mogen ook een stuk verder reizen - anders blijft het onzichtbaar. Ruim het dubbele van hiervoor. */ @keyframes orbFloat1 { 0%, 100% { transform: translate(0, 0) scale(1); } 30% { transform: translate(-130px, 90px) scale(1.18); } 60% { transform: translate(80px, -70px) scale(0.9); } } @keyframes orbFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); } 35% { transform: translate(110px, -85px) scale(1.15); } 70% { transform: translate(-70px, 75px) scale(0.92); } } @keyframes orbFloat3 { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-90px, -100px) scale(1.2); } 75% { transform: translate(95px, 55px) scale(0.88); } } /* Het wit was vlak en koud. Een zacht verloop van linksboven naar rechtsonder geeft het diepte zonder dat het een kleurtje krijgt. */ html[data-theme="light"] [class*="-backgroundAnimation"] { background-color: #eef0f3 !important; background-image: linear-gradient(145deg, #ffffff 0%, #f3f5f7 45%, #e8ecf0 100%), radial-gradient(1200px 620px at 50% -18%, rgba(47, 207, 122, 0.1), transparent 62%), radial-gradient(900px 560px at 110% 112%, rgba(120, 150, 190, 0.1), transparent 64%) !important; background-blend-mode: normal, multiply, multiply !important; } /* ---- geen streep meer langs het linkervlak ---- Dat vak stond op "overflow: auto": is de inhoud net iets hoger dan het scherm, dan verschijnt er een schuifbalk, en die zie je als een dunne verticale lijn langs de rand. Op het inlogscherm valt er niets te schuiven, dus dat mag dicht. */ @media (min-width: 900px) { /* De selector is hier expres langer dan nodig. De regel voor de navigatiebalk van de app (drie klassen, met !important) raakt dit vak ook, en bij twee keer !important wint de specifiekste - niet de laatste. Vandaar de extra :not(), puur om er een klasse overheen te komen. */ [class*="-sidebar"]:has([class*="-sidebarContent"]):not([class*="-sidebarLogo"]):not([class*="-nav"]) { overflow: hidden !important; padding: 0 !important; } } /* ================== inlogkaart op een laag scherm ======================= De app zet het inlogvlak op "height: 100%" met de inhoud verticaal gecentreerd. Past die inhoud niet - een laptop met een lage bladzijde, of een telefoon met het toetsenbord open - dan valt er aan de onderkant een stuk weg en is er niets om aan te schuiven. Bij centreren met "justify-content: center" verdwijnt zelfs de bovenkant buiten bereik. Daarom: het vlak mag schuiven, en het centreren gaat via "margin: auto". Dat is het verschil: een automatische marge wordt vanzelf nul zodra er geen ruimte over is, dus er raakt nooit iets onbereikbaar. De schuifbalk zelf blijft onzichtbaar - anders krijg je weer die dunne verticale lijn langs de rand. ======================================================================== */ [class*="-paper"]:has([class*="-formContainer"]) { justify-content: flex-start !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } [class*="-paper"]:has([class*="-formContainer"])::-webkit-scrollbar { width: 0 !important; height: 0 !important; } [class*="-formContainer"] { margin: auto 16px !important; } /* Een automatische marge wordt nul zodra de ruimte op is - dan plakt de kaart tegen de rand. Deze marge op het vlak eromheen blijft wel staan, ook als er geschoven wordt, dus er zit altijd lucht boven en onder. */ [class*="-paper"]:has([class*="-formContainer"]) { padding-block: 24px !important; } /* Op een laptop met een lage bladzijde hoeft die kaart niet zo ruim te zijn. Twaalf pixels minder rondom scheelt genoeg om schuiven helemaal te voorkomen. Alleen op een breed scherm: op een telefoon past het al. */ @media (min-width: 900px) and (max-height: 760px) { [class*="-formContainer"] { padding: 28px !important; } } /* ================== telefoon: de balk bovenaan tegen de rand ============= Op een telefoon staat het kaartscherm op "position: fixed; inset: 0" - dat doet de app zelf vanaf 900 px naar beneden. De 6 px marge van de bladzijde eromheen geldt daar dus niet meer. En onze eigen regel zet de balk bovenaan op "padding: 0", omdat op een breed scherm de bladzijde al voor de marge zorgt. Die twee bij elkaar maken dat op een telefoon zowel de knoppenrij als de vier tegels tot tegen de schermrand lopen; de laatste knop en de laatste tegel vielen er zelfs half buiten. Alleen links en rechts erbij - de hoogte blijft zoals hij is, want die hebben we juist zo krap gemaakt voor de kaart. ======================================================================== */ @media (max-width: 899.95px) { [class*="-topBar"]:not([class*="-topBarActions"]) { padding-top: 10px !important; padding-left: 10px !important; padding-right: 10px !important; } } /* ================== telefoon: pictogram en getal op een regel ============ De tegels stonden in drie lagen: plaatje, getal, tekst. Dat maakt ze hoog en dat gaat ten koste van de kaart. Nu staan het plaatje en het getal naast elkaar en staat alleen de tekst eronder. De opbouw van de app is: tegel > [plaatje, doosje > [getal, tekst]]. Dat doosje zit dus in de weg. "display: contents" laat het doosje zelf verdwijnen maar houdt zijn inhoud - zo worden het getal en de tekst gewone vakjes van het raster van de tegel en kan de tekst onder allebei gecentreerd worden. ======================================================================== */ @media (max-width: 600px) { [class*="-kpiCard"]:not([class*="-kpiCards"]) { display: grid !important; grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: center !important; align-items: center !important; column-gap: 7px !important; row-gap: 0 !important; padding: 7px 5px !important; } [class*="-kpiCards"] [class*="-kpiContent"] { display: contents !important; } [class*="-kpiCards"] [class*="-kpiIcon"] { grid-column: 1; grid-row: 1; } [class*="-kpiCards"] [class*="-kpiValue"] { grid-column: 2; grid-row: 1; } [class*="-kpiCards"] [class*="-kpiLabel"] { grid-column: 1 / -1; grid-row: 2; text-align: center; margin-top: 1px !important; } } /* ================== knop "naar mijn systeem" ============================= Rechtsboven op de kaart staat de knop van de kaartbibliotheek: waar ben ik. Deze staat linksboven en doet het omgekeerde: waar staat mijn voertuig. Zelfde vorm, zodat het een paar is; de tekening is groen in plaats van blauw, zoals de stip op de kaart. De knop wordt aangemaakt in moveify-extra.js, sectie 17. ======================================================================== */ #moveify-naar-voertuig { position: absolute; top: 14px; left: 14px; z-index: 3; height: 44px; padding: 0 17px 0 12px; border-radius: 22px; display: flex; align-items: center; gap: 8px; background: var(--surface-1); border: 1px solid var(--border-strong); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); color: var(--text); font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s var(--ease), opacity 0.12s var(--ease); } #moveify-naar-voertuig svg { width: 22px; height: 22px; flex: 0 0 auto; } #moveify-naar-voertuig:active { transform: scale(0.96); } #moveify-naar-voertuig.moveify-bezig { opacity: 0.55; } @media (min-width: 900px) { #moveify-naar-voertuig { height: 40px; top: 12px; left: 12px; padding: 0 15px 0 11px; font-size: 0.82rem; } #moveify-naar-voertuig svg { width: 20px; height: 20px; } } /* ================== telefoon: de onderbalk blijft in beeld =============== Tik je onderin op Instellingen, dan schuift het menupaneel eroverheen en is de balk weg - je ziet dan niet meer waar je bent en je kunt er niet meer op terug. Twee dingen, met opzet allebei: 1. De balk gaat boven het paneel liggen. 1250 zit tussen het paneel (1200) en de dialoogvensters (1300) in, dus een echt dialoogvenster blijft gewoon over de balk heen komen - dat hoort ook zo. 2. Het paneel stopt netjes boven de balk. Anders verdwijnt de onderste regel van het menu eronder en is die niet meer aan te tikken. ======================================================================== */ @media (max-width: 899.95px) { .MuiBox-root:has(> .MuiBottomNavigation-root) { z-index: 1250 !important; } [class*="-mobileDrawer"] .MuiDrawer-paper { height: calc(100% - var(--nav-h) - env(safe-area-inset-bottom, 0px)) !important; max-height: calc(100% - var(--nav-h) - env(safe-area-inset-bottom, 0px)) !important; } }