/* Afternoon mode -- a warm mid-tone theme between light and dark. How it works: afternoon mode puts BOTH classes on : "dark-mode" AND "afternoon-mode". css/dark.css supplies the complete themed base; this file loads AFTER it and re-lights the major surfaces with a warm palette and dark text. Anything not overridden here keeps its dark-mode styling, which stays self-consistent (dark surface + light text together) on the warm page. Palette: page bg #b3aa9c row stripes #c3bbad / #bcb3a5 surface #cfc7b8 raised #d9d2c4 border #8f877a soft border #9a9285 text #26221c muted #4c463d link #6e3b0f visited #7d5a3c highlight #e7d9a0 today #e3d491 All rules scoped under html.afternoon-mode inside @media screen; print always stays light. */ @media screen { /* ---- Base ---- */ html.afternoon-mode { background-color: #b3aa9c; color-scheme: light; } html.afternoon-mode body { background-color: #b3aa9c !important; color: #26221c; } html.afternoon-mode :where(a:link) { color: #6e3b0f; } html.afternoon-mode :where(a:visited) { color: #7d5a3c; } /* ---- Header band: warm dim instead of the dark invert ---- */ html.afternoon-mode #header { filter: sepia(0.3) brightness(0.92); color: #1c1c1c; } html.afternoon-mode #header a { color: #6e3b0f; } html.afternoon-mode #header .lod { color: #000000; } /* The #333 nav bar and its dropdowns keep their dark-mode styling -- the bar is dark in light mode too, so it reads as intentional chrome here. */ /* ---- Chrome ---- */ html.afternoon-mode #leftbar { border-right-color: #8f877a; } html.afternoon-mode #leftbar h2, html.afternoon-mode #maincontent h2 { border-bottom-color: #5b79b8; } html.afternoon-mode #actions a { color: #26221c; } html.afternoon-mode .message { color: #1a3d7c; border-color: #8f877a; } html.afternoon-mode .error { color: #8c1220; } html.afternoon-mode tr.error td { color: #26221c; } /* ---- Tables ---- */ html.afternoon-mode #list { border-bottom-color: #8f877a; border-top-color: #8f877a; } html.afternoon-mode #list td { color: #26221c; border-left-color: #9a9285; border-right-color: #9a9285; } html.afternoon-mode #list th { border-left-color: #9a9285; border-right-color: #9a9285; } html.afternoon-mode #list tr.list_row0 { background-color: #c3bbad; } html.afternoon-mode #list tr.list_row1 { background-color: #bcb3a5; } html.afternoon-mode #list tr:hover { box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px; outline: solid 1px rgba(0, 0, 0, 0.35); } html.afternoon-mode #list tr.selected { background-color: #e7d9a0; } html.afternoon-mode .list td { color: #26221c; border-left-color: rgba(0, 0, 0, 0.2); border-right-color: rgba(0, 0, 0, 0.2); } html.afternoon-mode .list tbody tr:hover { outline-color: rgba(0, 0, 0, 0.35); } html.afternoon-mode .list tbody tr:nth-child(odd) { background-color: #c3bbad; } html.afternoon-mode .list tbody tr:nth-child(even) { background-color: #bcb3a5; } html.afternoon-mode table.data tbody td { border-top-color: #9a9285; border-left-color: rgba(0, 0, 0, 0.12); border-right-color: rgba(0, 0, 0, 0.12); } html.afternoon-mode table.data tbody tr:nth-child(even) { background: #c3bbad; } html.afternoon-mode table.data tbody tr:nth-child(odd) { background: #bcb3a5; } html.afternoon-mode table.data tbody tr:hover, html.afternoon-mode table.data tbody tr.showMeHover { background: #e7d9a0; color: #26221c; } /* ---- Form controls ---- */ html.afternoon-mode input[type=time], html.afternoon-mode input[type=datetime-local], html.afternoon-mode input[type=text], html.afternoon-mode input[type=password], html.afternoon-mode input[type=email], html.afternoon-mode input[type=number], html.afternoon-mode input[type=date], html.afternoon-mode input[type=search], html.afternoon-mode input[type=tel], html.afternoon-mode input[type=url], html.afternoon-mode textarea { background-color: #d9d2c4; color: #26221c; border-color: #8f877a; } html.afternoon-mode select { background-color: #d9d2c4; color: #26221c; border-color: #8f877a !important; } html.afternoon-mode option { background-color: #d9d2c4; color: #26221c; } html.afternoon-mode button, html.afternoon-mode input[type=button], html.afternoon-mode input[type=submit], html.afternoon-mode input[type=reset] { background-color: #cfc7b8; color: #26221c; border-color: #8f877a; } html.afternoon-mode ::placeholder { color: #6b6458; } /* ---- Modals (classic + wae-modal) ---- */ html.afternoon-mode .modal-content { background-color: #cfc7b8; } html.afternoon-mode .modal .content, html.afternoon-mode .modal .modal-title, html.afternoon-mode .modal-title { color: #26221c; } html.afternoon-mode .modal-buttons { background-color: rgba(0, 0, 0, 0.08); border-top-color: rgba(0, 0, 0, 0.1); } html.afternoon-mode .modal-buttons a:link, html.afternoon-mode .modal-buttons a:visited { color: #26221c !important; } html.afternoon-mode .modal-cancel:after { color: rgba(0, 0, 0, 0.55) !important; } html.afternoon-mode .modal-cancel:hover:after { background-color: rgba(255, 255, 255, 0.4); } html.afternoon-mode .modal-content > h1:first-child, html.afternoon-mode .modal-content > h2:first-child, html.afternoon-mode .modal-content > h3:first-child, html.afternoon-mode .modal-content > .content > h1:first-child, html.afternoon-mode .modal-content > .content > h2:first-child, html.afternoon-mode .modal-content > .content > h3:first-child { background-color: rgba(0, 0, 0, 0.06); border-bottom-color: rgba(0, 0, 0, 0.08); } html.afternoon-mode .wae-modal-frame { background-color: #cfc7b8; color: #26221c; } html.afternoon-mode .wae-modal [rel=wae-modal-title] { background-color: rgba(0, 0, 0, 0.08); } html.afternoon-mode .wae-modal [rel=wae-modal-buttons] { background-color: rgba(0, 0, 0, 0.08); } html.afternoon-mode .wae-modal [rel=wae-modal-buttons] button[type=link] { background-color: #d9d2c4; color: #26221c; } /* ---- Fragments ---- */ /* lead list heat boxes (db-driven inline colors): mute the saturated hues so they sit with the warm palette instead of glowing against it */ html.afternoon-mode .heat-box { filter: saturate(0.6) brightness(0.94); } /* lead editor notes panel (notes-load.cfm themes it with --note-* variables and its own html.dark-mode block; the doubled class out-specifies it). Paint an explicit warm surface -- a transparent surface over the pale catch-all background read as a flat white column. */ html.dark-mode.afternoon-mode #div-notes-list, html.dark-mode.afternoon-mode #div-notes-emails, html.dark-mode.afternoon-mode .note-toolbar { --note-surface: #b3aa9c; --note-fg: #26221c; --note-fg-muted: #4c463d; --note-shell: #c6bdae; --note-head: #a89f90; --note-head-pin: #4c463d; --note-head-pin-fg: #f2ede4; --note-foot: #a89f90; --note-foot-fg: #3d382f; --note-rule: #8f877a; --note-tag: #d9c27a; --note-tag-fg: #26221c; --note-hl: #e7d9a0; --note-hl-fg: #26221c; --note-accent: #a86518; } /* the notes column container itself (inline #f8f8f8 in lead_edit.cfm would otherwise land on the pale catch-all surface) */ html.afternoon-mode #div-notes { background-color: #b3aa9c !important; border-left-color: #8f877a !important; } /* interview revision history side panel */ html.afternoon-mode .revision-panel { background-color: #cfc7b8; } html.afternoon-mode .revision-panel-title { background-color: rgba(0, 0, 0, 0.08); } /* crm dashboard widgets (index.cfm themes them with --dash-* variables and its own html.dark-mode block; both classes are present in afternoon, so this needs the extra .dark-mode to out-specify that page block) */ html.dark-mode.afternoon-mode .container { --dash-rule: #9a9285; --dash-th-bg: #a89f90; --dash-th-fg: #26221c; --dash-row-hover: rgba(0, 0, 0, 0.07); --dash-past-bg: #e7d9a0; --dash-past-fg: #26221c; --dash-link: #6e3b0f; --dash-flag: #a03a32; --dash-dim: 0.35; color-scheme: light; } html.afternoon-mode .clock-status-option { background: #d9d2c4; border-color: #8f877a; color: #26221c; } html.afternoon-mode .clock-status-option.is-selected { background: #c2cfdd; border-color: #2a6db6; } html.afternoon-mode .clock-status-validation { color: #8c1220; } html.afternoon-mode #general-tab .editable-note { background: #cfc7b8; border-color: #9a9285; } html.afternoon-mode .action-grid .action-button { background-color: #c3bbad; border-color: #9a9285; } html.afternoon-mode .action-grid .action-button:hover { background-color: #cfc7b8; border-color: #8f877a; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } /* interview editor */ html.afternoon-mode .interview-popup { background: linear-gradient(to right, #d0c8ba 1%, #d0c8ba 65%, #c3bbad 65%, #c3bbad 100%); } html.afternoon-mode #important-notes { color: #4a4a8c !important; } html.afternoon-mode .fu-m { background-color: #e7d9a0 !important; } html.afternoon-mode .tri-toggle { color: #6e3b0f; } html.afternoon-mode #div-theatre-info { background-color: rgba(0, 0, 0, 0.06); } /* dashboard widgets: accelerated interviews and "in your zone" rows (see the matching dark.css block) */ html.afternoon-mode table.data tbody tr[accelerated]:not([accelerated="0"]):not([accelerated=""]), html.afternoon-mode table.data tbody tr[accelerated]:not([accelerated="0"]):not([accelerated=""]):nth-child(odd), html.afternoon-mode table.data tbody tr[accelerated]:not([accelerated="0"]):not([accelerated=""]):nth-child(even), html.afternoon-mode table.data tbody tr[accelerate]:not([accelerate="0"]):not([accelerate=""]):nth-child(odd), html.afternoon-mode table.data tbody tr[accelerate]:not([accelerate="0"]):not([accelerate=""]):nth-child(even) { background: #e6c76b; } html.afternoon-mode table.data tbody tr[accelerated]:not([accelerated="0"]):not([accelerated=""]):hover { background: #efd47f; } html.afternoon-mode table.data tbody tr[accelerated]:not([accelerated="0"]):not([accelerated=""]) td { color: #26221c; } html.afternoon-mode table.data tbody tr[accelerated]:not([accelerated="0"]):not([accelerated=""]) td a { color: #5a2f0a; } html.afternoon-mode table.data tbody tr.highlight-zone td { background: rgba(255, 207, 77, 0.35); } /* report pages */ html.afternoon-mode .data tbody td[action].obvious { color: #6e3b0f; } html.afternoon-mode .data tbody tr.divider td { border-top-color: #4c463d; } html.afternoon-mode .data tbody td:not([action]):hover:before { background-color: rgba(0, 0, 0, 0.08); } /* rendered emails stay on white paper (dark.css rules carry over unchanged) */ /* ---- fullcalendar ---- */ html.afternoon-mode .fc-unthemed th, html.afternoon-mode .fc-unthemed td, html.afternoon-mode .fc-unthemed thead, html.afternoon-mode .fc-unthemed tbody, html.afternoon-mode .fc-unthemed .fc-divider, html.afternoon-mode .fc-unthemed .fc-row, html.afternoon-mode .fc-unthemed .fc-popover { border-color: #9a9285; } html.afternoon-mode .fc-unthemed td.fc-today { background: #e3d491; } html.afternoon-mode .fc-unthemed .fc-divider, html.afternoon-mode .fc-unthemed .fc-popover .fc-header { background: #bcb3a5; } html.afternoon-mode .fc-unthemed .fc-popover { background-color: #cfc7b8; } html.afternoon-mode .fc-state-default { background-color: #cfc7b8; background-image: none; color: #26221c; border-color: #8f877a; text-shadow: none; box-shadow: none; } html.afternoon-mode .fc-state-hover { background-color: #d9d2c4; } html.afternoon-mode .fc-state-active, html.afternoon-mode .fc-state-down { background-color: #bcb3a5; } /* ---- jQuery UI (smoothness) ---- */ html.afternoon-mode .ui-widget-content { background: #cfc7b8; border-color: #8f877a; color: #26221c; } html.afternoon-mode .ui-widget-content a { color: #6e3b0f; } html.afternoon-mode .ui-widget-header { background: #bcb3a5; border-color: #8f877a; color: #26221c; } html.afternoon-mode .ui-state-default, html.afternoon-mode .ui-widget-content .ui-state-default, html.afternoon-mode .ui-widget-header .ui-state-default { background: #c3bbad; border-color: #8f877a; color: #26221c; } html.afternoon-mode .ui-state-default a, html.afternoon-mode .ui-state-default a:link, html.afternoon-mode .ui-state-default a:visited { color: #26221c; } html.afternoon-mode .ui-state-hover, html.afternoon-mode .ui-widget-content .ui-state-hover, html.afternoon-mode .ui-widget-header .ui-state-hover, html.afternoon-mode .ui-state-focus, html.afternoon-mode .ui-widget-content .ui-state-focus, html.afternoon-mode .ui-widget-header .ui-state-focus { background: #d9d2c4; border-color: #8f877a; color: #26221c; } html.afternoon-mode .ui-state-active, html.afternoon-mode .ui-widget-content .ui-state-active, html.afternoon-mode .ui-widget-header .ui-state-active { background: #bcb3a5; border-color: #6f6759; color: #26221c; } html.afternoon-mode .ui-state-active a, html.afternoon-mode .ui-state-active a:link, html.afternoon-mode .ui-state-active a:visited { color: #26221c; } html.afternoon-mode .ui-state-highlight, html.afternoon-mode .ui-widget-content .ui-state-highlight, html.afternoon-mode .ui-widget-header .ui-state-highlight { background: #e7d9a0; border-color: #b09b3f; color: #4a3f00; } html.afternoon-mode .ui-widget-overlay { background: #000000; opacity: 0.35; } html.afternoon-mode .ui-dialog { background: #cfc7b8; } html.afternoon-mode .ui-datepicker th { color: #26221c; } html.afternoon-mode .ui-timepicker-list { background: #cfc7b8; color: #26221c; } /* ---- select2 ---- */ html.afternoon-mode .select2-container--default .select2-selection--single, html.afternoon-mode .select2-container--default .select2-selection--multiple { background-color: #d9d2c4; border-color: #8f877a; } html.afternoon-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: #26221c; } html.afternoon-mode .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #c3bbad; border-color: #8f877a; color: #26221c; } html.afternoon-mode .select2-dropdown { background-color: #cfc7b8; border-color: #8f877a; color: #26221c; } html.afternoon-mode .select2-container--default .select2-search--dropdown .select2-search__field, html.afternoon-mode .select2-search__field { background-color: #d9d2c4; border-color: #8f877a; color: #26221c; } html.afternoon-mode .select2-container--default .select2-results__option[aria-selected=true] { background-color: #bcb3a5; } /* ---- Catch-all mirrors ---- dark.css's catch-alls use !important; these share their exact selectors (same specificity) and win by loading later. Email containers stay exempt through the same :not() guards. */ /* white / pale surfaces -> raised warm surface */ html.afternoon-mode :is( [style*="background-color: white"], [style*="background-color:white"], [style*="background: white"], [style*="background:white"], [style*="background-color: #ffffff"], [style*="background-color:#ffffff"], [style*="background: #ffffff"], [style*="background:#ffffff"], [style*="background-color: #FFFFFF"], [style*="background-color:#FFFFFF"], [style*="background: #FFFFFF"], [style*="background:#FFFFFF"], [style*="background-color: #f0f0f0"], [style*="background-color:#f0f0f0"], [style*="background: #f0f0f0"], [style*="background:#f0f0f0"], [style*="background-color: #f7f7f7"], [style*="background-color:#f7f7f7"], [style*="background: #f7f7f7"], [style*="background:#f7f7f7"], [style*="background-color: #f8f8f8"], [style*="background-color:#f8f8f8"], [style*="background: #f8f8f8"], [style*="background:#f8f8f8"], [style*="background-color: #EEEEEE"], [style*="background-color:#EEEEEE"], [style*="background-color: #eeeeee"], [style*="background-color:#eeeeee"], [bgcolor="white"], [bgcolor="#FFFFFF"], [bgcolor="#ffffff"] ):not(.email-paper *):not(.email-preview-body *) { background-color: #d9d2c4 !important; } /* zebra-stripe grays -> the flat warm surface (keeps stripe contrast) */ html.afternoon-mode :is( [style*="background-color: #f2f2f2"], [style*="background-color:#f2f2f2"], [style*="background: #f2f2f2"], [style*="background:#f2f2f2"], [style*="background-color: #f5f5f5"], [style*="background-color:#f5f5f5"], [style*="background: #f5f5f5"], [style*="background:#f5f5f5"], [style*="background-color: #fafafa"], [style*="background-color:#fafafa"], [style*="background: #fafafa"], [style*="background:#fafafa"] ):not(.email-paper *):not(.email-preview-body *) { background-color: #cfc7b8 !important; } /* hardcoded black text is correct on the warm surfaces -- undo the dark-mode flip (same selector shape, later load wins) */ html.afternoon-mode :is( [style*="color: black"]:not([style*="border-color: black"]):not([style*="background"]), [style*="color:black"]:not([style*="border-color:black"]):not([style*="background"]), [style*="color: #000000"]:not([style*="border-color: #000000"]):not([style*="background"]), [style*="color:#000000"]:not([style*="border-color:#000000"]):not([style*="background"]), font[color="#000000"], font[color="black"] ):not(.email-paper *):not(.email-preview-body *) { color: #111111 !important; } /* pure-blue text: darker link blue for the warm background */ html.afternoon-mode :is( [style*="color: blue"]:not([style*="background-color: blue"]):not([style*="background: blue"]), [style*="color:blue"]:not([style*="background-color:blue"]):not([style*="background:blue"]), font[color="blue"], font[color="#0000FF"], font[color="#0000ff"] ):not(.email-paper *):not(.email-preview-body *) { color: #6e3b0f !important; } } /* end @media screen */