noham/Code-to-PDF
1
0
Fork 0
mirror of https://github.com/NohamR/Code-to-PDF.git synced 2026-05-25 12:17:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix issues with border radius

Browse Source
This commit is contained in:
tarikjaber
2023-04-06 19:16:48 -04:00
parent c4ca4a2495
commit d70e6c6249
2 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.js
View File

@@ -30,13 +30,16 @@ printBtn.addEventListener('click', () => {
updateCode(); updateCode();
let optGroup = themeSelector.options[themeSelector.selectedIndex].parentNode; let optGroup = themeSelector.options[themeSelector.selectedIndex].parentNode;
const lineNumbers = document.querySelectorAll('.line-number'); const lineNumbers = document.querySelectorAll('.line-number');
const root = document.documentElement;
if (optGroup.label === 'Dark') { if (optGroup.label === 'Dark') {
root.style.setProperty('--border-thickness', '0px');
for (let i = 0; i < lineNumbers.length; i++) { for (let i = 0; i < lineNumbers.length; i++) {
lineNumbers[i].style.backgroundColor = '#353b48'; lineNumbers[i].style.backgroundColor = '#353b48';
lineNumbers[i].style.color = '#dfe6e9'; lineNumbers[i].style.color = '#dfe6e9';
} }
} else { } else {
root.style.setProperty('--border-thickness', '1px');
for (let i = 0; i < lineNumbers.length; i++) { for (let i = 0; i < lineNumbers.length; i++) {
lineNumbers[i].style.backgroundColor = '#dcdde1'; lineNumbers[i].style.backgroundColor = '#dcdde1';
lineNumbers[i].style.color = '#2d3436'; lineNumbers[i].style.color = '#2d3436';

31
styles.css
View File

@@ -3,6 +3,10 @@ body {
margin: 0px; margin: 0px;
} }
:root {
--border-thickness: 1px;
}
select { select {
padding: 6px; padding: 6px;
border-radius: 5px; border-radius: 5px;
@@ -58,7 +62,6 @@ button:active {
background-color: #0077b6; background-color: #0077b6;
} }
textarea { textarea {
padding: 10px; padding: 10px;
margin-top: 20px; margin-top: 20px;
@@ -85,31 +88,32 @@ pre {
#code-container { #code-container {
margin: 0; margin: 0;
border-radius: 5px;
max-width: 100%; max-width: 100%;
} }
#code-container .code-line:first-of-type .line-number { #code-container .code-line:first-of-type .line-number {
padding-top: 10px; padding-top: 11px;
border-top-left-radius: 10px;
} }
#code-container .code-line:last-of-type .line-number { #code-container .code-line:last-of-type .line-number {
padding-bottom: 10px; padding-bottom: 11px;
border-bottom-left-radius: 10px;
} }
#code-container .code-line:first-of-type #code { #code-container .code-line:first-of-type #code {
padding-top: 10px; padding-top: 10px;
border-top-right-radius: 10px; border-top: var(--border-thickness) solid #c9d1d9;
} }
#code-container .code-line:last-of-type #code { #code-container .code-line:last-of-type #code {
padding-bottom: 10px; padding-bottom: 10px;
border-bottom-right-radius: 10px; border-bottom: var(--border-thickness) solid #c9d1d9;
} }
#code { #code {
font-size: 14px; font-size: 14px;
border: none;
border-right: var(--border-thickness) solid #c9d1d9;
font-family: 'Fira Code', monospace; font-family: 'Fira Code', monospace;
white-space: pre-wrap; white-space: pre-wrap;
padding: 0px 11px; padding: 0px 11px;
@@ -155,7 +159,7 @@ a {
@media print { @media print {
body { body {
color-adjust: exact; print-color-adjust: exact;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
} }
@@ -195,6 +199,7 @@ p {
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: #f1f1f1; background: #f1f1f1;
border-radius: 5px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
@@ -204,3 +209,13 @@ p {
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #555; background: #555;
} }
textarea::-webkit-scrollbar-thumb {
border-radius: 4px;
}