A user script and user style to move Google search tools to sidebar.
当前为
// ==UserScript==
// @name Google Search Sidebar
// @namespace jmln.tw
// @version 0.3.8
// @description A user script and user style to move Google search tools to sidebar.
// @author Jimmy Lin
// @license MIT
// @homepage https://github.com/jmlntw/google-search-sidebar
// @supportURL https://github.com/jmlntw/google-search-sidebar/issues
// @include https://www.google.*/search?*
// @include https://www.google.*/webhp?*
// @compatible firefox
// @compatible chrome
// @compatible opera
// @run-at document-end
// @grant none
// ==/UserScript==
function GM_addStyle (css) {
const style = document.createElement('style')
style.type = 'text/css'
style.textContent = css
document.head.appendChild(style)
return style
}
GM_addStyle(`
/* CSS Variables
========================================================================== */
:root {
--user-sidebar-width: 200px;
--user-sidebar-spacer: 30px;
--user-sidebar-primary-color: #dd4b39;
--user-action-menu-spacer: 2px;
--user-action-menu-background: #eee;
--user-action-menu-font-size: 85%;
}
/* Search Tools Menu
========================================================================== */
/**
* Hide "Tools" toggle.
*/
#hdtb-tls {
display: none !important;
}
/**
* 1. Make menu container visible.
* 2. Set the sidebar width.
* 3. Remove menu container background.
*/
#hdtbMenus {
display: block !important; /* 1 */
position: absolute !important; /* 1 */
top: 68px !important; /* 1 */
width: var(--user-sidebar-width); /* 2 */
background: unset !important; /* 3 */
}
/**
* Remove original menu height.
*/
#hdtbMenus .hdtb-mn-cont {
height: 0 !important;
}
/**
* 1. Make dropdowns visible.
* 2. Add bottom space to each dropdown.
* 3. Remove dropdown background and shadow.
* 4. Wrap dropdowns text if too long.
*/
#hdtbMenus div.EwsJzb {
display: block !important; /* 1 */
position: static !important; /* 1 */
}
#hdtbMenus div.sAKBe {
box-shadow: none !important; /* 3 */
border-radius: 0 !important; /* 3 */
}
#hdtbMenus g-menu {
padding-top: 0 !important; /* 2 */
padding-bottom: var(--user-sidebar-spacer) !important; /* 2 */
background: unset !important; /* 3 */
}
#hdtbMenus div.znKVS {
white-space: normal !important; /* 4 */
}
/**
* Hide dropdown toggle by default.
*/
#hdtbMenus div.rIbAWc {
display: none !important;
}
/**
* 1. Remove checkmark on selected dropdown items.
* 2. Emphasize selected dropdown items.
*/
#hdtbMenus g-menu-item.nvELY {
background-image: none !important; /* 1 */
color: var(--user-sidebar-primary-color) !important; /* 2 */
font-weight: bolder !important; /* 2 */
}
/**
* Align the "Clear" button in the bottom of sidebar.
*/
#hdtbMenus #hdtb-rst {
display: block !important;
padding: 0 var(--user-sidebar-spacer) !important;
}
/**
* Make result status text ("About xxx,xxx results") visible.
*/
#extabar div.LHJvCe {
position: static !important;
opacity: 1 !important;
}
/* Main Content and Footer
========================================================================== */
/**
* Move main content and footer to the right.
*/
#rcnt,
#slim_appbar {
padding-inline-start: calc(
var(--user-sidebar-width) - 180px + var(--user-sidebar-spacer)
) !important;
}
/**
* Align the top carousel when searching movies.
*/
#kx {
margin-inline-start: calc(
var(--user-sidebar-width) + var(--user-sidebar-spacer)
) !important;
}
/**
* Align new material icons toolbar.
*/
#hdtb-msb-vis {
padding-inline-start: calc(
var(--user-sidebar-width) - 180px + var(--user-sidebar-spacer)
) !important;
}
/**
* Move "People also search for" carousel.
*/
#extabar div[role="navigation"] {
padding-inline-start: calc(
var(--user-sidebar-width) + var(--user-sidebar-spacer)
) !important;
}
#extabar div.LXqMce {
margin-left: 0 !important;
}
#extabar div.LXqMce:dir(rtl) {
margin-right: 0 !important;
}
#extabar div[role="list"] {
padding-left: 0 !important;
}
#extabar div[role="list"]:dir(rtl) {
padding-right: 0 !important;
}
/* Action Menu
========================================================================== */
/**
* Hide action menu toggle.
*/
.action-menu > a {
display: none !important;
}
/**
* 1. Make action menu visible.
* 2. Reset action menu position.
* 3. Remove decoration styles from action menu.
*/
.action-menu .action-menu-panel {
display: inline-block !important; /* 2 */
visibility: visible !important; /* 1 */
position: relative !important; /* 2 */
top: calc(var(--user-action-menu-spacer) * -1) !important; /* 2 */
border: 0 !important; /* 3 */
box-shadow: none !important; /* 3 */
background: transparent !important; /* 3 */
}
/**
* 1. Make action menu items display inline.
* 2. Reset menu items styles.
*/
.action-menu .action-menu-item {
display: inline-block !important; /* 1 */
margin: 0 var(--user-action-menu-spacer) !important; /* 2 */
background: var(--user-action-menu-background) !important; /* 2 */
}
/**
* Make action menu items smaller.
*/
.action-menu a.fl {
padding: var(--user-action-menu-spacer)
calc(var(--user-action-menu-spacer) * 2) !important;
font-size: var(--user-action-menu-font-size) !important;
}
/* Third-Party Compatibility
========================================================================== */
/**
* Align Evernote Similar Search block.
*/
#simSearchFrame {
margin-left: calc(-1 * (var(--user-sidebar-width) / 2)) !important;
}
/*
* Fix Google Search Region dropdown menu.
*/
.hdtb-mn-cont > .hide-focus-ring {
display: block !important;
width: var(--user-sidebar-width) !important;
min-width: var(--user-sidebar-width) !important;
max-width: var(--user-sidebar-width) !important;
}
ul.gm-region-menu-dropdown {
display: block;
position: static;
box-shadow: none;
}
`)