From d70e6c62496276467084c49dfa177156e851b21c Mon Sep 17 00:00:00 2001
From: tarikjaber <55803936+tarikjaber@users.noreply.github.com>
Date: Thu, 6 Apr 2023 19:16:48 -0400
Subject: [PATCH] Fix issues with border radius

---
 index.js   |  3 +++
 styles.css | 31 +++++++++++++++++++++++--------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/index.js b/index.js
index dea3d0b..6835e23 100644
--- a/index.js
+++ b/index.js
@@ -30,13 +30,16 @@ printBtn.addEventListener('click', () => {
     updateCode();
     let optGroup = themeSelector.options[themeSelector.selectedIndex].parentNode;
     const lineNumbers = document.querySelectorAll('.line-number');
+    const root = document.documentElement;
 
     if (optGroup.label === 'Dark') {
+        root.style.setProperty('--border-thickness', '0px');
         for (let i = 0; i < lineNumbers.length; i++) {
             lineNumbers[i].style.backgroundColor = '#353b48';
             lineNumbers[i].style.color = '#dfe6e9';
         }
     } else {
+        root.style.setProperty('--border-thickness', '1px');
         for (let i = 0; i < lineNumbers.length; i++) {
             lineNumbers[i].style.backgroundColor = '#dcdde1';
             lineNumbers[i].style.color = '#2d3436';
diff --git a/styles.css b/styles.css
index 65198f2..1d13a7c 100644
--- a/styles.css
+++ b/styles.css
@@ -3,6 +3,10 @@ body {
   margin: 0px;
 }
 
+:root {
+  --border-thickness: 1px;
+}
+
 select {
   padding: 6px;
   border-radius: 5px;
@@ -58,7 +62,6 @@ button:active {
   background-color: #0077b6;
 }
 
-
 textarea {
   padding: 10px;
   margin-top: 20px;
@@ -85,31 +88,32 @@ pre {
 
 #code-container {
   margin: 0;
+  border-radius: 5px;
   max-width: 100%;
 }
 
 #code-container .code-line:first-of-type .line-number {
-  padding-top: 10px;
-  border-top-left-radius: 10px;
+  padding-top: 11px;
 }
 
 #code-container .code-line:last-of-type .line-number {
-  padding-bottom: 10px;
-  border-bottom-left-radius: 10px;
+  padding-bottom: 11px;
 }
 
 #code-container .code-line:first-of-type #code {
   padding-top: 10px;
-  border-top-right-radius: 10px;
+  border-top: var(--border-thickness) solid #c9d1d9;
 }
 
 #code-container .code-line:last-of-type #code {
   padding-bottom: 10px;
-  border-bottom-right-radius: 10px;
+  border-bottom: var(--border-thickness) solid #c9d1d9;
 }
 
 #code {
   font-size: 14px;
+  border: none;
+  border-right: var(--border-thickness) solid #c9d1d9;
   font-family: 'Fira Code', monospace;
   white-space: pre-wrap;
   padding: 0px 11px;
@@ -155,7 +159,7 @@ a {
 
 @media print {
   body {
-    color-adjust: exact;
+    print-color-adjust: exact;
     -webkit-print-color-adjust: exact;
   }
 
@@ -195,6 +199,7 @@ p {
 
 ::-webkit-scrollbar-track {
   background: #f1f1f1;
+  border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -204,3 +209,13 @@ p {
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
+
+textarea::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+}
+
+
+
+
+
+