/* ═══════════════════════════════════════════════════════════════════════════ ehr_page_misc_market.css -- KITLOOK_20261018. Section stylesheet for the Misc menu's market screens. Loads after ehr_kit.css and automated.css (topwrapper.j2), so a rule here wins a tie with either. Screens, templates and the kit sections each one sits on: Claims ....... python/_incFiles/claims/jinja/claims.j2 kit: pg_wrap/pg_head, pg_tabs (the In play / Settled / Claimed horses row), pg_card + pg_table, pg_name, pg_sex, pg_chip (result), pg_detail (row panel), pg_empty. (claims_toprow.j2 is not used by anything: no .py or template includes it.) Jockeys ...... python/_incFiles/jockey/jinja/jockey.j2 kit: pg_wrap/pg_head, pg_chipgroup + pg_pick (period and roster filter), pg_in (track), pg_note, pg_card + pg_table, pg_name, pg_detail, pg_btn (roster editor), pg_empty. Auction ...... python/_incFiles/auction/jinja/auc.j2 kit: pg_wrap/pg_head, pg_tabs (whose lots + open/closed, two groups in one bar), pg_chip (g-cards, You, outbid), pg_card + pg_table, pg_name, pg_sex, pg_detail, pg_btn. Watchlist .... python/_incFiles/watchlist/jinja/watchlist.j2 (+ the Sires tab, watchlist_sire.j2) kit: pg_wrap/pg_head, pg_tabs, pg_filter + pg_chipgroup + pg_pick (Show / Age / Sex / Not racing), pg_note, pg_card + pg_table, pg_name, pg_sex, pg_chip, pg_detail. Horse Search . python/_incFiles/horsesearch/jinja/horse_search.j2 + horse_search_results.j2 (loaded into #hsr_results) kit: pg_wrap/pg_head, pg_filter (the box), pg_in, pg_btn, pg_card (count = its header) + pg_table, pg_name, pg_sex, pg_chip, pg_detail, pg_empty look. Will: what to change for the common restyles - header, zebra, hover, cards, buttons, tabs, chips: the kit and your tokens (--ehr-table-*, --ehr-card-*, --pg-*); nothing here. - the open row panel ...... --mm-panel-bg (fill) / --mm-panel-edge (left strip) - "yours" row tint ........ --mm-mine-bg (your jockey on the roster, your horse in Horse Search) - flagged jockey row ...... --mm-flag-bg - selected filter pill .... --mm-pick-on (= the kit's .pg_pick_on green) - the Watchlist's data colours (type chips, sire-linked rows, sire name) .................... --mm-sire-*, --mm-lease-*, --mm-ret-*, --mm-linked-a / -b Dark lines for every one of them are under :root[data-theme="dark"]. How the tabs and pills work (the templates cannot change their Jinja): every tab / pill is still , and the template puts pg_btn_2 on the UNSELECTED ones. So ":not(.pg_btn_2)" = the selected tab / pill, and the pg_btn look is switched off inside each screen's bar (section 1). JS hooks (do not rename): .jky_row_rostered .jky_row_flagged .jky_roster_badge .jky_flag_badge .jky_save_disabled .jky_busy .jky_msg_ok/.jky_msg_bad (incJS_11_misc_pages.js); .wl_sire_hidden .wl_sire_toggle_on/_off .wl_rm_msg (incJS_11, automated.js); #auc_bidrow_ (incJS_12_auction_cards.js); .hsr_note (automated.js hsr_search writes it). Column-hide ladders stay where they were: auc_/wl_/jky_ in ehr_style_13_misc_pages.css, claims_ in ehr_style_11_stable_entries.css; the hsr_ one moved here with its block (section 6). ═══════════════════════════════════════════════════════════════════════════ */ /* --------------------------------------------------------------------------- 0. PAGE TOKENS -- KITLOOK_20261018: colours these five screens need that neither Will's base nor the kit has a name for. Data colours keep their old hues; each has a dark line. --------------------------------------------------------------------------- */ :root { --mm-panel-bg: var(--ehr-card-primary-body-bg); /* the open row panel = the kit .pg_detail_panel look (KITREVIEW_20261018: one panel look site-wide) */ --mm-panel-edge: var(--ehr-theme-highlight); /* its left strip */ --mm-mine-bg: var(--pg-ok-bg); /* yours / on your roster */ --mm-flag-bg: var(--pg-warn-bg); /* a flagged jockey */ --mm-pick-on: #0c420c; /* the selected filter pill = ehr_kit.css .pg_pick_on ... */ --mm-pick-on-text: #fff; /* ... and its text */ --mm-swatch-edge: rgba(0, 0, 0, 0.22); /* the Auction form swatch outline */ --mm-hatch-a: #f3f3f3; /* "no rating yet" hatch */ --mm-hatch-b: #e7e7e7; /* Watchlist data: the sire chip and name, the lease and retired-mare chips, the two sire-linked row tints */ --mm-sire-bg: #f1ebfb; --mm-sire-border: #d6c9f2; --mm-sire-text: #5b3fa8; --mm-lease-bg: #e6f6f5; --mm-lease-border: #a7dbd8; --mm-lease-text: #0f6b66; --mm-ret-bg: #fbeff4; --mm-ret-border: #e7c8d6; --mm-ret-text: #8a3a5c; --mm-linked-a: #eef6fb; --mm-linked-b: #eef8f1; } :root[data-theme="dark"] { --mm-swatch-edge: rgba(255, 255, 255, 0.22); --mm-hatch-a: #2a2a2a; --mm-hatch-b: #3b3b3b; --mm-sire-bg: rgba(91, 63, 168, 0.22); --mm-sire-border: #4b3a7a; --mm-sire-text: #c4b5fd; --mm-lease-bg: rgba(15, 107, 102, 0.22); --mm-lease-border: #1f5f5b; --mm-lease-text: #7fd8d0; --mm-ret-bg: rgba(138, 58, 92, 0.20); --mm-ret-border: #6b3a50; --mm-ret-text: #f0b6cd; --mm-linked-a: #1c2633; --mm-linked-b: #1b2a20; } /* --------------------------------------------------------------------------- 1. SHARED BY THE FIVE SCREENS -- KITLOOK_20261018: the parts every one of them has (a tab bar or filter pills, two- rows, the open-row panel), written once and scoped to their own containers. --------------------------------------------------------------------------- */ /* tab bars: Claims (.cl_tabs), Auction (.au_bar), Watchlist (.wl_bar). The bar is the kit's .pg_tabs; the links inside still carry pg_btn, whose button look is switched off here so they read as the horse page's tabs. */ .cl_tabs.pg_tabs, .au_bar.pg_tabs, .wl_bar.pg_tabs { align-items: center; margin: 0; gap: 0 1em; } .cl_tabs .pg_tab.pg_btn, .au_bar .pg_tab.pg_btn, .wl_bar .pg_tab.pg_btn { border-radius: 0; filter: none; } .cl_tabs .pg_tab.pg_btn:hover, .au_bar .pg_tab.pg_btn:hover, .wl_bar .pg_tab.pg_btn:hover { background: none; color: var(--ehr-tabbar-text); filter: none; } /* the selected tab = the one without pg_btn_2: the kit's .pg_tab_on */ .cl_tabs .pg_tab.pg_btn:not(.pg_btn_2), .au_bar .pg_tab.pg_btn:not(.pg_btn_2), .wl_bar .pg_tab.pg_btn:not(.pg_btn_2) { font-weight: 700; } .cl_tabs .pg_tab.pg_btn:not(.pg_btn_2)::after, .au_bar .pg_tab.pg_btn:not(.pg_btn_2)::after, .wl_bar .pg_tab.pg_btn:not(.pg_btn_2)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .25rem; background: var(--ehr-theme-accent); } /* the refresh button and the other controls at the right of a bar sit on the bar's middle */ .cl_tabs .ehr_refresh, .au_bar .ehr_bar_right, .wl_bar .ehr_bar_right { align-self: center; margin-top: 6px; margin-bottom: 6px; } /* filter pills: Jockeys' period + roster filter, Watchlist's Show / Age / Sex / Not racing. The capsule is the kit's .pg_chipgroup and the pill its .pg_pick (which out-ranks pg_btn by load order); the selected pill = no pg_btn_2. */ .jk_tabgroup .pg_pick:not(.pg_btn_2), .wl_filters .pg_pick:not(.pg_btn_2) { background: var(--mm-pick-on); border-color: var(--mm-pick-on); color: var(--mm-pick-on-text); } /* rows: every logical row is two s (row + panel), the Auction's sometimes three, so the templates mark the alternate rows (_alt) and the kit's nth-child zebra is replaced by these. Will's row tokens. */ .cl_table.pg_table, .auc_table.pg_table, .jky_table.pg_table, .wl_table.pg_table, .hsr_table.pg_table { background: transparent; } .cl_table tbody tr.cl_row, .auc_table tbody tr.au_row, .jky_table tbody tr.jk_row, .wl_table tbody tr.wl_row, .hsr_table tbody tr.hsr_row { background: var(--ehr-table-row-bg); } .cl_table tbody tr.cl_row.cl_alt, .auc_table tbody tr.au_row.au_alt, .jky_table tbody tr.jk_row.jk_alt, .wl_table tbody tr.wl_row.wl_alt, .hsr_table tbody tr.hsr_row.hsr_alt { background: var(--ehr-table-row-alt-bg); } .cl_table tbody tr.cl_row:hover, .auc_table tbody tr.au_row:hover, .jky_table tbody tr.jk_row:hover, .wl_table tbody tr.wl_row:hover, .hsr_table tbody tr.hsr_row:hover { background: var(--ehr-table-primary-hover-bg); } .cl_table tbody tr.cl_panelrow, .cl_table tbody tr.cl_panelrow:hover, .auc_table tbody tr.au_panelrow, .auc_table tbody tr.au_panelrow:hover, .jky_table tbody tr.jk_panelrow, .jky_table tbody tr.jk_panelrow:hover, .wl_table tbody tr.wl_panelrow, .wl_table tbody tr.wl_panelrow:hover, .hsr_table tbody tr.hsr_panelrow, .hsr_table tbody tr.hsr_panelrow:hover { background: transparent; } .cl_table td.cl_td_panel, .auc_table td.au_td_panel, .jky_table td.jk_td_panel, .wl_table td.wl_td_panel, .hsr_table td.hsr_td_panel { padding: 0; border-top: 0; } /* names: the stable list's Saira Condensed at its weight (pg_key, which the cells also carry, is bolder) */ .cl_table .pg_name, .auc_table .pg_name, .jky_table .pg_name, .wl_table .pg_name, .hsr_table .pg_name { font-weight: 600; } /* the sire name that opens the sire screen (.rtg_sire_link, shared with the ratings pages): its hover colour was dark green, and light green only under a device dark setting; here it is the theme's link colour */ .auc_table .rtg_sire_link:hover, .wl_table .rtg_sire_link:hover { color: var(--ehr-link-color); } /* the row arrow, as on My Stable: plain text colour, the link colour on hover */ .cl_table .stable_horse_list_expand_toggle, .auc_table .stable_horse_list_expand_toggle, .jky_table .stable_horse_list_expand_toggle, .wl_table .stable_horse_list_expand_toggle, .hsr_table .stable_horse_list_expand_toggle { color: var(--ehr-text-primary); padding: 2px 6px; font-size: 11px; border-radius: 4px; } .cl_table .stable_horse_list_expand_toggle:hover, .auc_table .stable_horse_list_expand_toggle:hover, .jky_table .stable_horse_list_expand_toggle:hover, .wl_table .stable_horse_list_expand_toggle:hover, .hsr_table .stable_horse_list_expand_toggle:hover { color: var(--ehr-link-color); } /* the open-row panel: a step back from the rows with a strip down its left, holding the kit's .pg_detail grid (label over value). The stable list's boxed items (ehr_legacy_03_stablelist.css) are flattened here. The doubled class beats .re_expanded_info's flex (ehr_style_11) and the legacy min-width:650px rule that hides the row. */ .cl_table .stable_horse_list_expanded_info, .auc_table .stable_horse_list_expanded_info, .jky_table .stable_horse_list_expanded_info, .wl_table .stable_horse_list_expanded_info, .hsr_table .stable_horse_list_expanded_info { padding: 10px 14px 12px 17px; background: var(--mm-panel-bg); color: var(--ehr-text-primary); border-top: 0; border-bottom: 1px solid var(--ehr-border-default); box-shadow: inset 3px 0 0 var(--mm-panel-edge); } .cl_table .stable_horse_list_expanded_row.pg_detail, .auc_table .stable_horse_list_expanded_row.pg_detail, .jky_table .stable_horse_list_expanded_row.pg_detail, .wl_table .stable_horse_list_expanded_row.pg_detail, .hsr_table .stable_horse_list_expanded_row.pg_detail { display: grid; margin: 0; padding: 0; gap: 8px 18px; } .cl_table .stable_horse_list_expanded_item, .auc_table .stable_horse_list_expanded_item, .jky_table .stable_horse_list_expanded_item, .wl_table .stable_horse_list_expanded_item, .hsr_table .stable_horse_list_expanded_item { min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; flex: none; gap: 2px; } .cl_table .pg_detail_lab, .auc_table .pg_detail_lab, .jky_table .pg_detail_lab, .wl_table .pg_detail_lab, .hsr_table .pg_detail_lab { margin: 0; } .cl_table .pg_detail_val, .auc_table .pg_detail_val, .jky_table .pg_detail_val, .wl_table .pg_detail_val, .hsr_table .pg_detail_val { font-size: 13px; } /* NARROW PHONES: ehr_style_11 / ehr_style_13 tighten these tables below 480px (12px text, 3px cell padding, headers that may wrap), but the kit's .pg_table rules load after them and won; restated here so a phone gets them again. The names come down to the table's size too. */ @media (max-width: 480px) { .cl_table.pg_table, .auc_table.pg_table, .jky_table.pg_table, .wl_table.pg_table, .hsr_table.pg_table { font-size: 12px; } .cl_table.pg_table th, .auc_table.pg_table th, .jky_table.pg_table th, .wl_table.pg_table th, .hsr_table.pg_table th { padding: 6px 3px; font-size: 12px; white-space: normal; } .cl_table.pg_table td, .auc_table.pg_table td, .jky_table.pg_table td, .wl_table.pg_table td, .hsr_table.pg_table td { padding: 5px 3px; } .cl_table.pg_table td.cl_td_panel, .auc_table.pg_table td.au_td_panel, .jky_table.pg_table td.jk_td_panel, .wl_table.pg_table td.wl_td_panel, .hsr_table.pg_table td.hsr_td_panel { padding: 0; } .cl_table .pg_name, .auc_table .pg_name, .jky_table .pg_name, .wl_table .pg_name, .hsr_table .pg_name { font-size: 1.05em; letter-spacing: .03em; } .cl_table .pg_btn_sm, .auc_table .pg_btn_sm { padding: 2px 7px; } } /* --------------------------------------------------------------------------- 2. CLAIMS -- KITLOOK_20261018: moved from automated.css CLAIMS_20260912 and rewritten on tokens (the device-dark block is gone: the tokens do it). Not restyled on purpose: .race-box / .age-box / .surf_*-box (the site's race-condition boxes) and .rtg_sexbadge_* (the sex colours). --------------------------------------------------------------------------- */ .cl_table .cl_th_expand, .cl_table .cl_td_expand { width: 1%; padding-left: 8px; padding-right: 4px; text-align: center; } /* WILLMERGE_20261017 (render R17): was 28px -- the other columns are %, so a px column took the spare width (136px at 1100) */ .cl_name { display: flex; align-items: center; gap: 6px; min-width: 0; } .cl_open { width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; opacity: 0.75; } .cl_open:hover { opacity: 1; } .cl_st_active { border-color: var(--pg-info-border); background: var(--pg-info-bg); color: var(--pg-info-text); } /* In play */ .cl_table .claims_td_horse { overflow: visible; white-space: normal; } /* the name in Saira (pg_name) is wider than the old bold Arial: the Horse column's floor goes from 100px (ehr_style_11) to 150px so a two-word name stays on one line at 1300 (phones keep ehr_style_11's 80px) */ @media (min-width: 481px) { .cl_table .claims_th_horse { min-width: 150px; } } .cl_table .claims_td_date, .cl_table .claims_td_trk, .cl_table .claims_td_dist, .cl_table .claims_td_tag, .cl_table .claims_td_cards { white-space: nowrap; } .cl_table .claims_td_note { min-width: 70px; } /* --------------------------------------------------------------------------- 3. JOCKEYS -- KITLOOK_20261018: moved from automated.css JOCKEYS_20260912, ehr_style_13 (JOCKEY PAGE colours, JOCKEY ROSTER editor) and the WILLMERGE R6 rule, rewritten on tokens. The card follows the theme now, so R6's "keep the light alternate row in dark" patch is not needed. --------------------------------------------------------------------------- */ .jk_bar { margin-bottom: 12px; align-items: center; justify-content: flex-start; } .jk_tabs { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } .jk_tabgroup { display: flex; flex-wrap: wrap; gap: 6px; } .jk_tabgroup.pg_chipgroup { gap: .5em; } .jk_loc { width: auto; padding: 5px 9px; font-weight: 600; cursor: pointer; } /* JKUPDATE_20261021: the Update button and its 'Press Update to apply' note */ .jk_tabgroup_go { align-items: center; gap: 8px; } .jk_pending { font-size: 12px; font-weight: 700; color: var(--ehr-label-accent, #b8860b); } .jk_note { margin-bottom: 12px; } /* LISTREFRESH_20261021: the list's one refresh -- the card header's right end, or the top right of the empty box */ .jk_empty .ehr_refresh { float: right; margin: -10px -6px 6px 10px; } /* rows on / flagged on your roster (incJS_11 toggles both classes after a save) */ .jky_table tbody tr.jk_row.jky_row_rostered, .jky_table tbody tr.jk_row.jky_row_rostered.jk_alt { background: var(--mm-mine-bg); } .jky_table tbody tr.jk_row.jky_row_flagged, .jky_table tbody tr.jk_row.jky_row_flagged.jk_alt { background: var(--mm-flag-bg); } .jky_table tbody tr.jk_row.jky_row_rostered:hover, .jky_table tbody tr.jk_row.jky_row_flagged:hover { background: var(--ehr-table-primary-hover-bg); } .jky_table .jky_th_expand, .jky_table .jky_td_expand { width: 28px; padding-left: 8px; padding-right: 4px; text-align: center; } .jky_table .jky_th_flag, .jky_table .jky_td_flag { white-space: nowrap; } @media (min-width: 421px) { /* phones keep ehr_style_13's 100px / 70px, so the table fits a 375px screen */ .jky_table .jky_td_name, .jky_table .jky_th_name { max-width: 200px; } .jky_table .jky_td_name .pg_name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* KITREVIEW_20261018: a long name ends in ... not a cut */ } /* the Roster cell's badge (the JS writes it again after a save, with these classes only, so it is styled by its own class rather than pg_chip): on the roster = the kit's ok chip, flagged = its warn chip */ .jky_roster_badge { display: inline-block; padding: 1px 7px; border-radius: var(--pg-radius-pill); border: 1px solid var(--pg-ok-border); background: var(--pg-ok-bg); color: var(--pg-ok-text); font-size: 11px; font-weight: 700; white-space: nowrap; line-height: 1.5; letter-spacing: 0.02em; } .jky_roster_badge.jky_flag_badge { border-color: var(--pg-warn-border); background: var(--pg-warn-bg); color: var(--pg-warn-text); } /* the panel: the jockey's name, his record (pg_detail), then the roster editor card */ .jk_exp_name { margin-bottom: 8px; color: var(--ehr-text-primary); } .jk_roster { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--ehr-border-default); border-radius: var(--pg-radius); background: var(--ehr-card-primary-body-bg); color: var(--ehr-card-primary-body-text); font-size: 12.5px; } .jk_roster_head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 10px; margin-bottom: 8px; } .jk_roster_title { font-weight: 700; } .jk_slots { color: var(--ehr-text-secondary); font-size: 11.5px; font-variant-numeric: tabular-nums; } .jk_slots .jky_slots_used, .jk_slots .jky_slots_max { font-weight: 700; color: var(--ehr-text-primary); } .jk_slots_flag { margin-left: 12px; } .jk_field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 0; } .jk_field_lab { width: 110px; flex-shrink: 0; margin: 0; } /* was 64px: "Travel priority tier" took three lines */ .jk_opt { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; } .jk_opt input { margin: 0; cursor: pointer; } .jk_rank { width: auto; padding: 4px 8px; cursor: pointer; } .jk_roster_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; } .jky_flag_btn { margin-left: 4px; } /* a full track / no flags left: the button keeps its own look, dimmed (incJS_11 toggles the class) */ .jk_roster .jky_save_disabled, .jk_roster .jky_save_disabled:hover { opacity: 0.55; cursor: not-allowed; filter: none; } .jky_busy { opacity: 0.55; pointer-events: none; } .jky_roster_msg { font-size: 11.5px; font-weight: 600; } .jky_msg_ok { color: var(--pg-pos); } .jky_msg_bad { color: var(--pg-neg); } /* .jk_pager -> KITREVIEW_20261018: the kit .pg_pager (ehr_kit.css section 11a) */ @media (max-width: 600px) { .jk_bar { flex-direction: column; align-items: stretch; } .jk_loc { width: 100%; } .jk_tabgroup_trk { display: block; } } @media (max-width: 480px) { .jky_table .jky_th_flag, .jky_table .jky_td_flag { white-space: normal; } .jky_roster_badge { white-space: normal; } .jk_field_lab { width: 100%; } } /* --------------------------------------------------------------------------- 4. AUCTION -- KITLOOK_20261018: moved from automated.css AUCTION_20260912 and rewritten on tokens. The recent-form swatch's COLOUR is mkw_bg_ (mike.css, the old game's ramp; data); .au_heat only shapes it. --------------------------------------------------------------------------- */ .au_tabs { display: flex; flex-wrap: wrap; gap: 0 1em; } .au_tabgroup { display: flex; flex-wrap: wrap; gap: 0 1em; } /* the two groups (whose lots | open or closed) in one bar: a thin rule between them */ .au_tabgroup + .au_tabgroup { padding-left: 1em; border-left: 1px solid color-mix(in srgb, var(--ehr-border) 35%, transparent); } .au_cards { font-size: 12px; padding: 4px 10px; } .au_cards_held { font-weight: 600; opacity: 0.8; } .auc_table .auc_th_expand, .auc_table .auc_td_expand { width: 28px; padding-left: 8px; padding-right: 4px; text-align: center; } .auc_table .auc_th_horse { min-width: 160px; } .auc_table .auc_th_bid, .auc_table .auc_td_bid, .auc_table .auc_th_closes { white-space: nowrap; } .au_name { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; } .au_open { width: 14px; height: 14px; cursor: pointer; margin-left: 6px; flex-shrink: 0; opacity: 0.75; } .au_open:hover { opacity: 1; } .au_age { font-weight: 700; color: var(--ehr-text-primary); } .au_sep { display: inline-block; margin: 0 5px; color: var(--ehr-text-muted); } .au_bid { font-weight: 700; color: var(--ehr-text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } .au_bidbtn { margin-left: 6px; } /* MYMAX_20260914 rev 3: your standing maximum in brackets straight after the price, 1(3), explained on hover. OUTBID_20260914: the red "outbid" chip (pg_chip_bad) beside the price. */ .au_bidmax { font-size: 0.85em; font-weight: 600; color: var(--pg-pos); cursor: help; font-variant-numeric: tabular-nums; } .au_outbid { margin-left: 5px; cursor: help; vertical-align: middle; } .au_closes { font-size: 11.5px; color: var(--ehr-text-secondary); white-space: nowrap; } .auc_table .auc_td_closes { white-space: nowrap; } /* the form swatch fills its cell so a pale mid-ramp shade still reads as a tint; no rating gets a hatch that cannot be mistaken for "average" */ .au_heat { display: block; width: 100%; box-sizing: border-box; padding: 3px 4px; border-radius: 3px; line-height: 1; white-space: nowrap; text-align: center; border: 1px solid var(--mm-swatch-edge); } .au_heat img { vertical-align: middle; } .au_heat_none { background: repeating-linear-gradient(45deg, var(--mm-hatch-a), var(--mm-hatch-a) 3px, var(--mm-hatch-b) 3px, var(--mm-hatch-b) 6px); } .stable_horse_list_expanded_value .au_heat { display: inline-block; width: auto; } /* the bid panel (its own , opened by aucCards_toggleBid): the open-row panel with Will's gold strip */ .au_bidpanel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px 10px 17px; background: var(--mm-panel-bg); box-shadow: inset 3px 0 0 var(--ehr-label-accent); border-bottom: 1px solid var(--ehr-border-default); font-size: 13px; color: var(--ehr-text-primary); } .au_bid_min b { font-variant-numeric: tabular-nums; } .au_bid_lab { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .au_bidin { width: 90px; text-align: right; font-variant-numeric: tabular-nums; } .au_bid_note { flex: 1 1 100%; } .au_bidmsg { font-weight: 700; font-size: 12px; } .au_bidmsg_ok { color: var(--pg-pos); } /* KITREVIEW_20261018: NT_Say (incJS_12_auction_cards.js) toggles these; was an inline green / #c0392b */ .au_bidmsg_bad { color: var(--pg-neg); } /* .au_pager -> KITREVIEW_20261018: the kit .pg_pager (ehr_kit.css section 11a) */ @media (max-width: 700px) { .au_cards { align-self: flex-start; } .au_tabgroup + .au_tabgroup { padding-left: 0; border-left: 0; } /* the groups stack: no rule at the start of a line */ } @media (max-width: 480px) { .au_sep { margin: 0 3px; } /* the Bid cell: price, outbid chip and button stack instead of pushing the table past the screen */ .auc_table .auc_td_bid { white-space: normal; } .auc_table .auc_td_bid .au_bidbtn { margin: 4px 0 0; } } /* --------------------------------------------------------------------------- 5. WATCHLIST -- KITLOOK_20261018: moved from automated.css WATCHLIST_20260912 and ehr_style_13 (remove control, sire panel, sire toggle, sire-linked tints), rewritten on tokens. The type chips and the sire-linked tints are DATA: same hues, a dark line each in section 0. --------------------------------------------------------------------------- */ .wl_tabs { display: flex; flex-wrap: wrap; gap: 6px; } .wl_bar.pg_tabs .wl_tabs { gap: 0 1em; } .wl_counts, .pg_note.wl_bar { margin: 10px 0; } /* the filter row: a pg_filter card (straight under the tab bar) of chip capsules */ .wl_filters.pg_filter { justify-content: flex-start; align-items: center; gap: .75em; margin-bottom: 0; } .wl_filters .pg_chipgroup { gap: .5em; } .wl_filters .pg_chipgroup_lab { color: inherit; font-size: 13px; } /* the label is also pg_muted; the capsule is light in every theme, so it takes the capsule's text colour */ /* WLLISTONLY_20261021: the row and a capsule hide by [hidden] (the Sires tab; Show Sires hides Age and Sex; Not racing with Horses only) -- restated, the kit's display:flex would beat it; Update and its note (the kit's .pg_pending); the list's own line (counts, Show sired horses, the refresh) at the top of the list root */ .wl_filters[hidden], .wl_filters .pg_chipgroup[hidden] { display: none !important; } .wl_go { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; } .wl_listbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0; } .wl_listbar .wl_counts { margin: 0; } /* "Show / Hide sired horses": off = the kit's white button, on = Will's gold pill */ .wl_sire_toggle { padding: 4px 12px; border: 1px solid var(--ehr-border-default); border-radius: var(--pg-radius-ctl); background: var(--ehr-surface-bg); color: var(--ehr-text-primary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } .wl_sire_toggle:hover { background: var(--ehr-table-primary-hover-bg); } .wl_sire_toggle_on { border-color: var(--ehr-label-accent); background: var(--ehr-label-accent); color: var(--ehr-theme-accent-text); } .wl_sire_toggle_on:hover { background: var(--ehr-label-accent); filter: brightness(0.92); } .wl_sire_toggle_off { color: var(--ehr-text-primary); } .wl_sire_hidden { display: none !important; } /* beats the expander rows' display:table-row (ehr_content.css); JS-toggled */ /* sire-linked rows (foals of a watched sire), two alternating tints */ .wl_table tbody tr.wl_row.wl_row_sire_linked.wl_sire_alt_0 { background: var(--mm-linked-a); } .wl_table tbody tr.wl_row.wl_row_sire_linked.wl_sire_alt_1 { background: var(--mm-linked-b); } .wl_table tbody tr.wl_row.wl_row_sire_linked:hover { background: var(--ehr-table-primary-hover-bg); } .wl_table .wl_th_expand, .wl_table .wl_td_expand { width: 28px; padding-left: 8px; padding-right: 4px; text-align: center; } .wl_table .wl_th_horse { min-width: 160px; } .wl_table .wl_th_sire { min-width: 110px; } .wl_table .wl_th_badges, .wl_table .wl_td_badges, .wl_table .wl_th_price, .wl_table .wl_td_price, .wl_table .wl_th_date, .wl_table .wl_td_date { white-space: nowrap; } /* name cell: name left, open-arrow + remove right */ .wl_name { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; } .wl_name_ctl { display: inline-flex; align-items: center; flex-shrink: 0; } .wl_open { width: 14px; height: 14px; cursor: pointer; margin-left: 6px; opacity: 0.75; } .wl_open:hover { opacity: 1; } .wl_open_sm { width: 12px; height: 12px; margin: 0 6px 0 0; } .wl_sire_name { color: var(--mm-sire-text); } /* Remove is an inline swap: x -> Remove / Keep (automated.js) */ .wl_rm { margin-left: 8px; padding: 0 3px; cursor: pointer; color: var(--ehr-text-muted); font-size: 12px; font-weight: 700; } .wl_rm:hover { color: var(--pg-neg); } .wl_rm_ask { display: none; align-items: center; gap: 5px; margin-left: 8px; } .wl_rm_yes, .wl_rm_no { cursor: pointer; padding: 1px 8px; border-radius: var(--pg-radius-pill); font-size: 11px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; } .wl_rm_yes { background: var(--pg-bad-text); border-color: var(--pg-bad-text); color: var(--ehr-surface-bg); } .wl_rm_no { background: var(--ehr-surface-bg); border-color: var(--ehr-border-default); color: var(--ehr-text-primary); } .wl_rm_msg { margin-left: 6px; font-size: 11px; color: var(--pg-neg); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* chips: the Type column and the per-foal tags in a sire's panel. H = plain pg_chip. */ .wl_chip_c { border-color: var(--pg-info-border); background: var(--pg-info-bg); color: var(--pg-info-text); } /* claim */ .wl_chip_a { border-color: var(--pg-ok-border); background: var(--pg-ok-bg); color: var(--pg-ok-text); } /* auction */ .wl_chip_ca { border-color: var(--pg-warn-border); background: var(--pg-warn-bg); color: var(--pg-warn-text); } /* claim + auction */ .wl_chip_s { border-color: var(--mm-sire-border); background: var(--mm-sire-bg); color: var(--mm-sire-text); } /* sire */ /* WATCH264_20261012: L = listed on the Lease Market, R = a watched retired mare that is not listed */ .wl_chip_l { border-color: var(--mm-lease-border); background: var(--mm-lease-bg); color: var(--mm-lease-text); } .wl_chip_r { border-color: var(--mm-ret-border); background: var(--mm-ret-bg); color: var(--mm-ret-text); } .wl_cardchip { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .wl_sep { display: inline-block; margin: 0 5px; color: var(--ehr-text-muted); } /* a sire's panel: its foals now in an auction, a claim or on the lease market */ .wl_sire_horses { display: flex; flex-direction: column; gap: 0; padding: 0; } .wl_sire_horse_row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 5px 6px; border-radius: 0; background: none; border-bottom: 1px solid var(--ehr-border-default); font-size: 12.5px; color: var(--ehr-text-primary); } .wl_sire_horse_row:last-child { border-bottom: 0; } .wl_sire_horse_row:hover { background: var(--ehr-table-primary-hover-bg); } .wl_sire_horse_name { min-width: 180px; color: var(--ehr-text-primary); } .wl_sire_horse_sex { color: var(--ehr-text-secondary); font-size: 12px; min-width: 52px; } .wl_sire_horse_price { font-weight: 700; color: var(--ehr-text-primary); font-variant-numeric: tabular-nums; min-width: 0; } .wl_sire_horse_date { color: var(--ehr-text-secondary); font-size: 12px; } .wl_sire_empty { padding: 4px 6px; color: var(--ehr-text-secondary); font-size: 12.5px; font-style: normal; } @media (max-width: 640px) { .wl_bar.pg_tabs { align-items: stretch; } .wl_sire_horse_name { min-width: 0; } } /* PHONES: one more step under ehr_style_13's ladder (which stops at 600px) -- the table was still wider than a 375px screen and slid sideways. Sire and Date go (both are in the row's panel: Sire, Runs on / Closes), and the price cell's chips may wrap. */ @media (max-width: 480px) { .wl_th_sire, .wl_td_sire, .wl_th_date, .wl_td_date { display: none; } .wl_table .wl_td_price { white-space: normal; } .wl_table .wl_td_price .pg_link { white-space: nowrap; } } /* --------------------------------------------------------------------------- 6. HORSE SEARCH -- KITLOOK_20261018: moved from automated.css HORSESEARCH_20260925 / HSRCOLS / HSRBADGE (and its device-dark lines), rewritten on tokens. The table also carries .sd_table (the sire one-pager kit, shared, white in every theme), whose colours are overridden here under .hsr_table only. Its hide ladder (hsr_t2 / hsr_t3) moved with it. --------------------------------------------------------------------------- */ .hsr_form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } .hsr_input { flex: 1 1 220px; max-width: 360px; font-size: 14px; padding: 8px 10px; } .hsr_btn.pg_btn { padding: 7px 16px; } .hsr_count.pg_card_hd { justify-content: flex-start; font-size: 13px; color: var(--ehr-text-secondary); } /* the "type at least 2 letters" line (template, and automated.js hsr_search writes it too): the kit's info note */ .hsr_note { padding: 10px 12px; border: 1px solid var(--pg-info-border); border-left-width: 4px; border-radius: var(--pg-radius); background: var(--pg-info-bg); color: var(--pg-info-text); font-size: 13px; } .hsr_empty { padding: 18px 14px; border: 1px dashed var(--ehr-border-default); border-radius: var(--pg-radius); background: var(--ehr-card-primary-body-bg); color: var(--ehr-text-secondary); font-size: 13px; text-align: center; } .hsr_empty strong { color: var(--ehr-text-primary); } /* the table: Will's header and rows over the shared .sd_table's beige header and white body */ .hsr_table.sd_table thead tr { background: none; } .hsr_table.sd_table th { padding: 8px 6px; font-size: 13px; background: var(--ehr-table-primary-header-bg); color: var(--ehr-table-primary-header-text); border-bottom: 1px solid var(--ehr-border-default); } .hsr_table.sd_table td { font-size: 13px; padding: 6px; border-bottom: 1px solid var(--ehr-border-default); } .hsr_table.sd_table td.hsr_td_panel { padding: 0; } .hsr_table tbody tr.hsr_row.hsr_yours { background: var(--mm-mine-bg); } .hsr_table tbody tr.hsr_row.hsr_yours:hover { background: var(--ehr-table-primary-hover-bg); } /* HSRCOLS_20260925: split columns, sortable headers, detail row under each horse */ .hsr_table th[onclick] { cursor: pointer; white-space: nowrap; } .hsr_th_x, .hsr_td_x { width: 22px; } .hsr_name a { text-decoration: none; } .hsr_name a:hover, .hsr_open:hover { text-decoration: underline; } .hsr_table .stable_horse_list_expanded_item.hsr_nar { display: none; } /* HSRBADGE_20260925: top 2 badges, status chips (pg_chip), money in the kit's "money in" green */ .hsr_badges img { height: 22px; vertical-align: middle; } .hsr_bsort { display: none; } /* HSRBEST_20260925: the Badges sort key, read by misc_sortTable */ .hsr_money { color: var(--pg-pos); font-weight: 700; white-space: nowrap; } .hsr_wins { font-weight: 700; color: var(--ehr-text-primary); } .hsr_st_train { border-color: var(--pg-ok-border); background: var(--pg-ok-bg); color: var(--pg-ok-text); } .hsr_st_farm { border-color: var(--pg-warn-border); background: var(--pg-warn-bg); color: var(--pg-warn-text); } .hsr_badge { margin-left: 4px; } /* .hsr_pager -> KITREVIEW_20261018: the kit .pg_pager (ehr_kit.css section 11a) */ @media (max-width: 760px) { .hsr_table .stable_horse_list_expanded_item.hsr_nar { display: flex; flex-direction: column; } /* was block: label beside the badges */ .hsr_t3 { display: none; } } @media (max-width: 560px) { .hsr_t2 { display: none; } } /* LISTONLY_20261021 (329, G1): the Horse Search empty-result refresh sits at the right of its box, not inline before the text */ .hsr_empty .ehr_refresh { float: right; margin: -10px -6px 6px 10px; }