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

CSS solution #27

Closed
ghost opened this issue Feb 12, 2017 · 4 comments
Closed

CSS solution #27

ghost opened this issue Feb 12, 2017 · 4 comments

Comments

@ghost
Copy link

ghost commented Feb 12, 2017

Since @mdo has completely lost the plot:

For now! Not trying to be a jerk, but that extra class will be going away
soon. Just how we shipped v1 of it.

It might be a good idea to implement a CSS solution, as the JavaScript solution
is likely to break. Here is one I came up with:

http://github.com/svnpenn/dotfiles/blob/cf47bf9/stylish/github.css#L2-L32

@adamschwartz
Copy link

adamschwartz commented Feb 13, 2017

Here’s a more complete CSS solution:

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

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

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

.header-dark .header-logo-invertocat:hover, .header-dark .header-logo-wordmark:hover {
  color: #4078c0
}

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

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

.header-dark .header-search-scope {
  color: #767676;
  border-right: 1px solid #eee;
}

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

.header-dark .header-nav-link {
  color: #555
}

.header-dark .header-nav-link:hover, .header-dark .header-nav-link:focus {
  color: #4078c0
}

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

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

.header-dark .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-dark .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-dark .header-search-scope {
  font-size: 12px;
  line-height: inherit;
  min-height: 0;
}

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

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

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

Once they drop .header-dark just find and replace remove that from the above.

@ghost
Copy link
Author

ghost commented Feb 13, 2017

@adamschwartz thanks for the input, but I wasnt really speaking to the specific CSS rules, rather that CSS be used over JavaScript to prevent future breakage

@KeizerDev
Copy link
Contributor

@adamschwartz
A smaller version here:

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

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

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

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

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

.header-dark .header-search-scope {
  color: #767676;
  border-right: 1px solid #eee;
}

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

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

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

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

.header-dark .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-dark .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-dark .header-search-scope {
  font-size: 12px;
  line-height: inherit;
  min-height: 0;
}

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

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

@DennisSnijder
Copy link
Owner

CSS is now being overwritten since Github removed the "header-dark" class.
Thanks for the classes all 💯

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

3 participants