Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Fonts (5.4.7) - Family & Size settings do not affect hidden view used for text cursor/selection #1362

Open
dbarbuzzi opened this issue Mar 22, 2024 · 1 comment
Labels
bug 🐛 Something isn't working

Comments

@dbarbuzzi
Copy link

dbarbuzzi commented Mar 22, 2024

This seems to be a reoccurrence of #1354 presumably related to changes on GitHub’s end. In the screenshot provided, notice that the highlighted selection only covers the lines partially, however, this selection includes the full lines.

Digging around with Inspect Element, while #read-only-cursor-text-area is still a valid selector for this element on such a page, it seems that the custom styles are being overwritten:

  • a rule for the selector .react-blob-print-hide overrides the custom font-family value
  • an in-line/element.style rule is overriding the custom font-size value

This appears to be resolved locally when adding .react-blob-print-hide to the list of selectors in the stylesheet:

diff --git a/github-custom-fonts.user.css b/github-custom-fonts.user.css
index 0960889f..399d9e1a 100644
--- a/github-custom-fonts.user.css
+++ b/github-custom-fonts.user.css
@@ -15,7 +15,7 @@
 @-moz-document regexp("^https?://((education|gist|graphql|guides|raw|resources|status|developer|support|vscode-auth)\\.)?github\\.com/((?!generated_pages/preview).)*$"), regexp("^https?://www\.zuora\.com.*github\.com.*"), domain("githubusercontent.com"), domain("www.githubstatus.com"), domain("stylishthemes.github.io") {
   pre, code, tt, kbd:not(.badmono), samp, .blob-code, .file-data pre, .line-data,
   #gist-form .file .input textarea, .blob-code-inner, .react-code-text, .jujkut,
-  #read-only-cursor-text-area {
+  #read-only-cursor-text-area, .react-blob-print-hide {
-     font-family: var(--ghd-font-family), Consolas, "Liberation Mono", Menlo, Courier, monospace;
+     font-family: var(--ghd-font-family), Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
     font-feature-settings: var(--ghd-font-feature-settings);
     font-variant-ligatures: var(--ghd-font-variant-ligatures);
-    font-size: var(--ghd-font-size);
+    font-size: var(--ghd-font-size) !important;

Edit: Include the required addition of !important to the font-family and font-size values.

@dbarbuzzi dbarbuzzi added the bug 🐛 Something isn't working label Mar 22, 2024
@ian-h-chamberlain
Copy link

Thank you for digging in! This was driving me crazy and I couldn't figure out what selectors I needed to make it work properly, but with your changes my selections look seamless + natural again. 🙏 much appreciated

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants