3x-ui/frontend/src/styles/page-shell.css

.index-page,
.clients-page,
.inbounds-page,
.xray-page,
.settings-page,
.nodes-page,
.groups-page,
.api-docs-page {
  --bg-page: #e6e8ec;
  --bg-card: #ffffff;
  min-height: 100vh;
  background: var(--bg-page);
}

.index-page.is-dark,
.clients-page.is-dark,
.inbounds-page.is-dark,
.xray-page.is-dark,
.settings-page.is-dark,
.nodes-page.is-dark,
.groups-page.is-dark,
.api-docs-page.is-dark {
  --bg-page: #1a1b1f;
  --bg-card: #23252b;
}

.index-page.is-dark.is-ultra,
.clients-page.is-dark.is-ultra,
.inbounds-page.is-dark.is-ultra,
.xray-page.is-dark.is-ultra,
.settings-page.is-dark.is-ultra,
.nodes-page.is-dark.is-ultra,
.groups-page.is-dark.is-ultra,
.api-docs-page.is-dark.is-ultra {
  --bg-page: #000;
  --bg-card: #101013;
}

.index-page .ant-layout,
.index-page .ant-layout-content,
.clients-page .ant-layout,
.clients-page .ant-layout-content,
.inbounds-page .ant-layout,
.inbounds-page .ant-layout-content,
.xray-page .ant-layout,
.xray-page .ant-layout-content,
.settings-page .ant-layout,
.settings-page .ant-layout-content,
.nodes-page .ant-layout,
.nodes-page .ant-layout-content,
.groups-page .ant-layout,
.groups-page .ant-layout-content,
.api-docs-page .ant-layout,
.api-docs-page .ant-layout-content {
  background: transparent;
}

.index-page .content-shell,
.clients-page .content-shell,
.inbounds-page .content-shell,
.xray-page .content-shell,
.settings-page .content-shell,
.nodes-page .content-shell,
.groups-page .content-shell,
.api-docs-page .content-shell {
  background: transparent;
}

.index-page .content-area,
.clients-page .content-area,
.inbounds-page .content-area,
.xray-page .content-area,
.settings-page .content-area,
.nodes-page .content-area,
.groups-page .content-area {
  padding: 24px;
}

@media (max-width: 768px) {
  .clients-page .content-area,
  .inbounds-page .content-area,
  .nodes-page .content-area,
  .groups-page .content-area {
    padding: 8px;
  }
}

.loading-spacer {
  min-height: calc(100vh - 120px);
}

/* Tall action menus (e.g. the inbound/client context menus) must stay inside
   the viewport even when antd flips them upward near the screen edge. */
.ant-dropdown .ant-dropdown-menu {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled):not(.ant-dropdown-menu-item-danger):hover,
.ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled):not(.ant-dropdown-menu-item-danger):hover .ant-dropdown-menu-title-content,
.ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled):not(.ant-dropdown-menu-item-danger):hover > .anticon {
  color: var(--ant-color-primary) !important;
}

.ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled):not(.ant-dropdown-menu-item-danger):hover {
  background-color: color-mix(in srgb, var(--ant-color-primary) 14%, transparent) !important;
}

.ant-dropdown-menu-item-divider {
  background-color: var(--ant-color-border) !important;
}

body.dark .ant-dropdown-menu-item-divider {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.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,
.groups-page .summary-card {
  padding: 16px;
}

@media (max-width: 768px) {
  .clients-page .summary-card,
  .inbounds-page .summary-card,
  .nodes-page .summary-card,
  .groups-page .summary-card {
    padding: 8px;
  }
}

/* Hosts page shares the standard panel page shell (background, transparent
   layout, content padding, summary-card padding). */
.hosts-page {
  --bg-page: #e6e8ec;
  --bg-card: #ffffff;
  min-height: 100vh;
  background: var(--bg-page);
}

.hosts-page.is-dark {
  --bg-page: #1a1b1f;
  --bg-card: #23252b;
}

.hosts-page.is-dark.is-ultra {
  --bg-page: #000;
  --bg-card: #101013;
}

.hosts-page .ant-layout,
.hosts-page .ant-layout-content,
.hosts-page .content-shell {
  background: transparent;
}

.hosts-page .content-area {
  padding: 24px;
}

.hosts-page .summary-card {
  padding: 16px;
}

@media (max-width: 768px) {
  .hosts-page .content-area,
  .hosts-page .summary-card {
    padding: 8px;
  }
}