feat: Improve dropdown menu handling and visibility for OTS-specific menus
This commit is contained in:
Matt Batchelder
@@ -80,14 +80,25 @@ body {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Ensure menus that are intentionally floated into `body` are visible
|
||||
(this targets only menus moved by our JS: `.ots-floating-menu` or
|
||||
`.dropdown-menu` marked with `data-ots-floating="1`). This avoids
|
||||
forcing visibility for all dropdowns. */
|
||||
.ots-floating-menu,
|
||||
.dropdown-menu[data-ots-floating="1"] {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Elevated z-index for menus so they render above other panels */
|
||||
.ots-floating-menu, .dropdown-menu {
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
/* Force ALL dropdown/context menu classes to render on top of everything.
|
||||
This is maximally aggressive to defeat any stacking context or overflow clipping. */
|
||||
.dropdown-menu,
|
||||
/* Limit aggressive floating/menu overrides to explicit floating menus only.
|
||||
Avoid forcing `.dropdown-menu` to be `display:block`/`visibility:visible` so
|
||||
native dropdown behaviour (open/close) is preserved. */
|
||||
.ots-notif-menu,
|
||||
.ots-user-menu,
|
||||
.context-menu,
|
||||
@@ -101,24 +112,29 @@ body {
|
||||
transform: none !important;
|
||||
will-change: auto !important;
|
||||
pointer-events: auto !important;
|
||||
visibility: visible !important;
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Ensure dropdown list items and children aren't clipped */
|
||||
.dropdown-menu li,
|
||||
.dropdown-menu > li > a,
|
||||
.dropdown-menu > li > span,
|
||||
.dropdown-menu ul,
|
||||
.dropdown-menu div {
|
||||
/* Hide the rowMenu column header completely */
|
||||
th.rowMenu,
|
||||
td.rowMenu {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
width: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure floating menu children aren't clipped (scoped to floated menus only) */
|
||||
.ots-floating-menu li,
|
||||
.ots-floating-menu > li > a,
|
||||
.ots-floating-menu > li > span,
|
||||
.ots-floating-menu ul,
|
||||
.ots-floating-menu div {
|
||||
overflow: visible !important;
|
||||
position: relative !important;
|
||||
z-index: 2147483647 !important;
|
||||
}
|
||||
|
||||
/* Remove any transform or overflow from menu ancestors that could create stacking context */
|
||||
.dropdown-menu *,
|
||||
/* Remove transforms inside floating menus that could create stacking context */
|
||||
.ots-floating-menu * {
|
||||
transform: none !important;
|
||||
}
|
||||
@@ -1994,6 +2010,12 @@ body.ots-sidebar-open .ots-topbar {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dataTables_buttons,
|
||||
.dataTables_buttons * {
|
||||
background: transparent !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
.dt-button-collection {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
@@ -2081,6 +2103,19 @@ body.ots-sidebar-open .ots-topbar {
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
/* DataTables ColVis button styling */
|
||||
.ColVis_MasterButton,
|
||||
.dt-button {
|
||||
background-color: var(--color-surface-elevated) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
}
|
||||
|
||||
.ColVis_MasterButton:hover,
|
||||
.dt-button:hover {
|
||||
background-color: var(--color-surface) !important;
|
||||
}
|
||||
|
||||
.dropdown.active .dropdown-menu,
|
||||
.dropdown:focus-within .dropdown-menu {
|
||||
display: block;
|
||||
@@ -3147,6 +3182,35 @@ body.ots-sidebar-open .ots-topbar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Ensure the folder-tree "All Folders" checkbox follows light/dark variables
|
||||
(the checkbox lives in `.ots-folder-tree` / `#grid-folder-filter`). */
|
||||
.ots-folder-tree input[type="checkbox"],
|
||||
.ots-folder-tree .form-check-input,
|
||||
#grid-folder-filter input[type="checkbox"],
|
||||
#grid-folder-filter .form-check-input {
|
||||
-webkit-appearance: none !important;
|
||||
appearance: none !important;
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
display: inline-block !important;
|
||||
vertical-align: middle !important;
|
||||
border-radius: 4px !important;
|
||||
background-color: var(--color-surface) !important;
|
||||
background-image: none !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ots-folder-tree input[type="checkbox"]:checked,
|
||||
.ots-folder-tree .form-check-input:checked,
|
||||
#grid-folder-filter input[type="checkbox"]:checked,
|
||||
#grid-folder-filter .form-check-input:checked {
|
||||
background-color: var(--color-primary) !important;
|
||||
border-color: var(--color-primary) !important;
|
||||
background-image: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ots-grid-with-folders {
|
||||
display: grid;
|
||||
grid-template-columns: 260px 1fr;
|
||||
@@ -3255,6 +3319,12 @@ body.ots-sidebar-open .ots-topbar {
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
|
||||
}
|
||||
|
||||
/* Make table fill full width */
|
||||
.ots-table-card .table {
|
||||
width: 100% !important;
|
||||
table-layout: auto !important;
|
||||
}
|
||||
|
||||
.ots-table-card .table thead th,
|
||||
.ots-table-card .table tbody td,
|
||||
.ots-table-card .table tbody th,
|
||||
@@ -4262,7 +4332,9 @@ textarea {
|
||||
.panel,
|
||||
.panel-body,
|
||||
.table-wrapper,
|
||||
.dataTables_wrapper .dataTables_scrollBody {
|
||||
.dataTables_wrapper .dataTables_scrollBody,
|
||||
.dataTables_wrapper .dataTables_scrollHead,
|
||||
.dataTables_wrapper .dataTables_scrollHead table {
|
||||
opacity: 1 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
@@ -5118,33 +5190,32 @@ body.ots-light-mode .dataTables_wrapper .dataTables_paginate .paginate_button.cu
|
||||
color: white !important;
|
||||
border-color: var(--color-primary) !important;
|
||||
}
|
||||
/* Aggressive unconditional overrides to ensure table text is readable
|
||||
These apply regardless of light/dark mode */
|
||||
.table td,
|
||||
.table th,
|
||||
.dataTable td,
|
||||
.dataTable th,
|
||||
.dataTables_wrapper td,
|
||||
.dataTables_wrapper th,
|
||||
.modern-table td,
|
||||
.modern-table th {
|
||||
/* Light-mode unconditional overrides to ensure table text is readable */
|
||||
body.ots-light-mode .table td,
|
||||
body.ots-light-mode .table th,
|
||||
body.ots-light-mode .dataTable td,
|
||||
body.ots-light-mode .dataTable th,
|
||||
body.ots-light-mode .dataTables_wrapper td,
|
||||
body.ots-light-mode .dataTables_wrapper th,
|
||||
body.ots-light-mode .modern-table td,
|
||||
body.ots-light-mode .modern-table th {
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_info,
|
||||
.dataTables_wrapper .dataTables_filter,
|
||||
.dataTables_wrapper .dataTables_length {
|
||||
body.ots-light-mode .dataTables_wrapper .dataTables_info,
|
||||
body.ots-light-mode .dataTables_wrapper .dataTables_filter,
|
||||
body.ots-light-mode .dataTables_wrapper .dataTables_length {
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
.table thead,
|
||||
.dataTable thead,
|
||||
.modern-table thead {
|
||||
body.ots-light-mode .table thead,
|
||||
body.ots-light-mode .dataTable thead,
|
||||
body.ots-light-mode .modern-table thead {
|
||||
background-color: #f1f5f9 !important;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_filter input,
|
||||
.dataTables_wrapper .dataTables_length select {
|
||||
body.ots-light-mode .dataTables_wrapper .dataTables_filter input,
|
||||
body.ots-light-mode .dataTables_wrapper .dataTables_length select {
|
||||
color: #0f172a !important;
|
||||
background-color: #ffffff !important;
|
||||
border-color: #e2e8f0 !important;
|
||||
|
||||
Reference in New Issue
Block a user