chamba 0.6.1 → 0.8.0

package/templates/webterm/public/styles.css

@@ -527,6 +527,13 @@ body {
     display: flex;
     flex: 1;
     min-height: 0;
+    /* Stated once because two rules need it: the grip is this wide, and a full-width pane is the row less
+       the grip - which is what keeps the grip on the screen with the terminal squeezed out behind it. */
+    --grip-width: 12px;
+    /* The terminal's own inset, on both sides. A margin does not shrink with the box it is on, so a
+       full-width pane has to leave it as well or the row is wider than the window and the pane's own
+       controls, which sit at its far end, go off the screen. */
+    --term-gutter: 24px;
 }
 
 #termwrap {
@@ -537,7 +544,7 @@ body {
     /* Spacing via margin, not padding: FitAddon measures the wrapper height but does not subtract
        its padding, so wrapper padding makes it propose one row too many and the last line clips.
        Margin gives the same visual inset (page and terminal share a background) without breaking fit. */
-    margin: 8px 12px;
+    margin: 8px calc(var(--term-gutter) / 2);
 }
 
 #term {
@@ -595,7 +602,7 @@ body {
 #grip {
     position: relative;
     flex: none;
-    width: 12px;
+    width: var(--grip-width);
     background: var(--panel);
     border-left: 1px solid var(--border);
     border-right: 1px solid var(--border);
@@ -626,17 +633,28 @@ body.dragging {
     user-select: none;
 }
 
-/* The width is app/pane.js's, in a custom property so the two rules that must win - the collapsed spine and
-   the narrow-screen layout - still do. The value here is what shows before the first drag. */
+/* The width is app/pane-shell.js's, in a custom property so the three rules that must win - the collapsed
+   spine, the full row and the narrow-screen layout - still do. The value here shows for the moment before the
+   first draw sets the property, so it is the same half the pane's own default is. */
 #pane {
     display: flex;
     flex: none;
     flex-direction: column;
-    width: var(--pane-width, 44%);
+    width: var(--pane-width, 50%);
     min-width: 0;
     background: var(--bg);
 }
 
