/* ========================================================================== TransferRide portal shell Ported from the "TransferRide Admin - Reservations" design project (checkout-flow.css tokens + admin-res.css shell/sidebar). Production adaptations vs. the design file: - Every selector is nested under .tr-portal, which Transfer_Ride_Core_Portal_Handler::portal_body_class() puts on for any /portal/ route, so nothing leaks into Elementor, the theme or the public checkout. - Tokens are prefixed --trp-* and remapped onto the site brand blue (#046095) instead of the design's #1470a8, the same ladder tr-search.css and tr-checkout.css already use. - --trp-muted is #5a7383, not the design's #6b8493. The design value is 3.93:1 on white and fails AA, and it is used for 10-12px labels throughout. - The Manrope declaration is dropped; the portal inherits the site font and keeps only the design's size / weight / tracking scale. The mono face for ids is ui-monospace, so nothing is fetched. - The design's a-* class prefix (a-shell, a-table, a-tab) is renamed trp-*. "a" meant "admin" in a canvas holding six unrelated screens; in the plugin it collides with nothing but reads as nothing either. - The rail is 236px as drawn, replacing the 350px one. The three hard-coded offsets in transfer-ride-core-public.css (294, 323, 400) are overridden from the --trp-rail token so the three cannot drift apart again. ========================================================================== */ /* Doubled class (0,2,0) so the token block and the resets outrank the theme and the plugin's own older portal rules without !important. */ .tr-portal.tr-portal { /* brand-remapped from the design's blue ramp, same ladder as tr-checkout */ --trp-blue-900: #072131; --trp-blue-800: #0b5179; --trp-blue-700: #046095; --trp-blue-600: #0879ba; --trp-blue-050: #eaf3f9; --trp-green: #8cc63f; --trp-green-ink: #4a7510; --trp-ink: #0f2733; --trp-ink-2: #3a5464; --trp-muted: #5a7383; --trp-line: #dde5ea; --trp-line-2: #eef2f5; --trp-surface: #fff; --trp-bg: #f2f5f7; /* the two states the design tints outside the blue ramp */ --trp-warn-bg: #fdf3d8; --trp-warn-ink: #8a6d09; --trp-bad-bg: #fbe9e9; --trp-bad-ink: #9c3535; --trp-bad-line: #e7c9c9; --trp-r-lg: 16px; --trp-r-md: 12px; --trp-r-sm: 10px; --trp-sh-1: 0 1px 2px rgba(11, 39, 51, .05), 0 8px 22px rgba(11, 39, 51, .06); --trp-sh-2: 0 10px 30px rgba(11, 39, 51, .1); --trp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* One source for the rail width: the fixed sidebar, the header's left padding and the content's left padding all read it. */ --trp-rail: 236px; background: var(--trp-bg); color: var(--trp-ink); -webkit-font-smoothing: antialiased; } /* ========================================================================== Shell ========================================================================== */ body.tr-portal.dashboard { background: var(--trp-bg); } /* Layout offsets live in the min-width half of the plugin's existing 768/769 breakpoint. Below it transfer-ride-core-public.css turns the rail into an off-canvas panel (width:100%, right:-100%), and a specificity win here would override that inside its own media query - media queries do not add weight. */ @media (min-width: 769px) { .tr-portal .portal-dashboard-menu { width: var(--trp-rail); } .tr-portal .portal-dashboard-header .menu-content { padding-left: calc(var(--trp-rail) + 28px); padding-right: 28px; } .tr-portal .portal-dashboard-content { padding: 20px 28px 32px calc(var(--trp-rail) + 28px); } } @media (min-width: 769px) and (max-width: 1180px) { .tr-portal .portal-dashboard-header .menu-content { padding-left: calc(var(--trp-rail) + 18px); padding-right: 18px; } .tr-portal .portal-dashboard-content { padding: 16px 18px 28px calc(var(--trp-rail) + 18px); } } .tr-portal .portal-dashboard-menu { padding-top: 18px; border-color: var(--trp-line); background: var(--trp-surface); display: flex; flex-direction: column; } .tr-portal .portal-dashboard-menu .portal-sidebar-wrap, .tr-portal .portal-dashboard-menu .portal-sidebar { height: 100%; } .tr-portal .portal-dashboard-menu .portal-sidebar { display: flex; flex-direction: column; } /* The sidebar's second child is the flex column holding the links and the footer; it has to grow so "Go back to Transfer Ride" sits at the bottom. */ .tr-portal .portal-sidebar > .flex.flex-column { flex: 1; min-height: 0; justify-content: space-between; } .tr-portal .portal-dashboard-menu .logo-wrap { text-align: left; padding: 0 18px; } .tr-portal .portal-dashboard-menu .logo-wrap > a img { height: 28px; width: auto; } .tr-portal .portal-dashboard-header .menu-content { height: 64px; border-color: var(--trp-line); box-shadow: none; gap: 18px; } .tr-portal .portal-dashboard-header .page-name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--trp-ink); margin: 0; } /* ========================================================================== Sidebar nav ========================================================================== */ .tr-portal .portal-links { padding: 14px 12px; } .tr-portal .portal-links > ul > li { margin-bottom: 2px; } .tr-portal .portal-links > ul > li.menu-group { margin: 14px 0 2px; } .tr-portal .portal-links .grp { display: block; padding: 4px 10px 6px; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #9bafba; } .tr-portal .portal-links > ul > li:first-child .grp { padding-top: 0; } .tr-portal .portal-links .menu-item { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--trp-ink-2); text-decoration: none !important; transition: background 140ms ease, color 140ms ease; } .tr-portal .portal-links .menu-item:hover { background: #f4f8fa; color: var(--trp-ink); } .tr-portal .portal-links .menu-item.on { background: var(--trp-blue-050); color: var(--trp-blue-800); } .tr-portal .portal-links .menu-item .icon { height: 18px; width: 18px; flex: 0 0 18px; display: grid; place-items: center; } .tr-portal .portal-links .menu-item .icon svg { max-height: 18px; max-width: 18px; height: auto; width: auto; } .tr-portal .portal-links .menu-item-name { padding: 0; min-width: 0; } /* Count badge. tabular-nums so 7 and 263 sit on the same right edge. */ .tr-portal .portal-links .ct2 { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--trp-muted); font-variant-numeric: tabular-nums; } .tr-portal .portal-links .menu-item.on .ct2 { color: var(--trp-blue-700); } .tr-portal .portal-links .menu-item-dropwdown-toggle { height: 18px; width: 18px; margin-left: auto; display: grid; place-items: center; } /* The badge already took margin-left:auto, so the caret must not take it too. */ .tr-portal .portal-links .ct2 + .menu-item-dropwdown-toggle { margin-left: 6px; } .tr-portal .portal-links .menu-item-dropwdown-toggle svg { max-height: 12px; max-width: 12px; } .tr-portal .portal-links .child.menu-item { display: flex; min-height: 32px; padding: 0 10px 0 37px; font-size: 13px; font-weight: 600; } .tr-portal .menu-footer { padding: 12px; border-top: 1px solid var(--trp-line-2); } .tr-portal .menu-footer .tr-button { font-size: 12.5px; font-weight: 700; } .tr-portal .menu-footer .icon { height: 18px; width: 18px; } /* ========================================================================== Top bar user chip ========================================================================== */ .tr-portal .portal-dashboard-header .user-data { margin-left: auto; } .tr-portal .trp-who { display: flex; align-items: center; gap: 9px; text-decoration: none !important; font-size: 12.5px; font-weight: 700; color: var(--trp-ink); } .tr-portal .trp-who small { display: block; font-size: 11px; font-weight: 600; color: var(--trp-muted); margin-top: 2px; } .tr-portal .trp-av { width: 32px; height: 32px; border-radius: 50%; background: var(--trp-blue-050); color: var(--trp-blue-800); display: grid; place-items: center; font-size: 11.5px; font-weight: 800; flex: 0 0 32px; } /* ========================================================================== Buttons Scoped to .trp-btn rather than a bare .btn: the portal already ships .tr-button and .button, and a generic .btn inside a WordPress theme is asking for a collision. ========================================================================== */ .tr-portal .trp-btn { border: 0; border-radius: var(--trp-r-sm); height: 40px; padding: 0 18px; font: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: .005em; display: inline-flex; align-items: center; gap: 8px; justify-content: center; cursor: pointer; text-decoration: none !important; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } .tr-portal .trp-btn-p { background: var(--trp-blue-700); color: #fff; } .tr-portal .trp-btn-p:hover { background: var(--trp-blue-800); color: #fff; } .tr-portal .trp-btn-g { background: #fff; border: 1.5px solid var(--trp-line); color: var(--trp-ink-2); } .tr-portal .trp-btn-g:hover { border-color: #c7d5dd; color: var(--trp-ink); } .tr-portal .trp-btn-d { background: #fff; border: 1.5px solid var(--trp-bad-line); color: var(--trp-bad-ink); } .tr-portal .trp-btn-d:hover { background: #fdf4f4; } .tr-portal .trp-btn-big { height: 48px; padding: 0 26px; font-size: 15px; border-radius: var(--trp-r-md); } .tr-portal .trp-btn:disabled { opacity: .5; cursor: default; } /* The page header's "Add new" is the design's primary button. Restyled in place rather than re-marked-up, because page-header.php is shared by nine screens. */ .tr-portal .portal-dashboard-content .title .button.add-new { background: var(--trp-blue-700); border-radius: var(--trp-r-sm); height: 40px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; } .tr-portal .portal-dashboard-content .title .button.add-new:hover { background: var(--trp-blue-800); } .tr-portal .portal-dashboard-content .title .button .icon { margin-left: 0; width: 12px; } .tr-portal .portal-dashboard-content .title { padding: 0 0 16px; } .tr-portal .portal-dashboard-content .title h2 { font-size: 24px; font-weight: 800; letter-spacing: -.022em; color: var(--trp-ink); } /* ========================================================================== Status pills ========================================================================== */ .tr-portal .pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 800; white-space: nowrap; } .tr-portal .pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; flex: 0 0 6px; } .tr-portal .pill.ok { background: rgba(140, 198, 63, .18); color: var(--trp-green-ink); } .tr-portal .pill.pend { background: var(--trp-warn-bg); color: var(--trp-warn-ink); } .tr-portal .pill.canc { background: var(--trp-bad-bg); color: var(--trp-bad-ink); } .tr-portal .pill.neu { background: #eef2f5; color: var(--trp-ink-2); } /* ========================================================================== Focus One visible ring for everything the redesign adds. :focus-visible so a mouse click on a sort header does not leave a ring behind. ========================================================================== */ .tr-portal .trp-btn:focus-visible, .tr-portal .trp-tab:focus-visible, .tr-portal .trp-cb:focus-visible, .tr-portal .rowbtn:focus-visible, .tr-portal .trp-table th.s:focus-visible, .tr-portal .trp-pag .pg button:focus-visible { outline: 2px solid var(--trp-blue-600); outline-offset: 2px; } /* ========================================================================== Mobile Below 769px the portal keeps its existing off-canvas sidebar - the trigger, the close button and the .active toggle are all already there and already driven by transfer-ride-core-public.js. Only the pieces the redesign added need a mobile shape. ========================================================================== */ @media (max-width: 768px) { .tr-portal .portal-dashboard-menu .logo-wrap { padding: 0 20px; } /* The chip is the one thing competing with the hamburger for the bar; the role line goes and the avatar carries the identity. */ .tr-portal .trp-who-name { display: none; } }