Last active
June 14, 2018 07:09
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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