/* macos-dock.css — desktop admin floating dock. * * Maintainer May 14: "imagine recreating the desktop view of * macOS X." This is the closest the web can get without a real * cursor-proximity magnifier (CSS-only hover scale, no JS). * * Visual recipe: * * Floating glass pill, bottom-center, 16-24 px above the * viewport edge. Not edge-to-edge. * * Translucent dark fill + heavy backdrop blur — macOS Big * Sur+ look. * * Each tile is a 52 px iOS-app-icon-style squircle. Hover * scales to 72 px (1.18×) — the signature macOS magnify * pop. Neighbours shift outward via flex-gap on the * :has(:hover) parent so the row feels alive. * * Label tooltip rises above the icon on hover. * * Active page = a small bouncing dot underneath the tile * (macOS "running app" indicator). * * Hidden below 1024 px — mobile already has bottom-tabs. */ .mac-dock { display: none; /* desktop-only — overridden in the @media below */ } @media (min-width: 1024px) { .mac-dock { display: block; position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 70; /* above bottom-tabs (which are mobile only anyway) */ pointer-events: none; /* the pill paints; tiles handle clicks */ } .mac-dock-inner { pointer-events: auto; display: inline-flex; align-items: flex-end; gap: 6px; padding: 8px 12px 10px; background: rgba(14, 29, 51, 0.55); border: 0.5px solid rgba(255, 255, 255, 0.10); border-radius: 22px; backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); box-shadow: 0 24px 64px -20px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.08) inset; } html:not(.dark) .mac-dock-inner { background: rgba(255, 255, 255, 0.62); border-color: rgba(15, 23, 42, 0.08); box-shadow: 0 24px 64px -20px rgba(15, 23, 42, 0.30), 0 1px 0 rgba(255, 255, 255, 0.80) inset; } /* Tile — base 64 px (was 52), magnifies on hover. Maintainer * May 16: "remove titles, keep icons, make them bigger." */ .mac-dock-tile { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; text-decoration: none; /* Quick-dial recipe (May 15) — soft-tint background per * per-tile accent class (mdt--) below. Replaces the * single saturated teal gradient that made every tile look * the same. */ background: rgba(148, 163, 184, 0.18); color: var(--brand-navy, #0A1628); box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.32); transform-origin: 50% 100%; transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, background 0.18s ease, margin 0.22s ease; } .mac-dock-tile:hover, .mac-dock-tile:focus-visible { transform: scale(1.36) translateY(-6px); box-shadow: 0 22px 38px -14px rgba(15, 23, 42, 0.45); z-index: 1; } /* Per-tile accents — 12% inactive tint / 28% hover tint, plus a * deep-tone SVG stroke (light mode) that brightens in dark mode. * Same pre-computed rgba pattern used on the bottom-tabs after * the color-mix oklab/transparent quirk was discovered. */ .mac-dock-tile.mdt--teal { background: rgba(37, 214, 173, 0.18); } .mac-dock-tile.mdt--amber { background: rgba(251, 191, 36, 0.18); } .mac-dock-tile.mdt--sky { background: rgba(56, 189, 248, 0.18); } .mac-dock-tile.mdt--emerald { background: rgba(52, 211, 153, 0.18); } .mac-dock-tile.mdt--rose { background: rgba(251, 113, 133, 0.18); } .mac-dock-tile.mdt--cyan { background: rgba(34, 211, 238, 0.18); } .mac-dock-tile.mdt--indigo { background: rgba(129, 140, 248, 0.18); } .mac-dock-tile.mdt--violet { background: rgba(167, 139, 250, 0.18); } .mac-dock-tile.mdt--slate { background: rgba(148, 163, 184, 0.18); } /* Hover bumped 0.50 → 0.70 alpha (maintainer May 16: brighter * hover on the macOS dock specifically; admin dashboard dock * uses its own ruleset). Outer glow ring also stronger so the * hover state lifts off the dock glass at a glance. */ .mac-dock-tile.mdt--teal:hover, .mac-dock-tile.mdt--teal:focus-visible { background: rgba(37, 214, 173, 0.70); box-shadow: 0 0 0 1.5px rgba(37, 214, 173, 0.65), 0 6px 18px -8px rgba(37, 214, 173, 0.55); } .mac-dock-tile.mdt--amber:hover, .mac-dock-tile.mdt--amber:focus-visible { background: rgba(251, 191, 36, 0.70); box-shadow: 0 0 0 1.5px rgba(251, 191, 36, 0.65), 0 6px 18px -8px rgba(251, 191, 36, 0.55); } .mac-dock-tile.mdt--sky:hover, .mac-dock-tile.mdt--sky:focus-visible { background: rgba(56, 189, 248, 0.70); box-shadow: 0 0 0 1.5px rgba(56, 189, 248, 0.65), 0 6px 18px -8px rgba(56, 189, 248, 0.55); } .mac-dock-tile.mdt--emerald:hover, .mac-dock-tile.mdt--emerald:focus-visible { background: rgba(52, 211, 153, 0.70); box-shadow: 0 0 0 1.5px rgba(52, 211, 153, 0.65), 0 6px 18px -8px rgba(52, 211, 153, 0.55); } .mac-dock-tile.mdt--rose:hover, .mac-dock-tile.mdt--rose:focus-visible { background: rgba(251, 113, 133, 0.70); box-shadow: 0 0 0 1.5px rgba(251, 113, 133, 0.65), 0 6px 18px -8px rgba(251, 113, 133, 0.55); } .mac-dock-tile.mdt--cyan:hover, .mac-dock-tile.mdt--cyan:focus-visible { background: rgba(34, 211, 238, 0.70); box-shadow: 0 0 0 1.5px rgba(34, 211, 238, 0.65), 0 6px 18px -8px rgba(34, 211, 238, 0.55); } .mac-dock-tile.mdt--indigo:hover, .mac-dock-tile.mdt--indigo:focus-visible { background: rgba(129, 140, 248, 0.70); box-shadow: 0 0 0 1.5px rgba(129, 140, 248, 0.65), 0 6px 18px -8px rgba(129, 140, 248, 0.55); } .mac-dock-tile.mdt--violet:hover, .mac-dock-tile.mdt--violet:focus-visible { background: rgba(167, 139, 250, 0.70); box-shadow: 0 0 0 1.5px rgba(167, 139, 250, 0.65), 0 6px 18px -8px rgba(167, 139, 250, 0.55); } .mac-dock-tile.mdt--slate:hover, .mac-dock-tile.mdt--slate:focus-visible { background: rgba(148, 163, 184, 0.70); box-shadow: 0 0 0 1.5px rgba(148, 163, 184, 0.65), 0 6px 18px -8px rgba(148, 163, 184, 0.55); } /* Neighbour nudge — when ANY tile is hovered in the inner * pill, every tile gets a touch more breathing room so the * hovered one doesn't crash into them. */ .mac-dock-inner:hover .mac-dock-tile { margin: 0 4px; } .mac-dock-inner:hover .mac-dock-tile:hover { margin: 0 8px; } .mac-dock-tile-glyph { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #0A1628; } .mac-dock-tile-glyph svg { width: 70%; height: 70%; } /* Label tooltip — rises on hover. macOS pattern. Restored * May 17 after a brief removal in #806 (maintainer: "Macdos * icons title was not going to be removed"). Tile size + icon * bump from that PR stay; only the tooltip-pill comes back. */ .mac-dock-tile-tip { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 5px 10px; border-radius: 8px; background: rgba(10, 22, 40, 0.92); color: #fff; font: 600 12px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; letter-spacing: -0.005em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.40); } .mac-dock-tile:hover .mac-dock-tile-tip, .mac-dock-tile:focus-visible .mac-dock-tile-tip { opacity: 1; transform: translateX(-50%) translateY(0); } /* Active-page dot — sits under the tile, like macOS "running * app" indicator. */ .mac-dock-tile.is-active::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 2px rgba(37, 214, 173, 0.30); } html:not(.dark) .mac-dock-tile.is-active::after { background: var(--brand-teal, #1AB994); box-shadow: 0 0 0 2px rgba(37, 214, 173, 0.18); } /* Separator — a faint vertical hairline between tile groups. * macOS Sequoia puts these between sandboxes. */ .mac-dock-sep { width: 1px; height: 36px; background: rgba(255, 255, 255, 0.16); margin: 0 4px; align-self: center; } html:not(.dark) .mac-dock-sep { background: rgba(15, 23, 42, 0.10); } /* Unread-count badge — Apple's red dot. */ .mac-dock-tile-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #EF4444; color: #fff; font: 700 10.5px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; border: 2px solid rgba(14, 29, 51, 0.92); box-shadow: 0 2px 6px -2px rgba(239, 68, 68, 0.55); font-variant-numeric: tabular-nums; } html:not(.dark) .mac-dock-tile-badge { border-color: rgba(255, 255, 255, 0.92); } /* Push main content up so the dock doesn't sit over the bottom * of the page on long scrolls. ~84 px clears the 72-px hovered * tile + the 18 px margin + a tiny breath. */ body { padding-bottom: 84px; } } /* Respect users who don't want spring motion. */ @media (prefers-reduced-motion: reduce) { .mac-dock-tile { transition: none; } .mac-dock-tile:hover, .mac-dock-tile:focus-visible { transform: none; } .mac-dock-tile-tip { transition: opacity 0.10s ease; } } /* Cursor-proximity magnifier (PR #712) rolled back May 14: cosine- * bell falloff dragged neighbour tiles toward the cursor and made * the hovered icon harder to land on. The base :hover scale rule * above is the canonical behaviour — direct hover only, no * spillover. */