comparison mrjunejune/src/tools/latex_editor/index.css @ 258:60a876c4587a

[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 4f2b50bc78e7
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
23 justify-content: flex-end; 23 justify-content: flex-end;
24 flex-wrap: wrap; 24 flex-wrap: wrap;
25 gap: 0.65rem; 25 gap: 0.65rem;
26 } 26 }
27 27
28 .latex-actions zen-button {
29 display: inline-flex;
30 }
31
28 .latex-actions button, 32 .latex-actions button,
29 .button-link { 33 .button-link {
30 min-height: 42px;
31 padding: 0.65rem 1rem;
32 border: 2px solid var(--black); 34 border: 2px solid var(--black);
33 border-radius: 8px; 35 border-radius: var(--zenbu-sys-radius-control);
34 background: var(--awesome); 36 background: var(--awesome);
35 color: var(--black); 37 color: var(--black);
36 font: inherit; 38 font: inherit;
37 font-weight: 700; 39 font-weight: 700;
38 text-decoration: none; 40 text-decoration: none;
84 86
85 .latex-panel { 87 .latex-panel {
86 min-width: 0; 88 min-width: 0;
87 overflow: hidden; 89 overflow: hidden;
88 border: 2px solid var(--black); 90 border: 2px solid var(--black);
89 border-radius: 12px; 91 border-radius: var(--zenbu-sys-radius-panel);
90 background: var(--white); 92 background: var(--white);
91 box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12); 93 box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12);
92 } 94 }
93 95
94 .editor-panel:focus-within { 96 .editor-panel:focus-within {
98 100
99 .panel-heading { 101 .panel-heading {
100 display: flex; 102 display: flex;
101 align-items: center; 103 align-items: center;
102 justify-content: space-between; 104 justify-content: space-between;
103 gap: 1rem; 105 gap: var(--zenbu-sys-control-gap-md);
104 min-height: 48px; 106 min-height: var(--zenbu-sys-control-height-lg);
105 padding: 0.55rem 0.8rem; 107 padding:
108 var(--zenbu-sys-control-padding-block-sm)
109 var(--zenbu-sys-control-padding-inline-md);
106 border-bottom: 2px solid var(--black); 110 border-bottom: 2px solid var(--black);
107 background: var(--gray-gradient); 111 background: var(--gray-gradient);
108 } 112 }
109 113
110 .panel-heading h2, 114 .panel-heading h2,
111 .panel-heading span { 115 .panel-heading span {
112 margin: 0; 116 margin: 0;
113 font-size: 0.95rem; 117 font-size: var(--zenbu-sys-font-size-sm);
114 } 118 }
115 119
116 #latexSource { 120 #latexSource {
117 display: block; 121 display: block;
118 width: 100%; 122 width: 100%;
119 height: calc(72vh - 50px); 123 height: calc(72vh - 50px);
120 min-height: 540px; 124 min-height: 540px;
121 resize: vertical; 125 resize: vertical;
122 box-sizing: border-box; 126 box-sizing: border-box;
123 padding: 1rem; 127 padding: var(--zenbu-sys-padding-md);
124 border: 0; 128 border: 0;
125 outline: 0; 129 outline: 0;
126 background: #111318; 130 background: #111318;
127 color: #f4f4f5; 131 color: #f4f4f5;
128 caret-color: #f4f4f5; 132 caret-color: #f4f4f5;
129 font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; 133 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
134 font-size: var(--zenbu-sys-font-size-sm);
135 line-height: var(--zenbu-sys-line-height-md);
130 tab-size: 2; 136 tab-size: 2;
131 } 137 }
132 138
133 #pdfPreview { 139 #pdfPreview {
134 display: block; 140 display: block;
196 .latex-actions button, 202 .latex-actions button,
197 .button-link { 203 .button-link {
198 flex: 1 1 45%; 204 flex: 1 1 45%;
199 text-align: center; 205 text-align: center;
200 } 206 }
201 } 207
208 .latex-actions zen-button {
209 flex: 1 1 45%;
210 }
211
212 .latex-actions zen-button > :where(button, a) {
213 width: 100%;
214 }
215 }