Advertisement
Alantag26

Markdown enhanced css

May 16th, 2021
1,206
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.52 KB | None | 0 0
  1.  
  2. /* Please visit the URL below for more information: */
  3. /*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
  4.  
  5.  
  6. .markdown-preview.markdown-preview {
  7.   // modify your style here
  8.   // background-color: blue;
  9.   background-color: #282c34;
  10.  
  11.   ol {
  12.     list-style: none;
  13.     counter-reset: my-awesome-counter;
  14.   }
  15.  
  16.   ol li {
  17.     counter-increment: my-awesome-counter;
  18.     padding-left: 20px;
  19.   }
  20.  
  21.   ol li::before {
  22.     // content: counter(my-awesome-counter, lower-alpha) ")";
  23.     content: counter(my-awesome-counter) ")";
  24.     font-weight: bold;
  25.     position: absolute;
  26.     transform: translateX(-40px);
  27.     width: 25px;
  28.     // margin-right: 20px;
  29.     text-align: end;
  30.   }
  31.  
  32.   h1,
  33.   h2,
  34.   h3,
  35.   h4,
  36.   h5,
  37.   h6 {
  38.     color: #abb2bf;
  39.     font-weight: 400;
  40.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  41.   }
  42.  
  43.   h1 {
  44.     font-size: 25px;
  45.     border-bottom: 1px solid #4f5259;
  46.   }
  47.  
  48.   h2 {
  49.     font-size: 20px;
  50.   }
  51.  
  52.   h3 {
  53.     font-size: medium;
  54.   }
  55.  
  56.   h4 {
  57.     font-size: medium;
  58.     font-weight: bold;
  59.   }
  60.  
  61.   h5 {
  62.     font-size: small;
  63.     font-weight: bold;
  64.   }
  65.  
  66.   h6 {
  67.     font-size: 25px;
  68.   }
  69.  
  70.   p {
  71.     color: #abb2bf;
  72.     font-size: 16px;
  73.   }
  74.  
  75.   strong {
  76.     color: #d6dbe2;
  77.   }
  78.  
  79.   strong>em,
  80.   em>strong,
  81.   b>i,
  82.   i>b {
  83.     font-style:normal;
  84.     font-weight:normal;
  85.     text-decoration:underline;
  86. }
  87.  
  88.  
  89. }
  90.  
  91. .markdown-preview > *:nth-child(2) {
  92.   margin-top: 0px;
  93. }
  94.  
  95. .markdown-preview > *:last-child::after {
  96.   padding-bottom: 300px;
  97.   // height: 500px;
  98.   // width: 2px;
  99.   background-color: red;
  100.   // z-index: 1000;
  101.   content: "a";
  102.   visibility: hidden;
  103.   // top: 0;
  104.   position: relative;
  105.   // margin-bottom: 500px;
  106.   // transform: translateY(-500px);
  107.  
  108. }
  109.  
  110. .markdown-preview > * {
  111.   margin-left: 20px;
  112.   margin-right: 20px;
  113.   // background-color: green;
  114. }
  115.  
  116. .markdown-preview > pre[class*="language-"]{
  117.   background-color: #1c1e23!important;
  118.   font-size: 16px!important;
  119.  
  120. }
  121.  
  122. #input {
  123.   position: absolute;
  124.   width: 100%;
  125.   left: -10px;
  126.   height: 40px;
  127.   transform: translateY(-10px);
  128.   cursor: pointer;
  129.   z-index: 5;
  130.   opacity: 0;
  131. }
  132. #input:checked ~ .collapse{
  133.   /* background-color: green; */
  134.   max-height: 300vh;
  135.   transform: translateY(0px);
  136.   opacity: 1;
  137. }
  138. .collapse{
  139.   transition: all 0.5s;
  140.   max-height: 0;
  141.   transform: translateY(20px);
  142.   opacity: 0;
  143. }
  144. #label{
  145.   width: 100%;
  146.   height: 30px;
  147.   text-decoration: underline;
  148.   top: 0;
  149.   /* font-weight: bold */
  150.   /* margin-left: 30px; */
  151. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement