Support for "Notifications Preview for GitHub" extension

[darkred]

Using the "Notifications Preview for GitHub" 1.6.0 extension.

Currently the repo names in the extension's pop-over are barely readable:

Screenshot


If I'm not mistaken, it was styled ok some months ago. It would be great if the extension's pop-over was styled properly,
especially after the recent fix of https://github.com/tanmayrajani/notifications-preview-github/issues/70.

Thank you

---

Browser: Chrome 77.0.3865.90/Firefox 69.0.2, Stylus 1.5.6, GitHub Dark 1.22.109 Operating System:Windows 10 Link to page with the issue: https://github.com (provided that you have logged in and that you have unread notifications)

[the-j0k3r]

@darkred Thanks for bringing this to our attention.

In order to support new extensions, one of the maintainers needs to be a extension user, you could become such a maintainer, otherwise its unlikely this support will ever be added.

We could pass a temporary style that fixes this but we need the relevant class names in order to do this fix style. IT would be helpful also to have access to any stylesheets the addon uses and that those stylesheets are publicly available,

Thanks for your understanding.

[darkred]

you could become such a maintainer

My knowledge in CSS is unfortunately very limited so I won't be of any help as a maintainer.

We could pass a temporary style that fixes this

That would be great! 👍

What I may only contribute is posting the css code of style.css from its repo:

style.css

```css :root:root .NPG-dropdown { width: 750px; border: none; padding: 5px; color: rgb(36, 41, 46); right: -10px; margin-top: 5px; z-index: 101; } .NPG-dropdown .boxed-group { margin-bottom: 20px; } .NPG-dropdown .boxed-group:last-child { margin-bottom: 0 !important; } /* Removes text outline */ .NPG-dropdown .boxed-group .text-green { outline: none; } /* Loading animation */ .NPG-loading .octicon-bell { transform-origin: top; animation: npg-ding 0.5s infinite ease-out; } @keyframes npg-ding { 25% { transform: rotate(10deg); animation-timing-function: ease-in-out; } 75% { transform: rotate(-10deg); animation-timing-function: ease-in; } } /* Keep icon clickable when modal is open */ .NPG-container.active + .notification-indicator { z-index: 101; } /* Disable native tooltip when it has unread notifications */ .Header .notification-indicator[data-ga-click$=":unread"]::after { display: none; } /* Style the unread count */ /* Needs high specificity */ .notification-indicator .mail-status.unread:not(:empty) { width: auto; height: auto; padding: 2px; min-width: 1.5em; /* Position it so multiple digits don't go too far right */ left: 11px; transform: translateX(-30%); font-size: 10px; font-weight: bold; line-height: 0.7; border-radius: 1em; color: #24292f; text-align: center; } .participating .js-notifications-browser::before { position: absolute; top: -5px; bottom: -5px; left: 20px; z-index: -1; display: block; width: 2px; content: ""; background-color: #e6ebf1; } :root:root .NPG-dropdown.type-compact { width: auto; max-width: 750px; } .NPG-dropdown.type-compact .list-group-item-name { padding-right: 35px; } .NPG-dropdown.type-compact .boxed-group { margin-bottom: 6px; } .NPG-dropdown.type-compact .boxed-group h3 { padding-right: 50px; /* Avoids wrap with long repo names */ } /* Hide extra content */ .NPG-dropdown.type-compact .age, .NPG-dropdown.type-compact .AvatarStack { display: none !important; } .NPG-container.active .dropdown-menu-content { display: block; } ```

[the-j0k3r]

Try this, that CSS sheet only has 3 colors one of them is a background color, Ive made all them customizable, IDK if it will fix the problem either but there you go.

/* ==UserStyle==
@name           Notifications Preview Overrides
@namespace      StylishThemes
@version        1.0.0
@description    Custom colors for Notifications Preview for GitHub
@author         StylishThemes

@var color dropdown-text-color      "Dropdown text color" #ccc
@var color notification-text-color  "Notification text color" #24292f
@var color participating-text-color "Paticipating background color" #24292f

@preprocessor stylus
==/UserStyle== */
@-moz-document domain("github.com") {
  :root:root .NPG-dropdown {
    color: dropdown-text-color !important;
  }
  .notification-indicator .mail-status.unread:not(:empty) {
    color: notification-text-color !important;
  }
  .participating .js-notifications-browser::before {
    background-color: participating-text-color !important;
  }
}

If that doesnt work, you'll need to pass me a screenshot of the element being inspected

Heres a how to https://www.wikihow.com/Use-Inspect-Element-in-Mozilla-Firefox

[darkred]

It works fine! Thanks a lot!

[silverwind]

This seems like a rather simple extension we can support without actively using it. I'll add it to the generator later.

Styles for reference: https://github.com/tanmayrajani/notifications-preview-github/blob/master/extension/style.css

[fregante]

If you suggest some classes I should use to fix the extension, I can apply them without forcing you to directly support it.

The only issue I saw was the "grouped repos’ headers text color", which inherits a gray instead of a white.

[silverwind]

Seems I forgot about this issue.

Classes do not matter as long as the colors in use are the same GitHub uses. What could help us is a list of colors (or variables containing them) from your stylesheet so we make sure we don't miss any.

[the-j0k3r]

I though it was weird to see classes names like :root:root .NPG-dropdown

[fregante]

I don't have colors in my stylesheet, I just copy GitHub’s DOM from the notifications. The problem is that on the notifications page, the inherited color is black (which changes to white with your theme) while on the header it's gray and doesn't change (because the header is already black)

[silverwind]

I don't have colors in my stylesheet

You do, I pull these from the Chrome extension. The @-moz-document is an issue as stylus refuses to install those rules nested for some reason.

  /* notifications preview: "background-color: #e6ebf1" */
  .participating .js-notifications-browser::before {
    background-color: #444;
  }
  /* notifications preview: "background-color: #fff" */
  @-moz-document url-prefix('') {
    :root {
      background-color: #181818;
      background-image: none;
    }
  }
  /* notifications preview: "background-color: transparent" */
  @media (prefers-color-scheme: dark) {
    input:not([type]), input[type="number"], input[type="password"],
    input[type="search"], input[type="text"], input[type="url"], textarea {
      background-color: transparent;
    }
  }

[silverwind]

I really wonder where that @moz-document is coming from, I don't see it in https://github.com/tanmayrajani/notifications-preview-github/blob/master/extension/github-notifications-preview.css.

[silverwind]

Those do seem to be in the extension in file webext-base.ab94ddf9.css:

@-moz-document url-prefix('') {
    :root {
        background-color: #fff;
    }

    body {
        min-height: 250px; /* Without this there's a white space in dark mode */
    }

    body > * {
        margin-left: 6px;
        margin-right: 6px;
    }

    input[type='checkbox'] {
        vertical-align: -0.4em;
    }
}

I guess we need to cut those out somehow.

[fregante]

You're looking at the options’ CSS, this is the content script CSS (some of which is outdated and no longer applies): https://github.com/tanmayrajani/notifications-preview-github/blob/master/extension/github-notifications-preview.css

[fregante]

This is the problematic line: https://github.com/tanmayrajani/notifications-preview-github/blob/96eb14a983f67290c8237daae3fe10e17c46b6f6/extension/github-notifications-preview.css#L5

Normal:

• the site header color is white
• the extension overrides it with dark gray because the text is displayed in light gray

Dark:

• the site header color is white-ish
• the extension should use a white-ish color too

[silverwind]

I installed the Firefox version but don't see these headers in the popup. Are they released?

[silverwind]

[fregante]

They follow your Notifications’ setup. Click on Group by Repository

[silverwind]

Ok fixed it by remapping that color. Had to use !important because your CSS loads after ours for some reason (webpack loading it via JS?).

[fregante]

(webpack loading it via JS?).

No it's handled by manifest.json, unless you load it on GitHub Enterprise

[silverwind]

Ok I guess we (or rather stylus) can't really control the loading order of extensions, but I'm fine with using !important for this.