Merge pull request #166 from vichydra/fix/tables

feat: fix style on tables

Author: zugdev

static/style/inverted-style.css

@@ -528,6 +528,17 @@
   .preview img {
     max-width: 100%;
   }
+  .preview table {
+    border-collapse: collapse;
+    margin-bottom: 12px;
+  }
+  .preview th {
+    font-weight: bold;
+  }
+  .preview th, 
+  .preview td {
+    padding: 6px 13px;
+  }
   .preview pre {
     position: relative;
     display: inline-block;

static/style/special.css

@@ -1,8 +1,12 @@
 :root {
   --dark-background: #000210;
   --dark-background-half: #00021080;
+  --alt-dark-background: #808080;
+  --alt-dark-background-half: #80808020;
   --light-background: #f8f8f8;
   --light-background-half: #f8f8f880;
+  --alt-light-background: #7f7f7f;
+  --alt-light-background-half: #7f7f7f20;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -13,14 +17,12 @@
   #issues-container > div,
   .preview {
     background-color: var(--dark-background);
-    border-color: var(--border-color);
-    border-color: #80808020;
+    border-color: var(--alt-dark-background-half);
   }
   #issues-container > div,
   .preview > .preview-content {
     box-shadow: inset 0 0 24px #0080ff08;
   }
-
   .toolbar.ready {
     background-color: var(--dark-background-half);
   }
@@ -36,16 +38,21 @@
     filter: blur(0px) drop-shadow(0 0 8px #fff);
   }
   .preview-body::-webkit-scrollbar-track {
-    background: var(--dark-background); /* Background */
+    background: var(--dark-background);
   }
-
   .preview-body::-webkit-scrollbar-thumb {
-    background-color: var(--light-background-half); /* Scrollbar thumb */
+    background-color: var(--light-background-half);
   }
-
   .preview-body::-webkit-scrollbar-thumb:hover {
     background-color: var(--light-background);
   }
+  .preview th,
+  .preview td{
+    border: 1px solid var(--alt-dark-background);
+  }
+  .preview tr:nth-child(even) {
+    background-color: var(--alt-dark-background-half);
+  }
 }
 
 @media (prefers-color-scheme: light) {
@@ -82,16 +89,21 @@
     background-image: none;
   }
   .preview-body::-webkit-scrollbar-track {
-    background: var(--light-background); /* Background */
+    background: var(--light-background);
   }
-
   .preview-body::-webkit-scrollbar-thumb {
-    background-color: var(--dark-background-half); /* Scrollbar thumb */
+    background-color: var(--dark-background-half);
   }
-
   .preview-body::-webkit-scrollbar-thumb:hover {
     background-color: var(--dark-background);
   }
+  .preview th,
+  .preview td{
+    border: 1px solid var(--alt-light-background);
+  }
+  .preview tr:nth-child(even) {
+    background-color: var(--alt-light-background-half);
+  }
 }
 
 @keyframes highlight-dark-mode {

static/style/style.css

@@ -528,6 +528,17 @@
   .preview img {
     max-width: 100%;
   }
+  .preview table {
+    border-collapse: collapse;
+    margin-bottom: 12px;
+  }
+  .preview th {
+    font-weight: bold;
+  }
+  .preview th, 
+  .preview td {
+    padding: 6px 13px;
+  }
   .preview pre {
     position: relative;
     display: inline-block;