Visual Studio Code Markdown Style

vscode-markdown.css

html{
  background-color: #343434;
  font-size: 14px;
  color: #404040;
}

body{
  width:700px;
  background-color: #e6e6e6;
  margin: auto;
  padding:0;
}

@media print {
  body{
    background-color: white;
  }

  h1 {
    page-break-before: always;
  }

  pre {
    display: none !important;
    margin:0;
    padding:0 !important;
  }

  ul > li >  ul {
    display: none !important;
  }

  /*
    When we have a li which contains more than the checkbock and its label,
    the converter wrapps those two elements inside a p tag which gets a margin.
    we remove it in the pdf to keep the list look
  */
  ul > li > p {
    margin:0;
  }

  h1 + p
  , h2 + p
  , h3 + p
  , h4 + p
  , h5 + p
  , h6 + p {
    display: none;
  }
}

@media screen {
  .wrapper {
    padding: 0.75rem;
  }

  h1{
    border-top: 1px solid #5c5c5c;
  }
 
  h2,h3,h4,h5,h6{
    padding-top:0.75rem;
    border-top: 1px solid #b4b4b4;
    margin: 0;
  }

  pre {
    max-height:1rem;
    overflow: hidden;
    transition: 1s max-height;
    color: white;
  }

  pre > code{
    font-size: 11px;
    line-height: 11px;
    visibility: hidden;
    transition: 1s visibility;
  }

  pre:hover {
    height:auto;
    max-height:1000rem;
    overflow:auto;
    transition-delay: 0.5s;
  }

  pre:hover > code{
    visibility: visible;
    transition-delay: 0.5s;
  }
}


ul{
 list-style: none;
 padding: 0;
}

.toc > ul{
  padding-left: 1.8rem;
  list-style-type: decimal-leading-zero;
}

ul > li > ul {
  padding-left: 1.8rem;
}

ul > li > ul > li:before {
  content: '>';
  padding-right: 0.75rem;
}

ul > li > input { 
  margin-right: 0.75rem;
}

ul > li > label:hover {
  color: #1e80af;
}

ul > li > label:hover
, ul > li > input:hover{
  cursor: pointer;
}

a {
  color: #1e80af;
  text-decoration: none;
}

a:hover{
  color: #52b3e1;
  text-decoration: none;
  letter-spacing: 0.2px;
}

h1{
  text-align: center;
  border-bottom: none;
  padding-top:0.75rem 0;
}


h1 + .wrapper > h2:first-child, h2 + h3, h3 + h4, h4 + h5{
  padding-top:0;
  border-top: none;
}