.ant-sidebar > .ant-layout-sider { position: sticky; top: 0; height: 100vh; align-self: flex-start; } .sider-brand, .drawer-brand { font-weight: 600; font-size: 18px; letter-spacing: 0.5px; color: var(--ant-color-text); } .sider-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--ant-color-border-secondary); user-select: none; } .sider-brand-collapsed { justify-content: center; font-size: 16px; padding: 14px 4px; letter-spacing: 0; } .brand-block { display: inline-flex; align-items: center; min-width: 0; line-height: 1.1; } .sider-brand-collapsed .brand-block { flex: 0 0 auto; } .brand-actions { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; } .sidebar-donate { background: transparent; border: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ant-color-text-secondary); text-decoration: none; flex-shrink: 0; transition: background-color 0.2s, transform 0.15s, color 0.2s; } .sidebar-donate:hover, .sidebar-donate:focus-visible { background-color: rgba(236, 72, 153, 0.12); color: #ec4899; transform: scale(1.08); outline: none; } .sidebar-donate .anticon { font-size: 16px; } .sidebar-theme-cycle { background: transparent; border: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ant-color-text-secondary); padding: 0; flex-shrink: 0; transition: background-color 0.2s, transform 0.15s, color 0.2s; } .sidebar-theme-cycle:hover, .sidebar-theme-cycle:focus-visible { background-color: color-mix(in srgb, var(--ant-color-primary) 12%, transparent); color: var(--ant-color-primary); transform: scale(1.08); outline: none; } .sidebar-theme-cycle .anticon { font-size: 16px; } .drawer-header-actions { display: inline-flex; align-items: center; gap: 4px; } .drawer-handle { position: fixed; top: 12px; left: 12px; z-index: 1100; background: rgba(0, 0, 0, 0.55); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--ant-color-border-secondary); } .drawer-close { background: transparent; border: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--ant-color-text-secondary); } .drawer-close:hover, .drawer-close:focus-visible { background: var(--ant-color-fill-tertiary); } .drawer-menu .ant-menu-item { height: 48px; line-height: 48px; margin: 0; border-radius: 0; } .drawer-menu .ant-menu-item .anticon { font-size: 16px; } .drawer-utility { margin-top: auto; border-top: 1px solid var(--ant-color-border-secondary); } .ant-sidebar > .ant-layout-sider .ant-layout-sider-children { display: flex; flex-direction: column; height: 100%; } .sider-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; } .sider-utility { flex: 0 0 auto; border-top: 1px solid var(--ant-color-border-secondary); } .sider-footer { flex: 0 0 auto; padding: 8px 8px 12px; } .sider-version { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 8px 16px; color: var(--ant-color-text-secondary); font-size: 13px; font-weight: 500; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-decoration: none; transition: color 0.2s; } .sider-version .anticon { font-size: 16px; } .sider-version:hover, .sider-version:focus-visible { color: var(--ant-color-primary); outline: none; } .sider-version.is-collapsed { justify-content: center; padding: 8px 0; } .drawer-footer { flex: 0 0 auto; padding: 8px 8px 12px; } @media (max-width: 768px) { .drawer-handle { display: inline-flex; } .ant-sidebar > .ant-layout-sider .ant-layout-sider-children, .ant-sidebar > .ant-layout-sider .ant-layout-sider-trigger { display: none; } .ant-sidebar > .ant-layout-sider { flex: 0 0 0 !important; max-width: 0 !important; min-width: 0 !important; width: 0 !important; } } body.dark .ant-drawer-content, body.dark .ant-drawer-body { background-color: #15161a; } html[data-theme="ultra-dark"] body.dark .ant-drawer-content, html[data-theme="ultra-dark"] body.dark .ant-drawer-body { background-color: #050507; } body.dark .ant-drawer-body .drawer-menu, body.dark .ant-drawer-body .drawer-menu.ant-menu-dark, body.dark .ant-drawer-body .drawer-menu .ant-menu-item, body.dark .ant-drawer-body .drawer-menu .ant-menu-sub, body.dark .ant-drawer-body .drawer-menu .ant-menu-item-group-list { background-color: transparent; } .sider-nav .ant-menu-item-selected, .sider-utility .ant-menu-item-selected, .drawer-menu .ant-menu-item-selected { background-color: color-mix(in srgb, var(--ant-color-primary) 20%, transparent) !important; color: var(--ant-color-primary) !important; } .sider-nav .ant-menu-item-active:not(.ant-menu-item-selected), .sider-utility .ant-menu-item-active:not(.ant-menu-item-selected), .drawer-menu .ant-menu-item-active:not(.ant-menu-item-selected), .sider-nav .ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-disabled):hover, .sider-utility .ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-disabled):hover, .drawer-menu .ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-disabled):hover { background-color: color-mix(in srgb, var(--ant-color-primary) 10%, transparent) !important; color: var(--ant-color-primary) !important; }