Mercurial

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[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 30c2196d03d4
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
4 box-sizing: border-box; 4 box-sizing: border-box;
5 } 5 }
6 6
7 body { 7 body {
8 line-height: 1.6; 8 line-height: 1.6;
9 padding: 20px; 9 padding: var(--zenbu-sys-padding-lg);
10 max-width: 1400px; 10 max-width: 1400px;
11 margin: 0 auto; 11 margin: 0 auto;
12 } 12 }
13 13
14 .header { 14 .header {
22 } 22 }
23 23
24 .container { 24 .container {
25 display: grid; 25 display: grid;
26 grid-template-columns: 1fr 1fr; 26 grid-template-columns: 1fr 1fr;
27 gap: 20px; 27 gap: var(--zenbu-sys-space-container);
28 height: calc(100vh - 200px); 28 height: calc(100vh - 200px);
29 min-height: 500px; 29 min-height: 500px;
30 } 30 }
31 31
32 .panel { 32 .panel {
33 display: flex; 33 display: flex;
34 flex-direction: column; 34 flex-direction: column;
35 background: var(--white); 35 background: var(--white);
36 border-radius: 8px; 36 border-radius: var(--zenbu-sys-radius-control);
37 border: 1px solid rgba(var(--gray), 0.3); 37 border: 1px solid rgba(var(--gray), 0.3);
38 padding: 15px; 38 padding: var(--zenbu-sys-padding-md);
39 overflow: hidden; 39 overflow: hidden;
40 } 40 }
41 41
42 .title { 42 .title {
43 display: flex; 43 display: flex;
48 } 48 }
49 49
50 .label { 50 .label {
51 font-weight: 600; 51 font-weight: 600;
52 color: var(--gray-dark); 52 color: var(--gray-dark);
53 font-size: 14px; 53 font-size: var(--zenbu-sys-font-size-sm);
54 text-transform: uppercase; 54 text-transform: uppercase;
55 letter-spacing: 0.5px; 55 letter-spacing: 0.5px;
56 } 56 }
57 57
58 button { 58 button {
59 background: var(--accent); 59 background: var(--accent);
60 color: var(--white); 60 color: var(--white);
61 border: none; 61 border: none;
62 padding: 8px 16px; 62 border-radius: var(--zenbu-sys-radius-control-small);
63 border-radius: 4px;
64 cursor: pointer; 63 cursor: pointer;
65 font-size: 14px;
66 transition: background 0.2s; 64 transition: background 0.2s;
67 } 65 }
68 66
69 button:hover { 67 button:hover {
70 background: var(--accent-dark); 68 background: var(--accent-dark);
72 70
73 /* Input textarea */ 71 /* Input textarea */
74 textarea { 72 textarea {
75 flex: 1; 73 flex: 1;
76 width: 100%; 74 width: 100%;
77 padding: 15px; 75 padding: var(--zenbu-sys-padding-md);
78 background: var(--gray-light); 76 background: var(--gray-light);
79 color: var(--gray-dark); 77 color: var(--gray-dark);
80 border: 1px solid rgba(var(--gray), 0.3); 78 border: 1px solid rgba(var(--gray), 0.3);
81 border-radius: 4px; 79 border-radius: var(--zenbu-sys-radius-control-small);
82 font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; 80 font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
83 font-size: 14px; 81 font-size: var(--zenbu-sys-font-size-sm);
82 line-height: var(--zenbu-sys-line-height-sm);
84 line-height: 1.5; 83 line-height: 1.5;
85 resize: none; 84 resize: none;
86 } 85 }
87 86
88 textarea:focus { 87 textarea:focus {
91 } 90 }
92 91
93 /* Output panel */ 92 /* Output panel */
94 #output { 93 #output {
95 flex: 1; 94 flex: 1;
96 padding: 15px; 95 padding: var(--zenbu-sys-padding-md);
97 border: 1px solid rgba(var(--gray), 0.3); 96 border: 1px solid rgba(var(--gray), 0.3);
98 border-radius: 4px; 97 border-radius: var(--zenbu-sys-radius-control-small);
99 background: var(--white); 98 background: var(--white);
100 color: var(--gray-dark); 99 color: var(--gray-dark);
101 overflow-y: auto; 100 overflow-y: auto;
102 font-size: 15px; 101 font-size: var(--zenbu-sys-font-size-sm);
102 line-height: var(--zenbu-sys-line-height-sm);
103 } 103 }
104 104
105 /* Markdown output styles */ 105 /* Markdown output styles */
106 #output h1, #output h2, #output h3, #output h4, #output h5, #output h6 { 106 #output h1, #output h2, #output h3, #output h4, #output h5, #output h6 {
107 margin: 1em 0 0.5em 0; 107 margin: 1em 0 0.5em 0;
132 } 132 }
133 133
134 #output code { 134 #output code {
135 background: var(--gray-light); 135 background: var(--gray-light);
136 padding: 2px 6px; 136 padding: 2px 6px;
137 border-radius: 3px; 137 border-radius: var(--zenbu-sys-radius-control-small);
138 font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; 138 font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
139 font-size: 0.9em; 139 font-size: 0.9em;
140 color: var(--accent); 140 color: var(--accent);
141 } 141 }
142 142
143 #output pre { 143 #output pre {
144 background: var(--black); 144 background: var(--black);
145 color: var(--white); 145 color: var(--white);
146 padding: 15px; 146 padding: 15px;
147 border-radius: 6px; 147 border-radius: var(--zenbu-sys-radius-control-small);
148 overflow-x: auto; 148 overflow-x: auto;
149 margin: 1em 0; 149 margin: 1em 0;
150 line-height: 1.4; 150 line-height: 1.4;
151 } 151 }
152 152
181 } 181 }
182 182
183 #output img { 183 #output img {
184 max-width: 100%; 184 max-width: 100%;
185 height: auto; 185 height: auto;
186 border-radius: 4px; 186 border-radius: var(--zenbu-sys-radius-control-small);
187 } 187 }
188 188
189 #output strong { 189 #output strong {
190 font-weight: 600; 190 font-weight: 600;
191 } 191 }