Fix tinted background color option

[fregante]

This PR is untested, but the screenshot is taken with a real reproduction via the custom background

Before

After

[the-j0k3r]

Hi @fregante adding color here actually breaks the intended design of this. To affect this you must change the color at the body entry.

GitHub-Dark/github-dark.css

Line 11625 in a4c96ed

background-color: #222;

So instead of #222222 change it to your #202020 Which is what none actually falls back to.

[xt0rted]

Is this meant to adjust the background so the tabs match the rest of the page when not using a background image? If so I've been running this in a separate style for this very reason.

I'm not sure if this is up to date still, been awhile since I last checked.

/* Tabs - set color to BG color so they blend fully */
.pagehead-tabs-item.selected,
.reponav-item.selected,
.tabnav-tab.selected {
  background-color: #222 !important;
  border-bottom-color: #222 !important;
}
/* pending review comment tabs */
.is-pending .tabnav-tab.selected {
  background-color: #181818 !important;
}
/* https://github.com/settings/replies */
.saved-reply-form .tabnav-tab.selected {
  background-color: #181818 !important;
  border-bottom-color: #181818 !important
}

[fregante]

I don’t think all of that is needed, in my case I just had to change the main background color once

[xt0rted]

Yea, it looks like some of this has since been updated. The pending review comment is still needed but the saved reply rule isn't needed at all now

[fregante]

@the-j0k3r like this?

[silverwind]

Changing body is fine with me. I want these tabs to somewhat work with the default crosshatch background (thought CSS can not cleanly fix that).

[xt0rted]

This change is inside of @-moz-document domain("stylishthemes.github.io") { which doesn't seem right to me.

[the-j0k3r]

This change is inside of @-moz-document domain("stylishthemes.github.io") { which doesn't seem right to me.

that also needed to be changed.

See #1091 (comment)

[the-j0k3r]

Is this meant to adjust the background so the tabs match the rest of the page when not using a background image? If so I've been running this in a separate style for this very reason.

I'm not sure if this is up to date still, been awhile since I last checked.

/* Tabs - set color to BG color so they blend fully */
.pagehead-tabs-item.selected,
.reponav-item.selected,
.tabnav-tab.selected {
  background-color: #222 !important;
  border-bottom-color: #222 !important;
}
/* pending review comment tabs */
.is-pending .tabnav-tab.selected {
  background-color: #181818 !important;
}
/* https://github.com/settings/replies */
.saved-reply-form .tabnav-tab.selected {
  background-color: #181818 !important;
  border-bottom-color: #181818 !important
}

Perhaps only the #222222 ones as clearly the rest are separate colors on purpose.

[xt0rted]

The .is-pending .tabnav-tab.selected rule fixes the tabs on the pending pr review ui.

The .saved-reply-form .tabnav-tab.selected rule doesn't look to be needed anymore, the ui there changed slightly and is styled correctly now.

[fregante]

The .is-pending .tabnav-tab.selected rule fixes the tabs on the pending pr review ui.

That sounds like an unrelated issue, it appears even with the regular background. Please open another issue

[fregante]

@silverwind is there anything else that needs to be fixed?

[the-j0k3r]

The .is-pending .tabnav-tab.selected rule fixes the tabs on the pending pr review ui.

Yep unrelated area.