Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-06 13:14:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4
3x-ui/docs/Tasktracking/2026-04-26-batch-select-dark-mode-layout.md
root 47b734ef2d fix: dark mode selected row background and batch toolbar layout 
- Override Ant Design default selected row background in dark mode with theme color
- Restructure batch action toolbar with nested flex containers for better spacing and wrapping
- Bump version to v1.7.3.2
2026-04-26 17:40:08 +08:00

1.8 KiB
Raw Blame History

Task Record

Date: 2026-04-26 Related Module: web (CSS + HTML template) Change Type: Fix

Background

The multi-select feature (added in 2026-04-26-batch-edit-clients.md) had two visual issues:

  1. In dark mode, selected table rows showed the Ant Design default light background (#e6f7ff), making text unreadable against the dark theme.
  2. The batch operation toolbar was too crowded with all 7 elements (selected count + 6 buttons) packed in one row without wrapping.

Changes

  1. CSS (web/assets/css/custom.min.css): Added dark mode override .dark .ant-table-row-selected>td{background-color:rgba(0,135,113,.15)!important} using the primary theme color at low opacity for selected rows in dark mode. Also applied to the public fingerprinted copy.
  2. HTML (web/html/inbounds.html:587-600): Restructured the batch toolbar layout:
    • Changed to a two-group flexbox with justify-content: space-between
    • Left group: selected count (<strong>) + action buttons (Batch Edit, Enable, Disabled, Reset Traffic, Delete) with flexWrap: wrap
    • Right group: Deselect All button
    • Added flexWrap: wrap on both containers for responsive wrapping
    • Reduced gap from 8px to 6px

Impact

  • CSS: Only affects dark mode table row selection styling; no impact on light mode
  • HTML: Batch toolbar DIV now uses nested flex containers; functionality unchanged
  • No API/DB/config changes
  • Public assets regenerated via go run ./cmd/genassets

Verification

  • go run ./cmd/genassets — regenerated public assets successfully
  • CGO_ENABLED=1 go build ./... — build succeeded
  • gofmt -l -w . && go vet ./... — no issues

Risks And Follow-Up

  • Dark mode selected row background may need further tuning based on user feedback
  • On very narrow screens the batch toolbar may still wrap to multiple lines, which is expected and handled by flex-wrap