1

This stylesheet will make the background of the topbar show a blurred version of the contents below it. Note that I was unable to make the search box transparent (the icon was invisible), and I couldn’t make the arrow next to the “StackExchange” logo high-contrast, either.

/**
 * Copyright © 2016 Jed Fox
 *
 * (The MIT License)
 *
 * Permission is hereby granted, free of charge, to any person obtaining
 * a copy of this software and associated documentation files (the
 * "Software"), to deal in the Software without restriction, including
 * without limitation the rights to use, copy, modify, merge, publish,
 * distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so, subject
 * to the following conditions:
 *
 * - The above copyright notice and this permission notice shall be
 *   included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
 * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
.topbar {
    background-color: rgba(12, 13, 14, 0.4) !important;
    -webkit-backdrop-filter: blur(10px);
}

.triangle, .topbar-icon:not(.icon-site-switcher) {
    -webkit-filter: brightness(200%);
            filter: brightness(200%);
}
.topbar-icon.yes-hover:hover, .topbar-links a:hover, .topbar-icon.topbar-icon-on {
    background-color: rgba(59, 64, 69, 0.4) !important; 
}

This script only works in browsers that support the -webkit-backdrop-filter property.

Here is a full list of what is supported:

  • Safari 9.1+
  • Safari Mobile 9.2+
  • Opera 34+ (with flag)
  • Opera 37+ for Android (with flag)
  • Chrome 47+ (with flag)
  • Chrome 51+ for Android (with flag)

source: caniuse.com

Screenshot:

Screenshot
source: Ask Different

  • Is there a license for this? I'm going to make a TamperMonkey script for it and not set a license for now. – haykam Jul 10 '16 at 21:08
  • @Peanut see edit. Should I paste in the whole license later, or is this good? – J F Jul 11 '16 at 10:52
  • You should link to the full MIT license. Should I add the same license to the Tampermonkey script? – haykam Jul 11 '16 at 13:16
  • Sure. I’ll add the full license later. – J F Jul 11 '16 at 17:41
1

I've ported this to JavaScript, Tampermonkey, and Greasemonkey.

You can install the Tampermonkey script here: Install View Source

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .