charlieetienne / material-github Goto Github PK

I don't know anything with .css but I guess you should do sth with this thing

Highlighting of diff syntax is not covered:

diff foo bar
baz
--- foo
+++ bar
*** baz
***************
*** foo ****
--- bar ----
@@ -foo +bar @@ baz
 foo
-foo
+bar
!baz
 bar
---
1.0

For reference, https://github.com/primer/github-syntax-light/blob/master/lib/github-light.css seems to have all "normal" highlighting rules.

@CharlieEtienne

Comments seem to be styled in a grayish color, but on the green background of added lines in a PR they are barely readable.

When authenticating my organization's login with github, the SSO auth text is white.

If you don't have an organization I imagine you might be able to replicate this if you attempt to authenticate an application with your github account.

I tried to request the stylesheet sso.scss located at https://github.githubassets.com/app/app/assets/stylesheets/custom/github/sso.scss but it gave me a 404. I also tried to access it in the sources and had the same issue. I presume it is a source map leaking from compiled css. Regardless, these should be pretty easy to override.

<div class="org-sso-panel">
    <div class="position-relative mt-2 mb-3">
      <img class="avatar mb-3" src="redacted" width="60" height="60" alt="">

      <h1 class="sso-title m-0">
        Single sign-on to
        <strong>My Org</strong>
      </h1>
    </div>


      <p class="text-gray-light mt-2 mb-4">
        Authenticate your account by logging into
        My Org’s
        single sign-on provider.
      </p>


    <!-- '"` --><!-- </textarea></xmp> --><form action="" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="">
      

      <button type="submit" class="btn btn-primary btn-block">Continue</button>
</form>  </div>

Timeline comment labels (such as "Author") are unreadable:

This is taken from an authors reply to a pull request comment.

My suggestion is to add .review-comment to the same place where you set .comment-body color, then it would look like this:

Example: https://github.com/zeit/now/discussions

With enabled material github
Box-row Box-row--gray is white and strong field Recovery Options is not visible.

Hello! 👋
Issue-ing another small style suggestion.

I noticed that the toolbar found under 'Pull requests > Files changed' in a repo page does not have the theme colors. I did not notice it before, maybe it could be due to a recent Github css change.

Example: https://github.com/CharlieEtienne/material-github/pull/1/files

Thanks!

Hello Charlie,

First I want to thank you -- this stylesheet is an eyeball-saver with large monitors! I really appreciate the effort you've put into it. (I personally hate CSS, so that makes me appreciate it even more! 😁 )

It seems there's an issue with editing PR diff-review comments. Notice the white border when editing, and the preview tab is completely whited out. This just started happening so I guess they changed something. As far as I can tell, this seems isolated to editing a previously posted comment, and only in the PR diff-review discussion area.

The edit tab:

The preview tab:

The background for inline code is pretty much invisible in lists.

• This is test here is inline code

Example without list here is inline code

In case it's only looking like that in my browser, this is example from project wiki:

See page: https://github.com/meefik/linuxdeploy/issues/409 (CODED against referenced GH)

Confirmed that this is still an issue with version 3.2.12.

.notifications-list-item.navigation-focus {
  background-color: #f1f8ff!important;
}

Reproduction:

• Have at least one notification
• Go to https://github.com/notifications
• Press j to select the first item in the list

Looks like this fails to override since the background-color setting on line 1043 isn't marked with !important

Currently the headline looks like this with the text having no padding to the side:

In normal github this is okay because it's all white:

Issue in line 165 "div.border.rounded-1" overwrites the bg color to bg-2 instead of white which is bg-3

My possible solutions:

1. Change everything to "white" replacement by setting js-notification-search-autocomplete-dropdown to bg-3
   
   Will have to adjust text color of texts & it is not easy to set apart from page background

2. Change background to bg-2 too
   
   Might have to adjust "Available filters" text color?

3. Adjust padding
   
   Maybe would have to add rounded borders? Overall doesn't seem nice still

