/* * DtExcelFilter styling — theme-aware (light + the theme's data-layout-mode="dark"). * Uses currentColor / rgba(128,128,128,…) so it inherits whatever palette the page * is on, matching the Engagement Studio toolbar treatment. */ /* Header funnel button — an always-visible button pinned to the header's left corner (absolute, so a narrow fixed-width column can't clip it and it never collides with the right-side sort arrow). Filterable headers reserve a little left padding for it. */ .ef-th { position: relative; padding-left: 22px !important; } .ef-funnel { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 3px; cursor: pointer; opacity: .6; color: inherit; transition: opacity .12s, background .12s; } .ef-funnel:hover { opacity: 1; background: rgba(128, 128, 128, .22); } .ef-funnel.ef-on { opacity: 1; color: #556ee6; background: rgba(85, 110, 230, .18); } .ef-funnel i { font-size: 13px; line-height: 1; } .ef-th.ef-active { color: #556ee6; } /* The dropdown panel (appended to , absolutely positioned). */ .ef-panel { position: absolute; z-index: 3000; width: 240px; background: #fff; color: #212529; border: 1px solid rgba(0, 0, 0, .15); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); font-size: 13px; overflow: hidden; } .ef-panel-search { padding: 8px; border-bottom: 1px solid rgba(128, 128, 128, .18); } .ef-search { width: 100%; padding: 5px 8px; font-size: 13px; color: inherit; background: rgba(128, 128, 128, .08); border: 1px solid rgba(128, 128, 128, .35); border-radius: 4px; outline: none; } .ef-search:focus { border-color: #556ee6; } .ef-panel-tools { display: flex; gap: 4px; align-items: center; padding: 6px 10px; font-size: 12px; } .ef-panel-tools a { color: #556ee6; text-decoration: none; } .ef-panel-tools a:hover { text-decoration: underline; } .ef-sep { opacity: .5; } .ef-panel-list { max-height: 240px; overflow-y: auto; padding: 2px 0; } .ef-opt { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px; cursor: pointer; font-weight: 400; } .ef-opt:hover { background: rgba(85, 110, 230, .10); } .ef-opt input { margin: 0; cursor: pointer; } .ef-opt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ef-empty { padding: 12px; text-align: center; opacity: .6; } /* Numeric (Excel-operator) mode */ .ef-mode-num { padding: 10px; display: none; } .ef-num-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .ef-num-row:last-child { margin-bottom: 0; } .ef-num-op, .ef-num-v, .ef-num-v2 { padding: 5px 8px; font-size: 13px; color: inherit; background: rgba(128, 128, 128, .08); border: 1px solid rgba(128, 128, 128, .35); border-radius: 4px; outline: none; } .ef-num-op { width: 100%; } .ef-num-v, .ef-num-v2 { width: 100%; min-width: 0; } .ef-num-op:focus, .ef-num-v:focus, .ef-num-v2:focus { border-color: #556ee6; } .ef-num-and { font-size: 12px; opacity: .7; } .ef-panel-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 10px; border-top: 1px solid rgba(128, 128, 128, .18); } .ef-btn { padding: 4px 12px; font-size: 12px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(128, 128, 128, .45); background: transparent; color: inherit; } .ef-btn:hover { background: rgba(128, 128, 128, .12); } .ef-btn-primary { background: #556ee6; border-color: #556ee6; color: #fff; } .ef-btn-primary:hover { background: #4458c9; } /* Dark layout (the theme sets data-layout-mode / data-bs-theme; also honor OS pref). */ [data-layout-mode="dark"] .ef-panel, [data-bs-theme="dark"] .ef-panel { background: #2a3042; color: #ced4da; border-color: rgba(255, 255, 255, .12); box-shadow: 0 6px 24px rgba(0, 0, 0, .5); } @media (prefers-color-scheme: dark) { :root:not([data-layout-mode="light"]):not([data-bs-theme="light"]) .ef-panel { background: #2a3042; color: #ced4da; border-color: rgba(255, 255, 255, .12); } }