/** * Projects Dropdown * * Styles for the sidebar project selector: the trigger button, the desktop * flyout menu (rendered to to escape the sidebar's overflow/transform * stacking context), and the mobile bottom-sheet variant. * * Relies on the design tokens defined in main.css (--card-bg, --accent-color, * --warning-color, --sidebar-color, --border-color, --surface-color, etc.). */ /* Project selector trigger (scoped to beat base .nav-link styles) */ .sidebar-nav .nav-item > .nav-link.projects-dropdown-btn { display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; margin: 0.15rem 0 0.35rem; padding: 0.6rem 0.75rem; border-radius: 0.5rem; background-color: var(--card-bg); border: 1px solid color-mix(in srgb, var(--warning-color), transparent 55%); color: var(--sidebar-color); transition: border-color var(--transition-fast), background-color var(--transition-fast); } .sidebar-nav .nav-item > .nav-link.projects-dropdown-btn:hover { border-color: color-mix(in srgb, var(--warning-color), transparent 30%); background-color: var(--card-bg); color: var(--sidebar-color); } .projects-dropdown-btn .nav-icon { color: var(--accent-color); } .projects-dropdown-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; font-weight: 700; color: var(--heading-color); } .projects-chevron { margin-left: auto; font-size: 0.8rem; color: var(--sidebar-muted-color); transition: transform var(--transition-fast); } .projects-dropdown-btn[aria-expanded="true"] .projects-chevron { transform: rotate(180deg); } /* Flyout menu (moved to , so styled globally) */ .projects-dropdown-menu { display: none; flex-direction: column; position: fixed; z-index: 99999; min-width: 200px; max-width: min(360px, 92vw); background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--heading-color), transparent 55%); overflow: hidden; } .projects-dropdown-menu.open { display: flex; } .projects-dropdown-list { list-style: none; margin: 0; padding: 0.35rem; max-height: 280px; overflow-y: auto; } .projects-dropdown-menu .project-item { margin: 0; } .projects-dropdown-item { display: block; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm, 0.375rem); font-size: 0.8rem; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--default-color); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); } .projects-dropdown-item:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 86%); color: var(--accent-color); } .projects-empty { padding: 0.6rem 0.7rem; font-size: 0.78rem; color: var(--sidebar-muted-color); text-align: center; } /* Desktop search row */ .projects-search { position: relative; padding: 0.5rem; border-bottom: 1px solid var(--border-color); } .projects-search-icon { position: absolute; top: 50%; left: 0.95rem; transform: translateY(-50%); font-size: 0.8rem; color: var(--sidebar-muted-color); pointer-events: none; } .projects-search-input { width: 100%; padding: 0.45rem 0.6rem 0.45rem 2rem; font-size: 0.8rem; color: var(--default-color); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 0.375rem); outline: none; transition: border-color var(--transition-fast); } .projects-search-input:focus { border-color: color-mix(in srgb, var(--accent-color), transparent 40%); } /* Mobile sheet header (hidden on desktop) */ .projects-sheet-header { display: none; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-color); } .projects-sheet-title { font-size: 0.9rem; font-weight: 700; color: var(--heading-color); } .projects-sheet-close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--sidebar-muted-color), transparent 88%); color: var(--default-color); cursor: pointer; } /* Mobile sheet backdrop */ .projects-sheet-backdrop { position: fixed; inset: 0; z-index: 99998; background: rgb(10 16 30 / 0.58); backdrop-filter: blur(3px); } .projects-sheet-backdrop[hidden] { display: none; } /* Mobile: bottom sheet */ @media (max-width: 1199px) { .projects-dropdown-menu { display: flex; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; min-width: 0; max-width: none; border-radius: var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0 0; transform: translateY(100%); transition: transform var(--transition-base); } .projects-dropdown-menu.open { transform: translateY(0); } .projects-search { display: none; } .projects-sheet-header { display: flex; } .projects-dropdown-list { max-height: 60vh; padding: 0.5rem; } .projects-dropdown-item { padding: 0.75rem 0.7rem; white-space: normal; } }