/* Theme preference is auto | light | dark on . Missing preference follows OS. * Shared by both sites and all wrappers. Author-supplied content colors are preserved. */ :root { color-scheme: light; --bp-bg: #fff; --bp-text: black; --bp-text-muted: gray; --bp-text-secondary: #555; --bp-text-detail: #555; --bp-text-faint: #bbb; --bp-text-inverse: white; --bp-link: #3030ff; --bp-link-muted: #9090ff; --bp-link-strong: blue; --bp-quote-link: #55f; --bp-focus: #3535a0; --bp-dog: #933; --bp-person: #006; --bp-kennel: #060; --bp-group: #066; --bp-surface: #eee; --bp-surface-raised: #ddd; --bp-surface-alt: #ccc; --bp-surface-inverse: gray; --bp-action-muted-bg: #bbb; --bp-border: gray; --bp-border-subtle: #ccc; --bp-border-row: #eee; --bp-border-strong: black; --bp-image-border: #89898b; --bp-dead-border: #999; --bp-hover: #99f; --bp-button-hover: #aaf; --bp-table-hover: #a5b0f8; --bp-danger: red; --bp-success: green; --bp-danger-bg: #fdd; --bp-danger-soft-bg: #fee; --bp-success-bg: #dfd; --bp-info-bg: #ffd; --bp-hint-bg: #ffa; --bp-highlight: yellow; --bp-forum-head: #dedeff; --bp-forum-body: #f0f0ff; --bp-quote-bg: #f3f3ff; --bp-vote-text: #007; --bp-input-accent: #00a; --bp-image-hover: #5050ff; --bp-search-header: #071871; --bp-search-results: #ffc; --bp-input-bg: #fff; --bp-control-bg: ButtonFace; --bp-control-text: ButtonText; --bp-pedigree-male: #ccc; --bp-pedigree-female: #eee; --bp-male-panel: #ccf; --bp-children-male-bg: #ddf; --bp-female-panel: #fdd; --bp-message-in: #eef; --bp-message-out: #efe; --bp-dialog-bg: #d4d0c8; --bp-club-bg: #ccc; --bp-mobile-bg: #f5f5fa; --bp-mobile-border: #d8d8e3; --bp-mobile-brand: #191941; --bp-mobile-link: #252571; --bp-mobile-toggle-border: #c6c6d5; --bp-mobile-hover: #e2e2f0; --bp-club-border: #aaa; --bp-skip-link: #18186b; --bp-ui-bg: #eee; --bp-ui-text: #333; --bp-ui-border: #ddd; --bp-ui-header-bg: #f6a828; --bp-ui-header-border: #e78f08; --bp-ui-default-bg: #f6f6f6; --bp-ui-default-text: #1c94c4; --bp-ui-hover-bg: #fdf5ce; --bp-ui-hover-border: #fbcb09; --bp-ui-hover-text: #c77405; --bp-ui-active-bg: #fff; --bp-ui-active-border: #fbd850; --bp-ui-active-text: #eb8f00; --bp-ui-highlight-bg: #ffe45c; --bp-ui-highlight-border: #fed22f; --bp-ui-highlight-text: #363636; --bp-ui-error-bg: #b81900; --bp-ui-error-border: #cd0a0a; --bp-ui-error-text: #fff; --bp-ui-overlay: #666; --bp-tooltip-bg: #ddf; --bp-tooltip-close: #900; --bp-vendor-background-image: initial; --bp-cluetip-arrow-half: 0px; --bp-cluetip-arrow-full: 0px; --bp-ui-icon-filter: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --bp-bg: #191b1f; --bp-text: #e4e6eb; --bp-text-muted: #b3b7c1; --bp-text-secondary: #b3b7c1; --bp-text-detail: #b3b7c1; --bp-text-faint: #b3b7c1; --bp-text-inverse: #e4e6eb; --bp-link: #a0b9ff; --bp-link-muted: #a0b9ff; --bp-link-strong: #b3c6ff; --bp-quote-link: #a0b9ff; --bp-focus: #b6c9ff; --bp-dog: #efa7a7; --bp-person: #b4beff; --bp-kennel: #92d4a4; --bp-group: #8dd6d3; --bp-surface: #25282e; --bp-surface-raised: #30343b; --bp-surface-alt: #292d34; --bp-surface-inverse: #373c45; --bp-action-muted-bg: #5a626e; --bp-border: #515761; --bp-border-subtle: #414751; --bp-border-row: #373d46; --bp-border-strong: #727a87; --bp-image-border: #69717e; --bp-dead-border: #69717e; --bp-hover: #3b4559; --bp-button-hover: #3b4559; --bp-table-hover: #35415a; --bp-danger: #ff9b9b; --bp-success: #8dd6aa; --bp-danger-bg: #452b31; --bp-danger-soft-bg: #34272d; --bp-success-bg: #253d30; --bp-info-bg: #3b3828; --bp-hint-bg: #484027; --bp-highlight: #665323; --bp-forum-head: #30374a; --bp-forum-body: #252b38; --bp-quote-bg: #2b3039; --bp-vote-text: #c3caff; --bp-input-accent: #a0b9ff; --bp-image-hover: #a0b9ff; --bp-search-header: #334365; --bp-search-results: #302f29; --bp-input-bg: #202328; --bp-control-bg: #30343b; --bp-control-text: #e4e6eb; --bp-pedigree-male: #2c333d; --bp-pedigree-female: #262b33; --bp-male-panel: #2b354b; --bp-children-male-bg: #2b354b; --bp-female-panel: #452b31; --bp-message-in: #293347; --bp-message-out: #293b30; --bp-dialog-bg: #25282e; --bp-club-bg: #191b1f; --bp-mobile-bg: #25282e; --bp-mobile-border: #414751; --bp-mobile-brand: #e4e6eb; --bp-mobile-link: #a0b9ff; --bp-mobile-toggle-border: #515761; --bp-mobile-hover: #353d4c; --bp-club-border: #515761; --bp-skip-link: #a0b9ff; --bp-ui-bg: #25282e; --bp-ui-text: #e4e6eb; --bp-ui-border: #515761; --bp-ui-header-bg: #30343b; --bp-ui-header-border: #515761; --bp-ui-default-bg: #30343b; --bp-ui-default-text: #a0b9ff; --bp-ui-hover-bg: #3b4559; --bp-ui-hover-border: #7c8ea8; --bp-ui-hover-text: #d5e1ff; --bp-ui-active-bg: #39465f; --bp-ui-active-border: #7c8ea8; --bp-ui-active-text: #e4e6eb; --bp-ui-highlight-bg: #484027; --bp-ui-highlight-border: #9f8b54; --bp-ui-highlight-text: #eee2ad; --bp-ui-error-bg: #452b31; --bp-ui-error-border: #bd787f; --bp-ui-error-text: #ffb5b5; --bp-ui-overlay: #080a0d; --bp-tooltip-bg: #2b3039; --bp-tooltip-close: #ffb5b5; --bp-vendor-background-image: none; --bp-cluetip-arrow-half: 11px; --bp-cluetip-arrow-full: 11px; --bp-ui-icon-filter: brightness(0) invert(.86); } } :root[data-theme="dark"] { color-scheme: dark; --bp-bg: #191b1f; --bp-text: #e4e6eb; --bp-text-muted: #b3b7c1; --bp-text-secondary: #b3b7c1; --bp-text-detail: #b3b7c1; --bp-text-faint: #b3b7c1; --bp-text-inverse: #e4e6eb; --bp-link: #a0b9ff; --bp-link-muted: #a0b9ff; --bp-link-strong: #b3c6ff; --bp-quote-link: #a0b9ff; --bp-focus: #b6c9ff; --bp-dog: #efa7a7; --bp-person: #b4beff; --bp-kennel: #92d4a4; --bp-group: #8dd6d3; --bp-surface: #25282e; --bp-surface-raised: #30343b; --bp-surface-alt: #292d34; --bp-surface-inverse: #373c45; --bp-action-muted-bg: #5a626e; --bp-border: #515761; --bp-border-subtle: #414751; --bp-border-row: #373d46; --bp-border-strong: #727a87; --bp-image-border: #69717e; --bp-dead-border: #69717e; --bp-hover: #3b4559; --bp-button-hover: #3b4559; --bp-table-hover: #35415a; --bp-danger: #ff9b9b; --bp-success: #8dd6aa; --bp-danger-bg: #452b31; --bp-danger-soft-bg: #34272d; --bp-success-bg: #253d30; --bp-info-bg: #3b3828; --bp-hint-bg: #484027; --bp-highlight: #665323; --bp-forum-head: #30374a; --bp-forum-body: #252b38; --bp-quote-bg: #2b3039; --bp-vote-text: #c3caff; --bp-input-accent: #a0b9ff; --bp-image-hover: #a0b9ff; --bp-search-header: #334365; --bp-search-results: #302f29; --bp-input-bg: #202328; --bp-control-bg: #30343b; --bp-control-text: #e4e6eb; --bp-pedigree-male: #2c333d; --bp-pedigree-female: #262b33; --bp-male-panel: #2b354b; --bp-children-male-bg: #2b354b; --bp-female-panel: #452b31; --bp-message-in: #293347; --bp-message-out: #293b30; --bp-dialog-bg: #25282e; --bp-club-bg: #191b1f; --bp-mobile-bg: #25282e; --bp-mobile-border: #414751; --bp-mobile-brand: #e4e6eb; --bp-mobile-link: #a0b9ff; --bp-mobile-toggle-border: #515761; --bp-mobile-hover: #353d4c; --bp-club-border: #515761; --bp-skip-link: #a0b9ff; --bp-ui-bg: #25282e; --bp-ui-text: #e4e6eb; --bp-ui-border: #515761; --bp-ui-header-bg: #30343b; --bp-ui-header-border: #515761; --bp-ui-default-bg: #30343b; --bp-ui-default-text: #a0b9ff; --bp-ui-hover-bg: #3b4559; --bp-ui-hover-border: #7c8ea8; --bp-ui-hover-text: #d5e1ff; --bp-ui-active-bg: #39465f; --bp-ui-active-border: #7c8ea8; --bp-ui-active-text: #e4e6eb; --bp-ui-highlight-bg: #484027; --bp-ui-highlight-border: #9f8b54; --bp-ui-highlight-text: #eee2ad; --bp-ui-error-bg: #452b31; --bp-ui-error-border: #bd787f; --bp-ui-error-text: #ffb5b5; --bp-ui-overlay: #080a0d; --bp-tooltip-bg: #2b3039; --bp-tooltip-close: #ffb5b5; --bp-vendor-background-image: none; --bp-cluetip-arrow-half: 11px; --bp-cluetip-arrow-full: 11px; --bp-ui-icon-filter: brightness(0) invert(.86); } /* Native controls follow the resolved CSS theme, including when scripting is unavailable. */ :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="image"]), textarea, select) { background-color: var(--bp-input-bg); color: var(--bp-text); } :where(button, input[type="button"], input[type="submit"], input[type="reset"]) { background-color: var(--bp-control-bg); color: var(--bp-control-text); } :where(input, textarea, select, button):focus-visible { outline: 2px solid var(--bp-focus); outline-offset: 2px; } :where(input, textarea)::placeholder { color: var(--bp-text-muted); } /* Replace interface inline colors with these classes; authored rich text is left intact. */ .bp-text-muted { color: var(--bp-text-muted); } .bp-text-normal { color: var(--bp-text); } .bp-text-danger { color: var(--bp-danger); } .bp-text-success { color: var(--bp-success); } .bp-surface { background-color: var(--bp-surface); } .bp-surface-raised { background-color: var(--bp-surface-raised); } .bp-notice, .bp-settings-message { border: 1px solid var(--bp-border-strong); margin: 5px; padding: 5px; color: var(--bp-text); background-color: var(--bp-info-bg); } .bp-notice-success, .bp-settings-success { background-color: var(--bp-success-bg); } .bp-notice-error, .bp-settings-error { background-color: var(--bp-danger-bg); } .bp-message-in { background-color: var(--bp-message-in); } .bp-message-out { background-color: var(--bp-message-out); } .bp-pedigree-key { border: 1px solid var(--bp-border-strong); color: var(--bp-text); } .bp-pedigree-key-male { background-color: var(--bp-pedigree-male); } .bp-pedigree-key-female { background-color: var(--bp-pedigree-female); } .bp-popup-page, .bp-dialog-page { padding: 5px; } .bp-dialog-page { background-color: var(--bp-dialog-bg); } .site-page-club { background-color: var(--bp-club-bg); } .site-footer-row { border-top: 1px solid var(--bp-surface-raised); } .site-club-footer-row { background-color: var(--bp-surface-raised); } .site-footer-credit { color: var(--bp-text-muted); font-size: 0.8em; } .site-footer-link { color: var(--bp-text); } /* jQuery UI's light PNG gradients otherwise hide the dark background colors. */ .ui-widget-content { border-color: var(--bp-ui-border); background-color: var(--bp-ui-bg); background-image: var(--bp-vendor-background-image, url(/i/jquery-ui/ui-bg_highlight-soft_100_eeeeee_1x100.png)); color: var(--bp-ui-text); } .ui-widget-content a { color: var(--bp-ui-text); } .ui-widget-header { border-color: var(--bp-ui-header-border); background-color: var(--bp-ui-header-bg); background-image: var(--bp-vendor-background-image, url(/i/jquery-ui/ui-bg_gloss-wave_35_f6a828_500x100.png)); color: var(--bp-text-inverse); } .ui-widget-header a { color: var(--bp-text-inverse); } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border-color: var(--bp-border-subtle); background-color: var(--bp-ui-default-bg); background-image: var(--bp-vendor-background-image, url(/i/jquery-ui/ui-bg_glass_100_f6f6f6_1x400.png)); color: var(--bp-ui-default-text); } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: var(--bp-ui-default-text); } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border-color: var(--bp-ui-hover-border); background-color: var(--bp-ui-hover-bg); background-image: var(--bp-vendor-background-image, url(/i/jquery-ui/ui-bg_glass_100_fdf5ce_1x400.png)); color: var(--bp-ui-hover-text); } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited { color: var(--bp-ui-hover-text); } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border-color: var(--bp-ui-active-border); background-color: var(--bp-ui-active-bg); background-image: var(--bp-vendor-background-image, url(/i/jquery-ui/ui-bg_glass_65_ffffff_1x400.png)); color: var(--bp-ui-active-text); } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: var(--bp-ui-active-text); } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border-color: var(--bp-ui-highlight-border); background-color: var(--bp-ui-highlight-bg); background-image: var(--bp-vendor-background-image, url(/i/jquery-ui/ui-bg_highlight-soft_75_ffe45c_1x100.png)); color: var(--bp-ui-highlight-text); } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: var(--bp-ui-highlight-text); } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border-color: var(--bp-ui-error-border); background-color: var(--bp-ui-error-bg); background-image: var(--bp-vendor-background-image, url(/i/jquery-ui/ui-bg_diagonals-thick_18_b81900_40x40.png)); color: var(--bp-ui-error-text); } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a, .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: var(--bp-ui-error-text); } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { background-image: none; } .ui-icon { filter: var(--bp-ui-icon-filter); } .ui-widget-overlay { background-color: var(--bp-ui-overlay); background-image: var(--bp-vendor-background-image, url(/i/jquery-ui/ui-bg_diagonals-thick_20_666666_40x40.png)); } .ui-widget-shadow { background-image: var(--bp-vendor-background-image, url(/i/jquery-ui/ui-bg_flat_10_000000_40x100.png)); } /* ClueTip remains a separate surface; its arrows are drawn without light raster edges in dark mode. */ .cluetip-jtip { background-color: var(--bp-tooltip-bg); color: var(--bp-text); } .cluetip-jtip #cluetip-outer { border-color: var(--bp-border-subtle); } .cluetip-jtip div#cluetip-close { color: var(--bp-tooltip-close); } .cluetip-jtip .ui-cluetip-header { background-color: var(--bp-surface-alt); } div.cluetip-jtip .cluetip-arrows { box-sizing: border-box; } div.clue-right-jtip .cluetip-arrows { background-image: var(--bp-vendor-background-image, url(images/arrowleft.gif)); border-top: var(--bp-cluetip-arrow-half) solid transparent; border-bottom: var(--bp-cluetip-arrow-half) solid transparent; border-right: var(--bp-cluetip-arrow-full) solid var(--bp-tooltip-bg); } div.clue-left-jtip .cluetip-arrows { background-image: var(--bp-vendor-background-image, url(images/arrowright.gif)); border-top: var(--bp-cluetip-arrow-half) solid transparent; border-bottom: var(--bp-cluetip-arrow-half) solid transparent; border-left: var(--bp-cluetip-arrow-full) solid var(--bp-tooltip-bg); } div.clue-top-jtip .cluetip-arrows { background-image: var(--bp-vendor-background-image, url(images/arrowdown.gif)); border-left: var(--bp-cluetip-arrow-half) solid transparent; border-right: var(--bp-cluetip-arrow-half) solid transparent; border-top: var(--bp-cluetip-arrow-full) solid var(--bp-tooltip-bg); } div.clue-bottom-jtip .cluetip-arrows { background-image: var(--bp-vendor-background-image, url(images/arrowup.gif)); border-left: var(--bp-cluetip-arrow-half) solid transparent; border-right: var(--bp-cluetip-arrow-half) solid transparent; border-bottom: var(--bp-cluetip-arrow-full) solid var(--bp-tooltip-bg); } /* Legacy authored colors were chosen for a white page. Keep that reading surface * only around the innermost authored content, without changing its stored markup * or the surrounding forum controls. Theme-variable interface styles do not opt in. * The wrapper also covers authored news HTML. Editors have their own canvas policy. */ :where(.msg_body, .bp-rich-content, .msg_text:not(:has(.msg_body, .bp-rich-content))):not(.bp-html-editor *):has([style*="color" i]:not([style*="var(--bp-" i]), font[color]) { color-scheme: light; --bp-bg: #fff; --bp-text: black; --bp-text-muted: gray; --bp-text-secondary: #555; --bp-text-detail: #555; --bp-text-faint: #bbb; --bp-link: #3030ff; --bp-link-muted: #9090ff; --bp-link-strong: blue; --bp-quote-link: #55f; --bp-dog: #933; --bp-person: #006; --bp-kennel: #060; --bp-group: #066; --bp-border: gray; --bp-border-subtle: #ccc; --bp-border-row: #eee; --bp-border-strong: black; --bp-surface: #eee; --bp-surface-raised: #ddd; --bp-surface-alt: #ccc; --bp-quote-bg: #f3f3ff; --bp-forum-body: #fff; --bp-danger-soft-bg: #fff; --bp-danger: red; --bp-success: green; --bp-danger-bg: #fdd; --bp-success-bg: #dfd; --bp-input-bg: #fff; --bp-control-bg: ButtonFace; --bp-control-text: ButtonText; background-color: #fff; color: #000; } /* Printed pages always use the light palette, even for an explicit dark preference. * Keep equal specificity with the automatic-mode selector above. */ @media print { :root, :root[data-theme], :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: light; --bp-bg: #fff; --bp-text: black; --bp-text-muted: gray; --bp-text-secondary: #555; --bp-text-detail: #555; --bp-text-faint: #bbb; --bp-text-inverse: white; --bp-link: #3030ff; --bp-link-muted: #9090ff; --bp-link-strong: blue; --bp-quote-link: #55f; --bp-focus: #3535a0; --bp-dog: #933; --bp-person: #006; --bp-kennel: #060; --bp-group: #066; --bp-surface: #eee; --bp-surface-raised: #ddd; --bp-surface-alt: #ccc; --bp-surface-inverse: gray; --bp-action-muted-bg: #bbb; --bp-border: gray; --bp-border-subtle: #ccc; --bp-border-row: #eee; --bp-border-strong: black; --bp-image-border: #89898b; --bp-dead-border: #999; --bp-hover: #99f; --bp-button-hover: #aaf; --bp-table-hover: #a5b0f8; --bp-danger: red; --bp-success: green; --bp-danger-bg: #fdd; --bp-danger-soft-bg: #fee; --bp-success-bg: #dfd; --bp-info-bg: #ffd; --bp-hint-bg: #ffa; --bp-highlight: yellow; --bp-forum-head: #dedeff; --bp-forum-body: #f0f0ff; --bp-quote-bg: #f3f3ff; --bp-vote-text: #007; --bp-input-accent: #00a; --bp-image-hover: #5050ff; --bp-search-header: #071871; --bp-search-results: #ffc; --bp-input-bg: #fff; --bp-control-bg: ButtonFace; --bp-control-text: ButtonText; --bp-pedigree-male: #ccc; --bp-pedigree-female: #eee; --bp-male-panel: #ccf; --bp-children-male-bg: #ddf; --bp-female-panel: #fdd; --bp-message-in: #eef; --bp-message-out: #efe; --bp-dialog-bg: #d4d0c8; --bp-club-bg: #ccc; --bp-mobile-bg: #f5f5fa; --bp-mobile-border: #d8d8e3; --bp-mobile-brand: #191941; --bp-mobile-link: #252571; --bp-mobile-toggle-border: #c6c6d5; --bp-mobile-hover: #e2e2f0; --bp-club-border: #aaa; --bp-skip-link: #18186b; --bp-ui-bg: #eee; --bp-ui-text: #333; --bp-ui-border: #ddd; --bp-ui-header-bg: #f6a828; --bp-ui-header-border: #e78f08; --bp-ui-default-bg: #f6f6f6; --bp-ui-default-text: #1c94c4; --bp-ui-hover-bg: #fdf5ce; --bp-ui-hover-border: #fbcb09; --bp-ui-hover-text: #c77405; --bp-ui-active-bg: #fff; --bp-ui-active-border: #fbd850; --bp-ui-active-text: #eb8f00; --bp-ui-highlight-bg: #ffe45c; --bp-ui-highlight-border: #fed22f; --bp-ui-highlight-text: #363636; --bp-ui-error-bg: #b81900; --bp-ui-error-border: #cd0a0a; --bp-ui-error-text: #fff; --bp-ui-overlay: #666; --bp-tooltip-bg: #ddf; --bp-tooltip-close: #900; --bp-vendor-background-image: initial; --bp-cluetip-arrow-half: 0px; --bp-cluetip-arrow-full: 0px; --bp-ui-icon-filter: none; } body, .site-page-club, .bp-dialog-page, .bp-popup-page { background-color: #fff; color: #000; } }