+/* The far end of the range: the pane takes the row and the terminal is squeezed out of it rather than hidden,
+   so the terminal keeps its place in the layout and comes back at whatever the next width is. The grip is
+   what the row leaves over, which is what keeps the way back on the screen, and the terminal's gutter is left
+   as well - it is a margin, so it stays whatever the box it is on shrinks to, and taking the row without it
+   would push the pane's own controls past the right edge of the window. Both are the same background, so what
+   the terminal leaves behind reads as part of the pane. */
+#pane.full {
+    width: calc(100% - var(--grip-width) - var(--term-gutter));
+}
+
 /* A page arrived and opened itself: one pulse of the workspace colour along the pane's own edge, and nothing
    moves. Inset, so it is drawn over the pane rather than pushing the layout about, and over the frame's edge
    rather than under it. ARRIVAL_MS in app/pane.js must match the duration - it is what takes the class off
@@ -664,20 +682,8 @@ body.dragging {
     }
 }
 
-/* The pagination bar: this session's pages as chips, the arrows for a bar too narrow to hold them, and where
-   in the history the open page sits. Drawn by the interface, outside the page's frame, so it always says the
-   truth about which page is open. */
-#pagebar {
-    display: flex;
-    flex: none;
-    align-items: center;
-    gap: 6px;
-    padding: 7px 10px;
-    background: var(--panel);
-    border-bottom: 1px solid var(--border);
-    overflow: hidden;
-}
-
+/* The small square buttons of the pane's two bars: the width controls up in the pane's own chrome, and the
+   chip arrows down in the Pages bar. */
 .pane-nav {
     flex: none;
     padding: 1px 6px;
@@ -695,6 +701,127 @@ body.dragging {
     color: var(--text);
 }
 
+/* The pane's own bar: which tool is open, and how wide the pane is. Nothing in it belongs to a tool, which is
+   what stops a tool from moving the pane or from saying which tool the user is looking at. */
+#panebar {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 2px;
+    padding: 0 8px;
+    background: var(--bg);
+    border-bottom: 1px solid var(--border);
+}
+
+#tool-tabs {
+    display: flex;
+    gap: 2px;
+    min-width: 0;
+    overflow: hidden;
+}
+
+/* A tab is a label with a line under it: the pane's bar is chrome rather than a surface of its own, and the
+   workspace's colour under the open one is what says which tool is on the screen. */
+.tool-tab {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 6px;
+    height: 34px;
+    padding: 0 12px;
+    border: none;
+    /* On every tab, transparent until one is open, so the open one takes no extra height and the row of them
+       does not move as the tool changes. */
+    border-bottom: 2px solid transparent;
+    background: none;
+    color: var(--muted);
+    font: inherit;
+    font-size: 13px;
+    cursor: pointer;
+}
+
+.tool-tab:hover {
+    color: var(--text);
+}
+
+.tool-tab.on {
+    border-bottom-color: var(--ws);
+    color: var(--text);
+}
+
+/* What is waiting in a tool nobody is looking at. The same green as everything else that means "something
+   happened here". */
+.tool-mark {
+    padding: 0 5px;
+    border-radius: 8px;
+    background: var(--accent);
+    color: #04140b;
+    font-size: 9.5px;
+    font-weight: 700;
+}
+
+/* A tool that counts nothing says only that something arrived, so its mark carries no number and is drawn
+   as the dot it means. */
+.tool-mark.dot {
+    width: 6px;
+    height: 6px;
+    padding: 0;
+    border-radius: 50%;
+    align-self: center;
+}
+
+#pane-ctl {
+    display: flex;
+    flex: none;
+    margin-left: auto;
+    gap: 2px;
+}
+
+/* The three widths, drawn as one row: the whole window, half of it, and away. */
+#pane-ctl .pane-nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border-radius: 6px;
+}
+
+/* The pane is already in the state the button names, so the button says so - and for the far end it is also
+   the way back from it. */
+#pane-ctl .pane-nav.on {
+    background: #10151c;
+    color: var(--accent);
+}
+
+/* One tool's panel. Only the open one is on the screen, and each fills whatever the pane's bar leaves. */
+.tool-panel {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+}
+
+.tool-panel[hidden] {
+    display: none;
+}
+
+/* The pagination bar: this session's pages as chips, the arrows for a bar too narrow to hold them, and where
+   in the history the open page sits. Drawn by the interface, outside the page's frame, so it always says the
+   truth about which page is open. */
+#pagebar {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 10px;
+    background: var(--panel);
+    border-bottom: 1px solid var(--border);
+    overflow: hidden;
+}
+
 #chips {
     display: flex;
     gap: 6px;
@@ -810,15 +937,6 @@ body.dragging {
     letter-spacing: 0.02em;
 }
 
-/* Out of the way, at the end of the bar: the pane is put away far more often than the chips are paged. */
-#pane-collapse {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 4px;
-    padding: 2px 5px;
-}
-
 #page-doc {
     flex: 1;
     min-width: 0;
@@ -841,10 +959,21 @@ body.dragging {
     zoom: var(--page-zoom, 1);
 }
 
+/* A tool's own client, in a frame of its own. It fills the panel and this side styles nothing inside it: the
+   tool ships its own document, its own stylesheet and its own theme, and the shell cannot reach in anyway. */
+.tool-frame {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: var(--bg);
+}
+
 /* A page is a document with an event loop of its own, and a pointer that crosses into it during a drag is a
    pointer the grip has to keep. Capture does that in every engine that has it; taking the frame out of the
    hit test for the length of the drag is what makes it true everywhere. */
-body.dragging .page-frame {
+body.dragging .page-frame,
+body.dragging .tool-frame {
     pointer-events: none;
 }
 
@@ -893,8 +1022,8 @@ body.dragging .page-frame {
     width: 30px;
 }
 
-#pane.collapsed #pagebar,
-#pane.collapsed #page-doc {
+#pane.collapsed #panebar,
+#pane.collapsed .tool-panel {
     display: none;
 }
 
@@ -939,6 +1068,14 @@ body.dragging .page-frame {
     writing-mode: horizontal-tb;
 }
 
