Mercurial

annotate mrjunejune/src/public/mjj-composer.css @ 273:e02e2036ef84 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add Layer 2 JRPG component system Add reusable content and window modals, an isolated component sandbox, shared cyberpunk scroll areas, production-safe cache freshness, and server-rendered JRPG panel state. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Sat, 08 Aug 2026 02:08:08 -0700
parents 41a49c29a28f
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
272
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 mjj-composer {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2 --zenbu-composer-action-reserve: calc(
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3 var(--zenbu-sys-control-height-sm) + var(--zenbu-sys-space-container)
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 );
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5 display: block;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 min-width: 0;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7 min-height: 0;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 mjj-composer > form {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11 display: grid;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 grid-template-columns: minmax(0, 1fr);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 grid-template-rows: minmax(0, 1fr) auto;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 gap: var(--zenbu-sys-space-control);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15 height: 100%;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 min-height: 0;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 mjj-composer [data-composer-control] {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 position: relative;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 grid-column: 1;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 grid-row: 1;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 min-width: 0;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 min-height: 0;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 mjj-composer [data-composer-control] > zen-field {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28 height: 100%;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 min-height: 0;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 mjj-composer [data-composer-label] {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 position: absolute;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 width: 1px;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 height: 1px;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36 margin: -1px;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 padding: 0;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 overflow: hidden;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 clip-path: inset(50%);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 white-space: nowrap;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 mjj-composer [data-composer-control] > zen-field:not(
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 [appearance="plain"]
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45 ) > textarea {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 box-sizing: border-box;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 height: 100%;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 min-height: var(--zenbu-control-height);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49 padding-inline-end: var(--zenbu-composer-action-reserve);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50 resize: none;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 mjj-composer [data-composer-actions] {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 position: absolute;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 z-index: 1;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56 inset-inline-end: var(--zenbu-sys-padding-sm);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 inset-block-end: var(--zenbu-sys-padding-sm);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 display: flex;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 flex-direction: column;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 gap: var(--zenbu-sys-space-control);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
61 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 mjj-composer [data-composer-actions] zen-button,
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 mjj-composer [data-composer-actions] button {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 width: 100%;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 mjj-composer [data-composer-meta] {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 grid-column: 1 / -1;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 grid-row: 2;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71 margin: 0;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72 color: var(--zenbu-sys-color-text-secondary);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 font-size: var(--zenbu-sys-font-size-xs);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 mjj-composer [data-composer-meta][hidden],
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 mjj-composer [data-composer-cancel-owner][hidden] {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 display: none;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81 mjj-composer[compact] {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 --zenbu-composer-action-size: var(--zenbu-sys-control-height-sm);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83 --zenbu-composer-action-reserve: calc(
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84 var(--zenbu-composer-action-size) + var(--zenbu-sys-padding-md)
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85 );
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 mjj-composer[compact] > form {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89 gap: var(--zenbu-sys-space-icon-label);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 mjj-composer[compact] [data-composer-actions] {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 gap: var(--zenbu-sys-space-icon-label);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
95
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
96 mjj-composer[compact] [data-composer-actions] zen-button,
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
97 mjj-composer[compact] [data-composer-actions] button {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
98 width: var(--zenbu-composer-action-size);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
99 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
100
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
101 mjj-composer[compact] [data-composer-actions] button {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
102 height: var(--zenbu-composer-action-size);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
103 min-height: var(--zenbu-composer-action-size);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
104 padding: 0;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
105 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
106
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
107 mjj-composer[compact] [data-composer-action-label] {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
108 display: none;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
109 }