/* ========================================================================== Trecker Treck — v2 Design Bridge Ports the v2 unified design system (tokens.css) onto legacy Trecker* component classes so every existing page inherits the new look without requiring per-page refactor. Rules: - Loaded AFTER trecker-components.css, so selectors of equal specificity here win via cascade order. - Do NOT scope under .tt-app — these should apply globally. - Values here use the new --tt-* tokens defined in trecker-v2.css (scoped under .tt-app on ) or fall back to --trecker-* aliases. ========================================================================== */ /* ========================================================================== BUTTONS — the v2 rule: always a visible border + fill, never look like a label ========================================================================== */ .TreckerButton { border-radius: var(--trecker-border-radius-md, 8px); height: 36px; padding: 0 14px; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease; min-height: unset; } .TreckerButton:hover { transform: none; } /* Secondary & Ghost always carry a visible border */ .TreckerButtonSecondary, .TreckerButtonGhost { background-color: var(--trecker-bg-secondary); color: var(--trecker-text-primary); border: 1px solid var(--trecker-border-medium); box-shadow: var(--trecker-shadow-sm); } .TreckerButtonSecondary:hover, .TreckerButtonGhost:hover { background-color: var(--trecker-bg-tertiary); border-color: var(--trecker-accent); color: var(--trecker-text-primary); transform: none; } /* Primary keeps gradient */ .TreckerButtonPrimary { background: linear-gradient(135deg, #ff8a3d 0%, #ff4c1e 100%); border: 1px solid transparent; color: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.15) inset; } .TreckerButtonPrimary:hover { filter: brightness(1.06); background: linear-gradient(135deg, #ff8a3d 0%, #ff4c1e 100%); transform: none; } /* Focus ring — v2 uses brand-weak glow rather than hard outline */ .TreckerButton:focus-visible, .TreckerButtonPrimary:focus-visible, .TreckerButtonSecondary:focus-visible, .TreckerButtonDanger:focus-visible, .TreckerButtonGhost:focus-visible, .TreckerButtonIcon:focus-visible { outline: none; box-shadow: var(--trecker-shadow-sm), 0 0 0 3px var(--trecker-accent-light); border-color: var(--trecker-accent); } /* Danger keeps solid fill but gets a proper border so it is never invisible */ .TreckerButtonDanger { background-color: var(--trecker-error); color: #ffffff; border: 1px solid transparent; } /* Button sizes */ .TreckerButton--xs { height: 24px; padding: 0 8px; font-size: 11px; border-radius: 6px; } .TreckerButton--sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; } .TreckerButton--lg { height: 44px; padding: 0 20px; font-size: 14px; border-radius: var(--trecker-border-radius-lg, 12px); } /* ========================================================================== CARDS ========================================================================== */ .TreckerCard { background: var(--trecker-bg-card); border: 1px solid var(--trecker-border); border-radius: var(--trecker-border-radius-lg, 12px); box-shadow: var(--trecker-shadow-sm); } .TreckerCardHeader { padding: 14px 16px; border-bottom: 1px solid var(--trecker-border); } .TreckerCardBody { padding: 16px; } .TreckerCardFooter { padding: 12px 16px; border-top: 1px solid var(--trecker-border); } /* ========================================================================== INPUTS / SELECT / TEXTAREA — match v2: strong border, brand focus glow ========================================================================== */ .TreckerInput, .TreckerSelect, .TreckerTextarea, textarea.TreckerInput { background: var(--trecker-bg-input); color: var(--trecker-text-primary); border: 1px solid var(--trecker-border-medium); border-radius: var(--trecker-border-radius-md, 8px); font-size: 13px; line-height: 1.3; transition: border-color .12s, box-shadow .12s; } .TreckerInput:focus, .TreckerSelect:focus, .TreckerTextarea:focus, textarea.TreckerInput:focus { outline: none; border-color: var(--trecker-accent); box-shadow: 0 0 0 3px var(--trecker-accent-light); } /* ========================================================================== BADGES — pill, tight, colour-coded, consistent with tt-badge ========================================================================== */ .TreckerBadge, .TreckerBadge-primary, .TreckerBadge-secondary, .TreckerBadge-success, .TreckerBadge-warning, .TreckerBadge-danger, .TreckerBadge-info { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; border: 1px solid transparent; } .TreckerBadge { background: var(--trecker-bg-tertiary); color: var(--trecker-text-secondary); border-color: var(--trecker-border); } .TreckerBadge-primary { background: var(--trecker-accent-light); color: var(--trecker-accent); } .TreckerBadge-success { background: var(--trecker-success-bg); color: var(--trecker-success); } .TreckerBadge-warning { background: var(--trecker-warning-bg); color: var(--trecker-warning); } .TreckerBadge-danger { background: var(--trecker-error-bg); color: var(--trecker-error); } .TreckerBadge-info { background: var(--trecker-info-bg); color: var(--trecker-info); } /* ========================================================================== TABLES — dense by default, comfort variant for long-form ========================================================================== */ .TreckerTable { width: 100%; border-collapse: collapse; font-size: 13px; } .TreckerTable thead th, .TreckerTableHeader th, .TreckerTableHead th { position: sticky; top: 0; background: var(--trecker-bg-secondary); color: var(--trecker-text-secondary); text-align: left; font-weight: 500; font-size: 12px; padding: 10px 12px; height: 36px; border-bottom: 1px solid var(--trecker-border); } .TreckerTable tbody tr { border-bottom: 1px solid var(--trecker-border); } .TreckerTable tbody td { padding: 6px 12px; height: 34px; } .TreckerTable tbody tr:hover { background: var(--trecker-bg-hover-subtle); } .TreckerTable tbody tr:nth-child(even) td { background: var(--trecker-bg-stripe); } .TreckerTable tbody tr:nth-child(even):hover td { background: var(--trecker-bg-hover-subtle); } .TreckerTable--comfort tbody td { padding: 12px; height: 48px; } .TreckerTable--comfort thead th { height: 40px; } /* ========================================================================== STAT CARDS ========================================================================== */ .TreckerStatCard { padding: 14px 16px; background: var(--trecker-bg-card); border: 1px solid var(--trecker-border); border-radius: var(--trecker-border-radius-lg, 12px); box-shadow: var(--trecker-shadow-sm); } /* ========================================================================== BREADCRUMB ========================================================================== */ .TreckerBreadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--trecker-text-secondary); } .TreckerBreadcrumb__sep { color: var(--trecker-text-tertiary); } .TreckerBreadcrumb__cur { color: var(--trecker-text-primary); font-weight: 500; } /* ========================================================================== SIDEBAR — legacy admin sidebar pieces reskinned to v2 Covers both variants: TreckerSidebarItem/TreckerSidebarGroupLabel and TreckerSidebarLink/TreckerSidebarGroupTitle. ========================================================================== */ .TreckerSidebar { background: var(--trecker-bg-secondary); border-right: 1px solid var(--trecker-border); } .TreckerSidebarNav { padding: 8px 0; } .TreckerSidebarItem, .TreckerSidebarLink { display: flex; align-items: center; gap: 10px; padding: 7px 16px; font-size: 13px; color: var(--trecker-text-secondary); text-decoration: none; border-left: 2px solid transparent; cursor: pointer; transition: background .12s, color .12s; } .TreckerSidebarItem:hover, .TreckerSidebarLink:hover { color: var(--trecker-text-primary); background: var(--trecker-bg-hover-subtle); } .TreckerSidebarItem.is-active, .TreckerSidebarItem--active, .TreckerSidebarItemActive, .TreckerSidebarLink.is-active, .TreckerSidebarLink--active, .TreckerSidebarLinkActive, .TreckerSidebarLink.active { color: var(--trecker-text-primary); background: var(--trecker-accent-light); border-left-color: var(--trecker-accent); font-weight: 600; } .TreckerSidebarGroupLabel, .TreckerSidebarGroupTitle { display: block; padding: 12px 16px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--trecker-text-tertiary); text-transform: uppercase; } /* ========================================================================== HEADER — admin topbar reskin ========================================================================== */ .TreckerHeader, .TreckerAdminHeader { background: var(--trecker-bg-secondary); border-bottom: 1px solid var(--trecker-border); min-height: 52px; } .TreckerHeaderLogo { font-weight: 700; letter-spacing: -0.01em; color: var(--trecker-text-primary); text-decoration: none; } .TreckerHeaderLogoText { color: var(--trecker-text-primary); } /* ========================================================================== SUBNAV — event scope horizontal nav ========================================================================== */ .TreckerEventSubNav, .TreckerSubNav { background: var(--trecker-bg-secondary); border-bottom: 1px solid var(--trecker-border); display: flex; gap: 2px; padding: 0 16px; overflow-x: auto; } .TreckerEventSubNavItem, .TreckerSubNavItem { padding: 10px 14px; font-size: 13px; color: var(--trecker-text-secondary); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .12s, border-color .12s; } .TreckerEventSubNavItem:hover, .TreckerSubNavItem:hover { color: var(--trecker-text-primary); } .TreckerEventSubNavItem.is-active, .TreckerSubNavItem.is-active, .TreckerEventSubNavItemActive, .TreckerSubNavItemActive { color: var(--trecker-accent); border-bottom-color: var(--trecker-accent); font-weight: 600; } /* ========================================================================== DROPDOWN — header user menu etc. ========================================================================== */ .TreckerDropdownMenu { background: var(--trecker-bg-secondary); border: 1px solid var(--trecker-border-medium); border-top: 2px solid var(--trecker-accent); border-radius: var(--trecker-border-radius-lg); box-shadow: var(--trecker-shadow-xl); padding: 6px; min-width: 200px; } .TreckerDropdownItem { display: block; padding: 8px 12px; color: var(--trecker-text-primary); text-decoration: none; border-radius: 6px; font-size: 13px; font-weight: 500; } .TreckerDropdownItem:hover { background: var(--trecker-accent-light); color: var(--trecker-text-primary); } .TreckerDropdownItem--danger { color: var(--trecker-error); } .TreckerDropdownItem--danger:hover { background: var(--trecker-error-bg); } .TreckerDropdownDivider { height: 1px; background: var(--trecker-border-medium); margin: 6px 0; } /* ========================================================================== PAGE HEADER — unified title + subtitle + action slot ========================================================================== */ .TreckerPageHeader { padding: 14px 20px 0; background: var(--trecker-bg-card); border-bottom: 1px solid var(--trecker-border); } .TreckerPageHeader__title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .TreckerPageHeader__subtitle { font-size: 13px; color: var(--trecker-text-secondary); margin-top: 2px; } /* ========================================================================== ALERTS — soft tinted backgrounds, left accent bar, no heavy borders ========================================================================== */ .TreckerAlert, .TreckerAlert-info, .TreckerAlert-success, .TreckerAlert-warning, .TreckerAlert-error, .TreckerAlertSuccess, .TreckerAlertDanger { border-radius: var(--trecker-border-radius-md, 8px); border-left-width: 3px; border-left-style: solid; padding: 12px 14px; box-shadow: var(--trecker-shadow-sm); } .TreckerAlert-info { background: var(--trecker-info-bg); border-left-color: var(--trecker-info); color: var(--trecker-text-primary); } .TreckerAlert-success, .TreckerAlertSuccess { background: var(--trecker-success-bg); border-left-color: var(--trecker-success); color: var(--trecker-text-primary); } .TreckerAlert-warning { background: var(--trecker-warning-bg); border-left-color: var(--trecker-warning); color: var(--trecker-text-primary); } .TreckerAlert-error, .TreckerAlertDanger { background: var(--trecker-error-bg); border-left-color: var(--trecker-error); color: var(--trecker-text-primary); } /* ========================================================================== SCROLLBARS — subtle, thumb on v2 borders ========================================================================== */ body::-webkit-scrollbar, .TreckerApp ::-webkit-scrollbar, .TreckerAdminShell ::-webkit-scrollbar { width: 10px; height: 10px; } body::-webkit-scrollbar-thumb, .TreckerApp ::-webkit-scrollbar-thumb, .TreckerAdminShell ::-webkit-scrollbar-thumb { background: var(--trecker-border-medium); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } body::-webkit-scrollbar-thumb:hover, .TreckerApp ::-webkit-scrollbar-thumb:hover, .TreckerAdminShell ::-webkit-scrollbar-thumb:hover { background: var(--trecker-text-tertiary); background-clip: padding-box; border: 2px solid transparent; } /* ========================================================================== LIVE DOT — pulse animation shared with tt-live-dot ========================================================================== */ .TreckerLiveDot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--trecker-error); box-shadow: 0 0 0 0 rgba(229, 72, 77, .5); animation: treckerPulseV2 1.5s infinite; } @keyframes treckerPulseV2 { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.5); } 70% { box-shadow: 0 0 0 8px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }