Mercurial

comparison mrjunejune/src/tools/markdown_to_html/index.css @ 256:30c2196d03d4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[site] Integrate Zenbu themes and components Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 16:49:01 -0700
parents 8c74204fd362
children 60a876c4587a
comparison
equal deleted inserted replaced
255:5ec271d612ae 256:30c2196d03d4
15 text-align: center; 15 text-align: center;
16 margin-bottom: 30px; 16 margin-bottom: 30px;
17 } 17 }
18 18
19 .header h1 { 19 .header h1 {
20 color: rgb(var(--gray-dark)); 20 color: var(--gray-dark);
21 margin-bottom: 10px; 21 margin-bottom: 10px;
22 } 22 }
23 23
24 .container { 24 .container {
25 display: grid; 25 display: grid;
47 flex-shrink: 0; 47 flex-shrink: 0;
48 } 48 }
49 49
50 .label { 50 .label {
51 font-weight: 600; 51 font-weight: 600;
52 color: rgb(var(--gray-dark)); 52 color: var(--gray-dark);
53 font-size: 14px; 53 font-size: 14px;
54 text-transform: uppercase; 54 text-transform: uppercase;
55 letter-spacing: 0.5px; 55 letter-spacing: 0.5px;
56 } 56 }
57 57
73 /* Input textarea */ 73 /* Input textarea */
74 textarea { 74 textarea {
75 flex: 1; 75 flex: 1;
76 width: 100%; 76 width: 100%;
77 padding: 15px; 77 padding: 15px;
78 background: rgb(var(--gray-light)); 78 background: var(--gray-light);
79 color: rgb(var(--gray-dark)); 79 color: var(--gray-dark);
80 border: 1px solid rgba(var(--gray), 0.3); 80 border: 1px solid rgba(var(--gray), 0.3);
81 border-radius: 4px; 81 border-radius: 4px;
82 font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; 82 font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
83 font-size: 14px; 83 font-size: 14px;
84 line-height: 1.5; 84 line-height: 1.5;
95 flex: 1; 95 flex: 1;
96 padding: 15px; 96 padding: 15px;
97 border: 1px solid rgba(var(--gray), 0.3); 97 border: 1px solid rgba(var(--gray), 0.3);
98 border-radius: 4px; 98 border-radius: 4px;
99 background: var(--white); 99 background: var(--white);
100 color: rgb(var(--gray-dark)); 100 color: var(--gray-dark);
101 overflow-y: auto; 101 overflow-y: auto;
102 font-size: 15px; 102 font-size: 15px;
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;
108 color: rgb(var(--gray-dark)); 108 color: var(--gray-dark);
109 line-height: 1.3; 109 line-height: 1.3;
110 } 110 }
111 111
112 #output h1:first-child, #output h2:first-child, #output h3:first-child { 112 #output h1:first-child, #output h2:first-child, #output h3:first-child {
113 margin-top: 0; 113 margin-top: 0;
130 #output li { 130 #output li {
131 margin: 0.3em 0; 131 margin: 0.3em 0;
132 } 132 }
133 133
134 #output code { 134 #output code {
135 background: rgb(var(--gray-light)); 135 background: var(--gray-light);
136 padding: 2px 6px; 136 padding: 2px 6px;
137 border-radius: 3px; 137 border-radius: 3px;
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);
158 158
159 #output blockquote { 159 #output blockquote {
160 border-left: 4px solid var(--accent); 160 border-left: 4px solid var(--accent);
161 padding: 10px 15px; 161 padding: 10px 15px;
162 margin: 1em 0; 162 margin: 1em 0;
163 background: rgb(var(--gray-light)); 163 background: var(--gray-light);
164 color: rgb(var(--gray)); 164 color: rgb(var(--gray));
165 font-style: italic; 165 font-style: italic;
166 } 166 }
167 167
168 #output a { 168 #output a {
174 text-decoration: underline; 174 text-decoration: underline;
175 } 175 }
176 176
177 #output hr { 177 #output hr {
178 border: none; 178 border: none;
179 border-top: 1px solid rgb(var(--gray-light)); 179 border-top: 1px solid var(--gray-light);
180 margin: 1.5em 0; 180 margin: 1.5em 0;
181 } 181 }
182 182
183 #output img { 183 #output img {
184 max-width: 100%; 184 max-width: 100%;