Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-06 21:24:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4
3x-ui/docs/Tasktracking/2026-04-26-fix-dark-theme-row-selection-traffic-visibility.md

3.3 KiB
Raw Blame History

Task Record

Date: 2026-04-26 Related Module: web/frontend (CSS, HTML templates) Change Type: Fix

Background

In dark theme, when multi-selecting rows in the inbound client table, the traffic and expiry columns became invisible. The text appeared white/blank because the nested <td> elements inside the traffic/expiry cells inherited a near-white background (#fafafa) from Ant Design's row-selection CSS while the dark theme text color (rgba(255,255,255,0.75)) was inherited from the table, resulting in white text on a white background with no contrast.

The root cause was that the 3X-UI dark theme override rule .dark .ant-table-row-selected>td used the child combinator > which only targets direct <td> children of the selected row. However, the traffic and expiry cells contain a nested <table> with their own <td> elements (.tr-table-rt, .tr-table-bar, .tr-table-lt), which were matched by Ant Design's descendant selector .ant-table-tbody>tr.ant-table-row-selected td (setting background:#fafafa; color:inherit) but NOT by the 3X-UI override.

Additionally, the batch edit bar's margin-bottom was only 8px, creating insufficient visual separation from the inner client table below it.

Changes

  1. web/assets/css/custom.min.css: Changed .dark .ant-table-row-selected>td{...} to .dark .ant-table-row-selected td{background-color:rgba(0,135,113,.15)!important;color:var(--dark-color-text-primary)}

    • Removed > child combinator → descendant selector to cover nested <td> in traffic/expiry cells
    • Added explicit color:var(--dark-color-text-primary) to override Ant Design's color:inherit

  2. web/html/inbounds.html: Changed batch edit bar marginBottom from 8px to 15px

  3. web/public/assets/css/custom.min.*.css: Regenerated via go run ./cmd/genassets with new content hash 0b627998

  4. web/public/assets-manifest.json: Updated entry for css/custom.min.css to new hash

Impact

  • Affected columns in inner client table: traffic and expiryTime (both contain nested <td> in popover trigger slot)
  • Not affected: info column (popover content slot renders in portal, not in table cell DOM)
  • Themes: dark mode ([data-theme] classes .dark, .ultra-dark)
  • Modes: both debug and production builds, since both source and fingerprinted output were updated
  • No database, API, or configuration changes

Verification

  • CSS fix confirmed present in both source (web/assets/css/custom.min.css) and fingerprinted output (web/public/assets/css/custom.min.0b627998.css)
  • marginBottom: '15px' confirmed in web/html/inbounds.html
  • genassets ran successfully, manifest updated correctly, old fingerprinted file removed
  • No Go code changes → go vet ./... and gofmt -d . are not expected to produce diff
  • Not verified in browser (requires running server with dark theme + multi-select to visually confirm)

Risks And Follow-Up

  • Low risk: descendant selector .dark .ant-table-row-selected td applies to all <td> descendants, which is intentional but broader than before. If any future nested tables within selected rows are expected to have different backgrounds, they would need explicit override rules.
  • The !important flag on background-color may conflict if other CSS frameworks are introduced.