/** * THE MENU BAR'S LOOK, IN ONE FILE BECAUSE TWO APPS WEAR IT. * * The shot list app and the separate 3D Blocking window are two documents with * two stylesheets, and they already share the colour variables by having the * same :root block in both. A menu bar copied into both would be the third * statement of the same thing and the first to drift, so it is linked instead. * Blocking reaches it at /ui/menubar.css, the same absolute path it already * uses for the shared contracts. * * Everything here is namespaced .mnu so it cannot collide with either app's * own rules, and the panel is deliberately styled as a child of rather * than of the bar, because that is where the component parents it. */ .mnuBar { display: flex; align-items: center; gap: 1px; min-width: 0; } /* Flat, quiet, and nothing like a button. A menu title that looks pressable invites the eye to count them, and the whole point of a menu bar is that there are only ever four or five things to count. */ .mnuTop { font: inherit; font-size: 12.5px; line-height: 1; color: var(--dim); background: transparent; border: 0; border-radius: 7px; padding: 6px 10px; cursor: pointer; white-space: nowrap; transition: color .15s var(--ease, ease), background .15s var(--ease, ease); } /* The app's global button rule paints a shine sweep across every button on hover. On a menu title that reads as a glitch, so it is switched off. */ .mnuTop::after { content: none; } .mnuTop:hover:not(:disabled) { color: var(--ink); background: var(--surface2); transform: none; } .mnuTop:active:not(:disabled) { transform: none; } .mnuTop.on { color: var(--ink); background: var(--surface3); } .mnuTop:focus-visible { outline: 1px solid var(--amber); outline-offset: -1px; } /* The dropdown. Fixed, because it is parented to to escape the overflow clipping on every bar it is mounted into. */ .mnuPanel { position: fixed; z-index: 240; min-width: 208px; max-width: 340px; padding: 5px; border: 1px solid var(--line2); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 16px 40px rgba(0, 0, 0, .55); max-height: min(72vh, 640px); overflow-y: auto; } .mnuPanel[hidden] { display: none; } .mnuItem { display: grid; grid-template-columns: 15px 1fr auto; align-items: center; gap: 8px; width: 100%; font: inherit; font-size: 12.5px; text-align: left; color: var(--ink); background: transparent; border: 0; border-radius: 7px; padding: 6px 8px; cursor: pointer; white-space: nowrap; } .mnuItem::after { content: none; } .mnuItem:hover:not(:disabled), .mnuItem:focus-visible { background: var(--surface3); outline: none; transform: none; } .mnuItem:active:not(:disabled) { transform: none; } /* Greyed rather than hidden, always. A command that vanishes when it is not available teaches you it does not exist on this screen, and then you stop looking for it on the screen where it does. */ .mnuItem:disabled { color: var(--faint); opacity: 1; cursor: default; } .mnuItem.danger:not(:disabled) { color: var(--bad); } .mnuItem.danger:hover:not(:disabled) { background: rgba(242, 102, 106, .12); } .mnuTick { color: var(--amber); font-size: 11px; text-align: center; } .mnuLabel { overflow: hidden; text-overflow: ellipsis; } /* The chord, right-aligned and quiet. It is a reminder, not a control: the screens own their own keyboards and this only ever prints what they bind. */ .mnuAccel { color: var(--faint); font-size: 11px; letter-spacing: .3px; } .mnuItem:disabled .mnuAccel { color: var(--line2); } .mnuSep { height: 1px; margin: 5px 7px; background: var(--line); } .mnuNone { padding: 8px 10px; font-size: 11.5px; color: var(--faint); } /* Narrow windows: the bar scrolls rather than wrapping onto a second row, because a menu bar on two rows stops reading as a menu bar. */ @media (max-width: 900px) { .mnuBar { overflow-x: auto; scrollbar-width: none; } .mnuBar::-webkit-scrollbar { display: none; } }