A user script and user style to move Google search tools to sidebar.
As of
// ==UserScript==
// @name Google Search Sidebar
// @namespace jmln.tw
// @version 0.3.5
// @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-start
// @grant none
// ==/UserScript==
function GM_addStyle (css) {
const style = document.createElement('style')
style.type = 'text/css'
style.textContent = css
document.documentElement.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. Move menu container to the left.
* 3. Remove menu container background.
*/
#hdtbMenus {
opacity: 1 !important; /* 1 */
display: block !important; /* 1 */
position: static !important; /* 2 */
float: left !important; /* 2 */
height: 0 !important; /* 1 */
overflow: visible !important; /* 1 */
padding: 0 !important; /* 2 */
background: transparent !important; /* 3 */
}
/**
* Remove original menu height.
*/
#hdtbMenus .hdtb-mn-cont {
height: 0 !important;
}
/**
* 1. Make dropdowns visible.
* 2. Set dropdowns position.
* 3. Set dropdowns width as sidebar width.
* 4. Wrap dropdowns text if too long.
*/
#hdtbMenus g-popup {
display: block !important; /* 1 */
width: var(--user-sidebar-width) !important; /* 3 */
min-width: var(--user-sidebar-width) !important; /* 3 */
max-width: var(--user-sidebar-width) !important; /* 3 */
}
div.EwsJzb {
display: block !important;
position: static !important;
top: 0 !important;
}
div.EwsJzb > ul {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
white-space: normal !important; /* 4 */
}
/**
* No wrap text in sub dropdown menu.
*/
#hdtbMenus .hdtbU .hdtbItm .hdtb-mn-c {
white-space: nowrap !important;
}
/**
* 1. Set dropdowns bottom margin.
* 2. Remove decoration styles from dropdowns.
*/
#hdtbMenus .hdtbU {
margin-bottom: var(--user-sidebar-spacer) !important; /* 1 */
border: 0 !important; /* 2 */
box-shadow: none !important; /* 2 */
background: transparent !important; /* 2 */
}
/**
* Prevent dropdown toggle text from overflowing.
*/
#hdtbMenus .hdtb-mn-hd {
box-sizing: border-box !important;
}
/**
* Hide dropdown toggle by default.
*/
#hdtbMenus .hdtb-mn-hd,
#hdtbMenus .hdtb-mn-hd .mn-dwn-arw {
display: none !important;
}
/**
* Wrap dropdown toggle text if too long.
*/
#hdtbMenus .hdtb-mn-hd .mn-hd-txt {
white-space: normal !important;
}
/**
* 1. Make dropdown toggle visible if some search filters is on.
* 2. Align dropdown toggle with dropdowns.
* 3. Emphasize dropdown toggle text.
* 4. Remove mouse/touch events.
*/
#hdtbMenus .hdtb-mn-hd.hdtb-tsel[aria-label*="×"],
#hdtbMenus .hdtb-mn-hd.hdtb-tsel[aria-label*=" – "],
#hdtbMenus .hdtb-mn-hd.hdtb-tsel[aria-label*='<div class="sc">'] {
display: block !important; /* 1 */
padding-right: var(--user-sidebar-spacer) !important; /* 2 */
padding-left: var(--user-sidebar-spacer) !important; /* 2 */
color: var(--user-sidebar-primary-color) !important; /* 3 */
font-weight: bolder !important; /* 3 */
pointer-events: none !important; /* 4 */
}
/**
* Remove dropdown items background.
*/
#hdtbMenus .hdtbItm {
background: transparent !important;
}
/**
* 1. Remove checkmark on selected dropdown items.
* 2. Emphasize selected dropdown items.
*/
#hdtbMenus .hdtbItm.hdtbSel {
background: transparent !important; /* 1 */
color: var(--user-sidebar-primary-color) !important; /* 2 */
font-weight: bolder !important; /* 2 */
}
/**
* 1. Correct sub dropdowns position.
* 2. Normalize sub dropdowns text.
*/
#hdtbMenus .tnv-lt-sm {
height: auto !important; /* 1 */
overflow: visible !important; /* 1 */
font-weight: normal !important; /* 2 */
white-space: nowrap !important; /* 2 */
}
/**
* Remove "Custom range.." and "Exactly..." button styles.
*/
#cdrlnk,
.exylnk {
background: transparent !important;
color: inherit !important;
}
/**
* 1. Make "Reset" button visible.
* 2. Align "Reset" button with other dropdown items.
*/
#hdtb-rst.hdtb-mn-hd {
display: block !important; /* 1 */
padding: 0 var(--user-sidebar-spacer) !important; /* 2 */
}
/**
* Reset color filter blocks in image search.
*/
#color-specific #sc-block {
width: inherit !important;
}
/**
* Make result status text ("About xxx,xxx results") visible.
*/
.hdtb-ab-o .LHJvCe {
opacity: 1 !important;
top: 0 !important;
}
/* Main Content and Footer
========================================================================== */
/**
* Move main content and footer to the right.
*/
#center_col,
#slim_appbar {
margin-left: var(--user-sidebar-width) !important;
}
/**
* Align new material icons toolbar.
*/
#hdtb-msb-vis {
margin-left: var(--user-sidebar-width) !important;
}
#hdtb-msb-vis .hdtb-mitem:first-child {
margin-left: 0 !important;
}
/* Top Search Form
========================================================================== */
/**
* Align search text input with main content.
*/
#gsr:not(.hp) #searchform .tsf-p {
padding-left: var(--user-sidebar-width) !important;
}
/* Image Search Results
========================================================================== */
/**
* Reset image results position.
*/
#irc_bg {
left: 0 !important;
}
/**
* Do not wrap image result buttons.
*/
#irc_bg .irc_but {
white-space: nowrap !important;
}
/* Google Shopping
========================================================================== */
.sh-dr__restricts {
width: var(--user-sidebar-width) !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;
}
`)