mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-06 21:24:10 +00:00
47 lines
3.3 KiB
Markdown
47 lines
3.3 KiB
Markdown
|
# 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.
|