/* ============================================================================= * TsTable — generic table component styles * * Adapted from smart_followers_v2/styles.css. The Smart Followers table keeps * its own stylesheet untouched; this file is the neutral base that other * tables (AirDrop, Top 100, Trending, ...) will share. * * Conventions * - All selectors use the .ts-table-* prefix. * - Colors come from variables defined in static/css/basic/variables.css. * Hard-coded fallbacks are kept for consistency with the SF v2 look. * - Dark theme rules are written as `.dark .ts-table-...`, matching the * project-wide convention (the .dark class is toggled on ). * ========================================================================== */ /* ----------------------------------------------------------------------------- * Block container * -------------------------------------------------------------------------- */ .ts-table-block { padding: 24px; background: var(--white); border-radius: 12px; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; } .dark .ts-table-block { background: var(--dark-grey); border: 1px solid var(--white-opacity); } /* ----------------------------------------------------------------------------- * Table base (thead / tbody / hover) * -------------------------------------------------------------------------- */ .ts-table-container { margin-top: 16px; position: relative; overflow-x: auto; } table.ts-table { width: 100% !important; min-width: 800px; margin-bottom: 0 !important; } table.ts-table thead th { font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; font-size: 12px !important; line-height: 14px !important; color: #656565 !important; border-bottom: none !important; padding: 12px 16px !important; background: var(--white) !important; text-align: left !important; white-space: nowrap; } .dark table.ts-table thead th { background: var(--dark-grey) !important; } table.ts-table tbody td { padding: 16px !important; border-top: 1px solid #F3F3F3 !important; border-bottom: None !important; font-family: 'Roboto', sans-serif !important; font-size: 14px !important; overflow: hidden !important; } /* Stronger selector beats the project-wide reset that sets `vertical-align: baseline` on every cell. Without this, the table content sticks to the top of the row instead of being centered. The rule on `tbody` itself is harmless (vertical-align is meaningful on cells, not on tbody) but matches the user's explicit request and documents intent. */ .ts-table > tbody { vertical-align: middle !important; } table.ts-table > tbody > tr > td { vertical-align: middle !important; } .dark table.ts-table tbody td { border-top: 1px solid #484848 !important; border-bottom: None !important; } /* Ad-zone row in . Pages may render an ad banner via `{% render_ads_zone %}` between the column headers and the first data row by adding `class="ts-table-ad-row"` to the . The horizontal padding is reduced so the ad has more room to breathe. */ table.ts-table thead tr.ts-table-ad-row th { padding: 12px 8px !important; } /* Column-level utility: center-align both the header and every cell in the column. Apply via `class="ts-table-col-center"` on the and via DataTables `columns[].className: 'ts-table-col-center'` for the . */ table.ts-table thead th.ts-table-col-center, table.ts-table tbody td.ts-table-col-center { text-align: center !important; } /* Bootstrap's `.form-switch` ships with `margin-left: -2.5em` on the input so the toggle slider sits to the left of an adjacent label. We use the switch as a standalone control inside a centered cell, so the negative margin pulls the toggle off-center. Reset it. */ table.ts-table .form-switch .form-check-input { margin-left: 0 !important; } table.ts-table tbody tr:last-child td { border-bottom: none !important; } table.ts-table tbody tr:hover td { background-color: #FAFAFA !important; } .dark table.ts-table tbody tr:hover td { background-color: #18181B !important; } /* Round the outer corners of the hovered row so the row borders don't poke out beyond the rounded hover background. The radius lives on the first and last cells of the row only — middle cells stay square so adjacent borders meet cleanly. */ table.ts-table tbody tr:hover td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } table.ts-table tbody tr:hover td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } /* Hide both separator lines around the hovered row so neither sticks out from under the rounded hover background. The bottom line is the `border-bottom` of the hovered row's own cells; the "top" line is the `border-bottom` of the row that sits immediately above it (rows have no border-top in this table). The `:has(+ tr:hover)` selector picks that previous row by looking ahead to its next-sibling. */ table.ts-table tbody tr:hover td, table.ts-table tbody tr:hover + tr td { border-top-color: transparent !important; } /* ----------------------------------------------------------------------------- * Username cell (avatar + name + handle) * -------------------------------------------------------------------------- */ .ts-table-user-info { display: flex; align-items: center; min-width: 0; max-width: 220px; } .ts-table-avatar { display: flex; align-items: center; margin-right: 8px; flex-shrink: 0; } /* `display: block` removes the default inline baseline gap that would otherwise push the avatar slightly above the centerline of the adjacent name + handle text block. */ .ts-table-avatar img { display: block; } .ts-table-user-data { min-width: 0; overflow: hidden; } .ts-table-name { display: flex; align-items: center; min-width: 0; } .ts-table-name a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%; font-weight: 600; color: #000; text-decoration: none; } .dark .ts-table-name a { color: #FFF; } .ts-table-handle { min-width: 0; } .ts-table-handle a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%; font-weight: 400; font-size: 12px; color: #656565; text-decoration: none; } .ts-table-verify-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; margin-left: 4px; } /* ----------------------------------------------------------------------------- * Score / followers / numbers / text * -------------------------------------------------------------------------- */ .ts-table-score { color: #0544FD; font-weight: 600; } /* Twitter Score column variant that shows the absolute value next to a signed diff. Same flex layout as `.ts-table-followers` so the spacing between value and delta stays consistent across columns. The two children reuse the existing `.ts-table-score` (blue value) and `.ts-table-diff-positive` / `.ts-table-diff-negative` colour rules. */ .ts-table-score-with-diff { display: flex; justify-content: flex-start; align-items: center; gap: 8px; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; } .ts-table-followers { text-align: left; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; display: flex; justify-content: flex-start; align-items: center; /* Visible breathing room between the absolute value and the signed diff so e.g. "1.2M +1.5K" reads as two distinct values, not one. */ gap: 8px; } .ts-table-followers-count { font-weight: 500; color: var(--Black, #000); } .dark .ts-table-followers-count { color: var(--white, #FFF); } .ts-table-diff { font-size: 14px; font-weight: 500; } .ts-table-diff-positive { color: #198754; } .ts-table-diff-negative { color: #dc3545; } .dark .ts-table-diff-positive { color: var(--success, #198754); } .dark .ts-table-diff-negative { color: var(--error, #dc3545); } .ts-table-number, .ts-table-text { font-family: 'Roboto', sans-serif; font-size: 14px; color: var(--Black, #000); } .dark .ts-table-number, .dark .ts-table-text { color: #FFF; } .ts-table-link { color: var(--blue, #0544FD); text-decoration: none; } .ts-table-link:hover { text-decoration: underline; } /* ----------------------------------------------------------------------------- * Description cell (text + optional category-coloured tags) * -------------------------------------------------------------------------- */ .ts-table-description-wrapper { display: flex; max-width: 322px; width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .ts-table-description-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: var(--Neutral-Gray-2, #656565); text-overflow: ellipsis; font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 400; line-height: 14px; } .dark .ts-table-description-text { color: #9E9E9E; } .ts-table-description-tags { display: flex; flex-wrap: wrap; gap: 4px; } .ts-table-description-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 500; line-height: 20px; color: var(--black, #000); background: #F3F3F3; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease; } .dark .ts-table-description-tag { color: var(--white, #FFF); background: #27272A; } /* Tag category palettes — colour mapping mirrors SF v2 so the look is identical when the same category ids are reused. The page can map any category id to one of these slots via class names ts-table-tag-1..4. */ .ts-table-description-tag.ts-table-tag-1 { background: #ddf1e4; } .ts-table-description-tag.ts-table-tag-2 { background: #ffedda; } .ts-table-description-tag.ts-table-tag-3 { background: #e8eefc; } .ts-table-description-tag.ts-table-tag-4 { background: #f3f3f3; } .dark .ts-table-description-tag.ts-table-tag-1 { background: var(--green-light); } .dark .ts-table-description-tag.ts-table-tag-2 { background: var(--yellow-light); } .dark .ts-table-description-tag.ts-table-tag-3 { background: var(--blue-dark); } .dark .ts-table-description-tag.ts-table-tag-4 { background: #484848; } /* Hover highlight — same convention as the legacy `.overview-tags-list-item` used in the Top 100 tag filter strip. tag-1/2/3 have dedicated *-light2 and *-light3 / *-dark2 and *-dark3 colour variables for hover; tag-4 is the generic fallback and uses a small manual nudge. */ .ts-table-description-tag.ts-table-tag-1:hover { background: var(--green-light2); } .ts-table-description-tag.ts-table-tag-2:hover { background: var(--yellow-light2); } .ts-table-description-tag.ts-table-tag-3:hover { background: var(--blue-dark2); } .ts-table-description-tag.ts-table-tag-4:hover { background: #e8e8e8; } .dark .ts-table-description-tag.ts-table-tag-1:hover { background: var(--green-light3); } .dark .ts-table-description-tag.ts-table-tag-2:hover { background: var(--yellow-light3); } .dark .ts-table-description-tag.ts-table-tag-3:hover { background: var(--blue-dark3); } .dark .ts-table-description-tag.ts-table-tag-4:hover { background: #5a5a5a; } /* Generic hover for tags whose category_id doesn't match 1-4 (e.g. raw DB ids from SF endpoint). Uses filter: brightness for a universal highlight regardless of the tag's actual background colour. */ .ts-table-description-tag:hover { filter: brightness(0.93); } .dark .ts-table-description-tag:hover { filter: brightness(1.15); } /* ----------------------------------------------------------------------------- * Footer / pagination * * Mirrors SF v2 pagination styling so visually the new tables match the * Smart Followers reference. Kept inside .ts-table-footer to scope away * from any global DataTables overrides. * -------------------------------------------------------------------------- */ /* Footer wrapper produced by DataTables via the dom string `rt<"ts-table-footer"pl>`. Hidden by default so non-premium users (and users on the very first paint) never see DataTables chrome leaking into the page. The component adds `.ts-table-footer-visible` once it has confirmed the user has access. */ .ts-table-footer { display: none; align-items: center; padding: 24px 16px 16px; box-sizing: border-box; min-width: 800px; } .ts-table-footer.ts-table-footer-visible { display: flex; } .ts-table-footer .dataTables_paginate { display: flex !important; gap: 8px; align-items: center; margin-right: auto !important; } .ts-table-footer .dataTables_paginate > span { gap: 8px !important; } .ts-table-footer .paginate_button { display: flex !important; width: 40px !important; height: 40px !important; padding: 6px 16px !important; justify-content: center !important; align-items: center !important; border-radius: 24px !important; background: #F3F3F3 !important; color: #656565 !important; font-family: 'Roboto', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; cursor: pointer; border: none !important; box-sizing: border-box !important; } .ts-table-footer .paginate_button.current { background: var(--blue) !important; color: var(--white) !important; } /* Hover mirrors the active (.current) styling so users get a clear preview of what the button will look like once selected. Light theme: blue bg + white text. Dark theme: white bg + black text. The selectors are intentionally over-specific (including .dataTables_wrapper and a doubled .paginate_button class) to beat the legacy global rule in `static/css/components/compare-table.css` which paints hover digits grey in dark theme. Without this, the digits would inherit `#939191`. */ .dataTables_wrapper .ts-table-footer .paginate_button.paginate_button:hover, .dataTables_wrapper .ts-table-footer .paginate_button.paginate_button.current:hover { background-color: var(--blue) !important; color: var(--white) !important; box-shadow: none !important; } .dark .ts-table-footer .paginate_button { background: #18181B !important; color: #656565 !important; } .dark .ts-table-footer .paginate_button.current { background: #FFF !important; color: #000 !important; } /* CDN datatables-net CSS contains .dataTables_wrapper .dataTables_paginate .paginate_button { color: #333 !important; } with specificity (0,3,0). The base `.ts-table-footer .paginate_button` rule above is only (0,2,0), so even with `!important` the CDN wins on the `color` property and digits render dark grey instead of #656565. These follow-up rules use selectors at (0,4,0)/(0,5,0)/(0,6,0) to reclaim every state without changing the legible base block. */ .dataTables_wrapper .ts-table-footer .paginate_button.paginate_button { color: #656565 !important; } .dataTables_wrapper .ts-table-footer .paginate_button.paginate_button.current { color: var(--white) !important; } .dark .dataTables_wrapper .ts-table-footer .paginate_button.paginate_button { color: #656565 !important; } .dark .dataTables_wrapper .ts-table-footer .paginate_button.paginate_button.current { color: #000 !important; } .dark .dataTables_wrapper .ts-table-footer .paginate_button.paginate_button:hover, .dark .dataTables_wrapper .ts-table-footer .paginate_button.paginate_button.current:hover { background-color: #FFF !important; color: #000 !important; } .ts-table-footer .dataTables_length { display: flex !important; align-items: center; gap: 8px; color: #656565; font-family: 'Roboto', sans-serif; font-size: 14px; margin: 0 !important; } .dark .ts-table-footer .dataTables_length { color: #9E9E9E; } .ts-table-footer .dataTables_length select { background-color: #fff !important; border: 1px solid #d7d7d7 !important; border-radius: 4px !important; height: 40px !important; width: 64px !important; padding: 0 28px 0 12px !important; font-family: 'Roboto', sans-serif !important; font-size: 14px !important; color: #656565 !important; margin-right: 8px; appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;utf8,') !important; background-repeat: no-repeat !important; background-position: right 8px center !important; cursor: pointer; } /* Kill the browser-default focus ring (blue outline + box-shadow) on the length-menu select. Without this, clicking the dropdown leaves a stuck blue/white border in both themes. */ .ts-table-footer .dataTables_length select:focus, .ts-table-footer .dataTables_length select:focus-visible, .ts-table-footer .dataTables_length select:active { outline: none !important; box-shadow: none !important; border-color: #d7d7d7 !important; } .dark .ts-table-footer .dataTables_length select { background-color: #27272A !important; border: 1px solid #484848 !important; color: #FFF !important; background-image: url('data:image/svg+xml;utf8,') !important; } .dark .ts-table-footer .dataTables_length select:focus, .dark .ts-table-footer .dataTables_length select:focus-visible, .dark .ts-table-footer .dataTables_length select:active { outline: none !important; box-shadow: none !important; border-color: #484848 !important; } .ts-table-footer .dataTables_length .results-label { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; color: #656565; } .dark .ts-table-footer .dataTables_length .results-label { color: var(--Neutral-Gray-2, #656565); } /* Pagination arrows. Implemented as SVG background-images so the arrow color can be swapped on hover/disabled states without DOM changes. The text content of the buttons is hidden via `font-size: 0` because DataTables fills the buttons with labels even when `language.paginate` is empty. The four states per arrow are: default / disabled / hover (and the dark-theme equivalents). Hover variants make the arrow contrast with the hover background (white in light theme, dark in dark theme). */ .ts-table-footer .paginate_button.previous, .ts-table-footer .paginate_button.next { font-size: 0 !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 7.41px 12px !important; } /* Kill the legacy chevron pseudo-elements painted by tables.css. Without this, every prev/next button shows two arrows on top of each other: the SVG background-image above and the legacy CSS-border chevron below. Mirrors the same defensive rule from smart_followers.css line 354. */ .ts-table-footer .paginate_button::before, .ts-table-footer .paginate_button::after, .ts-table-footer .paginate_button:hover::before, .ts-table-footer .paginate_button:hover::after { display: none !important; content: none !important; } .ts-table-footer .paginate_button.previous { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M7.41 10.58L2.83 6L7.41 1.41L6 0L0 6L6 12L7.41 10.58Z' fill='%23484848'/%3E%3C/svg%3E") !important; } .ts-table-footer .paginate_button.previous.disabled { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M7.41 10.58L2.83 6L7.41 1.41L6 0L0 6L6 12L7.41 10.58Z' fill='%23D7D7D7'/%3E%3C/svg%3E") !important; } .ts-table-footer .paginate_button.next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M0 10.58L4.58 6L0 1.41L1.41 0L7.41 6L1.41 12L0 10.58Z' fill='%23484848'/%3E%3C/svg%3E") !important; } .ts-table-footer .paginate_button.next.disabled { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M0 10.58L4.58 6L0 1.41L1.41 0L7.41 6L1.41 12L0 10.58Z' fill='%23D7D7D7'/%3E%3C/svg%3E") !important; } /* Light-theme hover: white arrow on the blue hover background. */ .dataTables_wrapper .ts-table-footer .paginate_button.previous.paginate_button:hover:not(.disabled) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M7.41 10.58L2.83 6L7.41 1.41L6 0L0 6L6 12L7.41 10.58Z' fill='%23FFFFFF'/%3E%3C/svg%3E") !important; } .dataTables_wrapper .ts-table-footer .paginate_button.next.paginate_button:hover:not(.disabled) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M0 10.58L4.58 6L0 1.41L1.41 0L7.41 6L1.41 12L0 10.58Z' fill='%23FFFFFF'/%3E%3C/svg%3E") !important; } /* Dark theme: brighter arrows by default, very pale when disabled. */ .dark .ts-table-footer .paginate_button.previous { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M7.41 10.58L2.83 6L7.41 1.41L6 0L0 6L6 12L7.41 10.58Z' fill='%23D7D7D7'/%3E%3C/svg%3E") !important; } .dark .ts-table-footer .paginate_button.previous.disabled { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M7.41 10.58L2.83 6L7.41 1.41L6 0L0 6L6 12L7.41 10.58Z' fill='%23656565'/%3E%3C/svg%3E") !important; } .dark .ts-table-footer .paginate_button.next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M0 10.58L4.58 6L0 1.41L1.41 0L7.41 6L1.41 12L0 10.58Z' fill='%23D7D7D7'/%3E%3C/svg%3E") !important; } .dark .ts-table-footer .paginate_button.next.disabled { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M0 10.58L4.58 6L0 1.41L1.41 0L7.41 6L1.41 12L0 10.58Z' fill='%23656565'/%3E%3C/svg%3E") !important; } /* Dark-theme hover: black arrow on the white hover background. */ .dark .dataTables_wrapper .ts-table-footer .paginate_button.previous.paginate_button:hover:not(.disabled) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M7.41 10.58L2.83 6L7.41 1.41L6 0L0 6L6 12L7.41 10.58Z' fill='%23000000'/%3E%3C/svg%3E") !important; } .dark .dataTables_wrapper .ts-table-footer .paginate_button.next.paginate_button:hover:not(.disabled) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M0 10.58L4.58 6L0 1.41L1.41 0L7.41 6L1.41 12L0 10.58Z' fill='%23000000'/%3E%3C/svg%3E") !important; } /* ----------------------------------------------------------------------------- * Premium blur overlay * * Visual gating for non-premium users. The actual data restriction happens * server-side; these styles only blur the rows the server *did* send and * make the upgrade overlay (rendered separately by {% upgrade_button %}) * sit on top of them. * -------------------------------------------------------------------------- */ .ts-table.ts-table-unauthorized tbody tr { cursor: default; } .ts-table-blurred-row { filter: blur(18px); pointer-events: none; user-select: none; } /* Premium overlay shown over the blurred trailing rows of the table. Default `display: none`; the component sets `display: flex` inline when the overlay needs to be visible, so the flex centering kicks in only when the overlay is actually shown. */ .ts-table-premium-overlay { display: none; position: absolute; left: 0; right: 0; z-index: 100; align-items: center; justify-content: center; pointer-events: auto; } /* The {% upgrade_button %} templatetag wraps its content in `.upgrade-to-pro-wrap`. We let it size itself to its content and rely on the parent's flex centering to put it in the middle of the blur area. */ .ts-table-premium-overlay .upgrade-to-pro-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; }