mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-05 12:44:22 +00:00
refactor(frontend): hoist .header-row, .icons-only, .summary-card to page-shell.css
Settings and Xray pages both carried identical .header-row / .header-actions / .header-info rules and an identical six-rule .icons-only block that styles tabbed page navigation. Clients, Inbounds, and Nodes all carried identical .summary-card padding rules with the same mobile reduction. None of these are page-specific. Consolidate: - .header-row family → page-shell scoped to .settings-page, .xray-page - .icons-only family → page-shell global (the class is a deliberate opt-in marker, no scope needed) - .summary-card → page-shell scoped to .clients-page, .inbounds-page, .nodes-page (also fixes InboundsPage's missing scope — its rule was global and would have matched stray .summary-card uses elsewhere) InboundsPage.css and NodesPage.css became empty after the move so the files and their per-page imports are deleted.
This commit is contained in:
parent
f6ffbcb878
commit
035c3b5be9
8 changed files with 61 additions and 118 deletions
|
|
@ -3,16 +3,6 @@
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clients-page .summary-card {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.clients-page .summary-card {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-email-list {
|
.client-email-list {
|
||||||
max-height: 280px;
|
max-height: 280px;
|
||||||
min-width: 160px;
|
min-width: 160px;
|
||||||
|
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
.summary-card {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.summary-card {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -36,7 +36,6 @@ import LazyMount from '@/components/LazyMount';
|
||||||
const InboundFormModal = lazy(() => import('./InboundFormModal'));
|
const InboundFormModal = lazy(() => import('./InboundFormModal'));
|
||||||
const InboundInfoModal = lazy(() => import('./InboundInfoModal'));
|
const InboundInfoModal = lazy(() => import('./InboundInfoModal'));
|
||||||
const QrCodeModal = lazy(() => import('./QrCodeModal'));
|
const QrCodeModal = lazy(() => import('./QrCodeModal'));
|
||||||
import './InboundsPage.css';
|
|
||||||
|
|
||||||
type RowAction =
|
type RowAction =
|
||||||
| 'edit'
|
| 'edit'
|
||||||
|
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
.nodes-page .summary-card {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.nodes-page .summary-card {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -17,7 +17,6 @@ import AppSidebar from '@/components/AppSidebar';
|
||||||
import NodeList from './NodeList';
|
import NodeList from './NodeList';
|
||||||
import NodeFormModal from './NodeFormModal';
|
import NodeFormModal from './NodeFormModal';
|
||||||
import { setMessageInstance } from '@/utils/messageBus';
|
import { setMessageInstance } from '@/utils/messageBus';
|
||||||
import './NodesPage.css';
|
|
||||||
|
|
||||||
export default function NodesPage() {
|
export default function NodesPage() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
|
||||||
|
|
@ -2,50 +2,6 @@
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-page .header-row {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-page .header-actions {
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-page .header-info {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icons-only .ant-tabs-nav {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icons-only .ant-tabs-nav-wrap {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icons-only .ant-tabs-nav-list {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icons-only .ant-tabs-tab {
|
|
||||||
flex: 1 1 0;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icons-only .ant-tabs-tab .anticon {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icons-only .ant-tabs-nav-operations {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ldap-no-inbounds {
|
.ldap-no-inbounds {
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
color: var(--ant-color-text-tertiary);
|
color: var(--ant-color-text-tertiary);
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,3 @@
|
||||||
.xray-page .header-row {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xray-page .header-actions {
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xray-page .header-info {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xray-page .restart-icon {
|
.xray-page .restart-icon {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -34,32 +19,3 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xray-page .icons-only .ant-tabs-nav {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xray-page .icons-only .ant-tabs-nav-wrap {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xray-page .icons-only .ant-tabs-nav-list {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xray-page .icons-only .ant-tabs-tab {
|
|
||||||
flex: 1 1 0;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xray-page .icons-only .ant-tabs-tab .anticon {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xray-page .icons-only .ant-tabs-nav-operations {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -80,3 +80,64 @@
|
||||||
.loading-spacer {
|
.loading-spacer {
|
||||||
min-height: calc(100vh - 120px);
|
min-height: calc(100vh - 120px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.settings-page .header-row,
|
||||||
|
.xray-page .header-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-page .header-actions,
|
||||||
|
.xray-page .header-actions {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-page .header-info,
|
||||||
|
.xray-page .header-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-only .ant-tabs-nav {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-only .ant-tabs-nav-wrap {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-only .ant-tabs-nav-list {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-only .ant-tabs-tab {
|
||||||
|
flex: 1 1 0;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-only .ant-tabs-tab .anticon {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-only .ant-tabs-nav-operations {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clients-page .summary-card,
|
||||||
|
.inbounds-page .summary-card,
|
||||||
|
.nodes-page .summary-card {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.clients-page .summary-card,
|
||||||
|
.inbounds-page .summary-card,
|
||||||
|
.nodes-page .summary-card {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue