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

The header will firstly become black and then turn to white. #48

Open
TheodoreKrypton opened this issue Feb 17, 2017 · 9 comments
Open

Comments

@TheodoreKrypton
Copy link

It will be better if the original css file can be blocked.

@ghost
Copy link

ghost commented Feb 17, 2017

Look at #4

@babobski
Copy link

@TheodoreKrypton or you can use a different approach.
For Firefox, Chrome, Safari and Opera there is a stylish addon available, this addon you can write custom css for any web-address. If you use this approach you will not have any flashing.
Made a Gist that will revert the black bar, you can tweak it to you're likings.

The stylish addons:
FireFox
Chrome
Safari
Opera

@nhooyr
Copy link

nhooyr commented Feb 22, 2017

@babobski with that css, some links aren't highlighted properly.

screen shot 2017-02-22 at 3 21 57 am

I'm using the following css (I took it from this repo and replaced all .great-header selectors with .header

.header.header {
    color: #333;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e5e5e5
}

.header .header-search-scope {
   color: rgb(64, 120, 192);
   background-color: rgb(237, 242, 249);
   border-color: rgb(198, 215, 236);
}

.header .read-only-mode-banner {
    background-color: #f8e45f;
    border-bottom-color: #f6dc2e
}

.header .header-logo-invertocat, .header .header-logo-wordmark {
    color: #555
}

.header .notification-indicator .mail-status {
    color: #fff;
    background-image: -webkit-linear-gradient(#1cafff, #0086ce);
    background-image: linear-gradient(#1cafff, #0086ce);
    border: 2px solid #f3f3f3
}

.header .notification-indicator:hover .mail-status {
    background-color: #4078c0
}

.header .header-search-scope {
    font-size: inherit;
    color: #767676 !important;
    border-right: 1px solid #eee !important;
}

.header .scoped-search .form-control.focus .header-search-scope {
    color: #4078c0;
    background-color: #edf2f9;
    border-color: #c6d7ec
}

.header .header-nav-link {
    color: #555
}
.header .header-logo-invertocat:hover, .header .header-logo-wordmark:hover,
.header .header-nav-link:hover, .header .header-nav-link:focus {
    color: #4078c0
}

.header .header-nav-link:hover .dropdown-caret, .header .header-nav-link:focus .dropdown-caret {
    border-top-color: #4078c0
}

.header .header-search {
    font-size: 14px
}

.header .header-search-wrapper {
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
    border: 1px solid #ddd;
    font-size: 14px;
    min-height: 0;
}

.header .header-search-wrapper.focus {
    background: #fff;
    border-color: #51a7e8;
    outline: none;
    color: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5);
}

.header .header-search-scope {
    font-size: 12px;
    line-height: inherit;
    min-height: 0;
}

.header .header-search-input {
    min-height: 26px;
}

.header .header-search-input::-webkit-input-placeholder,
.header .header-search-input::placeholder {
    color: rgba(0,0,0,.5)
}

.header .form-control {
    color: #333 !important;
    background-color: #fff !important;
}

.header *::-webkit-input-placeholder {
    color: #767676 !important;
}
.header *:-moz-placeholder {
    /* FF 4-18 */
    color: #767676 !important;
}
.header *::-moz-placeholder {
    /* FF 19+ */
    color: #767676 !important;
}
.header *:-ms-input-placeholder {
    /* IE 10+ */
    color: #767676 !important;
}

@babobski
Copy link

@nhooyr thanks for the pointer, I will have a look this weekend. Also noticed it is not perfect jet.

@babobski
Copy link

Updated the css, so the menu links are styled correct.

@nhooyr
Copy link

nhooyr commented Mar 13, 2017

I also made a style to make it easy to install.

https://userstyles.org/styles/140093/make-github-great-again

@ajayyy
Copy link

ajayyy commented Jul 21, 2017

@nhooyr your script broke

@ajayyy
Copy link

ajayyy commented Jul 21, 2017

Fixed plugin:

https://userstyles.org/styles/145543/make-github-great-again-2-0

@nhooyr
Copy link

nhooyr commented Jul 22, 2017

Yea, I haven't been maintaining it because Github lowered the saturation of the black so it doesn't look as bad anymore for me. Glad you fixed it :)

joeytwiddle added a commit to joeytwiddle/MakeGithubGreatAgain that referenced this issue Apr 2, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants