/* Carmel theme variables (ADOWI 657) * Two variable blocks carry every color that differs between light and * dark mode. Selectors below read var(--soho-*)/var(--bs-*) so the same * rule applies to both themes; only the variable values change when * is toggled by window.setTheme() in index.js. * * Bootstrap's own variables (--bs-body-bg, --bs-table-bg, etc.) are set * here at the root level rather than per-component, so every Bootstrap * rule that reads them (e.g. the .table > :not(caption) > * > * rule * behind ADOWI 656) picks up the right color everywhere, not just where * a local override happened to be added. */ :root, [data-bs-theme="light"] { --bs-body-bg: #F7F7F7; --bs-body-color: #000000; --bs-border-color: #E2E2E2; --bs-table-bg: transparent; --bs-table-color: #000000; --soho-card-bg: #FFFFFF; --soho-card-shadow: 0 1px 2px 0 rgb(0 0 0 / 1%), 0 1px 5px 0 rgb(0 0 0 / 10%); --soho-card-chrome-border: #00A9FF; --soho-card-hot-hover-bg: cornsilk; --soho-card-hot-hover-color: inherit; --soho-card-dim-bg: #F7F7F7; --soho-card-header-bg: cornsilk; --soho-card-alternate-bg: #FFFDE7; --soho-navbar-bg: #0C4581; --soho-navbar-shadow: none; --soho-navbar-sel-bg: #457ACA; --soho-nav-item-hover-bg: #5B90E0; --soho-navbar-usertile-bg: #33B5E5; --soho-dropdown-color: inherit; --soho-dropdown-bg: cornsilk; --soho-dropdown-border: cornsilk; --soho-dropdown-shadow: 0 3px 8px 1px #CCCCCC; --soho-dropdown-hover-color: #F6F9FF; --soho-hover-accent-bg: cornsilk; --soho-tile-action-fail-bg: #EF9A9A; --soho-tile-action-success-bg: #C5E1A5; --soho-tile-action-working-bg: #FFE082; --soho-tile-button-bg: #B1E4FB; --soho-tile-button-selected-bg: #0277BD; --soho-tile-button-selected-color: #FFFFFF; --soho-tile-button-danger-bg: #FF8A8A; --soho-tile-cache-success-bg: #EABFF1; --soho-tile-network-success-bg: #B1E4FB; --soho-itm-bg: #D0F0FF; --soho-otm-bg: #F1F4F5; --soho-sidebar-back-img: url("../img/trifade.jpg"); --soho-sidebar-selected-bg: #FFFFFF; --soho-list-group-hover-bg: #E0EDF8; --soho-active-sidebar-bg: #F7F7F7; --soho-commandbar-back-bg: #F7F7F7; --soho-commandbar-button-back-bg: #FFFFFF; --soho-commandbar-button-back-color: #000000; --soho-commandbar-button-back-shadow: 0 0 5px 1px rgb(195 195 195 / 50%); --soho-commandbar-button-back-selected-bg: #81CAFF; --soho-commandbar-button-back-selected-color: #000000; --soho-commandbar-button-back-selected-shadow: none; --soho-commandbar-button-back-hover-color: inherit; --soho-commandbar-button-back-hover-shadow: 0 0 5px 2px rgb(160 160 160 / 70%); --soho-flush-button-color: #333333; --soho-flush-button-shadow: 0 0 0px 0px rgba(255,255,255,0); --soho-flush-button-hover-color: #000000; --soho-flush-button-hover-shadow: none; --soho-table-bg-color: #FFFFFF; --soho-table-text-color: #000000; --soho-thead-border: #E2E2E2; --soho-text-fore: #000000; --soho-th-bg: #FFFFFF; --soho-th-color: #000000; --soho-menu-item-color: #000000; --soho-tooltip-bg: #333333; --soho-tooltip-color: #C9C9C9; --soho-buy-bg: #E3F9EF; --soho-sell-bg: #FFEFEF; --soho-spread-bg: #FFFFEF; --soho-text-color: #000000; --soho-dim-text: #9E9E9E; --soho-border-color: #E5E5E5; --soho-row-odd-bg: #F4F4F4; --soho-row-even-bg: #FFFFFF; --soho-row-even-alt-bg: #F6F6F6; --soho-row-total-bg: #EFEFEF; --soho-row-total-border: #DEE2E6; --soho-quickgrid-color: #212529; --soho-quickgrid-bg: white; --soho-quickgrid-col-title-color: #212529; --soho-quickgrid-thead-bg: #FFFFFF; --soho-quickgrid-options-shadow: 0 3px 8px 1px #aaa; --soho-quickgrid-options-opacity: 0.4; --soho-filter-border: #E5E5E5; --soho-filter-nav-color: #333333; --soho-filter-nav-bg: #F7F7F7; --soho-filter-nav-hover-bg: #F0F0F0; --soho-filter-nav-hover-border: #D0D0D0; --soho-filter-nav-active-color: #F6F9FF; --soho-filter-nav-active-bg: #00A9FF; --soho-filter-nav-active-border: #0089DF; --soho-scrollbar-thumb-bg: #CCCCCC; --soho-scrollbar-thumb-hover-bg: #999999; } [data-bs-theme="dark"] { --bs-body-bg: #1D1D1D; --bs-body-color: #DCDCDC; --bs-border-color: #3C3C3C; --bs-table-bg: transparent; --bs-table-color: #FFFFFF; --soho-card-bg: #101010; --soho-card-shadow: 0 0 4px 1px rgba(255,245,182,.1); --soho-card-chrome-border: slategray; --soho-card-hot-hover-bg: #414036; --soho-card-hot-hover-color: #DDDDDD; --soho-card-dim-bg: #2A2A2A; --soho-card-header-bg: midnightblue; --soho-card-alternate-bg: #212B3A; --soho-navbar-bg: #0A0F1C; --soho-navbar-shadow: 0 2px 6px 2px rgba(255,245,182,.3); --soho-navbar-sel-bg: #414146; --soho-nav-item-hover-bg: #5B5B63; --soho-navbar-usertile-bg: #33333A; --soho-dropdown-color: #CCCCCC; --soho-dropdown-bg: #414036; --soho-dropdown-border: #414036; --soho-dropdown-shadow: 0 0 6px 2px #6A664F; --soho-dropdown-hover-color: #FFC888; --soho-hover-accent-bg: #414036; --soho-tile-action-fail-bg: #FF0000; --soho-tile-action-success-bg: #2E4C09; --soho-tile-action-working-bg: #4E4015; --soho-tile-button-bg: #324156; --soho-tile-button-selected-bg: #288EBF; --soho-tile-button-selected-color: inherit; --soho-tile-button-danger-bg: #8D3232; --soho-tile-cache-success-bg: #52205A; --soho-tile-network-success-bg: #0A4966; --soho-itm-bg: #213842; --soho-otm-bg: #0F1A1E; --soho-sidebar-back-img: url("../img/skylinedark.jpg"); --soho-sidebar-selected-bg: #6A6D75; --soho-list-group-hover-bg: #50545A; --soho-active-sidebar-bg: #383840; --soho-commandbar-back-bg: #0C0C0C; --soho-commandbar-button-back-bg: #000001; --soho-commandbar-button-back-color: #CCCCCC; --soho-commandbar-button-back-shadow: 0 0 4px 1px rgba(255,245,182,.5); --soho-commandbar-button-back-selected-bg: #7A6f62; --soho-commandbar-button-back-selected-color: #EEEEEE; --soho-commandbar-button-back-selected-shadow: 0 0 4px 1px rgba(255,245,182,.5); --soho-commandbar-button-back-hover-color: #DDDDDD; --soho-commandbar-button-back-hover-shadow: 0 0 5px 2px rgba(255,245,182,.7); --soho-flush-button-color: #CCCCCC; --soho-flush-button-shadow: none; --soho-flush-button-hover-color: #FFFFFF; --soho-flush-button-hover-shadow: 0 0 4px 1px rgba(255,245,182,.5); --soho-table-bg-color: #161719; --soho-table-text-color: #FFFFFF; --soho-thead-border: #3C3C3C; --soho-text-fore: #DCDCDC; --soho-th-bg: #131313; --soho-th-color: #FFFFFF; --soho-menu-item-color: #D3D3D3; --soho-tooltip-bg: #6A6D75; --soho-tooltip-color: #FFFFFF; --soho-buy-bg: #003E00; --soho-sell-bg: #4E0000; --soho-spread-bg: #453000; --soho-text-color: #FFFFFF; --soho-dim-text: #7A7A7A; --soho-border-color: #131313; --soho-row-odd-bg: #111111; --soho-row-even-bg: #000000; --soho-row-even-alt-bg: #0B0B0B; --soho-row-total-bg: #0D0E10; --soho-row-total-border: #4E5A6A; --soho-quickgrid-color: white; --soho-quickgrid-bg: black; --soho-quickgrid-col-title-color: darkgrey; --soho-quickgrid-thead-bg: #222222; --soho-quickgrid-options-shadow: 0 0 6px 2px #6a664f; --soho-quickgrid-options-opacity: 1; --soho-filter-border: #2D343C; --soho-filter-nav-color: #CCCCCC; --soho-filter-nav-bg: #1A1A1A; --soho-filter-nav-hover-bg: #252525; --soho-filter-nav-hover-border: #3D4A5A; --soho-filter-nav-active-color: #FFFFFF; --soho-filter-nav-active-bg: #324156; --soho-filter-nav-active-border: #324156; --soho-scrollbar-thumb-bg: #4A4A4A; --soho-scrollbar-thumb-hover-bg: #666666; } /* Body tag in index.html */ .soho-body { background-color: var(--bs-body-bg); } .soho-card { background-color: var(--soho-card-bg); box-shadow: var(--soho-card-shadow); border-radius: 10px; } .soho-card-chrome { border-top: 3px solid var(--soho-card-chrome-border); } .soho-card-hot:hover { background-color: var(--soho-card-hot-hover-bg); color: var(--soho-card-hot-hover-color); } .soho-card-dim { background-color: var(--soho-card-dim-bg); } .soho-card-header { background-color: var(--soho-card-header-bg); } .soho-card-alternate { background-color: var(--soho-card-alternate-bg); } .soho-card-alternate-warning { --bs-table-bg: var(--bs-warning-bg-subtle); background-color: var(--bs-warning-bg-subtle); } .soho-card-alternate-danger { --bs-table-bg: var(--bs-danger-bg-subtle); background-color: var(--bs-danger-bg-subtle); } /* Nav tag in navbar.razor */ .soho-navbar { background-color: var(--soho-navbar-bg); box-shadow: var(--soho-navbar-shadow); --bs-navbar-color: rgba(255, 255, 255, 0.85); --bs-navbar-hover-color: #ffffff; --bs-navbar-active-color: #ffffff; } /* Navbar items in navbar.razor */ .soho-navbar-sel { background-color: var(--soho-navbar-sel-bg); } /* Navbar buttons in navbar.razor: stretch every level from the nav down to the anchor so no button box computes a height of its own. Bootstrap centers .navbar and .navbar-collapse, which leaves each box to round its own height, and at fractional zoom levels those roundings disagree and show as a gap under the buttons - ADOWI 1098. */ .soho-navbar { align-items: stretch; } .soho-navbar > .navbar-brand { align-self: center; } .soho-navbar .navbar-collapse { align-items: stretch; } .soho-navbar .nav-item { display: flex; } /* The anchor stays a block so the inline layout of its icon and label is untouched; cross-axis stretch fills the item either way. */ .soho-navbar .nav-item > .nav-link { flex: 1 1 auto; } .soho-dropdown { color: var(--soho-dropdown-color); background-color: var(--soho-dropdown-bg); border-color: var(--soho-dropdown-border); box-shadow: var(--soho-dropdown-shadow); } .soho-dropdown-item { background-color: transparent; } .soho-dropdown-item:hover, .soho-dropdown-item:focus { color: var(--soho-dropdown-hover-color); background-color: #00A9FF; } .soho-tile-action-fail { background-color: var(--soho-tile-action-fail-bg); } .soho-tile-action-success { background-color: var(--soho-tile-action-success-bg); } .soho-tile-action-working { background-color: var(--soho-tile-action-working-bg); } .soho-tile-button { background-color: var(--soho-tile-button-bg); } .soho-tile-button-selected { background-color: var(--soho-tile-button-selected-bg); color: var(--soho-tile-button-selected-color); } .soho-tile-button-danger { background-color: var(--soho-tile-button-danger-bg); } .soho-tile-cache-success { background-color: var(--soho-tile-cache-success-bg); } .soho-tile-network-success { background-color: var(--soho-tile-network-success-bg); } .soho-itm { background-color: var(--soho-itm-bg); } .soho-otm { background-color: var(--soho-otm-bg); } li.nav-item:hover a.nav-link:hover { background-color: var(--soho-nav-item-hover-bg); } /* User tile at right of navbar in navbar.razor */ .soho-navbar-usertile { background-color: var(--soho-navbar-usertile-bg); } .soho-sidebar-back { background: var(--soho-sidebar-back-img) center 60% fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .sidebar-button-fore { color: #9E9E9E; } .sidebar-selected { background-color: var(--soho-sidebar-selected-bg); } li.list-group-item-action:hover { background-color: var(--soho-list-group-hover-bg); } a.sidebar-link:hover { color: #FFFFFF !important; } .commandbar-back { background-color: var(--soho-commandbar-back-bg); } .commandbar-button-back { background-color: var(--soho-commandbar-button-back-bg); border-radius: 5%; color: var(--soho-commandbar-button-back-color); border: none; box-shadow: var(--soho-commandbar-button-back-shadow); } .commandbar-button-back-selected { background-color: var(--soho-commandbar-button-back-selected-bg); border-radius: 5%; color: var(--soho-commandbar-button-back-selected-color); box-shadow: var(--soho-commandbar-button-back-selected-shadow); } .commandbar-button-back:hover, .commandbar-button-back-selected:hover { background-color: var(--soho-hover-accent-bg); color: var(--soho-commandbar-button-back-hover-color); border-radius: 5%; box-shadow: var(--soho-commandbar-button-back-hover-shadow); } .flush-button-back { color: var(--soho-flush-button-color); border-radius: 5%; box-shadow: var(--soho-flush-button-shadow); } span.flush-button-back:hover { color: var(--soho-flush-button-hover-color); border-radius: 5%; box-shadow: var(--soho-flush-button-hover-shadow); } .table-back { background-color: var(--soho-table-bg-color); color: var(--soho-table-text-color); } .table td, .table th { border-top: 0; border-bottom: 0; } .table thead th { border-bottom: 1px solid var(--soho-thead-border); } .text-fore { color: var(--soho-text-fore); } th { background-color: var(--soho-th-bg) !important; color: var(--soho-th-color) !important; } /* Menu item*/ .soho-sidebar-container .list-group a { height: 50px; color: var(--soho-menu-item-color); font-weight: 400 } /* Highlight color of a selected top nav item */ .active { background-color: #557ebd; } /* Highlight color of a selected sidebar nav item */ .active-sidebar-item { background-color: var(--soho-active-sidebar-bg); } /* Submenu item*/ .soho-sidebar-container .list-group .sidebar-submenu a { height: 45px; padding-left: 30px; } .sidebar-submenu { font-size: 0.9rem; } /* Separators */ .sidebar-separator-title { background-color: #333; height: 35px; } .sidebar-separator { background-color: #333; height: 25px; } .logo-separator { background-color: #333; height: 60px; } /* Closed submenu icon */ .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after { content: " \f0d7"; font-family: FontAwesome; display: inline; text-align: right; padding-left: 10px; } /* Opened submenu icon */ .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after { content: " \f0da"; font-family: FontAwesome; display: inline; text-align: right; padding-left: 10px; } /* Workaround for bootstrap issue: https://github.com/twbs/bootstrap/issues/20289 .tooltip { pointer-events: none; } */ .soho-tooltip-text { visibility: hidden; position: absolute; width: 200px; bottom: 200%; left: 50%; margin-left: -100px; font-size: large; background-color: var(--soho-tooltip-bg); color: var(--soho-tooltip-color); text-align: center; padding: 5px 5px; border-radius: 8px; z-index: 2000; } .soho-tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -8px; border-width: 8px; border-style: solid; border-color: var(--soho-tooltip-bg) transparent transparent transparent; } .soho-tooltip-text.soho-tooltip-text-start { left: 0; margin-left: 0; } .soho-tooltip-text.soho-tooltip-text-end { left: auto; right: 0; margin-left: 0; } .btn { text-transform: unset !important; } /* Remove any shadow from badges */ .soho-badge { box-shadow: 1px 2px 10px 0 rgba(0,0,0,0); font-weight: 400; } .soho-buy-color { background-color: var(--soho-buy-bg) !important; } .soho-sell-color { background-color: var(--soho-sell-bg) !important; } .soho-spread-color { background-color: var(--soho-spread-bg) !important; } .soho-text-color { color: var(--soho-text-color) !important; } .soho-dim-text { color: var(--soho-dim-text); } .soho-chrome-text { font-weight: 400; } .main-text { font-weight: 400; } .soho-border-color { border-color: var(--soho-border-color) !important; } .dropdown-menu a:hover { color: #000 !important; } .table-xs th, .table-xs td { padding-top: .2rem !important; padding-bottom: .2rem !important; } .soho-table-row-odd { background-color: var(--soho-row-odd-bg) !important; } .soho-table-row-even { background-color: var(--soho-row-even-bg) !important; } .soho-table-row-total { background-color: var(--soho-row-total-bg) !important; border-top: 2px solid var(--soho-row-total-border) !important; } [data-bs-theme="light"] .soho-table-row-selected { background: #F4F4F4; filter: invert(10%); } .quickgrid[theme=soho] { font-family: 'Roboto', sans-serif; color: var(--soho-quickgrid-color); background: var(--soho-quickgrid-bg); width: 100%; } .quickgrid[theme=soho] .col-title { color: var(--soho-quickgrid-col-title-color); padding: 0.2rem; gap: 0.1rem; } .quickgrid[theme=soho] > tbody > tr > td { padding: 0; /* height: 1px lets child divs use height: 100% — table layout overrides this to the true row height, but it establishes the percentage reference */ height: 1px; } /* QuickGrid fills under-populated pages with placeholder rows. Data rows carry aria-rowindex (WAI-ARIA — identifies row position for screen readers); placeholder rows do not. visibility: collapse removes them from the layout (visibility:hidden would not — it leaves the space). If stable table height during paging ever matters, use a min-height on the container (ItemsPerPage x rowHeight, e.g. 10 x 29.6px = 296px) instead of rendering phantom rows. */ .quickgrid[theme=soho] > tbody > tr:not([aria-rowindex]) { visibility: collapse; } .quickgrid[theme=soho] > thead > tr > th { border-bottom: 1px solid var(--soho-thead-border); background: var(--soho-quickgrid-thead-bg); } .th-nav .quickgrid[theme=soho] > thead > tr > th, .th-no-nav .quickgrid[theme=soho] > thead > tr > th { position: sticky; z-index: 2; } .th-nav .quickgrid[theme=soho] > thead > tr > th { top: 58px; } .th-no-nav .quickgrid[theme=soho] > thead > tr > th { top: 0; } .quickgrid[theme=soho] > tbody { border-bottom: 1px solid var(--soho-thead-border); } /* ::after overlay darkens all cell content (background, inset box-shadow colors, text) without overriding existing box-shadow properties. position: relative on td is required for inset: 0 to fill the cell. No z-index on td or ::after avoids creating a stacking context, so tooltips (z-index: 2000) still render above the sidebar. Previously we had a filter: invert(7%) style which did this well, but it hid tooltips behind the sidebar. */ .quickgrid[theme=soho] > tbody > tr:hover > td { position: relative; } .quickgrid[theme=soho] > tbody > tr:hover > td::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.1); pointer-events: none; } .quickgrid[theme=soho] .col-options { background: var(--soho-hover-accent-bg); box-shadow: var(--soho-quickgrid-options-shadow); border-color: var(--soho-hover-accent-bg); border-radius: 0.3rem; } .quickgrid[theme=soho] .col-options-button { opacity: var(--soho-quickgrid-options-opacity); width: 1.3rem; } .quickgrid[theme=soho] .sort-indicator { opacity: var(--soho-quickgrid-options-opacity); } .quickgrid[theme=soho] button.col-title:hover { background-color: var(--soho-hover-accent-bg); } .quickgrid[theme=soho] .col-options-button:hover { background-color: var(--soho-hover-accent-bg); } /* CustomHeader filter button and sort button hover styling */ .dropdown.filterable-header-control:hover { background-color: var(--soho-hover-accent-bg); border-radius: 4px; } button.filterable-header-control:hover { background-color: var(--soho-hover-accent-bg) !important; border-radius: 4px; } tr:nth-child(even) { background: var(--soho-row-even-alt-bg); } /* Filter Panel */ .filter-panel-header { border-bottom-color: var(--soho-filter-border); } .filter-panel-header .nav-link { color: var(--soho-filter-nav-color); background-color: var(--soho-filter-nav-bg); border-color: var(--soho-filter-border); } .filter-panel-header .nav-link:hover { background-color: var(--soho-filter-nav-hover-bg); border-color: var(--soho-filter-nav-hover-border); } .filter-panel-header .nav-link.active { color: var(--soho-filter-nav-active-color); background-color: var(--soho-filter-nav-active-bg); border-color: var(--soho-filter-nav-active-border); } .filter-panel-content::-webkit-scrollbar-track { background-color: var(--soho-commandbar-back-bg); } .filter-panel-content::-webkit-scrollbar-thumb { background-color: var(--soho-scrollbar-thumb-bg); } .filter-panel-content::-webkit-scrollbar-thumb:hover { background-color: var(--soho-scrollbar-thumb-hover-bg); }