[Markdown] Rework a bit Markdown preview styles.
authorVladislav.Tankov <vladislav.tankov@jetbrains.com>
Thu, 13 Aug 2020 14:02:22 +0000 (17:02 +0300)
committerintellij-monorepo-bot <intellij-monorepo-bot-no-reply@jetbrains.com>
Thu, 13 Aug 2020 15:15:50 +0000 (15:15 +0000)
Update CSS of Markdown plugin in accordance with the IntelliJ Design team recommendations. Still, majorly work in progress.

GitOrigin-RevId: 8cc1927333482781e5a3c88cd249369371edb2e9

plugins/markdown/resource/org/intellij/plugins/markdown/extensions/common/baseStyles/default.css
plugins/markdown/src/org/intellij/plugins/markdown/ui/preview/PreviewColorThemeStyles.kt

index 15be3739f262f13b4a3472a7d31d8794c7c13735..86974637c5cc6400c1b05e48160aa4dd93c9c686 100644 (file)
@@ -1,4 +1,10 @@
 /*
+Reworked by IntelliJ Team
+
+The MIT License (MIT)
+
+Copyright (c) JetBrains
+
 Adapted from https://github.com/sindresorhus/github-markdown-css
 
 The MIT License (MIT)
@@ -25,239 +31,144 @@ THE SOFTWARE.
 */
 
 @font-face {
-  font-family: octicons-anchor;
-  src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
+    font-family: octicons-anchor;
+    src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAYcAA0AAAAACjQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABwAAAAca8vGTk9TLzIAAAFMAAAARAAAAFZG1VHVY21hcAAAAZAAAAA+AAABQgAP9AdjdnQgAAAB0AAAAAQAAAAEACICiGdhc3AAAAHUAAAACAAAAAj//wADZ2x5ZgAAAdwAAADRAAABEKyikaNoZWFkAAACsAAAAC0AAAA2AtXoA2hoZWEAAALgAAAAHAAAACQHngNFaG10eAAAAvwAAAAQAAAAEAwAACJsb2NhAAADDAAAAAoAAAAKALIAVG1heHAAAAMYAAAAHwAAACABEAB2bmFtZQAAAzgAAALBAAAFu3I9x/Nwb3N0AAAF/AAAAB0AAAAvaoFvbwAAAAEAAAAAzBdyYwAAAADP2IQvAAAAAM/bz7t4nGNgZGFgnMDAysDB1Ml0hoGBoR9CM75mMGLkYGBgYmBlZsAKAtJcUxgcPsR8iGF2+O/AEMPsznAYKMwIkgMA5REMOXicY2BgYGaAYBkGRgYQsAHyGMF8FgYFIM0ChED+h5j//yEk/3KoSgZGNgYYk4GRCUgwMaACRoZhDwCs7QgGAAAAIgKIAAAAAf//AAJ4nHWMMQrCQBBF/0zWrCCIKUQsTDCL2EXMohYGSSmorScInsRGL2DOYJe0Ntp7BK+gJ1BxF1stZvjz/v8DRghQzEc4kIgKwiAppcA9LtzKLSkdNhKFY3HF4lK69ExKslx7Xa+vPRVS43G98vG1DnkDMIBUgFN0MDXflU8tbaZOUkXUH0+U27RoRpOIyCKjbMCVejwypzJJG4jIwb43rfl6wbwanocrJm9XFYfskuVC5K/TPyczNU7b84CXcbxks1Un6H6tLH9vf2LRnn8Ax7A5WQAAAHicY2BkYGAA4teL1+yI57f5ysDNwgAC529f0kOmWRiYVgEpDgYmEA8AUzEKsQAAAHicY2BkYGB2+O/AEMPCAAJAkpEBFbAAADgKAe0EAAAiAAAAAAQAAAAEAAAAAAAAKgAqACoAiAAAeJxjYGRgYGBhsGFgYgABEMkFhAwM/xn0QAIAD6YBhwB4nI1Ty07cMBS9QwKlQapQW3VXySvEqDCZGbGaHULiIQ1FKgjWMxknMfLEke2A+IJu+wntrt/QbVf9gG75jK577Lg8K1qQPCfnnnt8fX1NRC/pmjrk/zprC+8D7tBy9DHgBXoWfQ44Av8t4Bj4Z8CLtBL9CniJluPXASf0Lm4CXqFX8Q84dOLnMB17N4c7tBo1AS/Qi+hTwBH4rwHHwN8DXqQ30XXAS7QaLwSc0Gn8NuAVWou/gFmnjLrEaEh9GmDdDGgL3B4JsrRPDU2hTOiMSuJUIdKQQayiAth69r6akSSFqIJuA19TrzCIaY8sIoxyrNIrL//pw7A2iMygkX5vDj+G+kuoLdX4GlGK/8Lnlz6/h9MpmoO9rafrz7ILXEHHaAx95s9lsI7AHNMBWEZHULnfAXwG9/ZqdzLI08iuwRloXE8kfhXYAvE23+23DU3t626rbs8/8adv+9DWknsHp3E17oCf+Z48rvEQNZ78paYM38qfk3v/u3l3u3GXN2Dmvmvpf1Srwk3pB/VSsp512bA/GG5i2WJ7wu430yQ5K3nFGiOqgtmSB5pJVSizwaacmUZzZhXLlZTq8qGGFY2YcSkqbth6aW1tRmlaCFs2016m5qn36SbJrqosG4uMV4aP2PHBmB3tjtmgN2izkGQyLWprekbIntJFing32a5rKWCN/SdSoga45EJykyQ7asZvHQ8PTm6cslIpwyeyjbVltNikc2HTR7YKh9LBl9DADC0U/jLcBZDKrMhUBfQBvXRzLtFtjU9eNHKin0x5InTqb8lNpfKv1s1xHzTXRqgKzek/mb7nB8RZTCDhGEX3kK/8Q75AmUM/eLkfA+0Hi908Kx4eNsMgudg5GLdRD7a84npi+YxNr5i5KIbW5izXas7cHXIMAau1OueZhfj+cOcP3P8MNIWLyYOBuxL6DRylJ4cAAAB4nGNgYoAALjDJyIAOWMCiTIxMLDmZedkABtIBygAAAA==) format('woff');
 }
 
 body {
-  background-color: white;
-  -webkit-text-size-adjust: 100%;
-  -fx-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-  color: #333;
-  font-family: Helvetica, Arial, freesans, sans-serif;
-  font-size: 16px;
-  line-height: 1.6;
-  word-wrap: break-word;
-}
-
-a {
-  background-color: transparent;
-}
-
-a:active,
-a:hover {
-  outline: 0;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    font-family: Helvetica, Arial, freesans, sans-serif;
+    font-size: 14px;
+    line-height: 1.6;
+    word-wrap: break-word;
+    margin: 0 30px;
 }
 
 strong {
-  font-weight: bold;
-}
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
+    font-weight: bold;
 }
 
 img {
-  border: 0;
-}
-
-hr {
-  box-sizing: content-box;
-  height: 0;
-}
-
-pre {
-  overflow: auto;
-}
-
-code,
-kbd,
-pre {
-  font-family: monospace, monospace;
-  font-size: 1em;
+    border: 0;
 }
 
 input {
-  color: inherit;
-  font: inherit;
-  margin: 0;
+    color: inherit;
+    font: inherit;
+    margin: 0;
+    line-height: normal;
 }
 
 html input[disabled] {
-  cursor: default;
-}
-
-input {
-  line-height: normal;
+    cursor: default;
 }
 
 input[type="checkbox"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
+    box-sizing: border-box;
+    padding: 0;
 }
 
 body * {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 input {
-  font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+    font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 a {
-  color: #4078c0;
-  text-decoration: none;
+    text-decoration: none;
 }
 
 a:hover,
 a:active {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 
 hr {
-  height: 0;
-  margin: 15px 0;
-  overflow: hidden;
-  background: transparent;
-  border: 0;
-  border-bottom: 1px solid #ddd;
+    height: 1px;
+    padding: 0;
+    margin: 20px 0;
+    border: 0 none;
 }
 
 hr:before {
-  display: table;
-  content: "";
+    display: table;
+    content: "";
 }
 
 hr:after {
-  display: table;
-  clear: both;
-  content: "";
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 15px;
-  margin-bottom: 15px;
-  line-height: 1.1;
-}
-
-h1 {
-  font-size: 30px;
-}
-
-h2 {
-  font-size: 21px;
-}
-
-h3 {
-  font-size: 16px;
-}
-
-h4 {
-  font-size: 14px;
-}
-
-h5 {
-  font-size: 12px;
-}
-
-h6 {
-  font-size: 11px;
+    display: table;
+    clear: both;
+    content: "";
 }
 
 blockquote {
-  margin: 0;
+    margin: 0;
 }
 
 ul,
 ol {
-  padding: 0;
-  margin-top: 0;
-  margin-bottom: 0;
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
 ol ol,
 ul ol {
-  list-style-type: lower-roman;
+    list-style-type: lower-roman;
 }
 
 ul ul ol,
 ul ol ol,
 ol ul ol,
 ol ol ol {
-  list-style-type: lower-alpha;
+    list-style-type: lower-alpha;
 }
 
 dd {
-  margin-left: 0;
-}
-
-code {
-  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  font-size: 12px;
-}
-
-pre {
-  margin-top: 0;
-  margin-bottom: 0;
-  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    margin-left: 0;
 }
 
 .octicon {
-  font: normal normal normal 16px/1 octicons-anchor;
-  display: inline-block;
-  text-decoration: none;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+    font: normal normal normal 16px/1 octicons-anchor;
+    display: inline-block;
+    text-decoration: none;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 .octicon-link:before {
-  content: '\f05c';
+    content: '\f05c';
 }
 
 .markdown-body > *:first-child {
-  margin-top: 0 !important;
+    margin-top: 0 !important;
 }
 
 .markdown-body > *:last-child {
-  margin-bottom: 0 !important;
+    margin-bottom: 0 !important;
 }
 
 
 .anchor {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  padding-right: 6px;
-  padding-left: 30px;
-  margin-left: -30px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    padding-right: 6px;
+    padding-left: 30px;
+    margin-left: -30px;
 }
 
 .anchor:focus {
-  outline: none;
+    outline: none;
 }
 
 h1,
@@ -266,11 +177,11 @@ h3,
 h4,
 h5,
 h6 {
-  position: relative;
-  margin-top: 1em;
-  margin-bottom: 16px;
-  font-weight: bold;
-  line-height: 1.4;
+    position: relative;
+    margin-top: 1em;
+    margin-bottom: 16px;
+    font-weight: bold;
+    line-height: 1.4;
 }
 
 h1 .octicon-link,
@@ -279,9 +190,9 @@ h3 .octicon-link,
 h4 .octicon-link,
 h5 .octicon-link,
 h6 .octicon-link {
-  display: none;
-  color: #000;
-  vertical-align: middle;
+    display: none;
+    color: #000;
+    vertical-align: middle;
 }
 
 h1:hover .anchor,
@@ -290,9 +201,9 @@ h3:hover .anchor,
 h4:hover .anchor,
 h5:hover .anchor,
 h6:hover .anchor {
-  padding-left: 8px;
-  margin-left: -30px;
-  text-decoration: none;
+    padding-left: 8px;
+    margin-left: -30px;
+    text-decoration: none;
 }
 
 h1:hover .anchor .octicon-link,
@@ -301,63 +212,60 @@ h3:hover .anchor .octicon-link,
 h4:hover .anchor .octicon-link,
 h5:hover .anchor .octicon-link,
 h6:hover .anchor .octicon-link {
-  display: inline-block;
+    display: inline-block;
 }
 
 h1 {
-  padding-bottom: 0.3em;
-  font-size: 2.25em;
-  line-height: 1.2;
-  border-bottom: 1px solid #eee;
+    font-size: 2.2em;
+    padding-top: 0.6em;
 }
 
 h1 .anchor {
-  line-height: 1;
+    line-height: 1;
 }
 
 h2 {
-  padding-bottom: 0.3em;
-  font-size: 1.75em;
-  line-height: 1.225;
-  border-bottom: 1px solid #eee;
+    font-size: 1.8em;
+    line-height: 1.2;
+    padding-top: 0.6em;
 }
 
 h2 .anchor {
-  line-height: 1;
+    line-height: 1.2;
 }
 
 h3 {
-  font-size: 1.5em;
-  line-height: 1.43;
+    font-size: 1.3em;
+    line-height: 1;
+    padding-top: 0.6em;
 }
 
 h3 .anchor {
-  line-height: 1.2;
+    line-height: 1.2;
 }
 
 h4 {
-  font-size: 1.25em;
+    font-size: 1em;
 }
 
 h4 .anchor {
-  line-height: 1.2;
+    line-height: 1.2;
 }
 
 h5 {
-  font-size: 1em;
+    font-size: 1em;
 }
 
 h5 .anchor {
-  line-height: 1.1;
+    line-height: 1.1;
 }
 
 h6 {
-  font-size: 1em;
-  color: #777;
+    font-size: 1em;
 }
 
 h6 .anchor {
-  line-height: 1.1;
+    line-height: 1.1;
 }
 
 p,
@@ -367,338 +275,183 @@ ol,
 dl,
 table,
 pre {
-  margin-top: 0;
-  margin-bottom: 16px;
-}
-
-hr {
-  height: 4px;
-  padding: 0;
-  margin: 16px 0;
-  background-color: #e7e7e7;
-  border: 0 none;
+    margin-top: 0;
+    margin-bottom: 16px;
 }
 
 ul,
 ol {
-  padding-left: 2em;
+    padding-left: 2em;
 }
 
 ul ul,
 ul ol,
 ol ol,
 ol ul {
-  margin-top: 0;
-  margin-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
 li > p {
-  margin-top: 16px;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
 dl {
-  padding: 0;
+    padding: 0;
 }
 
 dl dt {
-  padding: 0;
-  margin-top: 16px;
-  font-size: 1em;
-  font-style: italic;
-  font-weight: bold;
+    padding: 0;
+    margin-top: 16px;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: bold;
 }
 
 dl dd {
-  padding: 0 16px;
-  margin-bottom: 16px;
+    padding: 0 16px;
+    margin-bottom: 16px;
 }
 
 blockquote {
-  padding: 0 15px;
-  color: #777;
-  border-left: 4px solid #ddd;
+    padding: 10px 10px 10px 16px;
+    border-left: 2px solid rgba(88, 157, 246, 0.8);
+    border-radius: 0 3px 3px 0;
 }
 
 blockquote > :first-child {
-  margin-top: 0;
+    margin-top: 0;
 }
 
 blockquote > :last-child {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 table {
-  display: block;
-  width: 100%;
-  overflow: auto;
-  word-break: normal;
-  word-break: keep-all;
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: normal;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-size: 1em;
 }
 
 table th {
-  font-weight: bold;
+    font-weight: bold;
 }
 
 table th,
 table td {
-  padding: 6px 13px;
-  border: 1px solid #ddd;
+    padding: 6px 13px;
+    border: 1px solid;
+    background: transparent;
 }
 
 table tr {
-  background-color: #fff;
-  border-top: 1px solid #ccc;
+    border-top: 1px solid;
 }
 
 img {
-  max-width: 100%;
-  box-sizing: border-box;
+    max-width: 100%;
+    box-sizing: border-box;
 }
 
 code {
-  padding: 0;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-  margin: 0;
-  font-size: 85%;
-  background-color: rgba(0, 0, 0, 0.04);
-  border-radius: 3px;
-}
-
-code:before,
-code:after {
-  letter-spacing: -0.2em;
-  content: "\00a0";
+    font: 0.9em "JetBrains Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    padding: 0.2em 0.4em;
+    margin: 2px;
+    border-radius: 3px;
 }
 
 pre > code {
-  padding: 0;
-  margin: 0;
-  font-size: 100%;
-  word-break: normal;
-  white-space: pre;
-  background: transparent;
-  border: 0;
+    padding: 0;
+    margin: 0;
+    font-size: 100%;
+    word-break: normal;
+    white-space: pre;
+    background: transparent;
+    border: 0;
 }
 
 .highlight {
-  margin-bottom: 16px;
+    margin-bottom: 16px;
 }
 
 .highlight pre,
 pre {
-  padding: 16px;
-  overflow: auto;
-  font-size: 85%;
-  line-height: 1.45;
-  background-color: #f7f7f7;
-  border-radius: 3px;
-}
-
-.highlight pre {
-  margin-bottom: 0;
-  word-break: normal;
-}
-
-pre {
-  word-wrap: normal;
+    font: 0.85em "JetBrains Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    padding: 16px;
+    overflow: auto;
+    line-height: 1.45;
+    border-radius: 3px;
 }
 
 pre code {
-  display: inline;
-  max-width: initial;
-  padding: 0;
-  margin: 0;
-  overflow: initial;
-  line-height: inherit;
-  word-wrap: normal;
-  background-color: transparent;
-  border: 0;
+    display: inline;
+    max-width: initial;
+    padding: 0;
+    margin: 0;
+    overflow: initial;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0;
 }
 
 pre code:before,
 pre code:after {
-  content: normal;
+    content: normal;
 }
 
 kbd {
-  display: inline-block;
-  padding: 3px 5px;
-  font-size: 11px;
-  line-height: 10px;
-  color: #555;
-  vertical-align: middle;
-  background-color: #fcfcfc;
-  border: solid 1px #ccc;
-  border-bottom-color: #bbb;
-  border-radius: 3px;
-  box-shadow: inset 0 -1px 0 #bbb;
-}
-
-.pl-c {
-  color: #969896;
-}
-
-.pl-c1,
-.pl-s .pl-v {
-  color: #0086b3;
-}
-
-.pl-e,
-.pl-en {
-  color: #795da3;
-}
-
-.pl-s .pl-s1,
-.pl-smi {
-  color: #333;
-}
-
-.pl-ent {
-  color: #63a35c;
-}
-
-.pl-k {
-  color: #a71d5d;
-}
-
-.pl-pds,
-.pl-s,
-.pl-s .pl-pse .pl-s1,
-.pl-sr,
-.pl-sr .pl-cce,
-.pl-sr .pl-sra,
-.pl-sr .pl-sre {
-  color: #183691;
-}
-
-.pl-v {
-  color: #ed6a43;
-}
-
-.pl-id {
-  color: #b52a1d;
-}
-
-.pl-ii {
-  background-color: #b52a1d;
-  color: #f8f8f8;
-}
-
-.pl-sr .pl-cce {
-  color: #63a35c;
-  font-weight: bold;
-}
-
-.pl-ml {
-  color: #693a17;
-}
-
-.pl-mh,
-.pl-mh .pl-en,
-.pl-ms {
-  color: #1d3e81;
-  font-weight: bold;
-}
-
-.pl-mq {
-  color: #008080;
-}
-
-.pl-mi {
-  color: #333;
-  font-style: italic;
-}
-
-.pl-mb {
-  color: #333;
-  font-weight: bold;
-}
-
-.pl-md {
-  background-color: #ffecec;
-  color: #bd2c00;
-}
-
-.pl-mi1 {
-  background-color: #eaffea;
-  color: #55a532;
-}
-
-.pl-mdr {
-  color: #795da3;
-  font-weight: bold;
-}
-
-.pl-mo {
-  color: #1d3e81;
-}
-
-kbd {
-  display: inline-block;
-  padding: 3px 5px;
-  font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  line-height: 10px;
-  color: #555;
-  vertical-align: middle;
-  background-color: #fcfcfc;
-  border: solid 1px #ccc;
-  border-bottom-color: #bbb;
-  border-radius: 3px;
-  box-shadow: inset 0 -1px 0 #bbb;
+    font: 0.9em "JetBrains Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    padding: 0.2em 0.4em;
+    margin: 2px;
+    border: solid 1px #d1d1d1 !important;
+    border-radius: 3px;
 }
 
 .task-list-item {
-  list-style-type: none;
+    list-style-type: none;
 }
 
 .task-list-item + .task-list-item {
-  margin-top: 3px;
+    margin-top: 3px;
 }
 
 .task-list-item input {
-  margin: 0 0.35em 0.25em -0.6em;
-  vertical-align: middle;
+    margin: 0 0.35em 0.25em -0.6em;
+    vertical-align: middle;
 }
 
 :checked + .radio-label {
-  z-index: 1;
-  position: relative;
-  border-color: #4078c0;
+    z-index: 1;
+    position: relative;
 }
 
 span.user-del {
-  text-decoration: line-through;
+    text-decoration: line-through;
 }
 
 ::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-  background-color: inherit;
+    width: 6px;
+    height: 6px;
 }
 
 ::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 10px;
-  /*border: 2px solid #f6f6f6;*/
-  background-color: #959595;
-}
-
-::-webkit-scrollbar-track {
-  background-color: #f6f6f6;
+    -webkit-border-radius: 10px;
 }
 
 ::-webkit-scrollbar-track:vertical {
-  -webkit-box-shadow: -1px 0 0px #ededed;
-}
-
-::-webkit-scrollbar-track:horizontal {
-  -webkit-box-shadow: 0 -1px 0px #ededed;
+    -webkit-box-shadow: -1px 0 0 #ededed;
 }
 
 ::-webkit-scrollbar-track {
-  background-color: transparent;
+    background-color: transparent;
 }
 
 ::-webkit-scrollbar {
-  width: 7px;
+    width: 6px;
 }
index 5da23e4e0ab8f1e9f6fb6edd3bac60d0a9a81b3d..241ea4a31f9062075b88f35a4c4638c5f98fbbf7 100644 (file)
@@ -33,56 +33,64 @@ internal object PreviewColorThemeStyles {
         "rgba($red, $blue, $green, ${alpha / 255.0})"
       }
       val contrastedForeground = defaultForeground.contrast(0.1)
-      val contrastedBackground = panelBackground.contrast(0.1)
       val linkColor = getAttributes(EditorColors.REFERENCE_HYPERLINK_COLOR).foregroundColor
       // language=CSS
       return """
-        body {
-          background-color: ${defaultBackground.webRgba()};
-          color: ${defaultForeground.webRgba()};
-        }
-        a {
-          color: ${linkColor.webRgba()};
-        }
-        hr {
-          background-color: ${panelBackground.webRgba()};
-        }
-        h6 {
-          color: ${contrastedForeground.webRgba()};
-        }
-        pre {
-          background-color: ${panelBackground.webRgba()};
-        }
-        pre > code {
-          color: ${defaultForeground.webRgba()};
-        }
-        table tr {
-          color: ${defaultForeground.webRgba()};
-        }
-        table th, table td, table tr {
-          background-color: ${defaultBackground.webRgba()};
-          border-color: ${defaultBackground.contrast(0.85).webRgba()};
-        }
-        table tr:nth-child(even) td {
-          background-color: ${defaultBackground.contrast(0.93).webRgba()};
-        }
-        blockquote {
-          border-left-color: ${contrastedBackground.webRgba()};
-        }
-        blockquote > p {
-          color: ${contrastedForeground.webRgba()};
-        }
-        :checked + .radio-label {
-          border-color: ${panelBackground.webRgba()};
-        }
-        ::-webkit-scrollbar-thumb {
-          background-color: $scrollbarColor;
-        }
+              body {
+                  background-color: ${defaultBackground.webRgba()};
+                  color: ${defaultForeground.webRgba()};
+              }
+              
+              p, ul, ol, dl {
+                  color: ${defaultForeground.webRgba()};
+              }
+              
+              a {
+                  color: ${linkColor.webRgba()};
+              }
+              
+              hr {
+                  background-color: ${panelBackground.webRgba()};
+              }
+              
+              h6 {
+                  color: ${contrastedForeground.webRgba()};
+              }
+              
+              pre, code, blockquote {
+                  background-color: ${panelBackground.webRgba(alpha = 0.6)};
+                  color: ${defaultForeground.webRgba()};
+              }
+              
+              table {
+                  color: ${defaultForeground.webRgba()};
+              }
+
+              table tr {
+                  border-top: ${panelBackground.webRgba()};  
+                  color: ${defaultForeground.webRgba()};
+              }
+              table th, table td, table tr {
+                  background-color: ${defaultBackground.webRgba()};
+                  border-color: ${defaultBackground.contrast(0.85).webRgba()};
+              }
+              
+              table tr:nth-child(even) td {
+                  background-color: ${defaultBackground.contrast(0.93).webRgba()};
+              }
+              
+              :checked {
+                  border-color: ${panelBackground.webRgba()};
+              }
+              
+              ::-webkit-scrollbar-thumb {
+                  background-color: $scrollbarColor;
+              }
       """.trimIndent()
     }
   }
 
-  private fun Color.webRgba() = "rgba($red, $green, $blue, $alpha)"
+  private fun Color.webRgba(alpha: Double = this.alpha.toDouble()) = "rgba($red, $green, $blue, $alpha)"
 
   /**
    * Simple linear contrast function.