@fest-lib/veela 0.1.20 → 1.0.2

package/src/scss/ui/components/taskbar.scss

@@ -0,0 +1,514 @@
+/*
+ * Filename: TaskBar.scss
+ * FullPath: modules/projects/fl.ui/src/ui/navigation/taskbar/scss/TaskBar.scss
+ * Change date and time: 23.09.10_23.08.2026
+ * Reason for changes: Mobile dock is pointer-transparent except Home FAB (apps go full-bleed).
+ * FIND:mobile-dock
+ */
+/* Taskbar / env chrome (document + host). Former environment-shell/scss/chrome.scss. */
+//@use "veela-lib" as m;
+
+@layer components {
+    /* Fixed chrome: taskbar (desktop + mobile dock) + FL-UI `ui-statusbar` (desktop meta). */
+    /* WHY: `--env-z-shell-chrome` is set in environment-shell `scss/root.scss` ($z-shell-chrome). */
+
+    ui-taskbar {
+        padding: 0px 0px 0px 0px !important;
+        gap: 0px 0px !important;
+
+        &::part(taskbar) {
+            padding: 0px 0px 0px 0px !important;
+            gap: 0px 0px !important;
+
+            display: grid !important;
+            grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content);
+        }
+
+        ui-task {
+            margin: 0px 0px 0px 0px !important;
+        }
+    }
+
+    .env-shell-chrome {
+        position: fixed;
+        inset-inline: 0;
+        inset-block-end: 0;
+        z-index: var(--env-z-shell-chrome, 2147483000);
+        isolation: isolate;
+        display: flex;
+        flex-direction: column;
+        gap: 0px !important;
+        padding: 0px 0px 0px 0px !important;
+        font: 12px ui-sans-serif, system-ui, sans-serif;
+        /* WHY: contrast-color(dark variant) painted white glyphs on the light dock. */
+        color: var(--color-on-surface, var(--wf-md-on-surface-variant, #1c1c1e));
+        pointer-events: none;
+    }
+
+    /* WHY: lure `env-shell-taskbar-under` was a 40px fixed bbox + inline z-index:0 slab. */
+    .env-shell-chrome[data-desktop] {
+        box-shadow: 0 -8px 28px rgb(0 0 0 / 0.28);
+    }
+    
+    .env-shell-chrome > * {
+        pointer-events: auto;
+    }
+    
+    /*
+    * Taskbar base (desktop Win10 acrylic + mobile transparent dock share the same host).
+    * Soft elevation lives on `.env-shell-chrome` — not on this backdrop-filter host.
+    */
+    .env-shell-taskbar {
+        /* WHY: #f4f4f5/#1c1c1e forked a slate dock from Settings `--sv-*` / `--base-color`. */
+        --env-taskbar-surface: color-mix(
+            in oklab,
+            var(--color-surface-container-high, --u2-color-mod(var(--base-color, #5a9ec8), 980)) 88%,
+            transparent
+        );
+        --env-taskbar-ink: var(
+            --color-on-surface,
+            light-dark(
+                --u2-color-mod(var(--base-color, #5a9ec8), 900),
+                --u2-color-mod(var(--base-color, #5a9ec8), 100)
+            )
+        );
+        --env-taskbar-accent: var(--wf-md-primary, var(--color-primary, #5a9ec8));
+        --icon-color: var(--env-taskbar-ink);
+        color-scheme: inherit;
+
+        order: 0;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        gap: 0.15rem;
+        block-size: 2.5rem;
+        min-block-size: 2.5rem;
+        padding: 0 0.25rem;
+        padding-block-end: env(safe-area-inset-bottom, 0);
+        background: var(--env-taskbar-surface);
+        border-block-start: 1px solid light-dark(
+            color-mix(in oklab, #000 10%, transparent),
+            color-mix(in oklab, #fff 14%, transparent)
+        );
+        backdrop-filter: blur(22px) saturate(1.35);
+        -webkit-backdrop-filter: blur(22px) saturate(1.35);
+        color: var(--env-taskbar-ink);
+        box-shadow: none;
+
+        ui-icon {
+            color: var(--env-taskbar-ink);
+            --icon-color: var(--env-taskbar-ink);
+        }
+    }
+    
+    .env-shell-taskbar::part(taskbar) {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        gap: 0.15rem;
+        flex: 1;
+        min-inline-size: 0;
+        inline-size: 100%;
+    }
+    
+    .env-shell-taskbar__pins,
+    .env-shell-taskbar__windows {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        gap: 0px 0px;
+        min-inline-size: 0;
+        margin: 0px 0px 0px 0px;
+    }
+    
+    .env-shell-taskbar__workspaces {
+        display: none;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.25rem;
+        margin-inline-start: 0.35rem;
+    }
+
+    .env-shell-taskbar__workspace {
+        min-inline-size: 1.35rem;
+        min-block-size: 1.35rem;
+        padding: 0 0.35rem;
+        border: none;
+        border-radius: 0.35rem;
+        background: color-mix(in oklab, CanvasText 10%, transparent);
+        color: inherit;
+        font: inherit;
+        font-size: 0.7rem;
+        cursor: pointer;
+    }
+
+    .env-shell-taskbar__workspace[data-active] {
+        background: color-mix(in oklab, CanvasText 22%, transparent);
+        font-weight: 650;
+    }
+
+    .env-shell-chrome[data-desktop] .env-shell-taskbar__workspaces {
+        display: flex;
+    }
+
+    .env-shell-taskbar__pins {
+        flex: 0 0 auto;
+        content-visibility: visible;
+        inline-size: stretch;
+        gap: 0px 0px;
+        margin: 0px 0px 0px 0px;
+        
+        [data-env-home] {
+            content-visibility: visible;
+            color: inherit;
+            --icon-color: currentColor;
+
+            background: color-mix(in oklab, var(--env-taskbar-surface) 60%, transparent) !important;
+            background-color: color-mix(in oklab, var(--env-taskbar-surface) 60%, transparent) !important;
+        }
+
+        ui-task {
+            backdrop-filter: blur(22px) saturate(1.35);
+            -webkit-backdrop-filter: blur(22px) saturate(1.35);
+            box-shadow: inset 0 -2px 0 var(--env-taskbar-accent);
+        }
+
+        ui-task::part(icon), ui-task::part(glyph) {
+            color: var(--env-taskbar-ink);
+            --icon-color: var(--env-taskbar-ink);
+        }
+    }
+
+    .env-shell-taskbar__windows {
+        flex: 1 1 auto;
+        justify-content: flex-start;
+        overflow-x: auto;
+        scrollbar-width: thin;
+        inline-size: stretch;
+    }
+    
+    .env-shell-taskbar ui-task {
+        cursor: pointer;
+        color: inherit;
+        align-self: stretch;
+        inline-size: fit-content;
+        min-inline-size: 2.75rem;
+        min-block-size: 100%;
+        padding-inline: 0.55rem;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        outline: none;
+        opacity: 1;
+        /* Active underline via inset shadow so we don't fight ui-task border tokens. */
+        box-shadow: inset 0 -2px 0 transparent;
+    }
+    
+    .env-shell-taskbar ui-task:hover {
+        background: color-mix(in oklab, var(--env-taskbar-ink) 10%, transparent);
+        color: var(--env-taskbar-ink);
+        opacity: 1;
+    }
+    
+    .env-shell-taskbar ui-task[data-env-active="true"],
+    .env-shell-taskbar ui-task[data-active],
+    .env-shell-taskbar ui-task[data-focus] {
+        outline: none;
+        color: var(--env-taskbar-ink);
+        opacity: 1;
+        background: color-mix(in oklab, var(--env-taskbar-surface) 12%, transparent);
+        box-shadow: inset 0 -2px 0 var(--env-taskbar-accent);
+    }
+    
+    .env-shell-taskbar ui-task[data-minimized] {
+        opacity: 0.65;
+    }
+    
+    .env-shell-taskbar__tray-host {
+        margin-inline-start: auto;
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+        gap: 0.35rem;
+        padding-inline: 0.35rem;
+        border-inline-start: 1px solid light-dark(
+            color-mix(in oklab, #000 10%, transparent),
+            color-mix(in oklab, #fff 12%, transparent)
+        );
+    }
+    
+    .env-shell-taskbar__clock {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 0.05rem;
+        min-inline-size: 4rem;
+        inline-size: fit-content;
+        padding-inline: 0.35rem 0.15rem;
+        line-height: 1.05;
+        user-select: none;
+        pointer-events: auto;
+        cursor: pointer;
+        border-radius: 0.35rem;
+        font-variant-numeric: tabular-nums;
+
+        .env-shell-taskbar__clock-date {
+            font-variant-numeric: tabular-nums;
+        }
+
+        .env-shell-taskbar__clock-time {
+            font-variant-numeric: tabular-nums;
+        }
+    }
+
+    .env-shell-taskbar__clock:hover,
+    .env-shell-taskbar__clock:focus-visible {
+        background: color-mix(in oklab, var(--env-taskbar-ink) 10%, transparent);
+        color: var(--env-taskbar-ink);
+        outline: none;
+    }
+
+    .env-device-tray--taskbar {
+        pointer-events: auto;
+        cursor: pointer;
+        border-radius: 0.35rem;
+    }
+
+    .env-device-tray--taskbar:hover,
+    .env-device-tray--taskbar:focus-visible {
+        background: color-mix(in oklab, var(--env-taskbar-ink) 10%, transparent);
+        color: var(--env-taskbar-ink);
+        outline: none;
+    }
+    
+    .env-shell-taskbar__clock-time {
+        font-size: 0.78rem;
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+        color: inherit;
+    }
+    
+    .env-shell-taskbar__clock-date {
+        font-size: 0.62rem;
+        font-weight: 500;
+        color: color-mix(in oklab, currentColor 72%, transparent);
+        white-space: nowrap;
+        font-variant-numeric: tabular-nums;
+    }
+    
+    /* Desktop: icon-only tasks (tooltip via title / aria-label). */
+    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task::part(title) {
+        display: none !important;
+    }
+    
+    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task {
+        min-inline-size: 2.5rem;
+        padding-inline: 0.45rem;
+    }
+    
+    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task::part(icon) {
+        inline-size: 1.35rem;
+        block-size: 1.35rem;
+    }
+    
+    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task::part(glyph) {
+        inline-size: 1.35rem;
+        block-size: 1.35rem;
+    }
+
+    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home]::part(icon) {
+        inline-size: 1.75rem;
+        block-size: 1.75rem;
+        min-inline-size: 1.75rem;
+        min-block-size: 1.75rem;
+    }
+
+    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home]::part(glyph) {
+        inline-size: 100%;
+        block-size: 100%;
+        --icon-size: 100%;
+        --icon-padding: 0.05rem;
+    }
+    
+    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task::part(letter) {
+        font-size: 0.8rem;
+    }
+    
+    .env-shell-chrome[data-desktop] .env-shell-taskbar__pins {
+        border: none 0px transparent;
+        outline: none 0px transparent;
+        padding: 0px 0px 0px 0px;
+        margin: 0px 0px 0px 0px;
+        background: transparent;
+        background-color: transparent;
+        box-shadow: none 0px 0px 0px transparent;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+        min-inline-size: 2.75rem;
+        margin-inline-end: 0.2rem;
+        border-radius: 0px;
+    }
+
+    /* Desktop Start — same action as a mobile Home tap (go home / show desktop). */
+    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home] {
+        display: inline-flex !important;
+        transform: none;
+        outline: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+        min-inline-size: 2.75rem;
+        margin-inline-end: 0.2rem;
+        border-radius: 0px;
+        border: none 0px transparent;
+        outline: none 0px transparent;
+        box-shadow: none 0px 0px 0px transparent;
+
+        /*
+        background: color-mix(in oklab, var(--env-taskbar-accent) 18%, transparent);
+        color: var(--env-taskbar-ink);
+        --icon-color: currentColor;
+        */
+    }
+
+    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home]:hover,
+    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home]:focus-visible {
+        background: color-mix(in oklab, var(--env-taskbar-accent) 32%, transparent);
+    }
+
+    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home][data-env-active="true"],
+    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home][data-active],
+    .env-shell-chrome[data-desktop] .env-shell-taskbar ui-task[data-env-home][data-focus] {
+        background: color-mix(in oklab, var(--env-taskbar-accent) 28%, transparent)
+    }
+    
+    /*
+    * Mobile nav bar: fully transparent; house icon at the physical right
+    * so workspace pager dots stay visible in the center.
+    * WHY: `ui-taskbar::part(taskbar)` is a 3-col grid (pins | windows | tray);
+    * `justify-content` on the host cannot move the slotted Home pin.
+    * Long-press Home → `.env-shell-navbar__switcher` (open processes).
+    */
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar {
+        position: relative;
+        display: block;
+        place-self: stretch;
+        inline-size: 100%;
+        gap: 0;
+        block-size: 3rem;
+        min-block-size: 3rem;
+        padding: 0.15rem 0.75rem;
+        /* WHY: 3-button nav is already OS-reserved; extra safe-area made a second dock slab. */
+        padding-block-end: 0.15rem;
+        background: transparent;
+        border-block-start: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+        box-shadow: none;
+        color: var(--env-status-fg, var(--env-taskbar-ink));
+        --icon-color: currentColor;
+        /* WHY: chrome z-index sits above apps; a full-width hit slab ate Save / explorer rows. */
+        pointer-events: none;
+    }
+    
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar::part(taskbar) {
+        display: block !important;
+        grid-template-columns: none !important;
+        position: relative;
+        inline-size: 100%;
+        block-size: 100%;
+    }
+
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar__pins {
+        display: contents;
+    }
+    
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar__pins ui-task:not([data-env-home]) {
+        display: none !important;
+    }
+    
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar__windows {
+        display: none !important;
+    }
+    
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar__tray-host {
+        display: none !important;
+    }
+    
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home] {
+        position: absolute;
+        top: auto;
+        left: auto;
+        right: calc(0.7rem + env(safe-area-inset-right, 0px));
+        bottom: 0.22rem;
+        min-inline-size: 2.5rem;
+        min-block-size: 2.5rem;
+        padding: 0;
+        margin: 0;
+        border-radius: 999px;
+        z-index: 6;
+        pointer-events: auto;
+        background: color-mix(
+            in oklab,
+            var(--color-surface-container-high, --u2-color-mod(var(--base-color, #5a9ec8), 980)) 88%,
+            transparent
+        );
+        box-shadow: 0 6px 20px -8px color-mix(in oklab, #000 45%, transparent);
+        touch-action: manipulation;
+        -webkit-user-select: none;
+        user-select: none;
+    }
+    
+    /* Icon-only Home (hide task title label). */
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home]::part(title) {
+        display: none !important;
+    }
+    
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home]::part(icon) {
+        inline-size: 1.7rem;
+        block-size: 1.7rem;
+        min-inline-size: 1.7rem;
+        min-block-size: 1.7rem;
+    }
+    
+    /* Prefer Phosphor glyph; letter fallback is last resort (was wrongly showing "U"). */
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home]::part(glyph) {
+        inline-size: 100%;
+        block-size: 100%;
+        --icon-padding: 0.1rem;
+        --icon-size: 100%;
+        opacity: 1;
+    }
+    
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home]::part(letter) {
+        opacity: 0;
+    }
+    
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home]:hover,
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home]:active {
+        background: color-mix(in oklch, #fff 10%, transparent);
+        color: contrast-color(inherit(background-color));
+    }
+    
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home][data-env-active="true"],
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home][data-active],
+    .env-shell-chrome:not([data-desktop]) .env-shell-taskbar ui-task[data-env-home][data-focus] {
+        background: color-mix(in oklch, #fff 8%, transparent);
+        color: contrast-color(inherit(background-color));
+        /*box-shadow: inset 0 -2px 0 #60cdff;*/
+    }
+    
+    /*
+     * Mobile footer statusbar is replaced by the fixed overlay band when
+     * `[data-status-overlay]` is set (see statusbar.scss). Without overlay
+     * (standalone), hide the footer copy entirely.
+     */
+    .env-shell-chrome:not([data-desktop]):not([data-status-overlay]) .env-ui-statusbar {
+        display: none !important;
+    }
+
+}