.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 14px; 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; flex-direction: column; align-items: center; min-width: 0; line-height: 1.1; } .brand-text { display: block; } .brand-version { display: block; width: 100%; text-align: center; font-size: 10px; font-weight: 500; letter-spacing: 0; opacity: 0.6; margin-top: 2px; } .sider-brand-collapsed .brand-block { align-items: center; 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); } @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; } } .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; }