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.0
// @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?*
// @include https://encrypted.google.com/search?*
// @include https://encrypted.google.com/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 {
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 .hdtb-mn-hd,
#hdtbMenus .hdtbU {
display: block !important; /* 1 */
position: relative !important; /* 2 */
top: 0 !important; /* 2 */
width: var(--user-sidebar-width) !important; /* 3 */
min-width: var(--user-sidebar-width) !important; /* 3 */
max-width: var(--user-sidebar-width) !important; /* 3 */
white-space: normal !important; /* 4 */
}
/**
* 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.
*/
#resultStats {
top: 0 !important;
opacity: 1 !important;
}
/* Main Content and Footer
========================================================================== */
/**
* Move main content and footer to the right.
*/
#hdtb-msb .hdtb-mitem:first-child,
#cnt:not(.rfli) #center_col,
#cnt:not(.rfli) #fbar ._HR,
#cnt:not(.rfli) #fbar ._nW {
margin-left: var(--user-sidebar-width) !important;
}
/**
* Move "People also search..." bar to the right.
*/
#cnt:not(.rfli) #appbar {
width: calc(100% - var(--user-sidebar-width)) !important;
margin-left: var(--user-sidebar-width) !important;
}
#cnt:not(.rfli) #appbar .ab_tnav_wrp,
#cnt:not(.rfli) #appbar #lxhdr {
margin-left: 0 !important;
}
#cnt:not(.rfli) #appbar ._bfj {
padding-right: 0 !important;
padding-left: 0 !important;
}
/**
* Move Wikipedia block to the right.
* (Use transform because the block already has margin.)
*/
#cnt:not(.rfli) #rhs {
transform: translateX(var(--user-sidebar-spacer)) !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;
}
/**
* Prevent image results from overflowing.
*/
#irc_bg .irc_b {
width: calc(33% - var(--user-sidebar-width)) !important;
min-width: 200px !important;
}
/**
* Do not wrap image result buttons.
*/
#irc_bg .irc_but {
white-space: nowrap !important;
}
/**
* Hide image result button text by default (only icon).
*/
#irc_bg .irc_but_t_pad {
display: none !important;
}
/* Action Menu
========================================================================== */
/**
* Hide action menu toggle.
*/
.action-menu .ab_button {
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;
}
`)