Mercurial

comparison mrjunejune/src/public/mjj-composer.css @ 272:41a49c29a28f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
polish JRPG conversation experience Integrate desktop conversations into the utility panel, simplify the mobile frame, add modal destinations and a reusable Zenbu composer lab, and preserve explicit conversation resume behavior. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Fri, 07 Aug 2026 16:05:29 -0700
parents
children
comparison
equal deleted inserted replaced
271:13d61401c57d 272:41a49c29a28f
1 mjj-composer {
2 --zenbu-composer-action-reserve: calc(
3 var(--zenbu-sys-control-height-sm) + var(--zenbu-sys-space-container)
4 );
5 display: block;
6 min-width: 0;
7 min-height: 0;
8 }
9
10 mjj-composer > form {
11 display: grid;
12 grid-template-columns: minmax(0, 1fr);
13 grid-template-rows: minmax(0, 1fr) auto;
14 gap: var(--zenbu-sys-space-control);
15 height: 100%;
16 min-height: 0;
17 }
18
19 mjj-composer [data-composer-control] {
20 position: relative;
21 grid-column: 1;
22 grid-row: 1;
23 min-width: 0;
24 min-height: 0;
25 }
26
27 mjj-composer [data-composer-control] > zen-field {
28 height: 100%;
29 min-height: 0;
30 }
31
32 mjj-composer [data-composer-label] {
33 position: absolute;
34 width: 1px;
35 height: 1px;
36 margin: -1px;
37 padding: 0;
38 overflow: hidden;
39 clip-path: inset(50%);
40 white-space: nowrap;
41 }
42
43 mjj-composer [data-composer-control] > zen-field:not(
44 [appearance="plain"]
45 ) > textarea {
46 box-sizing: border-box;
47 height: 100%;
48 min-height: var(--zenbu-control-height);
49 padding-inline-end: var(--zenbu-composer-action-reserve);
50 resize: none;
51 }
52
53 mjj-composer [data-composer-actions] {
54 position: absolute;
55 z-index: 1;
56 inset-inline-end: var(--zenbu-sys-padding-sm);
57 inset-block-end: var(--zenbu-sys-padding-sm);
58 display: flex;
59 flex-direction: column;
60 gap: var(--zenbu-sys-space-control);
61 }
62
63 mjj-composer [data-composer-actions] zen-button,
64 mjj-composer [data-composer-actions] button {
65 width: 100%;
66 }
67
68 mjj-composer [data-composer-meta] {
69 grid-column: 1 / -1;
70 grid-row: 2;
71 margin: 0;
72 color: var(--zenbu-sys-color-text-secondary);
73 font-size: var(--zenbu-sys-font-size-xs);
74 }
75
76 mjj-composer [data-composer-meta][hidden],
77 mjj-composer [data-composer-cancel-owner][hidden] {
78 display: none;
79 }
80
81 mjj-composer[compact] {
82 --zenbu-composer-action-size: var(--zenbu-sys-control-height-sm);
83 --zenbu-composer-action-reserve: calc(
84 var(--zenbu-composer-action-size) + var(--zenbu-sys-padding-md)
85 );
86 }
87
88 mjj-composer[compact] > form {
89 gap: var(--zenbu-sys-space-icon-label);
90 }
91
92 mjj-composer[compact] [data-composer-actions] {
93 gap: var(--zenbu-sys-space-icon-label);
94 }
95
96 mjj-composer[compact] [data-composer-actions] zen-button,
97 mjj-composer[compact] [data-composer-actions] button {
98 width: var(--zenbu-composer-action-size);
99 }
100
101 mjj-composer[compact] [data-composer-actions] button {
102 height: var(--zenbu-composer-action-size);
103 min-height: var(--zenbu-composer-action-size);
104 padding: 0;
105 }
106
107 mjj-composer[compact] [data-composer-action-label] {
108 display: none;
109 }