d

styles/modules/markdown.module.scss

@@ -0,0 +1,141 @@
+// This file contains the markdown styles
+
+.markdown {
+  padding: 0 10px 0 10px;
+  color: var(--md-color-font);
+
+  .toolbar {
+    background-color: red;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding: 0 10px;
+    position: relative;
+    .copyBtn {
+      height: 30px;
+      width: 30px;
+      margin-top: 15px;
+      cursor: pointer;
+      position: absolute;
+      transition-delay: 2s, 4ms;
+      transition: all 50ms ease-in-out;
+
+      svg {
+        fill: #bdbdbd;
+        transition: all 50ms linear;
+        &:hover {
+          fill: var(--color-accent);
+        }
+      }
+    }
+  }
+  hr {
+    border: 1px solid var(--md-color-hr);
+    margin: 20px 0;
+  }
+
+  /* Texts */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--md-color-headline);
+    margin: 20px 0 10px 0;
+  }
+
+  p {
+    margin: 0px 0 10px 0;
+  }
+
+  /* Images */
+  img {
+    max-width: 100%;
+  }
+
+  /* Code */
+  code {
+    background-color: #282c34;
+    padding: 5px;
+    border-radius: 5px;
+    color: #fff;
+  }
+
+  pre {
+    overflow: auto;
+    word-wrap: normal;
+    white-space: pre;
+    display: block;
+
+    code {
+      display: block;
+      font-size: 1em;
+      text-indent: 0;
+      white-space: inherit;
+      background-color: transparent;
+      padding: 0px;
+      border-radius: 0px;
+    }
+  }
+
+  /* Lists */
+  ul,
+  ol {
+    list-style: inside;
+    li {
+      display: list-item;
+      line-height: 1.5em;
+    }
+  }
+
+  ul {
+    list-style-type: circle;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  /* Blockquotes */
+  .blockquote {
+    border-left: 5px solid var(--md-color-blockquote-border);
+    padding-left: 20px;
+    background-color: var(--md-color-blockquote-background);
+  }
+  /* Table */
+  table {
+    border-radius: 5px;
+    border-collapse: collapse;
+    width: 100%;
+    display: table;
+    overflow: auto;
+
+    thead,
+    tbody {
+      width: 100%;
+    }
+    thead th:nth-child(odd) {
+      color: #ffffff;
+      background: var(--md-color-table-col-odd-background);
+    }
+    tr {
+      background: var(--md-color-table-row-odd-background);
+    }
+    tr:nth-child(even) {
+      background: var(--md-color-table-row-even-background);
+    }
+    th,
+    td {
+      text-align: center;
+      padding: 8px;
+    }
+    td {
+      border-right: 1px solid #ffffff00;
+    }
+    th {
+      color: #ffffff;
+      background: var(--md-color-table-col-even-background);
+    }
+  }
+}