Mercurial
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 } |