fix: inline code block style (#302)

Author: josStorer

src/_locales/in/main.json

@@ -54,7 +54,7 @@
   "Summarize Page": "Ringkasan Halaman",
   "Translate": "Terjemahkan",
   "Translate (Bidirectional)": "Terjemahkan (Dua Arah)",
-  "Translate (To English)" : "Terjemahkan (ke Bahasa Inggris)"												 
+  "Translate (To English)": "Terjemahkan (ke Bahasa Inggris)",
   "Summary": "Ringkasan",
   "Polish": "Perbaikan",
   "Sentiment Analysis": "Analisis Sentimen",
@@ -100,7 +100,7 @@
   "Open Conversation Window": "Buka Jendela Percakapan",
   "Store to Independent Conversation Page": "Simpan ke Halaman Percakapan Independen",
   "Keep Conversation Window in Background": "Biarkan jendela percakapan di latar belakang, sehingga Anda dapat menggunakan pintasan keyboard untuk memanggilnya di program mana pun",
-  "Max Response Token Length": "Panjang Token Respon Maksimum"
+  "Max Response Token Length": "Panjang Token Respon Maksimum",
   "Max Conversation Length": "Panjang Percakapan Maksimum",
   "Always pin the floating window": "Selalu selipkan jendela mengambang",
   "Export": "Ekspor",
@@ -111,5 +111,5 @@
   "API Params": "Parameter API",
   "API Url": "URL API",
   "Others": "Lain-lain",
-  "API Modes": "Mode API"													   	   										  
+  "API Modes": "Mode API"
 }

src/content-script/styles.scss

@@ -9,13 +9,17 @@
     --theme-color: #202124;
     --theme-border-color: #3c4043;
     --dragbar-color: #3c4043;
+    --color-neutral-muted: rgba(110, 118, 129, 0.4);
+    --code-background-color: rgb(13, 17, 23);
   }
   @media screen and (prefers-color-scheme: light) {
     @import 'highlight.js/scss/github.scss';
     --font-color: #24292f;
     --theme-color: #eaecf0;
     --theme-border-color: #aeafb2;
     --dragbar-color: #dfe0e1;
+    --color-neutral-muted: rgba(150, 160, 170, 0.3);
+    --code-background-color: rgb(255, 255, 255);
   }
 }
 
@@ -27,6 +31,8 @@
   --theme-color: #202124;
   --theme-border-color: #3c4043;
   --dragbar-color: #3c4043;
+  --color-neutral-muted: rgba(110, 118, 129, 0.4);
+  --code-background-color: rgb(13, 17, 23);
 }
 
 [data-theme='light'] {
@@ -37,6 +43,8 @@
   --theme-color: #eaecf0;
   --theme-border-color: #aeafb2;
   --dragbar-color: #ccced0;
+  --color-neutral-muted: rgba(150, 160, 170, 0.3);
+  --code-background-color: rgb(255, 255, 255);
 }
 
 .chatgptbox-sidebar-free {
@@ -163,19 +171,27 @@
     line-height: 1.6;
     border-radius: 8px;
     word-break: break-word;
+
     pre {
       margin-top: 10px;
       padding: 0;
+
+      code {
+        background-color: var(--code-background-color);
+      }
     }
 
     p {
       margin: 0 0 10px;
     }
 
     code {
+      padding: 0.2em 0.4em;
+      margin: 0;
       white-space: pre-wrap;
       word-break: break-word;
       border-radius: 8px;
+      background-color: var(--color-neutral-muted);
 
       .hljs {
         padding: 0;
@@ -210,6 +226,7 @@
     p {
       color: #ec4336;
     }
+
     color: #ec4336;
   }