Fossil SCM

Major refactoring of the CSS selectors to avoid the need for all that "nomargins" stuff. By being more careful about affecting only the pages and elements we want to affect, we don't have to back changes out in the cases where we _don't_ want things changed. This does make the selectors more verbose, but it's better overall.

wyoung 2024-01-26 17:03 inskinerator-modern-backport
Commit 276727611a9fa788a668ce16cb1d1a443485ea72751ed45301e7fdb19fd7125a
1 file changed +76 -118
--- skins/default/css.txt
+++ skins/default/css.txt
@@ -1,6 +1,7 @@
1
-/* Overall page style */
1
+/* Overall page style; vi: filetype=css
2
+ */
23
34
body {
45
margin: 0 auto;
56
background-color: white;
67
font-family: sans-serif;
@@ -106,18 +107,15 @@
106107
107108
.content {
108109
padding: 0ex 1ex 1ex 1ex;
109110
color: #444;
110111
}
111
-.content blockquote {
112
- padding: 0.1em 1em;
113
-}
114
-.content h1 { font-size: 2.00em; margin-left: 10pt; }
115
-.content h2 { font-size: 1.50em; margin-left: 20pt; }
116
-.content h3 { font-size: 1.15em; margin-left: 30pt; }
117
-.content h4 { font-size: 1.05em; margin-left: 40pt; }
118
-.content h5 { font-size: 1.00em; margin-left: 50pt; }
112
+.content h1 { font-size: 2.00em; }
113
+.content h2 { font-size: 1.50em; }
114
+.content h3 { font-size: 1.15em; }
115
+.content h4 { font-size: 1.05em; }
116
+.content h5 { font-size: 1.00em; }
119117
120118
.section {
121119
font-size: 1em;
122120
font-weight: bold;
123121
background-color: #f5f5f5;
@@ -173,174 +171,134 @@
173171
body.cpage-forumnew form input {
174172
margin: 0.5em 0;
175173
}
176174
177175
178
-/* Markdown and Wiki-formatted pages: /wiki, /doc, /file... */
176
+/* Markdown and Wiki-formatted pages: /wiki, /doc, /file...
177
+ *
178
+ * The frequent use of the immediate-child selector (>) is done on
179
+ * purpose to prevent these rules from affecting MD in forum posts,
180
+ * ticket comments, etc. Without this, we'd need a bunch of inverse
181
+ * rules to back out the margins everywhere we don't want them.
182
+ *
183
+ * BEWARE: Fossil's MD and wiki to HTML processors wrap the content bodies
184
+ * differently, and /doc on *.html files works yet a third way. These
185
+ * rules are carefully written to capture these docs and no other use of
186
+ * MD/wiki/HTML. Adjust with care!
187
+ */
179188
180
-.doc blockquote, .markdown blockquote {
189
+.doc > .content blockquote {
190
+ /* Apply extra indent relative to "p" for backwards compatibility,
191
+ * especially the Fossil wiki generator, which misuses this tag
192
+ * against HTML and MD norms to mean "indented paragraph."
193
+ */
194
+ margin-left: 60pt;
195
+}
196
+.markdown blockquote {
197
+ /* Style it as a proper blockquote for MD only. Unlike the indent
198
+ * rule, this applies everywhere, including the forum, tickets… */
181199
background-color: rgba(65, 131, 196, 0.1);
182200
border-left: 3px solid #4183c4;
183
- margin-left: 60pt;
184201
padding: 0.1em 1em;
185202
}
186203
187
-.doc dl, .markdown dl {
188
- margin-left: 60pt;
189
-}
190
-
191
-.doc dt, .markdown dt {
204
+.doc > .content dt {
192205
margin-left: 10pt;
193206
}
194
-
195
-.doc dd, .markdown dd {
207
+.doc > .content dd {
196208
margin-left: 30pt;
197209
margin-bottom: 1em;
198210
}
211
+.doc > .content dl {
212
+ margin-left: 60pt;
213
+}
199214
200
-.doc hr, .markdown hr {
215
+.doc > .content hr {
201216
margin-left: 10pt;
202217
}
203218
204
-.doc dd, .doc dt,
205
-.doc li,
206
-.doc p,
207
-.doc table,
208
-.markdown dd, .markdown dt,
209
-.markdown li,
210
-.markdown p,
211
-.markdown table {
219
+.content dd, .content dt,
220
+.content li,
221
+.content p,
222
+.content table
223
+{
212224
line-height: 1.4em;
213225
}
214226
215
-.doc p,
216
-.doc pre,
217
-.doc ol, .doc ul,
218
-.doc table,
219
-.markdown p,
220
-.markdown pre,
221
-.markdown ol, .markdown ul,
222
-.markdown table {
227
+.doc > .content h1 { margin-left: 10pt; }
228
+.doc > .content h2 { margin-left: 20pt; }
229
+.doc > .content h3 { margin-left: 30pt; }
230
+.doc > .content h4 { margin-left: 40pt; }
231
+.doc > .content h5 { margin-left: 50pt; }
232
+
233
+.doc > .content > p,
234
+.doc > .content > .markdown > p,
235
+.doc > .content > .fossil-doc > p,
236
+.doc > .content > ol, .doc > .content > ul,
237
+.doc > .content > .markdown > ol, .doc > .content > .markdown > ul,
238
+.doc > .content > .fossil-doc > ol, .doc > .content > .fossil-doc > ul,
239
+.doc > .content table {
223240
margin-left: 50pt;
224241
margin-right: 50pt;
225242
}
226243
227
-.doc p ol, .doc p ul,
228
-.doc pre ol, .doc pre ul,
229
-.doc ol ol, .doc ol ul,
230
-.doc ul ol, .doc ul ul,
231
-.doc table ol, .doc table ul,
232
-.markdown p ol, .markdown p ul,
233
-.markdown pre ol, .markdown pre ul,
234
-.markdown ol ol, .markdown ol ul,
235
-.markdown ul ol, .markdown ul ul,
236
-.markdown table ol, .markdown table ul {
237
- margin-left: 10pt;
238
-}
239
-
240
-.doc pre, .markdown pre {
244
+.content pre {
241245
hyphens: none;
242246
font-size: 110%;
243247
line-height: 1.25;
248
+}
249
+.doc > .content > pre,
250
+.doc > .content > .markdown > pre {
251
+ margin-left: 70pt;
252
+ margin-right: 50pt;
253
+}
254
+
255
+.content .pikchr-wrapper {
256
+ margin-left: 70pt;
257
+}
258
+div.pikchr-wrapper.center:not(.source) {
259
+ margin-left: 0;
260
+}
261
+div.pikchr-wrapper.indent:not(.source) {
262
+ /* Odd selector must match one in default.css to override it. */
244263
margin-left: 70pt;
264
+ margin-right: 50pt;
245265
}
246266
247
-.doc .pikchr-wrapper, .markdown .pikchr-wrapper {
248
- font-size: 15px;
249
- margin-left: 50pt;
250
-}
251
-
252
-.doc ul li, .markdown ul li {
267
+.content ul li {
253268
list-style-type: disc;
254269
}
255270
256
-.doc li p, .doc li pre, .markdown li p, .markdown li pre {
257
- margin-left: 0;
258
-}
259
-
260
-.doc table, .markdown table {
271
+.content table {
261272
background-color: #f0f5f9;
262273
border: 1px solid #a7c2dc;
263274
border-radius: 0.5em;
264275
border-spacing: 0;
265276
padding: 6px;
266277
}
267278
268
-.doc th, .markdown th {
279
+.content th {
269280
border-bottom: 1px solid #dee8f2;
270281
padding-bottom: 4px;
271282
padding-right: 6px;
272283
text-align: left;
273284
}
274285
275
-.doc tr > th, .markdown tr > th {
286
+.content tr > th {
276287
background-color: #dee8f0;
277288
}
278289
279
-.doc tr:nth-child(odd), .markdown tr:nth-child(odd) {
290
+.content tr:nth-child(odd) {
280291
background-color: #e0e8ee;
281292
}
282293
283
-.doc td, .markdown td {
294
+.content td {
284295
padding-bottom: 4px;
285296
padding-right: 6px;
286297
text-align: left;
287298
}
288299
289
-div.pikchr-wrapper.indent:not(.source) {
290
- margin-left: 70pt;
291
-}
292
-
293
-/* Back above margin changes out in sections where it isn't helpful,
294
- * mainly forum posts — indented already on the desktop due to the
295
- * default threaded view — and ticket comments. Also define a class
296
- * for use in documents where the same effect is wanted in a one-off
297
- * fashion, as with the ToC sidebar on the Fossil home page.
298
- *
299
- * If you're wondering why this is so repetitive, it's to ensure that
300
- * we back out all hierarchical levels of formatting inversely. In a
301
- * richer stylesheet language like SCSS, we could express the hierarchy
302
- * directly, getting the same effect in a small fraction of the code.
303
- */
304
-.forum .markdown blockquote,
305
-.forum .markdown h1,
306
-.forum .markdown h2,
307
-.forum .markdown h3,
308
-.forum .markdown h4,
309
-.forum .markdown h5,
310
-.forum .markdown p,
311
-.forum .markdown pre,
312
-.forum .markdown ol,
313
-.forum .markdown ul,
314
-.forum .forumTime h1,
315
-.forum .forumTime h2,
316
-.forum .forumTime h3,
317
-.tkt .markdown blockquote,
318
-.tkt .markdown h1,
319
-.tkt .markdown h2,
320
-.tkt .markdown h3,
321
-.tkt .markdown h4,
322
-.tkt .markdown h5,
323
-.tkt .markdown p,
324
-.tkt .markdown pre,
325
-.tkt .markdown ol,
326
-.tkt .markdown ul,
327
-.nomargins,
328
-.nomargins blockquote,
329
-.nomargins h1,
330
-.nomargins h2,
331
-.nomargins h3,
332
-.nomargins h4,
333
-.nomargins h5,
334
-.nomargins p,
335
-.nomargins pre,
336
-.nomargins ol,
337
-.nomargins ul {
338
- margin-left: 0;
339
- margin-right: 0;
340
-}
341
-
342300
343301
/* Tickets */
344302
345303
table.report {
346304
cursor: auto;
347305
--- skins/default/css.txt
+++ skins/default/css.txt
@@ -1,6 +1,7 @@
1 /* Overall page style */
 
2
3 body {
4 margin: 0 auto;
5 background-color: white;
6 font-family: sans-serif;
@@ -106,18 +107,15 @@
106
107 .content {
108 padding: 0ex 1ex 1ex 1ex;
109 color: #444;
110 }
111 .content blockquote {
112 padding: 0.1em 1em;
113 }
114 .content h1 { font-size: 2.00em; margin-left: 10pt; }
115 .content h2 { font-size: 1.50em; margin-left: 20pt; }
116 .content h3 { font-size: 1.15em; margin-left: 30pt; }
117 .content h4 { font-size: 1.05em; margin-left: 40pt; }
118 .content h5 { font-size: 1.00em; margin-left: 50pt; }
119
120 .section {
121 font-size: 1em;
122 font-weight: bold;
123 background-color: #f5f5f5;
@@ -173,174 +171,134 @@
173 body.cpage-forumnew form input {
174 margin: 0.5em 0;
175 }
176
177
178 /* Markdown and Wiki-formatted pages: /wiki, /doc, /file... */
 
 
 
 
 
 
 
 
 
 
 
179
180 .doc blockquote, .markdown blockquote {
 
 
 
 
 
 
 
 
 
181 background-color: rgba(65, 131, 196, 0.1);
182 border-left: 3px solid #4183c4;
183 margin-left: 60pt;
184 padding: 0.1em 1em;
185 }
186
187 .doc dl, .markdown dl {
188 margin-left: 60pt;
189 }
190
191 .doc dt, .markdown dt {
192 margin-left: 10pt;
193 }
194
195 .doc dd, .markdown dd {
196 margin-left: 30pt;
197 margin-bottom: 1em;
198 }
 
 
 
199
200 .doc hr, .markdown hr {
201 margin-left: 10pt;
202 }
203
204 .doc dd, .doc dt,
205 .doc li,
206 .doc p,
207 .doc table,
208 .markdown dd, .markdown dt,
209 .markdown li,
210 .markdown p,
211 .markdown table {
212 line-height: 1.4em;
213 }
214
215 .doc p,
216 .doc pre,
217 .doc ol, .doc ul,
218 .doc table,
219 .markdown p,
220 .markdown pre,
221 .markdown ol, .markdown ul,
222 .markdown table {
 
 
 
 
 
223 margin-left: 50pt;
224 margin-right: 50pt;
225 }
226
227 .doc p ol, .doc p ul,
228 .doc pre ol, .doc pre ul,
229 .doc ol ol, .doc ol ul,
230 .doc ul ol, .doc ul ul,
231 .doc table ol, .doc table ul,
232 .markdown p ol, .markdown p ul,
233 .markdown pre ol, .markdown pre ul,
234 .markdown ol ol, .markdown ol ul,
235 .markdown ul ol, .markdown ul ul,
236 .markdown table ol, .markdown table ul {
237 margin-left: 10pt;
238 }
239
240 .doc pre, .markdown pre {
241 hyphens: none;
242 font-size: 110%;
243 line-height: 1.25;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
244 margin-left: 70pt;
 
245 }
246
247 .doc .pikchr-wrapper, .markdown .pikchr-wrapper {
248 font-size: 15px;
249 margin-left: 50pt;
250 }
251
252 .doc ul li, .markdown ul li {
253 list-style-type: disc;
254 }
255
256 .doc li p, .doc li pre, .markdown li p, .markdown li pre {
257 margin-left: 0;
258 }
259
260 .doc table, .markdown table {
261 background-color: #f0f5f9;
262 border: 1px solid #a7c2dc;
263 border-radius: 0.5em;
264 border-spacing: 0;
265 padding: 6px;
266 }
267
268 .doc th, .markdown th {
269 border-bottom: 1px solid #dee8f2;
270 padding-bottom: 4px;
271 padding-right: 6px;
272 text-align: left;
273 }
274
275 .doc tr > th, .markdown tr > th {
276 background-color: #dee8f0;
277 }
278
279 .doc tr:nth-child(odd), .markdown tr:nth-child(odd) {
280 background-color: #e0e8ee;
281 }
282
283 .doc td, .markdown td {
284 padding-bottom: 4px;
285 padding-right: 6px;
286 text-align: left;
287 }
288
289 div.pikchr-wrapper.indent:not(.source) {
290 margin-left: 70pt;
291 }
292
293 /* Back above margin changes out in sections where it isn't helpful,
294 * mainly forum posts — indented already on the desktop due to the
295 * default threaded view — and ticket comments. Also define a class
296 * for use in documents where the same effect is wanted in a one-off
297 * fashion, as with the ToC sidebar on the Fossil home page.
298 *
299 * If you're wondering why this is so repetitive, it's to ensure that
300 * we back out all hierarchical levels of formatting inversely. In a
301 * richer stylesheet language like SCSS, we could express the hierarchy
302 * directly, getting the same effect in a small fraction of the code.
303 */
304 .forum .markdown blockquote,
305 .forum .markdown h1,
306 .forum .markdown h2,
307 .forum .markdown h3,
308 .forum .markdown h4,
309 .forum .markdown h5,
310 .forum .markdown p,
311 .forum .markdown pre,
312 .forum .markdown ol,
313 .forum .markdown ul,
314 .forum .forumTime h1,
315 .forum .forumTime h2,
316 .forum .forumTime h3,
317 .tkt .markdown blockquote,
318 .tkt .markdown h1,
319 .tkt .markdown h2,
320 .tkt .markdown h3,
321 .tkt .markdown h4,
322 .tkt .markdown h5,
323 .tkt .markdown p,
324 .tkt .markdown pre,
325 .tkt .markdown ol,
326 .tkt .markdown ul,
327 .nomargins,
328 .nomargins blockquote,
329 .nomargins h1,
330 .nomargins h2,
331 .nomargins h3,
332 .nomargins h4,
333 .nomargins h5,
334 .nomargins p,
335 .nomargins pre,
336 .nomargins ol,
337 .nomargins ul {
338 margin-left: 0;
339 margin-right: 0;
340 }
341
342
343 /* Tickets */
344
345 table.report {
346 cursor: auto;
347
--- skins/default/css.txt
+++ skins/default/css.txt
@@ -1,6 +1,7 @@
1 /* Overall page style; vi: filetype=css
2 */
3
4 body {
5 margin: 0 auto;
6 background-color: white;
7 font-family: sans-serif;
@@ -106,18 +107,15 @@
107
108 .content {
109 padding: 0ex 1ex 1ex 1ex;
110 color: #444;
111 }
112 .content h1 { font-size: 2.00em; }
113 .content h2 { font-size: 1.50em; }
114 .content h3 { font-size: 1.15em; }
115 .content h4 { font-size: 1.05em; }
116 .content h5 { font-size: 1.00em; }
 
 
 
117
118 .section {
119 font-size: 1em;
120 font-weight: bold;
121 background-color: #f5f5f5;
@@ -173,174 +171,134 @@
171 body.cpage-forumnew form input {
172 margin: 0.5em 0;
173 }
174
175
176 /* Markdown and Wiki-formatted pages: /wiki, /doc, /file...
177 *
178 * The frequent use of the immediate-child selector (>) is done on
179 * purpose to prevent these rules from affecting MD in forum posts,
180 * ticket comments, etc. Without this, we'd need a bunch of inverse
181 * rules to back out the margins everywhere we don't want them.
182 *
183 * BEWARE: Fossil's MD and wiki to HTML processors wrap the content bodies
184 * differently, and /doc on *.html files works yet a third way. These
185 * rules are carefully written to capture these docs and no other use of
186 * MD/wiki/HTML. Adjust with care!
187 */
188
189 .doc > .content blockquote {
190 /* Apply extra indent relative to "p" for backwards compatibility,
191 * especially the Fossil wiki generator, which misuses this tag
192 * against HTML and MD norms to mean "indented paragraph."
193 */
194 margin-left: 60pt;
195 }
196 .markdown blockquote {
197 /* Style it as a proper blockquote for MD only. Unlike the indent
198 * rule, this applies everywhere, including the forum, tickets… */
199 background-color: rgba(65, 131, 196, 0.1);
200 border-left: 3px solid #4183c4;
 
201 padding: 0.1em 1em;
202 }
203
204 .doc > .content dt {
 
 
 
 
205 margin-left: 10pt;
206 }
207 .doc > .content dd {
 
208 margin-left: 30pt;
209 margin-bottom: 1em;
210 }
211 .doc > .content dl {
212 margin-left: 60pt;
213 }
214
215 .doc > .content hr {
216 margin-left: 10pt;
217 }
218
219 .content dd, .content dt,
220 .content li,
221 .content p,
222 .content table
223 {
 
 
 
224 line-height: 1.4em;
225 }
226
227 .doc > .content h1 { margin-left: 10pt; }
228 .doc > .content h2 { margin-left: 20pt; }
229 .doc > .content h3 { margin-left: 30pt; }
230 .doc > .content h4 { margin-left: 40pt; }
231 .doc > .content h5 { margin-left: 50pt; }
232
233 .doc > .content > p,
234 .doc > .content > .markdown > p,
235 .doc > .content > .fossil-doc > p,
236 .doc > .content > ol, .doc > .content > ul,
237 .doc > .content > .markdown > ol, .doc > .content > .markdown > ul,
238 .doc > .content > .fossil-doc > ol, .doc > .content > .fossil-doc > ul,
239 .doc > .content table {
240 margin-left: 50pt;
241 margin-right: 50pt;
242 }
243
244 .content pre {
 
 
 
 
 
 
 
 
 
 
 
 
 
245 hyphens: none;
246 font-size: 110%;
247 line-height: 1.25;
248 }
249 .doc > .content > pre,
250 .doc > .content > .markdown > pre {
251 margin-left: 70pt;
252 margin-right: 50pt;
253 }
254
255 .content .pikchr-wrapper {
256 margin-left: 70pt;
257 }
258 div.pikchr-wrapper.center:not(.source) {
259 margin-left: 0;
260 }
261 div.pikchr-wrapper.indent:not(.source) {
262 /* Odd selector must match one in default.css to override it. */
263 margin-left: 70pt;
264 margin-right: 50pt;
265 }
266
267 .content ul li {
 
 
 
 
 
268 list-style-type: disc;
269 }
270
271 .content table {
 
 
 
 
272 background-color: #f0f5f9;
273 border: 1px solid #a7c2dc;
274 border-radius: 0.5em;
275 border-spacing: 0;
276 padding: 6px;
277 }
278
279 .content th {
280 border-bottom: 1px solid #dee8f2;
281 padding-bottom: 4px;
282 padding-right: 6px;
283 text-align: left;
284 }
285
286 .content tr > th {
287 background-color: #dee8f0;
288 }
289
290 .content tr:nth-child(odd) {
291 background-color: #e0e8ee;
292 }
293
294 .content td {
295 padding-bottom: 4px;
296 padding-right: 6px;
297 text-align: left;
298 }
299
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
300
301 /* Tickets */
302
303 table.report {
304 cursor: auto;
305

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button