Freely modify overtype styles.

Author: WebsByTodd

browser-extension/src/entrypoints/content.ts

@@ -10,7 +10,7 @@ export default defineContentScript({
       "new_comment_field"
     ) as HTMLTextAreaElement | null;
     if (ghCommentBox) {
-      const overtypeContainer = modifyGithubDOM(ghCommentBox);
+      const overtypeContainer = modifyDOM(ghCommentBox);
       new OverType(overtypeContainer, {
         placeholder: "Add your comment here...",
         autoResize: true,
@@ -23,42 +23,15 @@ export default defineContentScript({
   runAt: "document_end",
 });
 
-function modifyGithubDOM(ghCommentBox: HTMLTextAreaElement): HTMLElement {
-  ghCommentBox.classList.add("overtype-input");
-  const previewDiv = document.createElement("div");
-  previewDiv.classList.add("overtype-preview");
-  ghCommentBox.insertAdjacentElement("afterend", previewDiv);
-  const ghCommentWrapper = ghCommentBox.parentElement!.closest("div")!;
-  ghCommentWrapper.classList.add("overtype-wrapper");
-  injectGithubStyles({
-    commentBox: ghCommentBox,
-    commentWrapper: ghCommentWrapper,
-    overtypePreviewDiv: previewDiv,
-  });
-  const ghCommentContainer = ghCommentWrapper.parentElement!.closest("div")!;
-  ghCommentContainer.classList.add("overtype-container");
-  return ghCommentContainer.parentElement!.closest("div")!;
-}
-
-interface GithubDOM {
-  commentBox: HTMLTextAreaElement;
-  commentWrapper: HTMLDivElement;
-  overtypePreviewDiv: HTMLDivElement;
-}
-function injectGithubStyles({
-  commentBox,
-  commentWrapper,
-  overtypePreviewDiv,
-}: GithubDOM) {
-  commentBox.placeholder = "Add your comment here...";
-  commentBox.style.fontFamily = "inherit !important";
-  commentBox.style.fontSize = "var(--text-body-size-medium) !important";
-  overtypePreviewDiv.style.fontFamily = "inherit !important";
-  overtypePreviewDiv.style.fontSize = "var(--text-body-size-medium) !important";
-  commentWrapper.style.margin = "var(--base-size-8) !important";
-  commentWrapper.style.border =
-    "var(--borderWidth-thin) solid var(--borderColor-default, var(--color-border-default)) !important";
-  commentWrapper.style.borderRadius = "var(--borderRadius-medium) !important";
-  commentWrapper.style.width =
-    "calc(100% - var(--stack-padding-condensed, 8px) * 2) !important";
+function modifyDOM(overtypeInput: HTMLTextAreaElement): HTMLElement {
+  overtypeInput.classList.add("overtype-input");
+  const overtypePreview = document.createElement("div");
+  overtypePreview.classList.add("overtype-preview");
+  overtypeInput.insertAdjacentElement("afterend", overtypePreview);
+  const overtypeWrapper = overtypeInput.parentElement!.closest("div")!;
+  overtypeWrapper.classList.add("overtype-wrapper");
+  overtypeInput.placeholder = "Add your comment here...";
+  const overtypeContainer = overtypeWrapper.parentElement!.closest("div")!;
+  overtypeContainer.classList.add("overtype-container");
+  return overtypeContainer.parentElement!.closest("div")!;
 }

browser-extension/src/overtype/styles.js

@@ -10,8 +10,8 @@ import { themeToCSSVars } from "./themes.js";
  * @param {Object} options - Configuration options
  * @returns {string} Complete CSS string
  */
-export function generateStyles(options = {}) {
-  const {
+export function generateStyles(options = githubOptions) {
+  let {
     fontSize = "14px",
     lineHeight = 1.6,
     /* System-first, guaranteed monospaced; avoids Android 'ui-monospace' pitfalls */
@@ -21,6 +21,9 @@ export function generateStyles(options = {}) {
     mobile = {},
   } = options;
 
+  fontFamily = "inherit !important"
+  fontSize = "var(--text-body-size-medium) !important"
+
   // Generate mobile overrides
   const mobileStyles =
     Object.keys(mobile).length > 0
@@ -48,9 +51,9 @@ export function generateStyles(options = {}) {
     /* Middle-ground CSS Reset - Prevent parent styles from leaking in */
     .overtype-container * {
       /* Box model - these commonly leak */
-      margin: 0 !important;
+      /* margin: 0 !important; */
       padding: 0 !important;
-      border: 0 !important;
+      /* border: 0 !important; */
       
       /* Layout - these can break our layout */
       /* Don't reset position - it breaks dropdowns */
@@ -111,7 +114,7 @@ export function generateStyles(options = {}) {
     
     .overtype-wrapper {
       position: relative !important; /* Override reset - needed for absolute children */
-      width: 100% !important;
+      /* width: 100% !important; */
       height: 100% !important; /* Take full height of grid cell */
       min-height: 60px !important; /* Minimum usable height */
       overflow: hidden !important;
@@ -265,7 +268,7 @@ export function generateStyles(options = {}) {
 
     /* Markdown element styling - NO SIZE CHANGES */
     .overtype-wrapper .overtype-preview .header {
-      font-weight: bold !important;
+      font-weight: normal !important;
     }
 
     /* Header colors */
@@ -284,7 +287,7 @@ export function generateStyles(options = {}) {
     .overtype-wrapper .overtype-preview h2,
     .overtype-wrapper .overtype-preview h3 {
       font-size: inherit !important;
-      font-weight: bold !important;
+      font-weight: normal !important;
       margin: 0 !important;
       padding: 0 !important;
       display: inline !important;
@@ -321,7 +324,7 @@ export function generateStyles(options = {}) {
     /* Bold text */
     .overtype-wrapper .overtype-preview strong {
       color: var(--strong, #ee964b) !important;
-      font-weight: bold !important;
+      font-weight: normal !important;
     }
 
     /* Italic text */