/* * Shared chrome for the calvinbrown.dev tools. * * Deliberately plain CSS rather than Tailwind utilities: every tool in the * family already pulls Tailwind from the CDN, but this file is also loaded * cross-origin by pages that may not, so it cannot assume a utility layer * exists. It styles the injected nav and nothing else — page layout stays * the individual tool's business. * * Dark mode keys off `.dark` on , which matches the class strategy * tools.js sets up. A prefers-color-scheme fallback is included so the nav * still looks right on a page that never calls Tools.initTheme(). */ :root { --tools-bg: #ffffff; --tools-border: #e5e7eb; --tools-text: #111827; --tools-muted: #6b7280; --tools-hover: #f3f4f6; --tools-accent: #2563eb; } html.dark { --tools-bg: #1f2937; --tools-border: #374151; --tools-text: #f3f4f6; --tools-muted: #9ca3af; --tools-hover: #374151; --tools-accent: #60a5fa; } @media (prefers-color-scheme: dark) { html:not(.light):not(.dark) { --tools-bg: #1f2937; --tools-border: #374151; --tools-text: #f3f4f6; --tools-muted: #9ca3af; --tools-hover: #374151; --tools-accent: #60a5fa; } } .tools-nav { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--tools-bg); border-bottom: 1px solid var(--tools-border); color: var(--tools-text); font-size: 0.875rem; } .tools-nav a { color: inherit; text-decoration: none; } .tools-nav__brand { display: inline-flex; align-items: baseline; gap: 0.35rem; font-weight: 600; padding: 0.35rem 0.5rem; border-radius: 0.375rem; } .tools-nav__brand:hover { background: var(--tools-hover); } .tools-nav__brand-host { color: var(--tools-muted); font-weight: 500; } .tools-nav__spacer { flex: 1; } /* The dropdown is a
so it opens and closes without any JS state. */ .tools-nav__menu { position: relative; } .tools-nav__menu > summary { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.6rem; border-radius: 0.375rem; cursor: pointer; list-style: none; font-weight: 500; } /* Safari draws its own disclosure triangle unless both of these are set. */ .tools-nav__menu > summary::-webkit-details-marker { display: none; } .tools-nav__menu > summary:hover, .tools-nav__menu[open] > summary { background: var(--tools-hover); } .tools-nav__menu > summary svg { transition: transform 150ms ease; } .tools-nav__menu[open] > summary svg { transform: rotate(180deg); } .tools-nav__dropdown { position: absolute; right: 0; top: calc(100% + 0.4rem); min-width: 15rem; padding: 0.35rem; background: var(--tools-bg); border: 1px solid var(--tools-border); border-radius: 0.5rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25); } .tools-nav__item { display: block; padding: 0.45rem 0.6rem; border-radius: 0.375rem; line-height: 1.2; } .tools-nav__item:hover { background: var(--tools-hover); } .tools-nav__item[aria-current='page'] { color: var(--tools-accent); font-weight: 600; } .tools-nav__item-sub { display: block; margin-top: 0.15rem; color: var(--tools-muted); font-size: 0.75rem; } .tools-nav__divider { margin: 0.35rem 0.3rem; border: 0; border-top: 1px solid var(--tools-border); } .tools-nav__icon-button { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--tools-muted); cursor: pointer; } .tools-nav__icon-button:hover { background: var(--tools-hover); color: var(--tools-text); } /* Shown in light mode, hidden in dark, and vice versa — so the button always pictures the theme you would switch *to*. */ html.dark .tools-nav__icon-button .tools-icon-moon, html:not(.dark) .tools-nav__icon-button .tools-icon-sun { display: none; } .tools-toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 100; padding: 0.5rem 1rem; border-radius: 0.5rem; background: #22c55e; color: #ffffff; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 0.875rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 300ms ease; pointer-events: none; } .tools-toast--visible { opacity: 1; } .tools-toast--error { background: #ef4444; } @media (max-width: 480px) { .tools-nav__brand-host { display: none; } }