Merge pull request #60 from KevinBatdorf/improve-line-number-contrast

Improve line number readability
KevinBatdorf · Nov 17, 2022 · 2876fec · 2876fec
2 parents 37dcbde + bf5f74d
commit 2876fec
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/src/editor/components/HeaderSelect.tsx b/src/editor/components/HeaderSelect.tsx
@@ -43,7 +43,7 @@ export const HeaderSelect = ({ attributes, onClick }: HeaderSelectProps) => {
                         id={`code-block-pro-header-${slug}`}
                         type="button"
                         onClick={() => onClick(slug)}
-                        className="p-0 border flex items-start w-full text-left outline-none cursor-pointer no-underline ring-offset-2 ring-offset-white focus:shadow-none focus:ring-wp overflow-x-scroll">
+                        className="p-0 border flex items-start w-full text-left outline-none cursor-pointer no-underline ring-offset-2 ring-offset-white focus:shadow-none focus:ring-wp overflow-x-auto">
                         <span className="pointer-events-none w-full">
                             <HeaderType
                                 headerType={slug}

diff --git a/src/editor/controls/Sidebar.tsx b/src/editor/controls/Sidebar.tsx
@@ -79,6 +79,7 @@ export const SidebarControls = ({
                             <TextControl
                                 id="code-block-pro-header-text"
                                 spellCheck={false}
+                                autoComplete="off"
                                 label={__('Header Text', 'code-block-pro')}
                                 placeholder={languages[language]}
                                 onChange={(headerString) => {
@@ -168,6 +169,7 @@ export const SidebarControls = ({
                                 <TextControl
                                     id="code-block-pro-line-number-start"
                                     spellCheck={false}
+                                    autoComplete="off"
                                     label={__('Start from', 'code-block-pro')}
                                     onChange={(startingLineNumber) => {
                                         setAttributes({ startingLineNumber });

diff --git a/src/editor/editor.css b/src/editor/editor.css
@@ -40,7 +40,7 @@
     counter-increment: step calc(var(--cbp-line-number-start, 1) - 1);
 }
 .code-block-pro-editor.cbp-has-line-numbers pre .line:not(.cbp-line-number-disabled)::before {
-    @apply inline-block text-right opacity-30;
+    @apply inline-block text-right opacity-50;
     margin-right: 12px;
     content: counter(step);
     color: var(--cbp-line-number-color, #999);

diff --git a/src/front/style.css b/src/front/style.css
@@ -37,7 +37,7 @@
     counter-increment: step calc(var(--cbp-line-number-start, 1) - 1);
 }
 .wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(.code-block-pro-editor) pre code .line::before {
-    @apply inline-block text-right opacity-30 transition-opacity duration-500;
+    @apply inline-block text-right opacity-50 transition-opacity duration-500;
     margin-right: 12px;
     content: counter(step);
     color: var(--cbp-line-number-color, #999);
@@ -46,7 +46,7 @@
     counter-increment: step;
 }
 .wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(.code-block-pro-editor) pre code .line:hover::before {
-    @apply opacity-70;
+    @apply opacity-100;
 }
 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre * {
     font-family: inherit;
@@ -61,7 +61,7 @@
     padding: 0;
 }
 .wp-block-kevinbatdorf-code-block-pro:hover .code-block-pro-copy-button {
-    @apply opacity-40;
+    @apply opacity-50;
 }
 /* .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:active, */
 .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:hover {