I would personally prefer the 2nd Option. Do you think the text color should also be adjusted? if yes to what?

Hi!

I installed this style from style.css in this repo and the background of most of the site was still white, making it effectively unusable since you can't read any of the light text on white.

It appears that the CSS declarations setting --bg1, --bg2, etc to whatever colour they are supposed to be are missing?

userstyles.org is falling over as seems to often be the case so I have not been able to tell if this issue reproduces on the version on there.

When unchecked, the viewed checkbox looks OK, but when it's selected the markup is barely readable.

IT IS
https://github.com/notifications/beta?query=is%3Aunread

SHOULD BE (I selected random darker color from picker for good apperance)

CHROME CONSOLE with selectors. I made change in .filter-item.selected, ul.filter-list .filter-item.selected, for color !important direcly in chrome.

please add this enhancement if you like.

EDIT
Same is in sub menus

https://gist.github.com/CHEF-KOCH

It looks like GitHub changed something since this is a very recent issue.
I've updated to the latest Material Dark GitHub theme but unfortunately the problem persists.

With the Stylus theme disabled, the title-bars or headers (I don't know what to call them) for each file is properly aligned at the top:

But with the theme enabled, the title-bar has dropped and is obscuring the first 2 lines of code changes.
You can see the blank space above where it was supposed to be placed:

I only just noticed this today, so it broke in the past day or 2.

Selector
.task-progress .progress-bar .progress

Theme
Darker

Description
The contrast between the foreground and background colors of the issue progress bars is very low. It's slightly visible at higher-than-default brightnesses by disappears at lower-than-default.

The progress bars for milestones and projects seems to use a bright green that might be more appropriate.

Examples

Issues:

Milestones:

for example:
https://developer.github.com/webhooks/
or
https://developer.github.com/changes/

Font and Background color is almost the same:

I hope this isn't just my color blindness kicking in lol

This happens in the "Files changed" tab of a Pull request page.

• Original
  
• Material
  

Once again thank you for this awesome theme! :)

This problem only started happening for me today, so GitHub has changed something I guess.
A number of pages in GitHub are starting to have white backgrounds shine through.

Example

Even this issues page has a big block of white at the bottom, and you can see white around where I enter the title for this issue.

the color of the team page seems not right, Is this a bug or something?

On line 12:

Sample problem code: https://github.com/input-output-hk/nix-tools/blob/master/default.nix#L12

It appears that the css classes pl-pse and pl-mi are not overridden, which define these incorrect colours.

Sticky bar has white background - can be seen on pull request details, for example here: https://github.com/django/django/pull/12572/files
Can be fixed with:

.pr-toolbar.is-stuck {
    background-color: var(--bg3);
}

Thanks for maintaining this theme, it's really nice. I believe I found a bug:

When the cursor is placed in the search box, the foreground text is black and thus unreadable. It appears that GitHub has a separate style for when it is selected, shown below, that is causing the problem.

Problem:

Culprit:

Just wanted to say that this is the best GitHub theme. You can close this post when you read it, thanks

Hi there, thanks for the stylesheet.

Looks like github has pushed an update.

As you can see Issue titles are the same colour as their backgrounds, and the background behind the repository name is white.

Also the page below the github footer is white.

Launch sample: https://github.com/l1ving/youtube-dl/commit/c438ea87e4db650f5c44526b155ea335ea49d006 (coded against reference)

@CharlieEtienne see

Hello! I really like this style, thanks for maintaining it!

I experience an annoying problem on my machine, I don't even know if there is anything you can do for it.

Bug report

Sometimes, when opening a github window in an other tab for example, the upper bar on top appears white as in the screenshot below:

This problem disappears upon refreshing or clicking anywhere.

Do you have any idea where it can come from? Do not hesitate to ask me for more info about this issue, I can provide other screenshots or try some scenarios.

My config

• Material Dark GitHub
• Firefox 75.0
• Ubuntu 18.04

