ack/kokkoja-rel
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Help: one click opens the manual, two quick clicks the note; the manual styled

Browse Source 
One click on Help shows the explanations of every command in one
window, the names in a sans-serif and the explanations in a serif, with
a 2em margin; Copy copies them as plain text.  Two quick clicks show
the note about the documentation site.  The closed window is not
displayed (a layout rule had shown it empty on the start screen).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
ackandClaude Fable 5.1 committed 2026-10-15 17:17:45 +02:00
1 parent 24a6a2595b
commit 5d63a0f758
5 files changed
+156 -38
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/kokkoja.css
+31 -9
View File
@@ -257,21 +257,43 @@ h2 {
.help_popup { padding: 0.8rem 1rem; }
/* The generated manual (Ctrl-click on Help): the tooltips as Klammertext.
Its Copy button has a button's ordinary shape, not the close mark's
2rem; the text takes the focus when the window opens, so that the
keyboard scrolls it and no button's tooltip opens by itself. */
/* The manual (one click on Help): every control's tooltip, the names in
the interface's sans-serif and the explanations in a serif, a 2em
margin on all sides of the window (Andy, 2026-10-15); as tall as its
contents up to most of the window, the list then scrolling. Its Copy
button has a button's ordinary shape, not the close mark's 2rem; the
list takes the focus when the window opens, so that the keyboard
scrolls it and no button's tooltip opens by itself. (`.chooser`'s own
box comes later in this file, hence the two classes.) The flex layout
is set ONLY WHILE OPEN: on the dialog itself it would override the
browser's `display: none` for a closed dialog, and the empty window
stood at the end of the page (Andy saw it on the start screen,
2026-10-15; in a session it lay below the desk, out of view). */
.chooser.manual[open] { display: flex; }
.chooser.manual {
flex-direction: column;
width: min(46rem, 90vw);
height: fit-content;
max-height: 85vh;
padding: 2em;
}
.manual header h2 { flex: 1; min-width: 0; }
.chooser header button.action { width: auto; padding: 0.35rem 0.8rem; margin-right: 0.5rem; font-size: inherit; line-height: normal; }
.manual_text:focus { outline: 2px solid var(--line); outline-offset: 2px; }
/* The focus ring only when the keyboard put the focus there (Enter on
Help); after a click it would frame the list for no reason. */
.manual_text:focus-visible { outline: 2px solid var(--line); outline-offset: 2px; }
.manual_text {
margin: 0;
max-height: 70vh;
flex: 1;
min-height: 0;
margin-top: 1em;
overflow: auto;
white-space: pre-wrap;
font-size: 0.85rem;
line-height: 1.4;
}
.manual_text h3 { margin: 0 0 1em; font-size: 1.1rem; }
.manual_text dl { margin: 0; }
.manual_text dt { font-family: system-ui, sans-serif; font-weight: 600; }
.manual_text dd { margin: 0.15em 0 1em; font-family: serif; font-size: 1.05rem; }
.manual_text dd:last-child { margin-bottom: 0; }
.palette .swatch { width: 1.5rem; height: 1.5rem; }
/* A colour already in the toolbar leaves its place in the grid empty. */