Mercurial Repositories > eric / file comparison
comparison: eric6/UI/Previewers/PreviewerHTMLStyles.py
eric6/UI/Previewers/PreviewerHTMLStyles.py
- changeset 7314
- c32c24345ca7
- child 7360
- 9190402e4505
equal
deleted
inserted
replaced
| 7313:2373d03cd63a | 7314:c32c24345ca7 |
|---|---|
| 1 # -*- coding: utf-8 -*- | |
| 2 | |
| 3 # Copyright (c) 2019 Detlev Offenbach <detlev@die-offenbachs.de> | |
| 4 # | |
| 5 | |
| 6 """ | |
| 7 Module implementing CSS styles for the Markdown preview. | |
| 8 """ | |
| 9 | |
| 10 | |
| 11 css_markdown = """ | |
| 12 @media (prefers-color-scheme: light) { | |
| 13 :root { | |
| 14 --font-color: #000; | |
| 15 --background-color: #fff; | |
| 16 --alt-backgroundcolor: #f8f8f8; | |
| 17 --frame-color: #333; | |
| 18 } | |
| 19 } | |
| 20 | |
| 21 @media (prefers-color-scheme: dark) { | |
| 22 :root { | |
| 23 --font-color: #fff; | |
| 24 --background-color: #000; | |
| 25 --alt-backgroundcolor: #707070; | |
| 26 --frame-color: #ccc; | |
| 27 } | |
| 28 } | |
| 29 | |
| 30 html { | |
| 31 background-color: var(--background-color, #fff); | |
| 32 } | |
| 33 | |
| 34 body { | |
| 35 background-color: var(--background-color, #fff); | |
| 36 color: var(--font-color, #000); | |
| 37 font-family: sans-serif; | |
| 38 font-size:12px; | |
| 39 line-height:1.7; | |
| 40 word-wrap:break-word | |
| 41 } | |
| 42 | |
| 43 body>*:first-child { | |
| 44 margin-top:0 !important | |
| 45 } | |
| 46 | |
| 47 body>*:last-child { | |
| 48 margin-bottom:0 !important | |
| 49 } | |
| 50 | |
| 51 a.absent { | |
| 52 color:#c00 | |
| 53 } | |
| 54 | |
| 55 a.anchor { | |
| 56 display:block; | |
| 57 padding-right:6px; | |
| 58 padding-left:30px; | |
| 59 margin-left:-30px; | |
| 60 cursor:pointer; | |
| 61 position:absolute; | |
| 62 top:0; | |
| 63 left:0; | |
| 64 bottom:0 | |
| 65 } | |
| 66 | |
| 67 a.anchor:focus { | |
| 68 outline:none | |
| 69 } | |
| 70 | |
| 71 tt, code, pre { | |
| 72 font-family: Consolas, "Liberation Mono", Courier, monospace; | |
| 73 font-size: 12px; | |
| 74 } | |
| 75 | |
| 76 h1, h2, h3, h4, h5, h6 { | |
| 77 margin:1em 0 6px; | |
| 78 padding:0; | |
| 79 font-weight:bold; | |
| 80 line-height:1.7; | |
| 81 cursor:text; | |
| 82 position:relative | |
| 83 } | |
| 84 | |
| 85 h1 .octicon-link, h2 .octicon-link, h3 .octicon-link, h4 .octicon-link, | |
| 86 h5 .octicon-link, h6 .octicon-link { | |
| 87 display:none; | |
| 88 color: var(--font-color, #000); | |
| 89 } | |
| 90 | |
| 91 h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, | |
| 92 h5:hover a.anchor, h6:hover a.anchor { | |
| 93 text-decoration:none; | |
| 94 line-height:1; | |
| 95 padding-left:8px; | |
| 96 margin-left:-30px; | |
| 97 top:15% | |
| 98 } | |
| 99 | |
| 100 h1:hover a.anchor .octicon-link, h2:hover a.anchor .octicon-link, | |
| 101 h3:hover a.anchor .octicon-link, h4:hover a.anchor .octicon-link, | |
| 102 h5:hover a.anchor .octicon-link, h6:hover a.anchor .octicon-link { | |
| 103 display:inline-block | |
| 104 } | |
| 105 | |
| 106 h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, | |
| 107 h5 tt, h5 code, h6 tt, h6 code { | |
| 108 font-size:inherit | |
| 109 } | |
| 110 | |
| 111 h1 { | |
| 112 font-size:2em; | |
| 113 border-bottom:1px solid #ddd | |
| 114 } | |
| 115 | |
| 116 h2 { | |
| 117 font-size:1.6em; | |
| 118 border-bottom:1px solid #eee | |
| 119 } | |
| 120 | |
| 121 h3 { | |
| 122 font-size:1.4em | |
| 123 } | |
| 124 | |
| 125 h4 { | |
| 126 font-size:1.2em | |
| 127 } | |
| 128 | |
| 129 h5 { | |
| 130 font-size:1em | |
| 131 } | |
| 132 | |
| 133 h6 { | |
| 134 color:#777; | |
| 135 font-size:1em | |
| 136 } | |
| 137 | |
| 138 p, blockquote, ul, ol, dl, table, pre { | |
| 139 margin:8px 0 | |
| 140 } | |
| 141 | |
| 142 hr { | |
| 143 background: rgba(216, 216, 216, 1); | |
| 144 border: 0 none; | |
| 145 color: #ccc; | |
| 146 height: 2px; | |
| 147 padding: 0; | |
| 148 margin: 8px 0; | |
| 149 } | |
| 150 | |
| 151 ul, ol { | |
| 152 padding-left:15px | |
| 153 } | |
| 154 | |
| 155 ul.no-list, ul.task-list, ol.no-list, ol.task-list { | |
| 156 list-style-type:none; | |
| 157 } | |
| 158 | |
| 159 ul ul, ul ol, ol ol, ol ul { | |
| 160 margin-top:0; | |
| 161 margin-bottom:0 | |
| 162 } | |
| 163 | |
| 164 | |
| 165 dl { | |
| 166 padding:0 | |
| 167 } | |
| 168 | |
| 169 dl dt { | |
| 170 font-size:14px; | |
| 171 font-weight:bold; | |
| 172 font-style:italic; | |
| 173 padding:0; | |
| 174 margin-top:8px | |
| 175 } | |
| 176 | |
| 177 dl dd { | |
| 178 margin-bottom:15px; | |
| 179 padding:0 8px | |
| 180 } | |
| 181 | |
| 182 blockquote { | |
| 183 border-left:4px solid #DDD; | |
| 184 padding:0 8px; | |
| 185 color:#777 | |
| 186 } | |
| 187 | |
| 188 blockquote>:first-child { | |
| 189 margin-top:0px | |
| 190 } | |
| 191 | |
| 192 blockquote>:last-child { | |
| 193 margin-bottom:0px | |
| 194 } | |
| 195 | |
| 196 table { | |
| 197 border-collapse: collapse; | |
| 198 border-spacing: 0; | |
| 199 overflow:auto; | |
| 200 display:block | |
| 201 } | |
| 202 | |
| 203 table th { | |
| 204 font-weight:bold | |
| 205 } | |
| 206 | |
| 207 table th, table td { | |
| 208 border:1px solid #ddd; | |
| 209 padding:3px 3px | |
| 210 } | |
| 211 | |
| 212 table tr { | |
| 213 border-top:1px solid #ccc; | |
| 214 background-color: var(--background-color, #fff); | |
| 215 } | |
| 216 | |
| 217 table tr:nth-child(2n) { | |
| 218 background-color:var(--alt-background-color, #f8f8f8); | |
| 219 } | |
| 220 | |
| 221 img { | |
| 222 max-width:100%; | |
| 223 -moz-box-sizing:border-box; | |
| 224 box-sizing:border-box | |
| 225 } | |
| 226 | |
| 227 span.frame { | |
| 228 display:block; | |
| 229 overflow:hidden | |
| 230 } | |
| 231 | |
| 232 span.frame>span { | |
| 233 border:1px solid #ddd; | |
| 234 display:block; | |
| 235 float:left; | |
| 236 overflow:hidden; | |
| 237 margin:6px 0 0; | |
| 238 padding:7px; | |
| 239 width:auto | |
| 240 } | |
| 241 | |
| 242 span.frame span img { | |
| 243 display:block; | |
| 244 float:left | |
| 245 } | |
| 246 | |
| 247 span.frame span span { | |
| 248 clear:both; | |
| 249 color:var(--frame-color, #333); | |
| 250 display:block; | |
| 251 padding:5px 0 0 | |
| 252 } | |
| 253 | |
| 254 span.align-center { | |
| 255 display:block; | |
| 256 overflow:hidden; | |
| 257 clear:both | |
| 258 } | |
| 259 | |
| 260 span.align-center>span { | |
| 261 display:block; | |
| 262 overflow:hidden; | |
| 263 margin:6px auto 0; | |
| 264 text-align:center | |
| 265 } | |
| 266 | |
| 267 span.align-center span img { | |
| 268 margin:0 auto; | |
| 269 text-align:center | |
| 270 } | |
| 271 | |
| 272 span.align-right { | |
| 273 display:block; | |
| 274 overflow:hidden; | |
| 275 clear:both | |
| 276 } | |
| 277 | |
| 278 span.align-right>span { | |
| 279 display:block; | |
| 280 overflow:hidden; | |
| 281 margin:6px 0 0; | |
| 282 text-align:right | |
| 283 } | |
| 284 | |
| 285 span.align-right span img { | |
| 286 margin:0; | |
| 287 text-align:right | |
| 288 } | |
| 289 | |
| 290 span.float-left { | |
| 291 display:block; | |
| 292 margin-right:6px; | |
| 293 overflow:hidden; | |
| 294 float:left | |
| 295 } | |
| 296 | |
| 297 span.float-left span { | |
| 298 margin:6px 0 0 | |
| 299 } | |
| 300 | |
| 301 span.float-right { | |
| 302 display:block; | |
| 303 margin-left:6px; | |
| 304 overflow:hidden; | |
| 305 float:right | |
| 306 } | |
| 307 | |
| 308 span.float-right>span { | |
| 309 display:block; | |
| 310 overflow:hidden; | |
| 311 margin:6px auto 0; | |
| 312 text-align:right | |
| 313 } | |
| 314 | |
| 315 code, tt { | |
| 316 margin:0; | |
| 317 border:1px solid #ddd; | |
| 318 background-color:var(--alt-background-color, #f8f8f8); | |
| 319 border-radius:3px; | |
| 320 max-width:100%; | |
| 321 display:inline-block; | |
| 322 overflow:auto; | |
| 323 vertical-align:middle; | |
| 324 line-height:1.1; | |
| 325 padding:0 | |
| 326 } | |
| 327 | |
| 328 code:before, code:after, tt:before, tt:after { | |
| 329 content:"\00a0" | |
| 330 } | |
| 331 | |
| 332 code { | |
| 333 white-space:nowrap | |
| 334 } | |
| 335 | |
| 336 pre>code { | |
| 337 margin:0; | |
| 338 padding:0; | |
| 339 white-space:pre; | |
| 340 border:none; | |
| 341 background:transparent | |
| 342 } | |
| 343 | |
| 344 .highlight pre, pre { | |
| 345 background-color:var(--alt-background-color, #f8f8f8); | |
| 346 border:1px solid #ddd; | |
| 347 font-size:12px; | |
| 348 line-height:16px; | |
| 349 overflow:auto; | |
| 350 padding:6px 6px; | |
| 351 border-radius:3px | |
| 352 } | |
| 353 | |
| 354 pre { | |
| 355 word-wrap:normal | |
| 356 } | |
| 357 | |
| 358 pre code, pre tt { | |
| 359 margin:0; | |
| 360 padding:0; | |
| 361 background-color:transparent; | |
| 362 border:none; | |
| 363 word-wrap:normal; | |
| 364 max-width:initial; | |
| 365 display:inline; | |
| 366 overflow:initial; | |
| 367 line-height:inherit | |
| 368 } | |
| 369 | |
| 370 pre code:before, pre code:after, pre tt:before, pre tt:after { | |
| 371 content:normal | |
| 372 } | |
| 373 | |
| 374 kbd { | |
| 375 border:1px solid gray; | |
| 376 font-size:1.2em; | |
| 377 box-shadow:1px 0 1px 0 #eee, 0 1px 0 1px #ccc, 0 2px 0 2px #444; | |
| 378 -webkit-border-radius:2px; | |
| 379 -moz-border-radius:2px; | |
| 380 border-radius:2px; | |
| 381 margin:2px 3px; | |
| 382 padding:1px 5px; | |
| 383 color: #000; | |
| 384 background-color: #fff | |
| 385 } | |
| 386 """ | |
| 387 | |
| 388 | |
| 389 css_pygments = """ | |
| 390 pre .hll { background-color: #ffffcc } | |
| 391 | |
| 392 /* Comment */ | |
| 393 pre .c { color: #999988; font-style: italic } | |
| 394 | |
| 395 /* Error */ | |
| 396 pre .err { color: #a61717; background-color: #e3d2d2 } | |
| 397 | |
| 398 /* Keyword */ | |
| 399 pre .k { font-weight: bold } | |
| 400 | |
| 401 /* Operator */ | |
| 402 pre .o { font-weight: bold } | |
| 403 | |
| 404 /* Comment.Multiline */ | |
| 405 pre .cm { color: #999988; font-style: italic } | |
| 406 | |
| 407 /* Comment.Preproc */ | |
| 408 pre .cp { color: #999999; font-weight: bold; font-style: italic } | |
| 409 | |
| 410 /* Comment.Single */ | |
| 411 pre .c1 { color: #999988; font-style: italic } | |
| 412 | |
| 413 /* Comment.Special */ | |
| 414 pre .cs { color: #999999; font-weight: bold; font-style: italic } | |
| 415 | |
| 416 /* Generic.Deleted */ | |
| 417 pre .gd { color: #000000; background-color: #ffdddd } | |
| 418 | |
| 419 /* Generic.Emph */ | |
| 420 pre .ge { font-style: italic } | |
| 421 | |
| 422 /* Generic.Error */ | |
| 423 pre .gr { color: #aa0000 } | |
| 424 | |
| 425 /* Generic.Heading */ | |
| 426 pre .gh { color: #999999 } | |
| 427 | |
| 428 /* Generic.Inserted */ | |
| 429 pre .gi { color: #000000; background-color: #ddffdd } | |
| 430 | |
| 431 /* Generic.Output */ | |
| 432 pre .go { color: #888888 } | |
| 433 | |
| 434 /* Generic.Prompt */ | |
| 435 pre .gp { color: #555555 } | |
| 436 | |
| 437 /* Generic.Strong */ | |
| 438 pre .gs { font-weight: bold } | |
| 439 | |
| 440 /* Generic.Subheading */ | |
| 441 pre .gu { color: #aaaaaa } | |
| 442 | |
| 443 /* Generic.Traceback */ | |
| 444 pre .gt { color: #aa0000 } | |
| 445 | |
| 446 /* Keyword.Constant */ | |
| 447 pre .kc { font-weight: bold } | |
| 448 | |
| 449 /* Keyword.Declaration */ | |
| 450 pre .kd { font-weight: bold } | |
| 451 | |
| 452 /* Keyword.Namespace */ | |
| 453 pre .kn { font-weight: bold } | |
| 454 | |
| 455 /* Keyword.Pseudo */ | |
| 456 pre .kp { font-weight: bold } | |
| 457 | |
| 458 /* Keyword.Reserved */ | |
| 459 pre .kr { font-weight: bold } | |
| 460 | |
| 461 /* Keyword.Type */ | |
| 462 pre .kt { color: #445588; font-weight: bold } | |
| 463 | |
| 464 /* Literal.Number */ | |
| 465 pre .m { color: #009999 } | |
| 466 | |
| 467 /* Literal.String */ | |
| 468 pre .s { color: #d01040 } | |
| 469 | |
| 470 /* Name.Attribute */ | |
| 471 pre .na { color: #008080 } | |
| 472 | |
| 473 /* Name.Builtin */ | |
| 474 pre .nb { color: #0086B3 } | |
| 475 | |
| 476 /* Name.Class */ | |
| 477 pre .nc { color: #445588; font-weight: bold } | |
| 478 | |
| 479 /* Name.Constant */ | |
| 480 pre .no { color: #008080 } | |
| 481 | |
| 482 /* Name.Decorator */ | |
| 483 pre .nd { color: #3c5d5d; font-weight: bold } | |
| 484 | |
| 485 /* Name.Entity */ | |
| 486 pre .ni { color: #800080 } | |
| 487 | |
| 488 /* Name.Exception */ | |
| 489 pre .ne { color: #990000; font-weight: bold } | |
| 490 | |
| 491 /* Name.Function */ | |
| 492 pre .nf { color: #990000; font-weight: bold } | |
| 493 | |
| 494 /* Name.Label */ | |
| 495 pre .nl { color: #990000; font-weight: bold } | |
| 496 | |
| 497 /* Name.Namespace */ | |
| 498 pre .nn { color: #555555 } | |
| 499 | |
| 500 /* Name.Tag */ | |
| 501 pre .nt { color: #000080 } | |
| 502 | |
| 503 /* Name.Variable */ | |
| 504 pre .nv { color: #008080 } | |
| 505 | |
| 506 /* Operator.Word */ | |
| 507 pre .ow { font-weight: bold } | |
| 508 | |
| 509 /* Text.Whitespace */ | |
| 510 pre .w { color: #bbbbbb } | |
| 511 | |
| 512 /* Literal.Number.Float */ | |
| 513 pre .mf { color: #009999 } | |
| 514 | |
| 515 /* Literal.Number.Hex */ | |
| 516 pre .mh { color: #009999 } | |
| 517 | |
| 518 /* Literal.Number.Integer */ | |
| 519 pre .mi { color: #009999 } | |
| 520 | |
| 521 /* Literal.Number.Oct */ | |
| 522 pre .mo { color: #009999 } | |
| 523 | |
| 524 /* Literal.String.Backtick */ | |
| 525 pre .sb { color: #d01040 } | |
| 526 | |
| 527 /* Literal.String.Char */ | |
| 528 pre .sc { color: #d01040 } | |
| 529 | |
| 530 /* Literal.String.Doc */ | |
| 531 pre .sd { color: #d01040 } | |
| 532 | |
| 533 /* Literal.String.Double */ | |
| 534 pre .s2 { color: #d01040 } | |
| 535 | |
| 536 /* Literal.String.Escape */ | |
| 537 pre .se { color: #d01040 } | |
| 538 | |
| 539 /* Literal.String.Heredoc */ | |
| 540 pre .sh { color: #d01040 } | |
| 541 | |
| 542 /* Literal.String.Interpol */ | |
| 543 pre .si { color: #d01040 } | |
| 544 | |
| 545 /* Literal.String.Other */ | |
| 546 pre .sx { color: #d01040 } | |
| 547 | |
| 548 /* Literal.String.Regex */ | |
| 549 pre .sr { color: #009926 } | |
| 550 | |
| 551 /* Literal.String.Single */ | |
| 552 pre .s1 { color: #d01040 } | |
| 553 | |
| 554 /* Literal.String.Symbol */ | |
| 555 pre .ss { color: #990073 } | |
| 556 | |
| 557 /* Name.Builtin.Pseudo */ | |
| 558 pre .bp { color: #999999 } | |
| 559 | |
| 560 /* Name.Variable.Class */ | |
| 561 pre .vc { color: #008080 } | |
| 562 | |
| 563 /* Name.Variable.Global */ | |
| 564 pre .vg { color: #008080 } | |
| 565 | |
| 566 /* Name.Variable.Instance */ | |
| 567 pre .vi { color: #008080 } | |
| 568 | |
| 569 /* Literal.Number.Integer.Long */ | |
| 570 pre .il { color: #009999 } | |
| 571 | |
| 572 """ |
