mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-08-01 21:02:15 +03:00
a27d57b2ff
The inbound/client context menus hold a dozen items; when antd flips a tall menu upward near the screen edge it overflowed the top of the viewport, hiding the first entries. Cap the overlay height and scroll.
179 lines
3.9 KiB
CSS
179 lines
3.9 KiB
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;
|
|
}
|
|
}
|