A user script and user style to move Google search tools to sidebar.
/* ==UserStyle==
@name Google Search Sidebar
@namespace jmln.tw
@version 0.4.2
@description A user script and user style to move Google search tools to sidebar.
@author Jimmy Lin
@license MIT
@homepageURL https://github.com/jmlntw/google-search-sidebar
@supportURL https://github.com/jmlntw/google-search-sidebar/issues
==/UserStyle== */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document regexp("^https:\/\/(?:ipv4|ipv6|www)\.google\.(?:[a-z\.]+)\/search\?(?!(?:.+&)?tbm=lcl(?:&.+)?).+$") {
/** CSS Variables **/
:root {
--user-sidebar-width: 180px;
--user-sidebar-spacer: 20px;
--user-sidebar-primary-color: #dd4b39;
--user-action-menu-spacer: 2px;
--user-action-menu-background: rgba(0, 0, 0, 0.1);
--user-action-menu-font-size: 85%;
}
/** Navigation Bar **/
/**
* 1. Hide "Tools" toggle button on the navigation bar.
*/
#hdtb-tls {
display: none !important; /* 1. */
}
/** Search Menu **/
/**
* 1. Reset all CSS properties of the search menu wrapper.
* 2. Show the search menu wrapper in the proper position.
*/
#hdtbMenus {
all: unset !important; /* 1. */
display: block !important; /* 2. */
position: absolute !important; /* 2. */
}
/**
* 1. Reset all CSS properties of the search menu parent.
* 2. Place search menus vertically.
* 3. Set the gap space between each search menu.
*/
#hdtbMenus #tn_1 {
all: unset !important; /* 1. */
display: flex !important; /* 2. */
flex-direction: column !important; /* 2. */
gap: var(--user-sidebar-spacer) !important; /* 3. */
}
/**
* 1. Remove the leading space of the search menu wrapper.
*/
#hdtbMenus #tn_1 > div:nth-child(1) {
display: none !important; /* 1. */
}
/**
* 1. Hide the menu toggle button.
* 2. Reset all CSS properties of the dropdown menu.
* 3. Show the dropdown menu in the proper position.
* 4. Set the sidebar width with paddings.
*/
#hdtbMenus #tn_1 g-popup > div:nth-child(1) {
display: none !important; /* 1. */
}
#hdtbMenus #tn_1 g-popup > div:nth-child(2) {
all: unset !important; /* 2. */
display: block !important; /* 3. */
position: static !important; /* 3. */
width: calc(var(--user-sidebar-width) - 20px) !important; /* 4. */
max-width: calc(var(--user-sidebar-width) - 20px) !important; /* 4. */
}
/**
* 1. Remove the check image on the active menu item.
* 2. Set the styles of the active menu item.
*/
#hdtbMenus #tn_1 g-menu-item.nvELY {
background-image: unset !important; /* 1. */
color: var(--user-sidebar-primary-color) !important; /* 2. */
font-weight: bolder !important; /* 2. */
}
/**
* 1. Set the styles of "Clear" menu item on the sidebar.
*/
#hdtbMenus #tn_1 > a.hdtb-mn-hd {
padding: 4px 32px !important; /* 1. */
}
#hdtbMenus #tn_1 > a.hdtb-mn-hd:hover {
background-color: rgba(0, 0, 0, 0.1) !important; /* 1. */
text-decoration: unset !important; /* 1. */
}
/**
* 1. Fix the position of the label showing "About ***,*** results...".
*/
#appbar div.LHJvCe {
top: unset !important; /* 1. */
opacity: unset !important; /* 1. */
}
/** Main Page Content **/
/**
* 1. Set the proper position of the main page content.
* (No "!important" here to make Shopping search display correctly.)
*/
#appbar,
#center_col,
#rcnt div.M8OgIe {
margin-left: var(--user-sidebar-width); /* 1. */
}
/**
* 1. Set the proper position of the right information block.
* ("--rhs-margin" is the CSS variable defined by Google.)
*/
#rhs {
margin-left: var(--rhs-margin); /* 1. */
}
/**
* Do not move the right block to the bottom of the page if there's not enough
* space.
*/
@supports (selector(:has(p))) {
#rcnt:has(#center_col:first-child + #rhs) {
flex-wrap: nowrap !important;
}
}
/** Action Menu **/
/**
* 1. Hide the dropdown arrow.
*/
div.g g-popup > div {
display: none !important; /* 1. */
}
/**
* 1. Reset all CSS properties of the dropdown menu.
* 2. Show the dropdown menu in the proper position.
*/
div.g div.pkWBse {
all: unset !important; /* 1. */
display: inline-block !important; /* 2. */
}
/**
* 1. Reset all CSS properties of the dropdown menu.
* 2. Place the menu item horizontally.
* 3. Set the gap space between each menu item.
*/
div.g div.pkWBse g-menu {
all: unset !important; /* 1. */
display: flex !important; /* 2. */
flex-direction: row !important; /* 2. */
gap: var(--user-action-menu-spacer) !important; /* 3. */
}
div.g div.pkWBse g-menu-item {
all: unset !important; /* 1. */
}
div.g div.pkWBse g-menu-item > div {
all: unset !important; /* 1. */
}
/**
* 1. Set the styles of the dropdown menu item.
*/
div.g div.pkWBse g-menu-item a {
padding: 0 5px !important; /* 1. */
background-color: var(--user-action-menu-background) !important; /* 1. */
font-size: var(--user-action-menu-font-size) !important; /* 1. */
}
}