Userstyle to un-style the navbar

NickyNouse

I know that there's already a userscript to rewind the entire site, but:

It uses a whole lotta JS to remove the new navbar and re-add the old one, which is bound to break some stuff moving forward
it uses images from the old navbar that may or may not continue to be hosted on the Scratch website
it uses JS to add/remove styles, which isn't technically problematic but it kinda looks scary to me

Personally, I don't find the new theme super annoying. But I've gone through upsetting site redesigns before and I know what y'all are going through. I just don't wanna see you breaking everything just to keep the same styling. So, I propose a happy medium: a navbar styled like the old one but with the new one's icons/logo, in the form of a userstyle (installed with the extension Stylish, which just adds CSS to the page):

#navigation .inner, #navigation .inner > ul, #navigation .link {
    height: 35px !important;
}
#navigation {
    height: 35px !important;
    background: #0f8bc0 !important;
}
#navigation .logo, #navigation .logo a {
    height: 35px !important;
    margin-right: 3px !important;
}
#navigation .link {
    border-left: 1px solid #149acb;
}
#navigation .link a {
    height: 35px !important;
    padding: 9px 15px !important;
    margin: 0 !important;
    font-weight: normal !important;
    font-size: 15px !important;
    box-sizing: border-box;
}
#navigation .link.right a {
    padding: 0 10px !important;
    min-width: 42px !important;
}
#navigation .link.right a.userInfo {
    font-size: 13px !important;
    padding-top: 5px !important;
    padding-right: 0 !important;
}
#navigation .link.right a.userInfo .avatar {
    border: 1px solid #ccc;
    border-radius: 0 !important;
}
#navigation .link.right.account-nav .dropdown {
    background: #0f8bc0 !important;
    border-radius: 0 !important;
}
#navigation .link.right.account-nav .dropdown li a {
    font-size: 13px !important;
    box-sizing: border-box;
    height: 30px !important;
}
#navigation .link.right.join a, #navigation .link.right.login-item a {
    padding-top: 8px !important;
}
#navigation .search {
    margin: 2px 0 !important;
    padding: 0 10px !important;
    border-left: 1px solid #149acb;
}
#navigation .search input {
    height: 22px !important;
    background: white !important;
}
#navigation .search input[type=submit] {
    border-right: 1px solid #ccc !important;
    border-radius: 10px 0 0 10px !important;
    width: 22px !important;
}
#navigation .search input[type=text] {
    color: black !important;
    padding-left: 33px !important;
    border-radius: 10px !important;
}
#navigation .inner>ul .search input[type=text]::placeholder {color: #ccc !important;}
#navigation .inner>ul .search input[type=text]::-webkit-input-placeholder {color: #ccc !important;}
#navigation .inner>ul .search input[type=text]::-moz-placeholder {color: #ccc !important;}
#navigation .inner>ul .search input[type=text]:-ms-input-placeholder {  color: #ccc !important;}
#view {
    margin-top: 36px !important;
}

This won't fix any of the other changes (box headers, carousel scrollbars, etc.) but it's a start

Edit: Updated to fix links for logged-out users

Last edited by NickyNouse (Nov. 6, 2015 03:30:51)

-ScratchOs

I like it

looks good with the new icons

Last edited by -ScratchOs (Nov. 5, 2015 16:34:58)

Discuss Scratch