/* My Lil Guys — Apple-glass extension on top of Pico CSS. Pico supplies typography/forms/colors; this file adds translucent, blurred "glass" surfaces (navbar, overlays, modals) in Apple's style. */ :root { --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-strong: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.35); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.4) inset; --glass-blur: saturate(180%) blur(20px); --nav-height: 3rem; } /* Pico auto-switches to dark via prefers-color-scheme when no data-theme is forced on (see index.html); mirror that here so the glass surfaces follow the OS setting. [data-theme="dark"] is also kept for if a manual theme toggle is ever added. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass-bg: rgba(30, 30, 34, 0.55); --glass-bg-strong: rgba(30, 30, 34, 0.72); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.05) inset; } } [data-theme="dark"] { --glass-bg: rgba(30, 30, 34, 0.55); --glass-bg-strong: rgba(30, 30, 34, 0.72); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.05) inset; } html, body { height: 100%; } body { margin: 0; overflow: hidden; overscroll-behavior: none; } /* ---- generic glass surface -------------------------------------------- */ .glass-panel { background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--pico-border-radius, 12px); box-shadow: var(--glass-shadow); } /* ---- navbar ------------------------------------------------------------ */ .glass-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; margin: 0; padding: 0; border-radius: 0; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-border); box-sizing: border-box; } .glass-nav nav.container-fluid { height: var(--nav-height); min-height: 0; padding-block: 0; align-items: center; } .glass-nav .brand { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; text-decoration: none; color: var(--pico-color, inherit); } .auth-link { white-space: nowrap; } .add-memory-btn:not([hidden]) { display: inline-flex; } .add-memory-btn { align-items: center; justify-content: center; height: var(--pill-height, 2.75rem); min-height: 0; padding-block: 0; padding-inline: 1.1rem; font-size: 1rem; line-height: normal; box-sizing: border-box; /* Pico's button box-shadow draws an extra ring outside the border box (a fake outline), which visually inflates the button beyond its real height — kill it so it reads as the same height as the search pill. */ box-shadow: none; border-radius: 999px; width: auto; margin: 0; flex: none; white-space: nowrap; } /* ---- user menu ---------------------------------------------------------- */ .user-menu { position: relative; } .user-menu-btn { background: transparent; border: none; color: inherit; font-weight: 600; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 999px; outline: none; } .user-menu-btn:focus-visible { outline: 2px solid var(--pico-primary, #1a73e8); outline-offset: 2px; } .user-menu-dropdown { position: absolute; right: 0; top: calc(100% + 0.4rem); min-width: 10rem; padding: 0.5rem; display: flex; flex-direction: column; gap: 1rem; } .user-menu-dropdown a { display: block; padding: 0.7rem 0.7rem; border-radius: 8px; text-decoration: none; color: inherit; } .user-menu-dropdown a:hover { background: rgba(127, 127, 127, 0.14); } /* ---- map + overlay ------------------------------------------------------ */ #map-wrap { position: relative; height: 100dvh; width: 100%; padding: 0; } #map { position: absolute; inset: 0; } .map-status { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); padding: 0.5rem 1rem; font-size: 0.85rem; z-index: 30; } .search-overlay { --pill-height: 2.75rem; position: absolute; top: calc(var(--nav-height) + 1.5rem); left: 1rem; z-index: 30; display: flex; align-items: flex-start; gap: 0.6rem; max-width: calc(100vw - 2rem); } .search-icon-btn { display: none; align-items: center; justify-content: center; width: var(--pill-height); height: var(--pill-height); box-sizing: border-box; border: none; background: transparent; color: inherit; cursor: pointer; border-radius: 999px; flex: none; } .search-form { position: relative; display: flex; align-items: center; height: var(--pill-height); padding-inline: 1rem; box-sizing: border-box; background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 999px; box-shadow: var(--glass-shadow); } .search-form input[type="search"] { margin: 0; padding: 0; height: auto; line-height: normal; width: 20rem; max-width: 100%; background: transparent; border: none; box-shadow: none; outline: none; caret-color: currentColor; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .search-form input[type="search"]:focus { box-shadow: none; outline: none; } .search-form input[type="search"]::-moz-focus-inner { border: 0; } /* Strip WebKit's built-in search-field chrome (magnifier/cancel slots) — with -webkit-appearance reset above they can otherwise render as a stray mark inside the empty, focused field. */ .search-form input[type="search"]::-webkit-search-decoration, .search-form input[type="search"]::-webkit-search-cancel-button, .search-form input[type="search"]::-webkit-search-results-button, .search-form input[type="search"]::-webkit-search-results-decoration { display: none; } .search-suggestions { position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; max-height: 18rem; overflow-y: auto; padding: 0.3rem; z-index: 35; /* .glass-panel's border-radius reads --pico-border-radius, which Pico's [role=search] rule sets to 5rem on the parent
and which inherits here — reset it so the dropdown is a normal rounded rect, not a pill. */ --pico-border-radius: 12px; } .search-suggestions .suggestion { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-radius: 8px; cursor: pointer; } .search-suggestions .suggestion:hover, .search-suggestions .suggestion.active { background: rgba(127, 127, 127, 0.16); } #memory-tag-suggestions .suggestion { flex-direction: column; align-items: flex-start; gap: 0.1rem; } .suggestion-series { font-size: 0.75rem; opacity: 0.6; } .suggestion .kind { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; flex: none; } /* ---- Add-memory tag picker ---------------------------------------------- */ .tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.8rem; } .tag-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(127, 127, 127, 0.16); font-size: 0.85rem; } .tag-pill button { all: unset; cursor: pointer; line-height: 1; opacity: 0.6; } .tag-pill button:hover { opacity: 1; } /* ---- modals -------------------------------------------------------------- */ dialog article.glass-panel { max-width: 30rem; } .auth-oauth-buttons { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; } .signin-button { width: 210px; height: 40px; } /* Apple's JS SDK renders its button as a div[role="button"] with its own inline SVG background/logo/text — but Pico styles any [role=button] like a