Native linux support (#1378) (Closes #1375 Closes #1376 Closes #1377 Closes #1374 Closes #1373 Closes #1372 Closes #1371)

2026-07-25 08:22:07 +00:00 · 2026-02-08 12:28:44 -08:00
parent 77e3d5ddf2
commit 824881c108
626 changed files with 7640 additions and 1803 deletions
@@ -0,0 +1,132 @@
+/* Navigation Panel */
+.navigation-panel {
+    position: absolute; /* Changed to absolute positioning */
+    top: 0;
+    left: 0;
+    width: 0;
+    min-width: 0;
+    overflow: hidden;
+    z-index: 1000;
+    height: 100vh;
+    /* Use transform instead of width for GPU-accelerated animation */
+    transition: width 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.15s ease-out;
+    opacity: 0;
+    /* CSS custom properties for dynamic animation */
+    --stagger-delay: 0.05s;
+    --base-delay: 0.05s;
+    /* Custom properties for menu item animations */
+    --item-stagger-delay: 0.03s;
+    --item-base-delay: 0.1s;
+    /* Promote to GPU layer */
+    will-change: width, opacity;
+    transform: translateZ(0);
+}
+
+    .navigation-panel.open {
+        min-width: 250px;
+        width: 25%;
+        opacity: 1;
+    }
+
+        .navigation-panel.open .menu-category {
+            animation: slideInFromLeft 0.3s ease-out forwards;
+            animation-delay: calc(var(--base-delay) + (counter(menu-item) - 1) * var(--stagger-delay));
+        }
+
+.navigation-menu {
+    padding: 15px;
+    margin-top: 40px;
+    color: var(--neutral-foreground-rest);
+    height: calc(100vh - 40px);
+    overflow-y: auto;
+    box-sizing: border-box;
+    counter-reset: menu-item;
+    /* Promote to GPU layer for smooth scrolling */
+    transform: translateZ(0);
+}
+
+.menu-category {
+    margin-bottom: 5px;
+    counter-increment: menu-item;
+    /* Promote to GPU layer */
+    will-change: transform, opacity;
+}
+
+.category-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: color-mix(in srgb, var(--accent-fill-active) 60%, transparent);
+    backdrop-filter: blur(10px);
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s ease-out;
+    border: 1px solid color-mix(in srgb, var(--accent-stroke-active) 60%, transparent);
+    /* Promote to GPU layer */
+    transform: translateZ(0);
+}
+
+    .category-header:hover {
+        background: var(--accent-fill-hover);
+        color: var( --foreground-on-accent-rest-large);
+    }
+
+.category-title {
+    font-weight: 400;
+    font-size: var(--font-size-medium);
+}
+
+.category-arrow {
+    font-size: var(--font-size-small);
+    transition: transform 0.2s;
+}
+
+    .category-arrow.expanded {
+        transform: rotate(180deg);
+    }
+
+.category-items {
+    padding: 5px 0;
+    /* Reset counter for menu items within each category */
+    counter-reset: category-item;
+}
+
+.menu-item {
+    padding: 8px 10px;
+    cursor: pointer;
+    border-radius: 3px;
+    transition: background-color 0.2s ease-out;
+    margin: 2px 0;
+    /* Increment counter for each menu item */
+    counter-increment: category-item;
+    /* Initial state for animation */
+    opacity: 0;
+    transform: translateY(-20px);
+    /* Promote to GPU layer */
+    will-change: transform, opacity;
+}
+
+/* Animate menu items when category is expanded and navigation panel is open */
+.navigation-panel.open .category-items .menu-item {
+    animation: slideInFromTop 0.25s ease-out forwards;
+    /* Dynamic delay calculation for each menu item */
+    animation-delay: calc(var(--item-base-delay) + (counter(category-item) - 1) * var(--item-stagger-delay));
+}
+
+.menu-item:hover {
+    background: var(--accent-fill-hover);
+    color: var( --foreground-on-accent-rest-large);
+}
+
+.item-title {
+    display: block;
+    font-size: var(--font-size-medium);
+    font-weight: 400;
+}
+
+.item-description {
+    display: block;
+    font-size: var(--font-size-small);
+    margin-top: 2px;
+}