/* ========================================================================== THREADLINE DASHBOARD KIT A ready-made CSS system matching the Threadline landing page's premium, Apple/Linear/Stripe-inspired look — for internal dashboard UI. Fonts expected (load via Google Fonts in your ): Plus Jakarta Sans (500,600,700,800) · Inter (400,500,600,700) · IBM Plex Mono (500,600) Everything is namespaced with the `tl-` prefix so it can be dropped into any existing project without colliding with other styles. ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS -------------------------------------------------------------------------- */ :root{ /* colors */ --tl-ink: #1c2433; --tl-soft: #5b6474; --tl-faint: #94a0b3; --tl-white: #ffffff; --tl-mist: #f6f8fb; --tl-mist-2: #eef1f6; --tl-line: #e4e9f1; --tl-blue: #2563eb; --tl-blue-dark: #1d4ed8; --tl-blue-50: #eef3ff; --tl-emerald: #059669; --tl-emerald-50:#ecfaf4; --tl-amber: #b45309; --tl-amber-50: #fef7e8; --tl-red: #dc2626; --tl-red-50: #fef2f2; /* radius */ --tl-r-sm: 10px; --tl-r-md: 14px; --tl-r-lg: 20px; --tl-r-xl: 28px; --tl-r-full: 999px; /* shadow */ --tl-shadow-sm: 0 1px 2px rgba(28,36,51,.05); --tl-shadow: 0 12px 28px -12px rgba(28,36,51,.14); --tl-shadow-lg: 0 30px 70px -20px rgba(28,36,51,.22); /* type */ --tl-font-display: 'Plus Jakarta Sans', 'Inter', sans-serif; --tl-font-body: 'Inter', sans-serif; --tl-font-mono: 'IBM Plex Mono', monospace; /* motion */ --tl-ease: cubic-bezier(.4,0,.2,1); } /* -------------------------------------------------------------------------- 2. RESET / BASE -------------------------------------------------------------------------- */ .tl-app, .tl-app *{ box-sizing:border-box; } .tl-app{ font-family:var(--tl-font-body); color:var(--tl-ink); background:var(--tl-mist); -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; } .tl-app h1,.tl-app h2,.tl-app h3,.tl-app h4{ font-family:var(--tl-font-display); font-weight:700; letter-spacing:-0.01em; margin:0; color:var(--tl-ink); } .tl-app p{ margin:0; } .tl-app a{ color:inherit; text-decoration:none; } .tl-app button{ font-family:inherit; } .tl-mono{ font-family:var(--tl-font-mono); font-variant-numeric:tabular-nums; } .tl-eyebrow{ font-family:var(--tl-font-mono); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tl-faint); } /* thin dashed "sync thread" divider — the Threadline signature motif */ .tl-thread{ height:1px; background-image:repeating-linear-gradient(to right,var(--tl-line) 0,var(--tl-line) 5px,transparent 5px,transparent 11px); border:none; } .tl-live-dot{ width:8px; height:8px; border-radius:50%; background:var(--tl-emerald); display:inline-block; animation:tl-pulse 2s ease-in-out infinite; } @keyframes tl-pulse{ 0%,100%{opacity:.4;} 50%{opacity:1;} } @media (prefers-reduced-motion: reduce){ .tl-app *{ animation:none !important; transition:none !important; } } /* -------------------------------------------------------------------------- 3. LAYOUT SHELL -------------------------------------------------------------------------- */ .tl-main{ flex:1; min-width:0; padding:32px 36px 64px; } .tl-page-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:28px; flex-wrap:wrap; } .tl-page-header h1{ font-size:26px; } .tl-page-header p{ color:var(--tl-soft); font-size:14.5px; margin-top:6px; } /* -------------------------------------------------------------------------- 4. SIDEBAR -------------------------------------------------------------------------- */ .tl-sidebar{ width:260px; flex-shrink:0; background:var(--tl-white); border-right:1px solid var(--tl-line); display:flex; flex-direction:column; height:100vh; position:sticky; top:0; } .tl-sidebar__brand{ display:flex; align-items:center; gap:10px; padding:22px 22px 18px; } .tl-sidebar__brand-mark{ width:30px; height:30px; flex-shrink:0; } .tl-sidebar__brand-name{ font-family:var(--tl-font-display); font-weight:700; font-size:16.5px; } .tl-sidebar__scroll{ flex:1; overflow-y:auto; padding:6px 14px 14px; } .tl-nav-label{ font-family:var(--tl-font-mono); font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--tl-faint); padding:16px 10px 8px; } .tl-nav-item{ display:flex; align-items:center; gap:11px; padding:9px 10px 9px 8px; font-size:14px; font-weight:500; color:var(--tl-soft); position:relative; cursor:pointer; transition:background .15s var(--tl-ease), color .15s var(--tl-ease), border-color .15s var(--tl-ease); } .tl-nav-item:hover{ background:var(--tl-mist); color:var(--tl-ink); } .tl-nav-item svg{ flex-shrink:0; opacity:.85; color:inherit; } .tl-nav-item__badge{ margin-left:auto; font-family:var(--tl-font-mono); font-size:10.5px; font-weight:600; background:var(--tl-mist-2); color:var(--tl-soft); padding:1px 7px; border-radius:var(--tl-r-full); } .tl-nav-item.is-active{ background:transparent; color:var(--tl-blue); font-weight:600; border-left-color:var(--tl-blue); } .tl-nav-item.is-active svg{ opacity:1; color:var(--tl-blue); } .tl-nav-item.is-active .tl-nav-item__badge{ background:#dbe6fe; color:var(--tl-blue-dark); } .tl-nav-sub-item{ transition: all .15s var(--tl-ease); border-left: 2px solid var(--tl-line) !important; border-radius: 0 6px 6px 0; } .tl-nav-sub-item:hover{ color: var(--tl-ink) !important; background: var(--tl-mist); border-left-color: var(--tl-soft) !important; } .tl-nav-sub-item.is-active{ color: var(--tl-blue) !important; background: var(--tl-blue-50); font-weight: 600; border-left-color: var(--tl-blue) !important; } .tl-sidebar__footer{ border-top:1px solid var(--tl-line); padding:14px; } .tl-user-chip{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--tl-r-md); cursor:pointer; transition:background .15s var(--tl-ease); } .tl-user-chip:hover{ background:var(--tl-mist); } .tl-avatar{ width:34px; height:34px; border-radius:50%; background:var(--tl-ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; flex-shrink:0; } .tl-user-chip__name{ font-size:13.5px; font-weight:600; line-height:1.25; } .tl-user-chip__role{ font-size:11.5px; color:var(--tl-faint); line-height:1.3; } /* collapsed sidebar variant (optional: add .is-collapsed to .tl-sidebar) */ .tl-sidebar.is-collapsed{ width:76px; } .tl-sidebar.is-collapsed .tl-sidebar__brand-name, .tl-sidebar.is-collapsed .tl-nav-item span:not(.tl-nav-item__dot), .tl-sidebar.is-collapsed .tl-nav-label, .tl-sidebar.is-collapsed .tl-user-chip__name, .tl-sidebar.is-collapsed .tl-user-chip__role{ display:none; } .tl-sidebar.is-collapsed .tl-nav-item{ justify-content:center; } /* -------------------------------------------------------------------------- 5. CARDS -------------------------------------------------------------------------- */ .tl-card{ background:var(--tl-white); border:1px solid var(--tl-line); border-radius:var(--tl-r-lg); box-shadow:var(--tl-shadow-sm); padding:22px; } .tl-card__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; } .tl-card__title{ font-size:16px; font-weight:700; font-family:var(--tl-font-display); } .tl-card__subtitle{ font-size:13px; color:var(--tl-soft); margin-top:2px; } /* stat grid + stat card */ .tl-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px; } .tl-stat-card{ background:var(--tl-white); border:1px solid var(--tl-line); border-radius:var(--tl-r-lg); padding:20px; transition:box-shadow .2s var(--tl-ease), transform .2s var(--tl-ease); } .tl-stat-card:hover{ box-shadow:var(--tl-shadow); transform:translateY(-2px); } .tl-stat-card__label{ font-size:12.5px; color:var(--tl-faint); font-weight:500; } .tl-stat-card__value{ font-family:var(--tl-font-mono); font-weight:600; font-size:26px; margin-top:8px; color:var(--tl-ink); } .tl-stat-card__meta{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; margin-top:9px; } .tl-stat-card__meta.is-up{ color:var(--tl-emerald); } .tl-stat-card__meta.is-down{ color:var(--tl-red); } .tl-stat-card__meta.is-neutral{ color:var(--tl-faint); font-weight:500; } .tl-stat-card__icon{ width:36px; height:36px; border-radius:var(--tl-r-md); display:flex; align-items:center; justify-content:center; background:var(--tl-blue-50); margin-bottom:12px; } .tl-stat-card__icon.is-emerald{ background:var(--tl-emerald-50); } .tl-stat-card__icon.is-amber{ background:var(--tl-amber-50); } /* -------------------------------------------------------------------------- 6. BADGES -------------------------------------------------------------------------- */ .tl-badge{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:var(--tl-r-full); line-height:1.6; white-space:nowrap; } .tl-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; } .tl-badge--success{ background:var(--tl-emerald-50); color:var(--tl-emerald); } .tl-badge--info{ background:var(--tl-blue-50); color:var(--tl-blue); } .tl-badge--warning{ background:var(--tl-amber-50); color:var(--tl-amber); } .tl-badge--danger{ background:var(--tl-red-50); color:var(--tl-red); } .tl-badge--neutral{ background:var(--tl-mist-2); color:var(--tl-soft); } /* -------------------------------------------------------------------------- 7. TABLE -------------------------------------------------------------------------- */ .tl-table-card{ background:var(--tl-white); border:1px solid var(--tl-line); border-radius:var(--tl-r-lg); overflow:hidden; box-shadow:var(--tl-shadow-sm); } .tl-table-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-bottom:1px solid var(--tl-line); flex-wrap:wrap; } .tl-table-wrap{ overflow-x:auto; } .tl-table{ width:100%; border-collapse:collapse; font-size:13.5px; } .tl-table thead th{ text-align:left; font-family:var(--tl-font-mono); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--tl-faint); background:var(--tl-mist); padding:12px 20px; border-bottom:1px solid var(--tl-line); white-space:nowrap; } .tl-table tbody td{ padding:15px 20px; border-bottom:1px solid var(--tl-line); color:var(--tl-ink); vertical-align:middle; } .tl-table tbody tr{ transition:background .15s var(--tl-ease); } .tl-table tbody tr:hover{ background:var(--tl-mist); } .tl-table tbody tr:last-child td{ border-bottom:none; } .tl-table td.tl-num{ font-family:var(--tl-font-mono); font-variant-numeric:tabular-nums; } .tl-table__cell-primary{ font-weight:600; } .tl-table__cell-sub{ font-size:12px; color:var(--tl-faint); margin-top:2px; } .tl-table__row-actions{ display:flex; align-items:center; gap:6px; justify-content:flex-end; } .tl-table-footer{ display:flex; align-items:center; justify-content:space-between; padding:14px 22px; border-top:1px solid var(--tl-line); font-size:13px; color:var(--tl-soft); } /* -------------------------------------------------------------------------- 8. BUTTONS -------------------------------------------------------------------------- */ .tl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:var(--tl-r-full); border:1px solid transparent; cursor:pointer; transition:background .15s var(--tl-ease), border-color .15s var(--tl-ease), color .15s var(--tl-ease), transform .1s var(--tl-ease); white-space:nowrap; } .tl-btn:active{ transform:scale(.97); } .tl-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; } .tl-btn--primary{ background:var(--tl-blue); color:#fff; } .tl-btn--primary:hover:not(:disabled){ background:var(--tl-blue-dark); } .tl-btn--secondary{ background:var(--tl-white); color:var(--tl-ink); border-color:var(--tl-line); } .tl-btn--secondary:hover:not(:disabled){ border-color:var(--tl-ink); } .tl-btn--ghost{ background:transparent; color:var(--tl-soft); } .tl-btn--ghost:hover:not(:disabled){ background:var(--tl-mist); color:var(--tl-ink); } .tl-btn--danger{ background:var(--tl-red-50); color:var(--tl-red); } .tl-btn--danger:hover:not(:disabled){ background:#fde3e3; } .tl-btn--dark{ background:var(--tl-ink); color:#fff; } .tl-btn--dark:hover:not(:disabled){ background:#0f1521; } .tl-btn--sm{ padding:6px 12px; font-size:12.5px; } .tl-btn--lg{ padding:12px 22px; font-size:14.5px; } .tl-btn-icon{ width:32px; height:32px; padding:0; border-radius:var(--tl-r-sm); display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; color:var(--tl-soft); cursor:pointer; transition:background .15s var(--tl-ease), color .15s var(--tl-ease); } .tl-btn-icon:hover{ background:var(--tl-mist); color:var(--tl-ink); } .tl-btn-icon--bordered{ border-color:var(--tl-line); background:var(--tl-white); } /* -------------------------------------------------------------------------- 9. FORM FIELDS (used inside the drawer) -------------------------------------------------------------------------- */ .tl-field{ margin-bottom:16px; } .tl-field label{ display:block; font-size:12.5px; font-weight:600; color:var(--tl-soft); margin-bottom:6px; } .tl-input, .tl-select, .tl-textarea{ width:100%; font-family:var(--tl-font-body); font-size:13.5px; color:var(--tl-ink); background:var(--tl-mist); border:1px solid var(--tl-line); border-radius:var(--tl-r-sm); padding:10px 12px; transition:border-color .15s var(--tl-ease), background .15s var(--tl-ease); } .tl-input:focus, .tl-select:focus, .tl-textarea:focus{ outline:none; border-color:var(--tl-blue); background:var(--tl-white); } .tl-textarea{ resize:vertical; min-height:80px; } /* -------------------------------------------------------------------------- 10. RIGHT-SIDE DRAWER -------------------------------------------------------------------------- */ .tl-drawer-overlay{ position:fixed; inset:0; background:rgba(17,22,32,.45); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .3s var(--tl-ease); z-index:60; } .tl-drawer-overlay.is-open{ opacity:1; pointer-events:auto; } .tl-drawer{ position:fixed; top:0; right:0; height:100%; width:50vw; min-width:640px; max-width:95vw; background:var(--tl-white); box-shadow:var(--tl-shadow-lg); transform:translateX(100%); transition:transform .35s var(--tl-ease); z-index:200005; display:flex; flex-direction:column; } .tl-drawer.is-open{ transform:translateX(0); } .tl-drawer__header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; background:var(--tl-white); border-bottom:1px solid var(--tl-line); flex-shrink:0; } .tl-drawer__title{ font-family:var(--tl-font-display); font-size:18px; font-weight:700; color:var(--tl-ink); margin:0; line-height:1.2; } .tl-drawer__eyebrow{ font-family:var(--tl-font-body); font-size:12.5px; color:var(--tl-faint); margin-top:3px; font-weight:500; text-transform:none; } .tl-drawer__body{ flex:1; overflow-y:auto; padding:22px; } .tl-drawer__section{ margin-bottom:26px; } .tl-drawer__section-title{ font-family:var(--tl-font-mono); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tl-faint); margin-bottom:12px; } .tl-drawer__row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--tl-line); font-size:13.5px; } .tl-drawer__row:last-child{ border-bottom:none; } .tl-drawer__row-label{ color:var(--tl-soft); } .tl-drawer__row-value{ font-weight:600; } .tl-drawer__footer{ display:flex; gap:10px; padding:16px 22px; border-top:1px solid var(--tl-line); flex-shrink:0; } .tl-drawer__footer .tl-btn{ flex:1; } /* order-lifecycle style stepper, reused inside the drawer */ .tl-stepper{ position:relative; padding-left:6px; } .tl-stepper__item{ position:relative; display:flex; gap:12px; padding-bottom:20px; } .tl-stepper__item:last-child{ padding-bottom:0; } .tl-stepper__item::before{ content:''; position:absolute; left:9px; top:22px; bottom:0; width:1px; background:var(--tl-line); } .tl-stepper__item:last-child::before{ display:none; } .tl-stepper__dot{ width:20px; height:20px; flex-shrink:0; border-radius:50%; border:2px solid var(--tl-line); background:var(--tl-white); z-index:1; } .tl-stepper__item.is-done .tl-stepper__dot{ border-color:var(--tl-emerald); background:var(--tl-emerald-50); } .tl-stepper__item.is-current .tl-stepper__dot{ border-color:var(--tl-blue); background:var(--tl-blue-50); } .tl-stepper__label{ font-size:13.5px; font-weight:600; } .tl-stepper__time{ font-size:11.5px; color:var(--tl-faint); font-family:var(--tl-font-mono); margin-top:1px; } /* -------------------------------------------------------------------------- 11. RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 900px){ .tl-sidebar{ position:fixed; left:0; top:0; z-index:70; transform:translateX(-100%); transition:transform .3s var(--tl-ease); } .tl-sidebar.is-open{ transform:translateX(0); } .tl-main{ padding:20px; } .tl-drawer{ width:100%; max-width:100%; } } /* -------------------------------------------------------------------------- 12. LEGACY SS COMPATIBILITY ALIASES -------------------------------------------------------------------------- */ .ss-button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--tl-font-body); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--tl-r-full); border: 1px solid transparent; background: var(--tl-blue); color: var(--tl-white) !important; cursor: pointer; transition: all 0.15s var(--tl-ease); white-space: nowrap; text-decoration: none; } .ss-button:hover { background: var(--tl-blue-dark); } .ss-button--ghost, .ss-button--light { background: var(--tl-white); color: var(--tl-ink) !important; border: 1px solid var(--tl-line); } .ss-button--ghost:hover, .ss-button--light:hover { border-color: var(--tl-ink); background: var(--tl-mist); } .ss-button--danger { background: var(--tl-red-50); color: var(--tl-red) !important; } .ss-button--sm { padding: 6px 12px; font-size: 12.5px; } .ss-input, .ss-select, input[type="text"], input[type="number"], input[type="search"], select, textarea { font-family: var(--tl-font-body); font-size: 13.5px; color: var(--tl-ink); background: var(--tl-white); border: 1px solid var(--tl-line); border-radius: var(--tl-r-sm); padding: 8px 12px; transition: all 0.15s var(--tl-ease); } .ss-input:focus, .ss-select:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tl-blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); } .ss-card { background: var(--tl-white); border: 1px solid var(--tl-line); border-radius: var(--tl-r-lg); box-shadow: var(--tl-shadow-sm); padding: 20px; } .ss-cards, .ss-stat-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .ss-card-table-wrapper, .ss-table-wrapper { background: var(--tl-white); border: 1px solid var(--tl-line); border-radius: var(--tl-r-lg); overflow: hidden; box-shadow: var(--tl-shadow-sm); } .ss-card-table, .ss-table, table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ss-card-table thead th, .ss-table thead th, table thead th { text-align: left; font-family: var(--tl-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tl-faint); background: var(--tl-mist); padding: 12px 20px; border-bottom: 1px solid var(--tl-line); white-space: nowrap; } .ss-card-table tbody td, .ss-table tbody td, table tbody td { padding: 14px 20px; border-bottom: 1px solid var(--tl-line); color: var(--tl-ink); vertical-align: middle; } .ss-card-table tbody tr:hover, .ss-table tbody tr:hover, table tbody tr:hover { background: var(--tl-mist); } .ss-badge, .ss-pill-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--tl-r-full); background: var(--tl-mist-2); color: var(--tl-soft); } .ss-badge--success, .ss-pill-badge--success { background: var(--tl-emerald-50); color: var(--tl-emerald); } .ss-badge--pending, .ss-badge--warning { background: var(--tl-amber-50); color: var(--tl-amber); } .ss-badge--danger { background: var(--tl-red-50); color: var(--tl-red); } .ss-badge--approved, .ss-badge--preparing, .ss-badge--ready, .ss-badge--in_transit, .ss-badge--info { background: var(--tl-blue-50); color: var(--tl-blue); } .page-container, .ss-content { max-width: 100%; width: 100%; } .ss-drawer-50, .ss-drawer, .tl-drawer, .ss-invoice-preview, [id*="-drawer"] { position: fixed !important; top: 0 !important; right: 0 !important; height: 100vh !important; width: 50vw !important; min-width: 640px !important; max-width: 95vw !important; background: var(--tl-white) !important; box-shadow: var(--tl-shadow-lg) !important; z-index: 200005 !important; display: flex !important; flex-direction: column !important; transform: translateX(100%) !important; transition: transform 0.35s var(--tl-ease) !important; } .ss-drawer-50.is-open, .ss-drawer.is-open, .tl-drawer.is-open, .ss-invoice-preview.is-open, [id*="-drawer"].is-open { transform: translateX(0) !important; } .ss-drawer-backdrop, .ss-invoice-backdrop, .tl-drawer-overlay, [id*="-backdrop"] { display: none; position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(17, 22, 32, 0.5) !important; z-index: 200004 !important; } .ss-drawer-backdrop.is-open, .ss-invoice-backdrop.is-open, .tl-drawer-overlay.is-open, [id*="-backdrop"].is-open { display: block !important; } /* Printable Invoice PDF Drawer iframe container */ #ss-invoice-body { padding: 0 !important; flex: 1 !important; display: flex !important; flex-direction: column !important; height: calc(100vh - 70px) !important; overflow: hidden !important; } .ss-preview-iframe { width: 100% !important; height: 100% !important; min-height: calc(100vh - 70px) !important; border: none !important; flex: 1 !important; } /* Ensure any non-action button inside table cells renders as clean simple text */ table td button:not(.tl-btn):not(.ss-button), .tl-table td button:not(.tl-btn):not(.ss-button), .ss-card-table td button:not(.tl-btn):not(.ss-button) { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; padding: 0 !important; margin: 0 !important; font-family: inherit !important; font-size: inherit !important; font-weight: 700 !important; color: var(--tl-ink) !important; cursor: pointer; display: inline !important; text-decoration: none !important; } table td button:not(.tl-btn):not(.ss-button):hover, .tl-table td button:not(.tl-btn):not(.ss-button):hover, .ss-card-table td button:not(.tl-btn):not(.ss-button):hover { color: var(--tl-blue) !important; }