White Bar on GHE Pages

[szarroug3]

• Browser: Firefox
• Operating System: Arch Linux
• Link to page with the issue: Github Enterprise Page
• Screenshot:
  

On Github Enterprise, it seems the bar the background is not being applied to the top bar where you can click "Code", "Issues", "Pull Requests", etc causing the background to be white rather than match the rest of the page.

[silverwind]

This is probably StylishThemes/GitHub-Dark#1057. Try force-updating.

[szarroug3]

I did, nothing happened but you're right. It's the same issue. I can follow that one if you want to close this one.

[xt0rted]

A portion of this style is auto generated from the css on github.com, so sometimes when UI changes are made and we regenerate the style it works fine on github.com but breaks on GHE installs. You'll probably need to install a copy of this style from a few days ago before this change was fixed and use that until your GHE instance is updated to a newer version.

[szarroug3]

Ahhh okay cool I'll try that in the morning. Thanks!

…

On Wed, Feb 12, 2020, 6:54 PM Brian Surowiec ***@***.***> wrote: A portion of this style is auto generated from the css on github.com, so sometimes when UI changes are made and we regenerate the style it works fine on github.com but breaks on GHE installs. You'll probably need to install a copy of this style from a few days ago before this change was fixed and use that until your GHE instance is updated to a newer version. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#76?email_source=notifications&email_token=ACASGUIB5BWS64OCSZVHYUDRCSK3FA5CNFSM4KUEVOCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOELS65UA#issuecomment-585494224>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACASGUI6QLPBDMOYWD26E5TRCSK3FANCNFSM4KUEVOCA> .

[the-j0k3r]

GitHub Dark script does not account for extra moz-document sections. Needs fixing. See info on #75

[szarroug3]

@xt0rted I went back to older versions (going back as far as june 2019) and it's still happening
@the-j0k3r I switched to stylus and github dark and it's still happening

[silverwind]

Find the CSS selector of the rule that adds the background and post the full rule here. We generally can't really support GHE by other means unfortunately.

[szarroug3]

I did some messing around in the css for stylus. Adding the following worked for me:
.repohead.experiment-repo-nav { background-color: transparent !important; }

[szarroug3]

it seems like the comment bar is also doing the same thing so I'll do some more digging and see if i can figure out the selector for that too :)

[silverwind]

Can you post the original rule out of GHE CSS?

[szarroug3]

To fix the comment bar:

.new-discussion-timeline .previewable-comment-form .comment-form-head.tabnav { background-color: transparent !important}

How do I get the original rule out of the CSS? Sorry I'm not really a web dev.

[szarroug3]

Is this what you're looking for?

.repohead.experiment-repo-nav { background-color: #fafbfc; padding-bottom: 0; }

[silverwind]

Yes, added that in StylishThemes/GitHub-Dark@133104f. Try force-updating the style.

[szarroug3]

Wonderful! Thanks for fixing that. The white bar on the comments box is still there:

I was able to fix that one using the following:
.new-discussion-timeline .previewable-comment-form .comment-form-head.tabnav { background-color: transparent !important; }

This is the original rule:
.new-discussion-timeline .previewable-comment-form .comment-form-head.tabnav { background: #f6f8fa; border-radius: 3px 3px 0 0; padding: 6px 10px 0; }

[xt0rted]

That's the same issue as StylishThemes/GitHub-Dark#989. There's some information in there from someone else who was fixing it for their GHE instance.

[silverwind]

@szarroug3 can you show the CSS rule affecting the triangle on the left? It should be ::after element on the .timeline-comment element. The github.com rule is

.timeline-comment--caret::after {
    border-right-color: #f6f8fa;
}

[silverwind]

Comment form should be done in StylishThemes/GitHub-Dark@9b8cb82 minus the triangle.

[szarroug3]

@silverwind

.timeline-comment-wrapper .timeline-comment.current-user::after {
	border-right-color: #f1f8ff;
	border-width: 7px;
	margin-left: 2px;
	margin-top: 1px;
}

I think you might also need this:

.timeline-comment-wrapper > .timeline-comment::before, .timeline-new-comment .timeline-comment::before {
	border-right-color: #d1d5da;
	border-width: 8px;
}

[silverwind]

try force update again

[szarroug3]

that doesn't seem to have worked:

Looks like it made it disappear on github.com altogether:

[szarroug3]

Sorry! I might've given you the wrong rule. Here's the correct one:

.timeline-comment-wrapper > .timeline-comment::after, .timeline-new-comment .timeline-comment::after {
	border-right-color: #f6f8fa;
	border-width: 7px;
	margin-left: 2px;
	margin-top: 1px;
}

[silverwind]

Try again. By the way, can you post the <html> and <body> tags of your GHE instance? Similar to this one:

Askinng because I'd like to scope the GHE selectors so they cannot affect github.com.

[szarroug3]

Hm, still no luck, it looks the same. Here are the tags you asked for:

[szarroug3]

These lines fixed the comment box and the current user box for me:

  /* current user */
  .timeline-comment-wrapper .timeline-comment.current-user::before {
    border-right-color: #246;
  }
  .timeline-comment-wrapper .timeline-comment.current-user::after {
    border-right-color: #182030;
  }
  
  /* comment box */
  .timeline-new-comment .timeline-comment::before {
	  border-right-color: #404040;
  }
  .timeline-new-comment .timeline-comment::after {
    border-right-color: #202020;
  }

[silverwind]

Scoped the selectors and copied yours in, try again.

[szarroug3]

Looks like that fixed the user comment box and the make a comment box but not the other people commented box, i'll look for that one right now

[szarroug3]

Ignore that, it looks like other people's comment's don't have a triangle next to them on GHE for some reason. Thanks for fixing everything! 😄

[silverwind]

🎉