+#spine-badge.dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    padding: 0;
+    border-radius: 50%;
+}
+
 #spine-badge[hidden] {
     display: none;
 }
@@ -957,13 +1094,17 @@ body.dragging .page-frame {
 
 /* ---- Overlay cards (take over / end session / limit reached) ---- */
 
+/* Fixed to the viewport and above every pop, so the card is in the middle of the screen whatever the width of
+   the terminal column beside the pane. */
 #overlay {
     display: none;
-    position: absolute;
+    position: fixed;
     inset: 0;
+    z-index: 70;
     background: rgba(13, 17, 23, 0.82);
     align-items: center;
     justify-content: center;
+    padding: 16px;
 }
 
 #overlay.show {
@@ -971,7 +1112,9 @@ body.dragging .page-frame {
 }
 
 .card {
+    width: 100%;
     max-width: 460px;
+    box-sizing: border-box;
     padding: 18px 20px;
     background: var(--panel);
     border: 1px solid var(--border);
@@ -1087,9 +1230,102 @@ body.dragging .page-frame {
     }
 }
 
+/* ---- The workspace colour ---- */
+
+/* The one control in the bar about what this window *is* rather than what it does, so it sits beside the name
+   it belongs with. It carries no colour of its own, and is drawn exactly as the bell and the power button
+   are: the bar already says which colour is in force, on the edge of the active tab, and a filled swatch in
+   a row of glyphs reads as something that wandered in rather than as one of the row. */
+#wscolorbtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    background: transparent;
+    color: var(--muted);
+    border: 1px solid transparent;
+    border-radius: 7px;
+    cursor: pointer;
+}
+
+#wscolorbtn:hover:not(:disabled),
+#wscolorbtn.open {
+    color: var(--text);
+    border-color: var(--border);
+}
+
+/* Nothing to open while this window is not talking to the server: a pick it could not send would be undone by
+   the next frame, which is worse than not offering it. */
+#wscolorbtn:disabled {
+    opacity: 0.45;
+    cursor: default;
+}
+
+/* Anchored under the button and hung off the body, like the new-session panel: the bar is emptied on every
+   frame, and picking a colour is itself a frame, so a panel inside the bar would close as it was used. */
+#wscolorpop {
+    position: fixed;
+    z-index: 60;
+    display: flex;
+    flex-direction: column;
+    width: 268px;
+    padding: 12px;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
+}
+
+.wsgrid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 8px;
+}
+
+.wscell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    padding: 0;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 7px;
+    cursor: pointer;
+}
+
+/* Two rings rather than a thicker border, so the mark reads on every one of the eleven and the cell does not
+   move when it lands. The mark says what is *stored*, so it sits on the automatic cell when nothing is. */
+.wscell.chosen {
+    box-shadow:
+        0 0 0 2px var(--panel),
+        0 0 0 3.5px var(--text);
+}
+
+/* Automatic takes the last cell: it is one of the choices rather than a button underneath them. */
+.wscell.auto {
+    background: repeating-linear-gradient(135deg, var(--border) 0 4px, #21262d 4px 8px);
+    color: var(--muted);
+    font-size: 15px;
+    line-height: 1;
+}
+
+.wscolorfoot {
+    margin: 11px 0 0;
+    padding-top: 10px;
+    color: var(--muted);
+    border-top: 1px solid var(--border);
+    font-size: 11.5px;
+    line-height: 1.45;
+}
+
 /* The moment the socket drops, before any curtain: a control whose answer goes nowhere must stop taking
-   clicks. The composer disables itself, so this is about the bar - its tabs, its X, its + New session. */
-body.offline #tabbar {
+   clicks. The composer disables itself, so this is about the bar - its tabs, its X, its + New session.
+   The two anchored panels are named as well: they hang off the body rather than the bar, so the bar's own
+   selector does not cover them. connection.js closes them outright when the socket goes, and this is the second
+   line - a rule that holds whatever order things happen in. */
+body.offline #tabbar,
+body.offline #newpop,
+body.offline #wscolorpop {
     pointer-events: none;
 }