Hello! Reporting an inconsistency in the theme. On certain pages, the color of the selected menu item does not seem to get styled on mouse hover out.

I found this type of menu in:

• https://github.com/settings/profile
• https://github.com/CharlieEtienne/material-github/pulse

Hi

If you enable the new Notifications (BETA), you notice that the main part of the page is still white (un-themed).

https://github.com/notifications/beta?query=is%3Aunread

Especially, take a look at these lines:

.notifications-list-item.notification-unread {
    background-color: #fff;
}

Hi! First of all, thanks for bringing Material Design to Github!

Folder icons

I noticed that the folder icons doesn't seem to follow the selected accent color. Is it a bug, or is it simply not included in the theme? It would be really nice if you could theme these icons!

Tags' font size

In my case, the text in the tag is not aligned to center, and has a 12 px font size. The same problem also occurs on repository tags. I am using Chrome 83 with Stylus 1.5.11.

See image below for https://github.com/settings/admin

Appears to be the first selector in the following css setting the background to white

.menu-item.selected, .menu-item[aria-current]:not([aria-current=false]), .menu-item[aria-selected=true] {
    font-weight: 600;
    color: #24292e;
    cursor: default;
    background-color: #fff;
}

Project headers are currently white:

Not sure where to add it, but the offending selector is .project-header

Example:

https://github.com/grafana/grafana/projects/25#card-39005242

Show separators between issues/files

Right now, Markdown/etc. body text is white with alpha 0.7. I find this color to be a bit darker than I prefer for comfortable reading. Is it possible to add an option to increase the brightness?

I suspect this won't be the easiest to override, since 0.7 appears in several rules which are !important. Writing my own userstyle to make text white will require tha I toggle Material Github and my own style simultaneously. And editing the style will break updates.

.oauth-permission-details .permission-title has a colour override that is causing the issue.

As you can appreciate, there's a white background to the dialog for issue/pr creation or adding comments to existing issues/prs

This results in bad contrast on the text. To reproduce, go to the main page of a repository, press the t key, and type in part of a file name.

(also, a vertical line is just there because my GPU is dying, nothing to do with the styles 😅)

This part of GitHub needs to be themed too:

https://help.github.com

PRs are welcome if you want to work on that.

I'm not really sure why this is happening, but the GitHub version makes everything really white, although the Userstyles version makes everything look fine.

Userstyles:

GitHub raw:

Currently when viewing an organization's settings the sidenav menu is incorrectly styled:

I have fixed this by duplicating .menu and .menu-item classes with .SideNav and .SideNav-item classes:

Pull request incoming...

Hi.

I think that some colors of the Notifications page are a bit too bright.

• Inbox / Saved / Done <li>:
  Maybe you could replace this color by #324149 ?

• Also, could you make the color of Unread issues darker too ?
  Maybe with color #1f292e or #141a1e ?

Thank you in advance.

Hi,

Awesome theme!

I found a few small problems however, I fixed them. They are probably due to GitHub changing their html.

Would you mind implementing this changes back and updating the theme for everyone? :D

Keep up the good work.

/* changes */

/* comments */
 .comment-body, .markdown-body, .js-comment-body {
    color: rgba(255, 255, 255, 0.7) !important;
}
/* timeline background lines, badges, etc */
 .TimelineItem-break {
    background-color: var(--bg3) !important;
    border-top: 4px solid var(--bg5) !important;
}
.TimelineItem:before {
    background-color: var(--bg5) !important;
}
.TimelineItem-badge {
    border: 2px solid var(--bg5) !important;
}
/* tabs on the comment box and such, Write, Preview, etc  */
 .tabnav-tab.selected, .tabnav-tab[aria-selected=true] {
    background-color: var(--bg5) !important;
    border-color: var(--bg4) !important;
}
/* badges, like bug, feature, etc, */
 .protip code {
    background-color: var(--bg5) !important;
    padding: 3px;
}
/* end changes */

Would be great if the background of notebooks can be dark as well