Skip to content

Instantly share code, notes, and snippets.

@nkmathew
Last active June 14, 2018 07:09
Show Gist options
  • Save nkmathew/281e07d78e45e01c5d275c906e68da28 to your computer and use it in GitHub Desktop.
Save nkmathew/281e07d78e45e01c5d275c906e68da28 to your computer and use it in GitHub Desktop.
Stylish userstyle that restores the old StackOverflow navigation bar theme, more or less
/**
* Stackoverflow decided to change the navigation bar styling on 14th February 2017.
* This userstyle attempts to restore the old navigation bar feel with some of my
* subjective styling preferences thrown in
*
* Userstyles: https://userstyles.org/
* Relevant: http://meta.stackoverflow.com/questions/343653/top-navigation-update
* Original: https://userstyles.org/styles/138640/stack-black-slim-header
*
*
* CHANGELOG:
*
* + [Saturday] Sep 23, 2017 23:53
* - Stackoverflow renamed the top header to "top-bar" from "so-header"
* - Remove the salary calculator button experiment
*
*/
@-moz-document domain("stackoverflow.com") {
.top-bar~.container {
padding-top: 37px;
}
.top-bar {
border-top: none;
background-color: #333;
height: 35px;
position: inherit !important;
}
.top-bar .-container {
max-width: none;
width: auto;
padding-left: 40px;
padding-right: 40px
}
.top-bar .-logo {
height: 36px
}
.f-input.js-search-field {
font-size: 13px !important;
}
.top-bar .navigation .-link {
color: #aaa;
font-size: 13px;
}
.top-bar .navigation .-item._current .-link,
.top-bar .my-profile .-rep {
color: #bbb;
border-bottom: none;
}
.top-bar .navigation .-item._current .-link {
color: white;
}
.top-bar .navigation .-link:hover {
background-color: #333;
color: white;
}
.top-bar .-logo:hover,
.top-bar .secondary-nav .-item .-link.topbar-icon-on,
.top-bar .secondary-nav .-item._active,
.top-bar .secondary-nav .-item .-link:hover {
background-color: #3B4045;
}
.top-bar [role="icon"] {
fill: #848D95 !important;
}
.top-bar .indicator-badge {
border: none;
font-weight: bold;
font-size: 11px;
}
.top-bar .js-review-button .indicator-badge {
background-color: #24a;
}
.top-bar .secondary-nav .-link .indicator-badge:not(._regular),
.top-bar .secondary-nav .-link:hover .indicator-badge,
.top-bar .secondary-nav .-link .indicator-badge {
top: 2px !important;
right: -4px;
z-index: 99;
}
.top-bar [role="icon"] {
fill: #555;
}
.top-bar .navigation .-link:hover {
background-color: #3B4045;
color: white;
}
.top-bar .my-profile:hover {
background-color: #3B4045;
}
.top-bar .navigation .-item:nth-child(2),
.adzerk-vote,
[id^='adzerk'] {
display: none
}
.top-bar .navigation .-list,
.top-bar .navigation .-link,
.top-bar .secondary-nav .-list,
.top-bar .secondary-nav .-link {
height: 36px;
line-height: 36px
}
.top-bar .my-profile {
padding-top: 6px;
padding-bottom: 6px
}
.top-bar .searchbar input[type="text"].f-input {
height: 24px;
padding-left: 32px;
background-color: #222;
border: none;
color: #aaa;
}
.top-bar .searchbar input[type="text"].f-input:hover {
color: #bbb;
}
.top-bar .searchbar input[type="text"].f-input:focus {
color: white;
background-color: #444;
box-shadow: none;
}
.top-bar .js-search-submit {
background-color: #666 !important;
border-color: #444 !important;
height: 24px !important;
min-height: 24px !important;
box-shadow: none;
padding: 2px 8px !important;
}
.top-bar .js-search-submit svg {
fill: white;
}
.top-bar .searchbar>[role="icon"] {
left: 20px
}
.top-bar .navigation .beta-badge {
top: 24px;
color: #777;
font-weight: bold;
}
.top-bar .navigation li:hover .beta-badge {
color: #aaa;
}
/** Don't fold long code sections */
pre {
max-height: none;
}
/** Hide that annoying welcome back message */
#herobox,
#question .everyonelovesstackoverflow {
display: none !important;
}
/** The badge ruins the styling a bit */
.beta-badge {
display: none;
}
/**
* Hides the new dark logo text that just slightly disappears in the dark
* background
*
* New sprite logo as of February 24, 2017
*/
.top-bar .-logo .-img {
background-position: 0 -500px !important;
width: 29px !important;
}
#noscript-warning {
font-family: Calibri;
position: absolute;
top: 35px;
}
/* Advert */
.clc-cp-container {
display: none !important;
}
/* Hide that new calculate salary button */
.top-bar .-feature-notice {
display: none !important;
}
/* Remove the padding between the top header and the question title */
.top-bar~.container,
.container._full #content .inner-content
{
padding: 0px !important;
}
#left-sidebar {
display: none;
}
body > .container {
margin-left: 0px !important;
}
#content {
margin-left: 80px !important;
}
body {
padding-top: 0px !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment