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:
source: Ask Different
