/* ===================================================================== LINESTAR DARK MODE LAYER fantasysportsco.darkmode.css Night-navy dark theme for the app pages rendered through Shared/NewLayoutWrapper.cshtml. Activated when FSCTheme (fantasysportsco.theme.js) sets data-fsc-theme="dark" on - the "auto" preference is pre-resolved, so this is the only selector hook in the file. All colors come from the --fsc-* tokens defined in fantasysportsco.theme.css. LOAD ORDER: must load AFTER fantasysportsco.chat.css (the --chat-* token remap ties its :root on specificity) and after the other wrapper stylesheets. Page CSS that loads later is still overridden because every rule here carries the +1 attribute specificity. Sections: 1) page chrome (newlayout) 2) projections page 3) filters + shared popups 4) chat + player popup ===================================================================== */ /* ===================================================================== DARK MODE OVERRIDES - fantasysportsco.newlayout.css Night-navy skin for the shared page chrome (NewLayoutWrapper.cshtml). Every selector is scoped under [data-fsc-theme="dark"] (set on by FSCTheme). Tokens come from fantasysportsco.theme.css. ===================================================================== */ /* ---- fscPageArea ---- */ [data-fsc-theme="dark"] .fscPageArea { background: var(--fsc-bg); color: var(--fsc-text); } /* ---- mainSportBanner + sport selectors ---- */ [data-fsc-theme="dark"] .mainSportBanner { background-color: var(--fsc-nav); } [data-fsc-theme="dark"] .sportSelectorContainer { scrollbar-color: var(--fsc-line-strong) transparent; } [data-fsc-theme="dark"] a.sportSelector > span { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] a.sportSelector:hover { box-shadow: inset 0px -3px 0px var(--fsc-gold); } [data-fsc-theme="dark"] a.sportSelector:hover > span { color: var(--fsc-text); } [data-fsc-theme="dark"] a.sportSelector.selected { box-shadow: inset 0px -3px 0px var(--fsc-gold); } [data-fsc-theme="dark"] a.newSportSelected { box-shadow: inset 0px -3px 0px var(--fsc-gold); } [data-fsc-theme="dark"] a.newSportSelected > span { color: var(--fsc-text); } /* ---- selectorsArea (site / slate / period column) ---- */ [data-fsc-theme="dark"] .selectorsArea { background: var(--fsc-panel); box-shadow: 0px 0px 0px var(--fsc-line), inset -1px 0px 0px var(--fsc-line); } [data-fsc-theme="dark"] .upperSelectorArea { box-shadow: 0px 1px 0px var(--fsc-line), inset 0px 0px 0px var(--fsc-line); } [data-fsc-theme="dark"] .gameSelector:hover, [data-fsc-theme="dark"] .leaderSelector:hover { box-shadow: inset 0px -3px 0px var(--fsc-blue); } /* ---- siteAndGameBar ---- */ [data-fsc-theme="dark"] .siteAndGameBar { background: var(--fsc-panel); box-shadow: 0px 0px 0px var(--fsc-line), inset 0px 0px 0px var(--fsc-line); } [data-fsc-theme="dark"] .siteSelector { box-shadow: 0px 0px 0px var(--fsc-line), inset -1px 0px 0px var(--fsc-line); } [data-fsc-theme="dark"] .siteSelector:hover, [data-fsc-theme="dark"] .periodSelector:hover, [data-fsc-theme="dark"] .slateSelector:hover { background-color: var(--fsc-panel-2); } /* site selector dropdown */ [data-fsc-theme="dark"] .siteSelectorMenu { box-shadow: 0 0 0 1px var(--fsc-line), var(--fsc-shadow-lg); } [data-fsc-theme="dark"] .siteSelectorMenuItem { background: var(--fsc-panel); } [data-fsc-theme="dark"] .siteSelectorMenuItemNotSupported { background: var(--fsc-panel); color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .siteSelectorMenuItem > span { color: var(--fsc-text); } [data-fsc-theme="dark"] .siteSelectorMenuItem:hover { background: var(--fsc-blue-soft); } [data-fsc-theme="dark"] .siteSelectorMenuItem:hover > span { color: var(--fsc-blue); } /* ---- period selector ---- */ [data-fsc-theme="dark"] .periodMenu { box-shadow: 0 0 0 1px var(--fsc-line), var(--fsc-shadow-lg); } [data-fsc-theme="dark"] .periodInnerBlock { background: var(--fsc-panel); border-color: var(--fsc-line); } [data-fsc-theme="dark"] .periodInnerBlock:hover { background: var(--fsc-blue-soft); } [data-fsc-theme="dark"] .periodInnerBlock:hover > .periodName, [data-fsc-theme="dark"] .periodInnerBlock:hover > .periodInfo { color: var(--fsc-blue); } [data-fsc-theme="dark"] .periodName { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .periodInfo { color: var(--fsc-text-soft); } /* ---- slate selector + slate popup ---- */ [data-fsc-theme="dark"] .popupSlateMain { color: var(--fsc-text); } [data-fsc-theme="dark"] .popupSlateTitle { color: var(--fsc-text); border-bottom-color: var(--fsc-line); } [data-fsc-theme="dark"] .slateInnerBlock { background: var(--fsc-panel); border-color: var(--fsc-line); } [data-fsc-theme="dark"] .slateInnerBlockSelected { background: var(--fsc-blue); border-color: var(--fsc-blue); } [data-fsc-theme="dark"] .slateInnerBlockSelected > div { color: var(--fsc-text-invert) !important; } [data-fsc-theme="dark"] .slateInnerBlock:hover { background: var(--fsc-blue); } [data-fsc-theme="dark"] .slateInnerBlock:hover > div { color: var(--fsc-text-invert); } [data-fsc-theme="dark"] .blueCircle { background-color: var(--fsc-blue); } [data-fsc-theme="dark"] .button_chatLiveText { background: var(--fsc-red-soft) !important; color: var(--fsc-red) !important; } [data-fsc-theme="dark"] .slateMenu { box-shadow: 0 0 0 1px var(--fsc-line), var(--fsc-shadow-lg); } [data-fsc-theme="dark"] .slateName { color: var(--fsc-text); } [data-fsc-theme="dark"] .slateInfo, [data-fsc-theme="dark"] .slateStatus, [data-fsc-theme="dark"] .slateStatusSelected { color: var(--fsc-text-soft); } /* ---- gameList / gameBox ---- */ [data-fsc-theme="dark"] .gameList { scrollbar-color: var(--fsc-line-strong) transparent; } [data-fsc-theme="dark"] .gameBox { background: var(--fsc-panel); box-shadow: inset -1px 0px 0px var(--fsc-line); } [data-fsc-theme="dark"] .gameBox:hover { background: var(--fsc-panel-2); } [data-fsc-theme="dark"] .teamName { color: var(--fsc-text); } [data-fsc-theme="dark"] .teamNameHidden { color: var(--fsc-text-faint) !important; } [data-fsc-theme="dark"] .teamScore { color: var(--fsc-text); } [data-fsc-theme="dark"] .teamRecord { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .vegasTotals, [data-fsc-theme="dark"] .vegasMoneyLine { color: var(--fsc-text); } [data-fsc-theme="dark"] .vegasTotals > span { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .gameVegasSpread { color: var(--fsc-text); } [data-fsc-theme="dark"] .gameTimeArea { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .weatherLight { color: var(--fsc-text-soft); } /* ---- mainContentArea ---- */ [data-fsc-theme="dark"] .mainContentArea { background: var(--fsc-bg); } /* ---- pageSelectorArea + menuItem ---- */ [data-fsc-theme="dark"] .pageSelectorArea { background: var(--fsc-panel); border-top-color: var(--fsc-line); border-bottom-color: var(--fsc-line); scrollbar-color: var(--fsc-line-strong) transparent; } [data-fsc-theme="dark"] .menuItem { color: var(--fsc-text); border-bottom-color: var(--fsc-panel); } [data-fsc-theme="dark"] .menuItem:hover { border-bottom-color: var(--fsc-red); color: var(--fsc-red); } [data-fsc-theme="dark"] .menuItemSelected { color: var(--fsc-red); border-bottom-color: var(--fsc-red); } /* NOTE: .menuItem > img icons are mid-gray (one green) SVGs that stay legible on navy panels - intentionally NOT inverted, so the source red hover/selected filters keep working untouched. */ [data-fsc-theme="dark"] .greenMenuItem { background: var(--fsc-green-soft); color: var(--fsc-green); } [data-fsc-theme="dark"] .bannerTextTitle, [data-fsc-theme="dark"] .bannerTextDesc { color: var(--fsc-text); } [data-fsc-theme="dark"] .menuItem:hover > .bannerTextDesc { color: var(--fsc-red); } [data-fsc-theme="dark"] .menuItemCount { color: var(--fsc-text-soft); background: var(--fsc-panel-2); } [data-fsc-theme="dark"] .menuItemCategory { background: var(--fsc-line); } [data-fsc-theme="dark"] .dropDownChevron { background-color: var(--fsc-panel-2); } /* source resets the chevron chip to transparent on small screens - re-stated because the prefixed rule above would otherwise win */ @media only screen and (max-device-width: 800px) { [data-fsc-theme="dark"] .dropDownChevron { background-color: transparent; } } /* ---- mediaSlider / chatSlider ---- */ [data-fsc-theme="dark"] .mediaSlider { background: var(--fsc-panel); box-shadow: 0 0 0 1px var(--fsc-line), var(--fsc-shadow-lg); } [data-fsc-theme="dark"] .mediaSliderToggle { background: var(--fsc-panel); color: var(--fsc-text); border-top-color: var(--fsc-line); border-left-color: var(--fsc-line); border-right-color: var(--fsc-line); } [data-fsc-theme="dark"] .mediaSliderToggle:hover { background: var(--fsc-panel-2); } [data-fsc-theme="dark"] .chatSlider { background: var(--fsc-panel); box-shadow: 0 0 0 1px var(--fsc-line), var(--fsc-shadow); } [data-fsc-theme="dark"] .chatSlider:hover { box-shadow: 0 0 0 1px var(--fsc-line-strong), var(--fsc-shadow-lg); } [data-fsc-theme="dark"] .chatSlider > span { color: var(--fsc-text); } /* ---- nonCurrentPeriodBanner ---- */ [data-fsc-theme="dark"] .nonCurrentPeriodBanner { color: var(--fsc-text); background: var(--fsc-gold-soft); box-shadow: inset 0px -1px 0px var(--fsc-line); } /* ---- matchup tables ---- */ [data-fsc-theme="dark"] .matchupTable { background: var(--fsc-panel); } [data-fsc-theme="dark"] .matchupTableSel { border-color: var(--fsc-blue) !important; } [data-fsc-theme="dark"] .matchupTableTitle { color: var(--fsc-text); background: var(--fsc-panel-2); } [data-fsc-theme="dark"] .matchupTableSel > .matchupTableTitle { background: var(--fsc-blue) !important; color: var(--fsc-text-invert); } [data-fsc-theme="dark"] .matchupTableRow { border-bottom-color: var(--fsc-line); } [data-fsc-theme="dark"] .matchupTableRow:nth-child(odd) { background: var(--fsc-panel); } [data-fsc-theme="dark"] .matchupTableName { color: var(--fsc-text); } [data-fsc-theme="dark"] .matchupTableValue { color: var(--fsc-text); background: var(--fsc-panel-2); } [data-fsc-theme="dark"] .matchupRankundefined, [data-fsc-theme="dark"] .matchupRank0 { color: var(--fsc-text) !important; } [data-fsc-theme="dark"] .matchupRank1 { background: var(--fsc-green) !important; color: var(--fsc-text-invert) !important; } [data-fsc-theme="dark"] .matchupRank2 { background: var(--fsc-green-soft) !important; color: var(--fsc-green) !important; } [data-fsc-theme="dark"] .matchupRank3 { background: var(--fsc-gold-soft) !important; color: var(--fsc-gold) !important; } [data-fsc-theme="dark"] .matchupRank4 { background: var(--fsc-red-soft) !important; color: var(--fsc-red) !important; } [data-fsc-theme="dark"] .matchupTableMini { background: var(--fsc-panel); } [data-fsc-theme="dark"] .matchupTableMiniSel { border-color: var(--fsc-blue) !important; } [data-fsc-theme="dark"] .matchupTableMiniRowSel { border-top-color: var(--fsc-blue) !important; border-bottom-color: var(--fsc-blue) !important; } [data-fsc-theme="dark"] .matchupTableMiniTitle { color: var(--fsc-text); background: var(--fsc-panel-2); } [data-fsc-theme="dark"] .matchupTableMiniSel > .matchupTableMiniTitle { background: var(--fsc-blue) !important; color: var(--fsc-text-invert); } [data-fsc-theme="dark"] .matchupTableMiniName { color: var(--fsc-text); } [data-fsc-theme="dark"] .matchupTableMiniValue { color: var(--fsc-text); } /* ---- alertNotification ---- */ [data-fsc-theme="dark"] .alertNotification { background: var(--fsc-blue-soft); border-color: rgba(77, 141, 255, .35); color: var(--fsc-blue); } [data-fsc-theme="dark"] .alertNotification:hover { background: rgba(77, 141, 255, .28); } /* ---- newPremiumBanner ---- */ [data-fsc-theme="dark"] .newPremiumBanner { background: var(--fsc-panel); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .5); } [data-fsc-theme="dark"] a.newPremiumBannerButton { background: var(--fsc-green); color: var(--fsc-text-invert) !important; } [data-fsc-theme="dark"] a.newPremiumBannerButton:hover { background: var(--fsc-green); filter: brightness(1.12); } [data-fsc-theme="dark"] .newPremiumBannerHelp { color: var(--fsc-blue); } [data-fsc-theme="dark"] .newPremiumBannerTitle, [data-fsc-theme="dark"] .newPremiumBannerTextNormal { color: var(--fsc-text); } /* ---- genericTable ---- */ [data-fsc-theme="dark"] .genericTable > thead > tr { background: var(--fsc-panel-2); border-color: var(--fsc-line); } [data-fsc-theme="dark"] .genericTable > thead > tr > th { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .genericTable > tbody > tr { border-bottom-color: var(--fsc-line); border-left-color: var(--fsc-line); border-right-color: var(--fsc-line); background-color: var(--fsc-panel); } [data-fsc-theme="dark"] .genericTable > tbody > tr > td { color: var(--fsc-text); border-right-color: var(--fsc-line); } /* sorted-column tint must outrank the prefixed th rule above */ [data-fsc-theme="dark"] .genericTable > thead > tr > .sortAsc, [data-fsc-theme="dark"] .genericTable > thead > tr > .sortDesc { color: var(--fsc-blue); } [data-fsc-theme="dark"] .genericTable > thead > tr > th[data-tool-tip]::before { background-color: var(--fsc-panel-2); color: var(--fsc-text) !important; box-shadow: 0 0 0 1px var(--fsc-line), var(--fsc-shadow); } /* ---- updates list / value tints ---- */ [data-fsc-theme="dark"] .updateDate { color: var(--fsc-text); } [data-fsc-theme="dark"] .updateList > li { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .greenIsGood { color: var(--fsc-green) !important; background: var(--fsc-green-soft); } [data-fsc-theme="dark"] .redIsBad { color: var(--fsc-danger) !important; background: var(--fsc-danger-soft); } /* ---- goPremiumArea ---- */ [data-fsc-theme="dark"] .goPremiumArea { background: var(--fsc-blue-soft); box-shadow: inset 0 0 0 1px var(--fsc-line); } [data-fsc-theme="dark"] .goPremiumAreaCircle { background: var(--fsc-text); } [data-fsc-theme="dark"] a.goPremiumButtonSec { background: transparent; color: var(--fsc-blue); border-color: var(--fsc-blue); } [data-fsc-theme="dark"] a.goPremiumButtonMain { background: var(--fsc-blue); color: var(--fsc-text-invert); } [data-fsc-theme="dark"] .goPremiumAreaMain, [data-fsc-theme="dark"] .goPremiumAreaSec { color: var(--fsc-text); } /* ---- bannerContentItems ---- */ [data-fsc-theme="dark"] .bannerContentItem { background-color: var(--fsc-panel); } [data-fsc-theme="dark"] .bannerContentItem:hover { background-color: var(--fsc-panel-2); } [data-fsc-theme="dark"] .bannerContentItemTitle { color: var(--fsc-text); } [data-fsc-theme="dark"] .bannerContentItem:hover > .bannerContentItemText > .bannerContentItemTitle { color: var(--fsc-blue); } [data-fsc-theme="dark"] .bannerContentItemDesc { color: var(--fsc-text); } /* ---- mobile chat / games popup buttons ---- */ [data-fsc-theme="dark"] .chatMobileButton { border-color: var(--fsc-line); } [data-fsc-theme="dark"] .chatMobileButton:hover { background-color: var(--fsc-panel-2); } [data-fsc-theme="dark"] .gamesPopupButton { border-color: var(--fsc-line); } [data-fsc-theme="dark"] .gamesPopupButton:hover { background-color: var(--fsc-panel-2); } /* ---- fscMenuThemeToggle ---- */ [data-fsc-theme="dark"] .fscMenuThemeToggle { border-left-color: var(--fsc-line); color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .fscMenuThemeToggle:hover { color: var(--fsc-red); } /* ===================================================================== DARK MODE OVERRIDES - fantasysportsco.projections_new.css Night-navy theme layer. Every rule is scoped to [data-fsc-theme="dark"] (set on by FSCTheme). Load AFTER the source stylesheet. Colors/borders/shadows/filters only - zero layout changes. ===================================================================== */ /* ---- tooltips (th[data-tool-tip]) ---- */ [data-fsc-theme="dark"] th[data-tool-tip]::before { background-color: var(--fsc-panel-2); color: var(--fsc-text) !important; box-shadow: var(--fsc-shadow); } /* ---- module chrome / empty state ---- */ [data-fsc-theme="dark"] .emptyMessage { background: var(--fsc-panel); color: var(--fsc-text); } /* ---- projections table: header ---- */ [data-fsc-theme="dark"] .projectionsView { color: var(--fsc-text); /* inheritable baseline for cells without explicit color */ } [data-fsc-theme="dark"] .projectionsView > thead > tr { background: var(--fsc-panel-2); color: var(--fsc-text); } /* th needs a DIRECT color: the global skin.css rule "TH, TD { color: #666666 }" targets the element itself, and a direct element rule always beats color inherited from the tr above. Covers the sticky header row AND the repeated header cells in body rows. */ [data-fsc-theme="dark"] .projectionsView > thead > tr > th, [data-fsc-theme="dark"] .projectionsView > tbody > tr > th { color: var(--fsc-text); /* .sortAsc/.sortDesc classes still win */ } [data-fsc-theme="dark"] .headerCollumnRow { background: var(--fsc-panel-2); border-color: var(--fsc-line); } [data-fsc-theme="dark"] .colBorderLeft { border-left-color: var(--fsc-line-strong) !important; } [data-fsc-theme="dark"] .colBorderRight { border-right-color: var(--fsc-line-strong) !important; } [data-fsc-theme="dark"] .playerTableHeader { background: var(--fsc-panel-2); } /* ---- projections table: player rows ---- */ [data-fsc-theme="dark"] .playerCardRow { background-color: var(--fsc-panel); border-bottom-color: var(--fsc-line); border-left-color: var(--fsc-line); border-right-color: var(--fsc-line); } [data-fsc-theme="dark"] .playerCardRow td { color: var(--fsc-text); border-right-color: var(--fsc-line); } [data-fsc-theme="dark"] .playerCardRowExcluded { background-color: var(--fsc-danger-soft); } [data-fsc-theme="dark"] .playerCardRowLiked { border-left-color: var(--fsc-blue); } [data-fsc-theme="dark"] .playerCardRowLocked { border-left-color: var(--fsc-green); background-color: var(--fsc-green-soft); } /* ---- position chips ---- */ [data-fsc-theme="dark"] .playerPosBackground { background-color: var(--fsc-blue); color: var(--fsc-text-invert); } [data-fsc-theme="dark"] .playerPos { color: var(--fsc-text); } /* ---- checkbox / like / lock / expand columns ---- checkbox svgs are white-filled: invert+hue-rotate yields a dark box and keeps the blue check hue. expand chevron (#9CA3AF) brightened the same way; its hover/checked states only change transform so the filter holds. thumbup_gray / lock pngs are mid-gray or colored: left untouched. */ [data-fsc-theme="dark"] .checkbox__col label::before { filter: invert(.88) hue-rotate(180deg); } [data-fsc-theme="dark"] .expand__col label::before { filter: invert(.88) hue-rotate(180deg); } [data-fsc-theme="dark"] .playerCardRow .like__col { color: var(--fsc-text-soft); /* like counts are data, keep readable */ } [data-fsc-theme="dark"] #thFilterColAll { color: var(--fsc-blue); } /* ---- player profile cells ---- */ [data-fsc-theme="dark"] .playername { color: var(--fsc-text); } [data-fsc-theme="dark"] .playerTeam { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .playerHeadShot { background: var(--fsc-panel-2); } [data-fsc-theme="dark"] .playerCardRow > .pos__col { border-left-color: var(--fsc-line); } /* ---- other column styling / cell hovers ---- */ [data-fsc-theme="dark"] .alert__colBody:hover { background: var(--fsc-line); } [data-fsc-theme="dark"] .sicScoreCell:hover { background: var(--fsc-line); } [data-fsc-theme="dark"] .leftBorderCol { border-left-color: var(--fsc-line-strong); } [data-fsc-theme="dark"] .rightBorderCol { border-right-color: var(--fsc-line-strong) !important; } [data-fsc-theme="dark"] .proj__col > input { background: var(--fsc-panel-2); border-color: var(--fsc-line-strong); color: var(--fsc-text); } [data-fsc-theme="dark"] .hiddenProj { background: var(--fsc-panel-2); border-color: var(--fsc-line-strong); color: var(--fsc-text); } /* ---- matchup strip ---- The projections matchup column now renders averaged single-color blocks (.matchupEleAvg) whose background is set inline by getPlayerMatchupDataAll from a dark-aware palette, so it needs no override here. The .defrag0-4 pastel slivers remain for other/legacy matchup views and stay light. */ [data-fsc-theme="dark"] .matchupEleBackup { border-color: var(--fsc-line-strong); } [data-fsc-theme="dark"] .matchupEle { border-color: var(--fsc-line-strong); } [data-fsc-theme="dark"] .matchupEle:hover { border-color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .matchupPopup { background: var(--fsc-panel-2); color: var(--fsc-text); box-shadow: var(--fsc-shadow-lg); } /* ---- filters row ---- */ [data-fsc-theme="dark"] .dropDownControl { background: var(--fsc-panel-2); color: var(--fsc-text); } [data-fsc-theme="dark"] .playerChatIcon { filter: invert(.88) hue-rotate(180deg); /* hover swaps to the blue svg; hue-rotate keeps it blue */ } [data-fsc-theme="dark"] .chat__col:hover { color: var(--fsc-blue); } [data-fsc-theme="dark"] .chat__col_active { background-color: var(--fsc-blue-soft) !important; color: var(--fsc-blue) !important; } [data-fsc-theme="dark"] .tutorial { background: var(--fsc-blue-soft); border-color: rgba(77, 141, 255, .35); color: var(--fsc-text); } [data-fsc-theme="dark"] .tutorial > span { color: var(--fsc-blue); } [data-fsc-theme="dark"] .updatedTime { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] #refreshSalariesAlert { background: var(--fsc-blue-soft); border-color: rgba(77, 141, 255, .35); color: var(--fsc-blue); } [data-fsc-theme="dark"] #refreshSalariesAlert:hover { background: rgba(77, 141, 255, .30); } [data-fsc-theme="dark"] .activeFilters { background: var(--fsc-blue-soft); border-color: rgba(77, 141, 255, .35); color: var(--fsc-blue); } [data-fsc-theme="dark"] #activeFilterClear { color: var(--fsc-blue); } [data-fsc-theme="dark"] .activeFilters:hover { border-color: var(--fsc-blue); color: var(--fsc-text); } /* ---- value coloring + sort indicators ---- */ [data-fsc-theme="dark"] .cellGreen { color: var(--fsc-green) !important; background: var(--fsc-green-soft); } [data-fsc-theme="dark"] .cellRed { color: var(--fsc-danger) !important; background: var(--fsc-danger-soft); } [data-fsc-theme="dark"] .sortDesc { color: var(--fsc-blue); } [data-fsc-theme="dark"] .sortAsc { color: var(--fsc-blue); } /* ---- expanded player row ---- */ [data-fsc-theme="dark"] .playerExtraRow td { background: var(--fsc-panel); color: var(--fsc-text); } [data-fsc-theme="dark"] .playerChartCell { background: var(--fsc-panel); } [data-fsc-theme="dark"] .playerAlertArea { border-left-color: var(--fsc-line); } [data-fsc-theme="dark"] .playerMatchupArea { border-left-color: var(--fsc-line); } [data-fsc-theme="dark"] .playerAlertCell { border-left-color: var(--fsc-line); } [data-fsc-theme="dark"] .playerMatchupsCell { border-left-color: var(--fsc-line); } /* ---- subscribe / errors / loading ---- */ [data-fsc-theme="dark"] #rowSubscribe { color: var(--fsc-text); background: var(--fsc-panel); } [data-fsc-theme="dark"] .noSalariesErrorMessage { color: var(--fsc-text); } [data-fsc-theme="dark"] .projsubscribe { background: var(--fsc-nav); color: var(--fsc-text); } [data-fsc-theme="dark"] .playerLoadAnim { color: var(--fsc-gold); } /* ---- popout panel ---- */ [data-fsc-theme="dark"] .popoutpanel { background: var(--fsc-panel-2); color: var(--fsc-text); box-shadow: var(--fsc-shadow-lg); color-scheme: dark; } [data-fsc-theme="dark"] .popoutTitle { color: var(--fsc-text); } [data-fsc-theme="dark"] .popoutClose { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .popoutClose:hover { color: var(--fsc-text); } [data-fsc-theme="dark"] .popoutMid { color: var(--fsc-text-soft); } /* ---- toolbar icon buttons (gray #6B7280 svgs -> lightened) ---- .scoringHot / .scoringCold keep their own color filters - untouched. */ [data-fsc-theme="dark"] .button_filters, [data-fsc-theme="dark"] .row_collapse, [data-fsc-theme="dark"] .row_expand, [data-fsc-theme="dark"] .button_eye, [data-fsc-theme="dark"] .button_eye_toggled, [data-fsc-theme="dark"] .button_settings, [data-fsc-theme="dark"] .button_stacker { filter: invert(.88) hue-rotate(180deg); } /* ---- chart period scrollbars ---- */ [data-fsc-theme="dark"] .fscchartPeriods::-webkit-scrollbar-track { background: var(--fsc-panel); } [data-fsc-theme="dark"] .fscchartPeriods::-webkit-scrollbar-thumb { background-color: var(--fsc-line-strong); } /* ---- big buttons / menu pills ---- */ [data-fsc-theme="dark"] .largeWhiteButton { background-color: var(--fsc-panel-2); color: var(--fsc-text); } [data-fsc-theme="dark"] .largeWhiteButton:hover { background-color: var(--fsc-line); } [data-fsc-theme="dark"] #menuOptimizer { background-color: var(--fsc-green); color: var(--fsc-text-invert); } [data-fsc-theme="dark"] #menuCountSavedLineups { background-color: var(--fsc-blue); color: var(--fsc-text-invert); } /* ---- lineup builder slideout: shell ---- */ [data-fsc-theme="dark"] .lineupBuiderSlideoutMin { background: var(--fsc-panel); color: var(--fsc-text); box-shadow: var(--fsc-shadow-lg); } [data-fsc-theme="dark"] .lineupBuiderSlideoutExp { background: var(--fsc-panel); color: var(--fsc-text); box-shadow: var(--fsc-shadow-lg); color-scheme: dark; accent-color: var(--fsc-blue); } [data-fsc-theme="dark"] .lineupBuilderContent { background: var(--fsc-panel); } [data-fsc-theme="dark"] .lineupBuilderTitle { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupBuilderCollapsed { background-color: var(--fsc-blue); color: var(--fsc-text-invert); box-shadow: var(--fsc-shadow); } [data-fsc-theme="dark"] .lineupBuilderCollapsed:hover { color: var(--fsc-text-invert); box-shadow: none; } /* white "expand" glyph on the blue OPTIMIZER tab -> dark, to match the inverted tab text (deliberate re-statement of the existing filter) */ [data-fsc-theme="dark"] .epandImg { filter: brightness(0); } [data-fsc-theme="dark"] .lineupBuilderExpanded { filter: invert(.88) hue-rotate(180deg); /* gray collapse.svg; hover #aaa bg self-inverts to a dark wash */ } /* ---- lineup builder: tabs ---- */ [data-fsc-theme="dark"] .linupeBuilderTabs { box-shadow: inset 0px -1px 0px var(--fsc-line); } [data-fsc-theme="dark"] .lineupTabTitle { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .lineupTabTitle:hover { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupTabTitleActive { color: var(--fsc-text); border-bottom-color: var(--fsc-blue); } /* ---- lineup builder: mini slots ---- */ [data-fsc-theme="dark"] .lineupBuilderSlotMiniLiked { background: var(--fsc-panel); } [data-fsc-theme="dark"] .lineupBuilderSlotMini { background: var(--fsc-panel); } [data-fsc-theme="dark"] .lineupBuilderSlotMini:hover > .lineupBuilderSlotMiniEmpty { border-color: var(--fsc-blue); color: var(--fsc-blue) !important; } [data-fsc-theme="dark"] .lineupBuilderSlotMini:hover > .lineupBuilderSlotPlayer { border-color: var(--fsc-blue); } [data-fsc-theme="dark"] .lineupBuilderSlotMiniFilledRemove { color: var(--fsc-text-invert); background-color: var(--fsc-red); border-color: var(--fsc-red); } [data-fsc-theme="dark"] .lineupBuilderSlotMiniFilledRemove:hover { background-color: var(--fsc-red); color: var(--fsc-text-invert); } [data-fsc-theme="dark"] .lineupBuilderMiniActive { border-color: var(--fsc-blue); color: var(--fsc-blue) !important; } [data-fsc-theme="dark"] .lineupBuilderMiniPlayerName { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupBuilderSlotMiniEmpty { background-color: var(--fsc-panel-2); color: var(--fsc-text-soft); /* actionable label - faint fails AA */ border-color: var(--fsc-panel-2); } /* ---- lineup builder: full slot rows ---- */ [data-fsc-theme="dark"] .lineupBuilderSlot { background: var(--fsc-panel); border-bottom-color: var(--fsc-line); } [data-fsc-theme="dark"] .lineupBuilderSlotEmpty { color: var(--fsc-text-soft); /* actionable label - faint fails AA */ } [data-fsc-theme="dark"] .lineupBuilderSlotEmpty:hover { color: var(--fsc-text) !important; } [data-fsc-theme="dark"] .lineupBuilderSlotEmptyActive { color: var(--fsc-blue) !important; } [data-fsc-theme="dark"] .lineupBuilderSlotPosModifable:hover > .lineupBuilderSlotPosLabel { filter: drop-shadow(1px 1px 4px var(--fsc-blue)); } [data-fsc-theme="dark"] .lineupBuilderSlotPosModifable > .lineupBuilderSlotPosLabel { background-color: var(--fsc-blue) !important; } [data-fsc-theme="dark"] .lineupBuilderSlotPosPositions { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupBuilderSlotPosLabel { background-color: var(--fsc-blue); color: var(--fsc-text-invert); } [data-fsc-theme="dark"] .lineupBuilderSlotPlayer img { background: var(--fsc-panel-2); } [data-fsc-theme="dark"] .lineupBuilderSlotName { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupBuilderSlotOppTeam { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupBuilderSlotPOwn { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupBuilderSlotSalary { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupBuilderSlotProj { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupBuilderSlotRemove:hover { background-color: var(--fsc-line); } /* ---- lineup builder: summary + liked players ---- */ [data-fsc-theme="dark"] .lineupBuilderSummary { box-shadow: var(--fsc-shadow-sm); } [data-fsc-theme="dark"] .lineupBuilderSummaryVal { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupBuilderSummaryName { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .likedPlayerName { color: var(--fsc-text); } [data-fsc-theme="dark"] .likedPlayerImage > img { background: var(--fsc-panel-2); } /* ---- lineup generator options ---- */ [data-fsc-theme="dark"] .lineGenOption { background: var(--fsc-panel); box-shadow: inset 0px -1px 0px var(--fsc-line); } [data-fsc-theme="dark"] .lineGenOptName { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineGenOptDesc { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .lineGenOptRangeMax { color: var(--fsc-blue); } [data-fsc-theme="dark"] .openSheet { color: var(--fsc-text); } /* ---- team stack picker ---- */ [data-fsc-theme="dark"] .teamStackSelect { background: var(--fsc-panel-2); border-color: var(--fsc-line); } [data-fsc-theme="dark"] .teamStackOption { border-bottom-color: var(--fsc-line); } [data-fsc-theme="dark"] .teamStackOption:hover { background-color: var(--fsc-line); } [data-fsc-theme="dark"] .teamStackName { color: var(--fsc-text); } [data-fsc-theme="dark"] .teamStackImplied { color: var(--fsc-text-soft); } /* ---- builder settings panels ---- */ [data-fsc-theme="dark"] .lineupBuilderMainSettingViewOptions { background: var(--fsc-panel); } [data-fsc-theme="dark"] .filterLink { color: var(--fsc-blue); } [data-fsc-theme="dark"] .lineGenModel { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineGenModel:hover { background-color: var(--fsc-line); } [data-fsc-theme="dark"] .lineupBuilderModelName { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupBuilderModelDesc { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .lineupSettingsPanel { background: var(--fsc-bg); } [data-fsc-theme="dark"] .lineupSettingsPanel > span { background: var(--fsc-panel-2); border-color: var(--fsc-line-strong); color: var(--fsc-text); box-shadow: none; } [data-fsc-theme="dark"] .lineupSettingsPanel > span:hover { border-color: var(--fsc-blue); background: var(--fsc-blue-soft); box-shadow: 0 4px 12px var(--fsc-blue-soft); } [data-fsc-theme="dark"] .lineupSettingsPanelTitle { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .builderOptionActive { border-color: var(--fsc-gold) !important; } [data-fsc-theme="dark"] .optSettingChanged { background-color: var(--fsc-blue-soft) !important; } [data-fsc-theme="dark"] .lineupBuilderBtn { background: var(--fsc-panel-2); color: var(--fsc-text-soft); border-color: var(--fsc-line-strong); } [data-fsc-theme="dark"] .lineupBuilderBtn:hover { background-color: var(--fsc-line); } [data-fsc-theme="dark"] #lineupBuilderOptimizeBtn { background: var(--fsc-green); color: var(--fsc-text-invert); box-shadow: var(--fsc-shadow-sm); } [data-fsc-theme="dark"] #saveLineupBtn { background: var(--fsc-blue); color: var(--fsc-text-invert); box-shadow: var(--fsc-shadow-sm); } [data-fsc-theme="dark"] .lineupBuilderMainSetting { background-color: var(--fsc-panel); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .35), inset 0px -1px 0px var(--fsc-line); } [data-fsc-theme="dark"] .lineupBuilderMainSetting:hover { background-color: var(--fsc-panel-2); } [data-fsc-theme="dark"] .lineupBuilderMainSettingDisabled { background-color: var(--fsc-bg) !important; } [data-fsc-theme="dark"] .lineupBuilderMainSettingTitle { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupBuilderMainSettingSelectedName { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupBuilderMainSettingStack { background-color: var(--fsc-panel-2); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .35), inset 0px -1px 0px var(--fsc-line); } [data-fsc-theme="dark"] .lineupBuilderMainSettingStackDisabled { background-color: var(--fsc-danger-soft) !important; } [data-fsc-theme="dark"] .deleteStackButton { color: var(--fsc-danger); } [data-fsc-theme="dark"] .deleteStackButton:hover { background: var(--fsc-danger-soft); border-color: var(--fsc-danger); } [data-fsc-theme="dark"] .lineupBuilderSettingStackTitle { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupBuilderMainSettingStackDisabled > .lineupBuilderSettingStackTitle { color: var(--fsc-danger) !important; } /* ---- lineup sets ---- */ [data-fsc-theme="dark"] .lineupSetName { color: var(--fsc-text); /* transparent input bg kept from source */ } [data-fsc-theme="dark"] .lineupSetInfo { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .lineupSetExpList { background: var(--fsc-panel); color: var(--fsc-text); border-color: var(--fsc-line); } [data-fsc-theme="dark"] .lineupSetExpTitle { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupSetLineupsList { background: var(--fsc-panel); color: var(--fsc-text); border-color: var(--fsc-line); } [data-fsc-theme="dark"] .lineupSet { background-color: var(--fsc-panel-2); color: var(--fsc-text); border-color: var(--fsc-line); } [data-fsc-theme="dark"] .emptyLineupArea { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupSetBtn { background: var(--fsc-panel-2); border-color: var(--fsc-line-strong); color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .lineupSetBtn:hover { background-color: var(--fsc-line); } [data-fsc-theme="dark"] .lineupSetBtnBlend:hover { /* container is already panel-2; hairline tint gives visible feedback */ background-color: var(--fsc-line) !important; } [data-fsc-theme="dark"] .resetOptionsBtn { background: var(--fsc-danger-soft); border-color: var(--fsc-line); color: var(--fsc-danger); } [data-fsc-theme="dark"] .resetOptionsBtn:hover { background-color: rgba(255, 92, 92, .22); } [data-fsc-theme="dark"] .lineupSetDropDown { background: var(--fsc-panel-2); color: var(--fsc-text); border-color: var(--fsc-line-strong); box-shadow: var(--fsc-shadow); } [data-fsc-theme="dark"] .lineupSetDropDown > a { border-color: var(--fsc-line); color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupSetDropDown > a:hover { background-color: var(--fsc-line); } /* ---- lineup rows ---- */ [data-fsc-theme="dark"] .lineupItem { border-bottom-color: var(--fsc-line); } [data-fsc-theme="dark"] .lineupItemBad { background: var(--fsc-danger-soft); } [data-fsc-theme="dark"] .lineupItemBad > td { background: var(--fsc-danger-soft); } [data-fsc-theme="dark"] .lineupName { color: var(--fsc-text); border-color: transparent; /* matches the near-invisible #F7F7F7 intent */ } [data-fsc-theme="dark"] .lineupDelete { filter: invert(.88) hue-rotate(180deg); /* gray trashcan.svg; hover #ddd bg self-inverts dark */ } [data-fsc-theme="dark"] .lineupMore { color: var(--fsc-text-soft); /* inline SVG uses currentColor now */ } [data-fsc-theme="dark"] .lineupMore:hover { background-color: var(--fsc-line); color: var(--fsc-blue); } /* .lineupItemMore is NOT filtered: .lineupSetDropDown is nested inside it and a filter would invert the whole menu + hijack its positioning. */ [data-fsc-theme="dark"] .lineupItemMore:hover { background-color: var(--fsc-line); } [data-fsc-theme="dark"] td.lineupSetExposurePlayer:hover, [data-fsc-theme="dark"] .teamExpTable tbody tr:not(.lineupItemTeamFiltered):hover > td { background-color: var(--fsc-line); } /* .lineupItemTeamFiltered is now a whole-row highlight styled with --fsc tokens in projections_new.css, so it already adapts to dark - no override needed. */ [data-fsc-theme="dark"] .lineupItemName { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupItemOpp { color: var(--fsc-text); } [data-fsc-theme="dark"] .powerPlayLineSmall { color: var(--fsc-blue); } [data-fsc-theme="dark"] .reqModded { color: var(--fsc-blue) !important; } [data-fsc-theme="dark"] .lineupItemSalary { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupItemOwned { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupItemProj { color: var(--fsc-text); } [data-fsc-theme="dark"] .projModified { border-color: var(--fsc-gold) !important; } [data-fsc-theme="dark"] .lineupItemScored { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupSummaryItemVal { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupSummaryItemName { color: var(--fsc-text-soft); } /* ---- alert / SIC score popups ---- */ [data-fsc-theme="dark"] .playerAlertPopup { background: var(--fsc-panel-2); color: var(--fsc-text); box-shadow: var(--fsc-shadow-lg); } [data-fsc-theme="dark"] .sicScorePopup { background: var(--fsc-panel-2); color: var(--fsc-text); box-shadow: var(--fsc-shadow-lg); } [data-fsc-theme="dark"] .sicScoreNumber { color: var(--fsc-text); } [data-fsc-theme="dark"] .sicScoreNote { color: var(--fsc-text); } [data-fsc-theme="dark"] .sicScoreDetails { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .createStackOptionName { color: var(--fsc-text); } /* ---- sorter dropdown ---- */ [data-fsc-theme="dark"] .sorterBtnOptions { background: var(--fsc-panel-2); color: var(--fsc-text); box-shadow: var(--fsc-shadow-lg); } [data-fsc-theme="dark"] .sorterOption { border-color: var(--fsc-line); } [data-fsc-theme="dark"] .sorterOption:hover { border-color: var(--fsc-line-strong); } [data-fsc-theme="dark"] .sorterOptionText { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .sorterOptionDesc { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .sorterBtnAsc { filter: invert(.88) hue-rotate(180deg); } [data-fsc-theme="dark"] .sorterBtnDesc { filter: invert(.88) hue-rotate(180deg); } /* ---- floating slider buttons ---- */ [data-fsc-theme="dark"] .customSliderRight { background: var(--fsc-blue); color: var(--fsc-text-invert); } [data-fsc-theme="dark"] .customSliderLeft { background: var(--fsc-blue); color: var(--fsc-text-invert); } /* ---- replace / move lineup dialogs ---- */ [data-fsc-theme="dark"] .replaceMessage { color: var(--fsc-danger); } [data-fsc-theme="dark"] .moveLineupTable { border-color: var(--fsc-line-strong); } [data-fsc-theme="dark"] .moveLineupTable > thead > tr > th { background: var(--fsc-panel-2); border-bottom-color: var(--fsc-line-strong); } /* ---- team stack chips + popup footer buttons ---- */ [data-fsc-theme="dark"] .lineupTeamStackName { color: var(--fsc-text); } [data-fsc-theme="dark"] .lineupTeamStackCnt { color: var(--fsc-text); } [data-fsc-theme="dark"] .popupButtonCont { background: var(--fsc-bg); } [data-fsc-theme="dark"] .popupButton { border-color: var(--fsc-blue); background: var(--fsc-panel-2); color: var(--fsc-blue); } [data-fsc-theme="dark"] .popupButton:hover { background: var(--fsc-blue-soft); } [data-fsc-theme="dark"] .popupButtonMini { border-color: var(--fsc-blue); background: var(--fsc-panel-2); color: var(--fsc-blue); } [data-fsc-theme="dark"] .popupButtonMini:hover { background: var(--fsc-blue-soft); } [data-fsc-theme="dark"] .popupSuccess { color: var(--fsc-green); background-color: var(--fsc-green-soft); } [data-fsc-theme="dark"] .popupDescLeft { color: var(--fsc-text); } [data-fsc-theme="dark"] .projOverrideRow { color: var(--fsc-green); background-color: var(--fsc-green-soft); } [data-fsc-theme="dark"] .projOverrideRowNotMapped { color: var(--fsc-danger) !important; background-color: var(--fsc-danger-soft) !important; } [data-fsc-theme="dark"] .popupSelectorMenu { background: var(--fsc-panel-2); color: var(--fsc-text); border-color: var(--fsc-line-strong); } /* ---- rzslider (salary / custom sliders) ---- */ [data-fsc-theme="dark"] .custom-slider.rzslider .rz-bar { background: var(--fsc-line-strong); } [data-fsc-theme="dark"] .custom-slider.rzslider .rz-selection { border-color: var(--fsc-line-strong); background: var(--fsc-text-faint); } [data-fsc-theme="dark"] .custom-slider.rzslider .rz-pointer { background-color: var(--fsc-blue); } [data-fsc-theme="dark"] .custom-slider.rzslider .rz-bubble { color: var(--fsc-text); } [data-fsc-theme="dark"] .custom-slider.rzslider .rz-limit { color: var(--fsc-gold); } [data-fsc-theme="dark"] .custom-slider.rzslider .rz-tick { background: var(--fsc-line-strong); } [data-fsc-theme="dark"] .custom-slider.rzslider .rz-tick.rz-selected { background: var(--fsc-gold); } /* ---- modern settings dialog (.popupSettings / ps-*) ---- .fsDialog (Filters & Sorting panel) shares the ps- shell. */ [data-fsc-theme="dark"] .popupSettings .ps-dialog, [data-fsc-theme="dark"] .fsDialog { background: var(--fsc-panel); color: var(--fsc-text); color-scheme: dark; accent-color: var(--fsc-blue); } [data-fsc-theme="dark"] .ps-title { color: var(--fsc-text); } [data-fsc-theme="dark"] .ps-subtitle { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .ps-close { color: var(--fsc-text-faint); } [data-fsc-theme="dark"] .ps-close:hover { background: var(--fsc-panel-2); color: var(--fsc-text); } [data-fsc-theme="dark"] .ps-tabs { box-shadow: inset 0px -1px 0px var(--fsc-line); } [data-fsc-theme="dark"] .ps-tab { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .ps-tab:hover { color: var(--fsc-text); } [data-fsc-theme="dark"] .ps-tab.is-active { color: var(--fsc-text); border-bottom-color: var(--fsc-blue); } [data-fsc-theme="dark"] .ps-section-title { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .ps-row { border-bottom-color: var(--fsc-line); } [data-fsc-theme="dark"] .ps-row-label { color: var(--fsc-text); } [data-fsc-theme="dark"] .ps-row-desc { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .ps-btn { background: var(--fsc-panel-2); border-color: var(--fsc-line-strong); color: var(--fsc-text); } [data-fsc-theme="dark"] .ps-btn:hover { background: var(--fsc-line); border-color: var(--fsc-line-strong); } [data-fsc-theme="dark"] .ps-btn-danger { color: var(--fsc-danger); border-color: rgba(255, 92, 92, .45); } [data-fsc-theme="dark"] .ps-btn-danger:hover { background: var(--fsc-danger-soft); border-color: var(--fsc-danger); } [data-fsc-theme="dark"] .ps-switch { background: var(--fsc-line-strong); } [data-fsc-theme="dark"] .ps-switch::after { background: var(--fsc-text); } [data-fsc-theme="dark"] .ps-switch:hover { background: var(--fsc-text-faint); } [data-fsc-theme="dark"] .ps-switch.is-on { background: var(--fsc-blue); } [data-fsc-theme="dark"] .ps-switch.is-on:hover { background: var(--fsc-blue); filter: brightness(1.12); } [data-fsc-theme="dark"] .ps-segmented { background: var(--fsc-panel-2); } [data-fsc-theme="dark"] .ps-segmented button { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .ps-segmented button:hover { color: var(--fsc-text); } [data-fsc-theme="dark"] .ps-segmented button.is-active { background: var(--fsc-panel); /* mirrors .fsc-segmented in the theme file */ color: var(--fsc-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); } /* ---- native form controls inside dark surfaces ---- */ [data-fsc-theme="dark"] .lineupBuiderSlideoutExp input[type="text"], [data-fsc-theme="dark"] .lineupBuiderSlideoutExp input[type="number"], [data-fsc-theme="dark"] .lineupBuiderSlideoutExp select, [data-fsc-theme="dark"] .lineupBuiderSlideoutExp textarea, [data-fsc-theme="dark"] .popoutpanel input[type="text"], [data-fsc-theme="dark"] .popoutpanel input[type="number"], [data-fsc-theme="dark"] .popoutpanel select, [data-fsc-theme="dark"] .popoutpanel textarea, [data-fsc-theme="dark"] .dropDownControl select, [data-fsc-theme="dark"] .popupSettings .ps-dialog input[type="text"], [data-fsc-theme="dark"] .popupSettings .ps-dialog input[type="number"], [data-fsc-theme="dark"] .popupSettings .ps-dialog select, [data-fsc-theme="dark"] .popupSettings .ps-dialog textarea { background: var(--fsc-panel-2); color: var(--fsc-text); border-color: var(--fsc-line-strong); } /* ===================================================================== DARK MODE OVERRIDES - fantasysportsco.filters.css Night-navy theme; every rule scoped to [data-fsc-theme="dark"]. ===================================================================== */ /* ---- module title ---- */ [data-fsc-theme="dark"] .module__title { color: var(--fsc-text); } [data-fsc-theme="dark"] .module__title__text { color: var(--fsc-text); } [data-fsc-theme="dark"] .module__title__return { color: var(--fsc-blue); } /* ---- .filterSelect dropdown affordance ---- */ [data-fsc-theme="dark"] .selectDropDown { background-color: var(--fsc-panel); box-shadow: inset -1px 0px 0px var(--fsc-line), inset 0px 1px 0px var(--fsc-line), inset 0px -1px 0px var(--fsc-line), inset 0px 0px 0px var(--fsc-line); } /* ---- filters left: pill list ---- */ [data-fsc-theme="dark"] .filters__left .ctrlButton { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .filters__left > ul > li { box-shadow: inset -1px 0px 0px var(--fsc-line), inset 0px 1px 0px var(--fsc-line), inset 0px -1px 0px var(--fsc-line), inset 1px 0px 0px var(--fsc-line); background-color: var(--fsc-panel); } [data-fsc-theme="dark"] .filters__left > ul > li > a { color: var(--fsc-text-soft); } /* ---- button groups (.btnGrp / .btnGrp__container / .btnGrpNoSelect) ---- */ [data-fsc-theme="dark"] .btnGrp__container > select { color: var(--fsc-text-soft) !important; background-color: var(--fsc-panel); color-scheme: dark; } [data-fsc-theme="dark"] .btnGrp__container > select:hover { background-color: var(--fsc-panel-2); } [data-fsc-theme="dark"] .btnGrp__container > select > option { color: var(--fsc-text-soft) !important; background-color: var(--fsc-panel-2); } [data-fsc-theme="dark"] .btnGrp__container > select > option:hover { background-color: var(--fsc-line); } [data-fsc-theme="dark"] .btnGrpNoSelect { box-shadow: inset -1px 0px 0px var(--fsc-line), inset 0px 1px 0px var(--fsc-line), inset 0px -1px 0px var(--fsc-line), inset 1px 0px 0px var(--fsc-line); background-color: var(--fsc-panel); color: var(--fsc-text-soft) !important; } [data-fsc-theme="dark"] .btnGrp { box-shadow: inset -1px 0px 0px var(--fsc-line), inset 0px 1px 0px var(--fsc-line), inset 0px -1px 0px var(--fsc-line), inset 1px 0px 0px var(--fsc-line); background-color: var(--fsc-panel); } [data-fsc-theme="dark"] .btnGrp > li { color: var(--fsc-text-soft) !important; } [data-fsc-theme="dark"] .selectbtn { background: var(--fsc-panel); box-shadow: inset -1px 0px 0px var(--fsc-line), inset 0px 1px 0px var(--fsc-line), inset 0px -1px 0px var(--fsc-line), inset 1px 0px 0px var(--fsc-line); color: var(--fsc-text-soft); } /* ---- filters right: search input + control buttons ---- */ [data-fsc-theme="dark"] .filterInput { box-shadow: inset -1px 0px 0px var(--fsc-line-strong), inset 0px 1px 0px var(--fsc-line-strong), inset 0px -1px 0px var(--fsc-line-strong), inset 1px 0px 0px var(--fsc-line-strong) !important; background-color: var(--fsc-panel-2); color: var(--fsc-text); color-scheme: dark; } [data-fsc-theme="dark"] .filterInput::placeholder { color: var(--fsc-text-faint); } [data-fsc-theme="dark"] .ctrlButton { box-shadow: inset -1px 0px 0px var(--fsc-line), inset 0px 1px 0px var(--fsc-line), inset 0px -1px 0px var(--fsc-line), inset 1px 0px 0px var(--fsc-line) !important; background-color: var(--fsc-panel); color: var(--fsc-text-soft); } /* ---- filters: hover states ---- */ [data-fsc-theme="dark"] .ctrlButton:hover, [data-fsc-theme="dark"] .btnGrp:hover, [data-fsc-theme="dark"] .filterSelect:hover > .selectbtn, [data-fsc-theme="dark"] .filterSelect:hover > .selectDropDown { background-color: var(--fsc-panel-2); } [data-fsc-theme="dark"] .filterInput:hover { border-color: var(--fsc-blue); } [data-fsc-theme="dark"] .filterInput:hover::placeholder { color: var(--fsc-text-soft); } /* ---- filters: active / selected states ---- dark-theme blue (#4D8DFF) is light, so filled chips take INVERTED ink (matches .slateInnerBlockSelected and every other blue fill here). .active is scoped to the filter-button context - the bare class is too generic to repaint app-wide. */ [data-fsc-theme="dark"] .btnGrp:active { background-color: var(--fsc-blue); } [data-fsc-theme="dark"] .btnGrp:active > li { color: var(--fsc-text-invert) !important; } [data-fsc-theme="dark"] .btnGrp.active, [data-fsc-theme="dark"] .btnGrp__container .active { background-color: var(--fsc-blue); } [data-fsc-theme="dark"] .btnGrp.active > li, [data-fsc-theme="dark"] .btnGrp__container .active > li { color: var(--fsc-text-invert) !important; } [data-fsc-theme="dark"] .activeFilter { background-color: var(--fsc-blue) !important; } [data-fsc-theme="dark"] .activeFilter > li { color: var(--fsc-text-invert) !important; } /* ---- report filter ---- */ [data-fsc-theme="dark"] .reportfilter > ul > a li { color: var(--fsc-text-soft); } /* ---- numeric stepper inputs ---- */ [data-fsc-theme="dark"] .inputNumeric > input { background: var(--fsc-panel-2); color: var(--fsc-text); border-color: var(--fsc-line); color-scheme: dark; } [data-fsc-theme="dark"] .inputNumeric > input:hover { border-color: var(--fsc-line-strong); } [data-fsc-theme="dark"] .inputNumeric > input:focus { border-color: var(--fsc-line-strong); } [data-fsc-theme="dark"] .inputNumericModLower > input { border-color: var(--fsc-danger) !important; } [data-fsc-theme="dark"] .inputNumericModHigher > input { border-color: var(--fsc-green) !important; } [data-fsc-theme="dark"] .inputNumericModified > input { border-color: var(--fsc-gold) !important; } [data-fsc-theme="dark"] .inputNumericError > input { background-color: var(--fsc-danger-soft) !important; color: var(--fsc-danger) !important; border-color: var(--fsc-danger) !important; } [data-fsc-theme="dark"] .inputNumericSaving > input { border-color: var(--fsc-blue) !important; } [data-fsc-theme="dark"] .inputNumericBtn { border-left-color: var(--fsc-line); color: var(--fsc-blue); } [data-fsc-theme="dark"] .inputNumericBtn:hover { background-color: var(--fsc-line-strong); } [data-fsc-theme="dark"] .inputNumericInc { border-bottom-color: var(--fsc-line); } [data-fsc-theme="dark"] .inputNumericLargeModified > input { color: var(--fsc-gold) !important; } [data-fsc-theme="dark"] .flashIncrease { border-color: var(--fsc-green) !important; } [data-fsc-theme="dark"] .flashDecrease { border-color: var(--fsc-danger) !important; } /* refresh nub hover (large variant keeps its own !important transparent bg and its brightness(0) invert(1) filter from the source) */ [data-fsc-theme="dark"] .inputNumericRefresh:hover { background-color: var(--fsc-line-strong); } /* ---- tab buttons ---- */ [data-fsc-theme="dark"] .tabBtn > li { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .tabBtn:hover { background-color: var(--fsc-panel-2) !important; } [data-fsc-theme="dark"] .tabBtn.activeTab { background-color: var(--fsc-panel-2) !important; } [data-fsc-theme="dark"] .activeTab > li { color: var(--fsc-blue) !important; } [data-fsc-theme="dark"] .tabBtn:hover > li { color: var(--fsc-blue) !important; } /* ---- mobile filter bar (source rule lives in max-width:800px block; this higher-specificity rule wins inside that breakpoint too) ---- */ [data-fsc-theme="dark"] .filters--mobile { background-color: var(--fsc-panel); color: var(--fsc-text-soft); } /* ---- help panel / legend ---- */ [data-fsc-theme="dark"] .helpPanelBox { background-color: var(--fsc-panel); border-color: var(--fsc-line); color: var(--fsc-text); -moz-box-shadow: var(--fsc-shadow); -webkit-box-shadow: var(--fsc-shadow); box-shadow: var(--fsc-shadow); } [data-fsc-theme="dark"] .legend { /* teal #62baac has no token; keep it, force dark ink on it */ color: var(--fsc-text-invert); box-shadow: var(--fsc-shadow-sm); } /* ===================================================================== DARK MODE OVERRIDES - fantasysportsco.shared.css ===================================================================== */ /* ---- popup overlay + card ---- */ [data-fsc-theme="dark"] .popupFullPanel { /* source is transparent; translucent navy scrim for dialog focus */ background: rgba(5, 9, 18, .55); } [data-fsc-theme="dark"] .popupFullPanelInner { background: var(--fsc-panel); color: var(--fsc-text); border: 1px solid var(--fsc-line-strong); box-shadow: var(--fsc-shadow-lg); } /* ---- popup text ---- */ [data-fsc-theme="dark"] .popupTitle { color: var(--fsc-text); } [data-fsc-theme="dark"] .popupDesc { color: var(--fsc-text); } [data-fsc-theme="dark"] .popupLink { color: var(--fsc-blue); } /* Dialog body copy sits in bare
s (e.g. the resume-draft prompt); skin.css's `div{color:#666}` out-specifies the panel's inherited ink and makes it unreadable on the dark card. Pin popup body text to page ink - buttons/links are spans/anchors with their own theming, so they're unaffected. */ [data-fsc-theme="dark"] .popoutBot, [data-fsc-theme="dark"] .popoutBot div { color: var(--fsc-text); } /* ---- popup close (inherits page ink in source; pin it light) ---- */ [data-fsc-theme="dark"] .popupClose { color: var(--fsc-text); } [data-fsc-theme="dark"] .popupClose:hover { background: var(--fsc-panel-2); } /* ---- popup tabs ---- */ [data-fsc-theme="dark"] .popupTabs { box-shadow: inset 0px -1px 0px var(--fsc-line); } [data-fsc-theme="dark"] .popupTabTitle { color: var(--fsc-text-soft); } [data-fsc-theme="dark"] .popupTabTitleActive { color: var(--fsc-text) !important; border-bottom-color: var(--fsc-blue) !important; } /* ---- popup flow ---- */ [data-fsc-theme="dark"] .popupFlowItem { color: var(--fsc-text); border-bottom-color: var(--fsc-line); } [data-fsc-theme="dark"] .popupFlowText { color: var(--fsc-text); } [data-fsc-theme="dark"] .popupFlowTextBold { color: var(--fsc-text); } /* ---- help icon (opaque white PNG tile -> near-panel dark, glyph -> light) ---- */ [data-fsc-theme="dark"] .button_help { filter: invert(.95) hue-rotate(180deg); } /* ---- generic table rows + sort indicators ---- */ [data-fsc-theme="dark"] .genericTabledRow { border-bottom-color: var(--fsc-line); border-left-color: var(--fsc-line-strong); border-right-color: var(--fsc-line); background-color: var(--fsc-panel); color: var(--fsc-text); } /* .sortAsc/.sortDesc dark colors are defined once in the projections section above (covers shared.css + projections_new.css sources) */ /* ---- toggle button ---- */ [data-fsc-theme="dark"] .toggleButton { box-shadow: inset -1px 0px 0px var(--fsc-line), inset 0px 1px 0px var(--fsc-line), inset 0px -1px 0px var(--fsc-line), inset 1px 0px 0px var(--fsc-line) !important; background-color: var(--fsc-panel); color: var(--fsc-text); } [data-fsc-theme="dark"] .toggleButton:hover { background-color: var(--fsc-panel-2); } /* NOTE: .switch / .switch_on are image-based (switch_off.svg #8A939C track, switch_on.svg #5369E5 track, white knobs) and stay legible on navy panels; intentionally not filtered - see notes. .teamImgCell needs no color rules (font weight/size only); logo imgs are content images. */ /* ===================================================================== DARK MODE OVERRIDE LAYER Covers: fantasysportsco.chat.css + fantasysportsco.playerpop.css Every rule is scoped to [data-fsc-theme="dark"] (attribute on ). ===================================================================== */ /* ===================================================================== CHAT POPUP (fantasysportsco.chat.css) ===================================================================== */ /* ---- chat design-token remap (drives ~95% of chat.css) ---- */ [data-fsc-theme="dark"] { --chat-bg: var(--fsc-panel); --chat-bg-subtle: var(--fsc-panel-2); --chat-bg-muted: rgba(150, 170, 205, .12); /* hover fill / avatar chip - no token for translucent fill */ --chat-border: var(--fsc-line); --chat-border-light: var(--fsc-line); --chat-text: var(--fsc-text); --chat-text-secondary: var(--fsc-text-soft); --chat-text-muted: var(--fsc-text-faint); --chat-primary: var(--fsc-blue); --chat-primary-hover: #6AA2FF; /* no lighter-blue token; hover delta noted */ --chat-primary-bg: var(--fsc-blue-soft); --chat-success: var(--fsc-green); --chat-success-hover: var(--fsc-green); /* #059669 text would vanish on navy */ --chat-success-bg: var(--fsc-green-soft); --chat-danger: var(--fsc-danger); --chat-danger-bg: var(--fsc-danger-soft); --chat-warning: var(--fsc-gold); /* --chat-accent (#F26E24) intentionally kept: brand orange reads fine on navy */ --chat-shadow-sm: var(--fsc-shadow-sm); --chat-shadow-md: var(--fsc-shadow); --chat-shadow-lg: var(--fsc-shadow-lg); --chat-shadow-xl: 0 20px 60px rgba(0, 0, 0, .60), 0 8px 20px rgba(0, 0, 0, .45); } /* ---- main container ---- */ [data-fsc-theme="dark"] .chatPopup { color-scheme: dark; /* dark UA scrollbars / form chrome inside the popup */ box-shadow: -18px 0 50px rgba(0, 0, 0, .6); /* drawer edge shadow, deepened for dark */ } /* ---- chat body / tab scrollbars (token thumb is too faint at .14) ---- */ [data-fsc-theme="dark"] .chatPopupBody::-webkit-scrollbar-thumb, [data-fsc-theme="dark"] .chatStatusTab::-webkit-scrollbar-thumb, [data-fsc-theme="dark"] .chatBlockedTab::-webkit-scrollbar-thumb, [data-fsc-theme="dark"] .chatCreateUserTab::-webkit-scrollbar-thumb, [data-fsc-theme="dark"] .chatEmojiGrid::-webkit-scrollbar-thumb { background: var(--fsc-line-strong); } /* ---- footer / input area ---- */ [data-fsc-theme="dark"] .chatPopupFooter > input, [data-fsc-theme="dark"] #chatInputForm input { background: var(--fsc-panel-2); color: var(--fsc-text); border-color: var(--fsc-line-strong); } [data-fsc-theme="dark"] .chatPopupFooter > input:focus, [data-fsc-theme="dark"] #chatInputForm input:focus { background-color: var(--fsc-panel-2); border-color: var(--fsc-blue); box-shadow: 0 0 0 3px var(--fsc-blue-soft); } /* ---- settings - custom checkboxes ---- */ [data-fsc-theme="dark"] .chatCheckboxCustom { border-color: var(--fsc-line-strong); } [data-fsc-theme="dark"] .chatCheckbox:checked + .chatCheckboxCustom { background: var(--fsc-blue); border-color: var(--fsc-blue); } /* ---- flair sample badges (Icons Explained) ---- Rookie / All-Star gradient TEXT colors are near-navy and disappear on the dark panel; brighten them. No filter exists on these in source. MVP / HOF / GOAT gradients are already light enough. */ [data-fsc-theme="dark"] .chatFlairRookie { filter: brightness(2.4) saturate(1.1); } [data-fsc-theme="dark"] .chatFlairAllStar { filter: brightness(2.2) saturate(1.1); } /* ---- user badges (hardcoded Tailwind-light tints in source) ---- */ [data-fsc-theme="dark"] .chatMvp { background: var(--fsc-red-soft); border-color: transparent; color: var(--fsc-red); } [data-fsc-theme="dark"] .chatFanOfDay { border-color: transparent; /* bg/color already token-driven */ } [data-fsc-theme="dark"] .chatStaffExpert, [data-fsc-theme="dark"] .chatExpert { border-color: transparent; /* #BFDBFE light-blue border */ } [data-fsc-theme="dark"] .chatFeatured { background: var(--fsc-green-soft); border-color: transparent; color: var(--fsc-green); } [data-fsc-theme="dark"] .chatAdmin { background: var(--fsc-gold-soft); border-color: transparent; color: var(--fsc-gold); } /* ---- rank tier bubble flair ---- Tier 0 royal-blue (#003087) accent border is invisible on navy. */ [data-fsc-theme="dark"] .chatBubble.chatBubbleTier0 { border-left-color: var(--fsc-blue); } /* ---- rank tier avatar rings (Tier 0 has the only static dark ring) ---- */ [data-fsc-theme="dark"] .chatMsgAvatar.chatAvatarTier0 .chatBubbleInitial { box-shadow: 0 0 0 2px var(--fsc-blue); } /* ---- user context menu - block confirmation buttons ---- */ [data-fsc-theme="dark"] .chatUserMenuConfirmYes:hover { background: var(--fsc-red-deep); /* source: #DC2626 */ } [data-fsc-theme="dark"] .chatUserMenuConfirmNo:hover { background: var(--fsc-line-strong); /* token hover == base otherwise */ } /* ---- import / filter messages ---- */ [data-fsc-theme="dark"] .filterErrorMsg { color: var(--fsc-danger); /* source: #B91C1C on red tint */ } [data-fsc-theme="dark"] .filterImportMsg { color: var(--fsc-green); /* source: #047857 */ border-color: var(--fsc-green); /* source: #A7F3D0 */ } /* ---- message content ---- */ [data-fsc-theme="dark"] .blurrytext { color: transparent; text-shadow: 0 0 8px rgba(233, 238, 248, .45); /* black blur is invisible on navy */ } /* ---- create user / account setup ---- */ [data-fsc-theme="dark"] .chatCreateUserInput { background: var(--fsc-panel-2); color: var(--fsc-text); border-color: var(--fsc-line-strong) !important; } [data-fsc-theme="dark"] .chatCreateUserInput:focus { border-color: var(--fsc-blue) !important; box-shadow: 0 0 0 3px var(--fsc-blue-soft); } /* ---- conversation states ---- */ [data-fsc-theme="dark"] .chatConversationClosed { color: var(--fsc-gold); /* source: #92400E */ background: var(--fsc-gold-soft); /* source: #FFFBEB */ border-color: var(--fsc-gold); /* source: #FDE68A */ } /* ===================================================================== PLAYER POPUP (fantasysportsco.playerpop.css) ===================================================================== */ /* ---- overlay + popup shells ---- */ [data-fsc-theme="dark"] .fscpopup { background-color: rgba(4, 8, 16, .85); /* scrim tweak - slate overlay has no token */ color-scheme: dark; } [data-fsc-theme="dark"] .fscPoupUnauthorizedError, [data-fsc-theme="dark"] .fscPoupLoading { background: var(--fsc-bg); } [data-fsc-theme="dark"] .fscPoupUnknownError { background: var(--fsc-bg); color: var(--fsc-text); } [data-fsc-theme="dark"] .fscPopupInner { /* hairline ring so the card separates from the near-black scrim (box-shadow only: no layout impact) */ box-shadow: 0 0 0 1px var(--fsc-line), var(--fsc-shadow-lg); } [data-fsc-theme="dark"] .fscPopupContent { background: var(--fsc-bg); } /* ---- header ---- Header band background + name/stat text are team-colored / white via inline styles and existing rules (#fff, rgba(255,255,255,.6)) and already read correctly on dark; only the gray title needs ink. */ [data-fsc-theme="dark"] .fscPopupTitle { color: var(--fsc-text-soft); /* source: #555 */ } /* ---- panels ---- */ [data-fsc-theme="dark"] .fscPopupFullPanel, [data-fsc-theme="dark"] .fscPopupHalfPanel, [data-fsc-theme="dark"] .fscPopupThirdPanel, [data-fsc-theme="dark"] .fscPopupTwoThirdPanel { background: var(--fsc-panel); } /* ---- alerts ---- */ [data-fsc-theme="dark"] .fscPopupAlerts > span { color: var(--fsc-text); /* source: #111827 */ } [data-fsc-theme="dark"] .fscPopupAlert { color: var(--fsc-text); /* source: #000 */ } /* ---- details split ---- */ [data-fsc-theme="dark"] .fscPopupDetails { border-bottom-color: var(--fsc-line); /* source: #aaa */ } [data-fsc-theme="dark"] .fscPopupDetailsRight { background: var(--fsc-panel-2); /* source: #F0F0F0 */ } /* ---- news ---- */ [data-fsc-theme="dark"] a.fscPopupMoreNews { color: var(--fsc-blue); /* source: #3B82F6 */ } [data-fsc-theme="dark"] .fscpopupPanelTitle { color: var(--fsc-text); /* source: #111827 */ } [data-fsc-theme="dark"] .fscpopupNewsStoryTitle { color: var(--fsc-text); /* source: #111827 */ } [data-fsc-theme="dark"] .fscpopupNewsStoryDate { color: var(--fsc-text-soft); /* source: #6B7280 */ } [data-fsc-theme="dark"] .fscpopupNewsStoryDesc { color: var(--fsc-text-soft); /* source: #374151 */ } /* ---- section title band ---- */ [data-fsc-theme="dark"] .fscpopupSectionTitle { color: var(--fsc-gold); /* source: #333 on #F9D55F */ background: var(--fsc-gold-soft); border-color: var(--fsc-line); /* source: #ccc */ } /* ---- info elements / stats ---- */ [data-fsc-theme="dark"] .fscInfoEleName { color: var(--fsc-text); /* source: #333 */ } [data-fsc-theme="dark"] .fscInfoEleValue { color: var(--fsc-text); /* source: #222 */ } [data-fsc-theme="dark"] .fscpopupStatsTitle { background: var(--fsc-panel-2); /* source: #F0F0F0 */ color: var(--fsc-text); /* source: #333 */ } [data-fsc-theme="dark"] .fscpopupStatSection { color: var(--fsc-text); /* source: #333333 */ } [data-fsc-theme="dark"] .fscpopupStatSection:nth-child(even) { background: var(--fsc-panel-2); /* source: #ddd zebra */ } [data-fsc-theme="dark"] .fscpopupStatSectionTitle { color: var(--fsc-blue); /* source: #195EFF */ } [data-fsc-theme="dark"] .fscpopupStat { color: var(--fsc-text); /* source: #333333 */ } [data-fsc-theme="dark"] .fscpopupStatName { color: var(--fsc-text-soft); /* source: #555 */ } [data-fsc-theme="dark"] .fscpopupStatValue { color: var(--fsc-text); /* source: #333 */ } /* ---- current game / vegas ---- */ [data-fsc-theme="dark"] .fscPopupCurGameMid { color: var(--fsc-text); /* source: #111827 */ } [data-fsc-theme="dark"] .fscPopupCurGameTeamName { color: var(--fsc-text); /* source: #000000 */ } [data-fsc-theme="dark"] .fscPopupCurGameTeamRecord { color: var(--fsc-text-soft); /* source: #6B7280 */ } [data-fsc-theme="dark"] .fscPopupCurGameVegasInfo { color: var(--fsc-text-soft); /* source: #374151 */ } [data-fsc-theme="dark"] .fscPopupCurGameVegasOverUnder { color: var(--fsc-green); /* source: #059669 */ } [data-fsc-theme="dark"] .fscPopupGood { color: var(--fsc-green); /* source: #059669 */ } [data-fsc-theme="dark"] .fscPopupBad { color: var(--fsc-danger); /* source: #DC2626 */ } [data-fsc-theme="dark"] .fscPopupNeutral { color: var(--fsc-text); /* source: #111827 */ } /* ---- player name / love-hate ---- */ [data-fsc-theme="dark"] .fscpopupName { color: var(--fsc-text); /* source: #333333 */ } [data-fsc-theme="dark"] .love { border-bottom-color: var(--fsc-line); /* source: #e9e9e9 */ } [data-fsc-theme="dark"] .love:hover, [data-fsc-theme="dark"] .hate:hover { background-color: var(--fsc-panel-2); /* source: #eee */ } [data-fsc-theme="dark"] .lovehatecount { color: var(--fsc-text-soft); /* source: #555 */ } /* ---- alert text / subscribe area ---- */ [data-fsc-theme="dark"] .alerttext { color: var(--fsc-text-soft); /* source: #666666 */ } [data-fsc-theme="dark"] .subscribe { color: var(--fsc-text); /* source: #3A454C */ } [data-fsc-theme="dark"] .subscribeSmall { color: var(--fsc-text); /* source: #000 */ } [data-fsc-theme="dark"] .subscribeRed { color: var(--fsc-red); /* source: #E6001C */ } [data-fsc-theme="dark"] .subscribeButton { background: var(--fsc-red); /* source: #EA0009 */ color: var(--fsc-text-invert); box-shadow: var(--fsc-shadow-sm); /* source: 2px 2px 2px #555 */ } [data-fsc-theme="dark"] .subscribeButton:hover { box-shadow: none; /* re-stated: source hover ties on specificity */ } /* ===================================================================== CHAT BUBBLES - dark variants of the hue-driven user colors. --chat-hue is set per message by the template; light derivations live in fantasysportsco.chat.css. Same hue, dark-appropriate saturation/lightness, so each user keeps their color identity. ===================================================================== */ [data-fsc-theme="dark"] .chatBubble { background: hsl(var(--chat-hue, 210), 30%, 17%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } [data-fsc-theme="dark"] .chatBubbleInitial { background: hsl(var(--chat-hue, 210), 38%, 24%); color: hsl(var(--chat-hue, 210), 75%, 78%); } [data-fsc-theme="dark"] .chatPopupMessageName { color: hsl(var(--chat-hue, 210), 70%, 72%); } [data-fsc-theme="dark"] .chatUserMenuInitial { background: hsl(var(--chat-hue, 210), 38%, 24%); color: hsl(var(--chat-hue, 210), 75%, 78%); } [data-fsc-theme="dark"] .chatUserMenuName { color: hsl(var(--chat-hue, 210), 70%, 72%); } /* ---- rank tier flair: the midnight accents vanish on navy ---- */ /* Tier 1 (All-Star): midnight sapphire -> visible indigo */ [data-fsc-theme="dark"] .chatBubble.chatBubbleTier1 { border-left-color: #7B68EE; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 3px 0 10px -2px rgba(123, 104, 238, 0.18); } @keyframes fscDarkSapphire { 0%, 100% { box-shadow: 0 0 0 2px #5B4BC4, 0 0 6px rgba(123, 104, 238, 0.25); } 50% { box-shadow: 0 0 0 2px #7B68EE, 0 0 10px rgba(123, 104, 238, 0.5); } } [data-fsc-theme="dark"] .chatMsgAvatar.chatAvatarTier1 .chatBubbleInitial { box-shadow: 0 0 0 2px #5B4BC4, 0 0 6px rgba(123, 104, 238, 0.3); animation-name: fscDarkSapphire; } /* Tier 2 (MVP): imperial purple gradient was near-invisible on navy */ [data-fsc-theme="dark"] .chatBubble.chatBubbleTier2::before { background: linear-gradient(135deg, #5B21B6, #7C3AED, #A78BFA, #C4B5FD, #A78BFA, #7C3AED, #5B21B6); background-size: 300% 300%; opacity: 0.6; }