Google Search Sidebar

A user script and user style to move Google search tools to sidebar.
As of 22.09.2017. See ბოლო ვერსია.
Visit the author's site for support, ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name            Google Search Sidebar
// @namespace       jmln.tw
// @version         0.1.2
// @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.tld/search?*
// @include         https://www.google.tld/webhp?*
// @compatible      firefox
// @compatible      chrome
// @compatible      opera
// @run-at          document-start
// ==/UserScript==

(function () {
  var style = document.createElement('style')
  style.id = 'GM_sidebar'
  style.type = 'text/css'
  style.textContent = `
    /* CSS Variables */

    :root {
      --user-sidebar-width: 200px;
      --user-sidebar-spacer: 30px;
      --user-sidebar-primary-color: #dd4b39;
    }

    /* "Tools" Button */

    #hdtb-tls {
      display: none !important;
    }

    /* Search Tools Menu */

    #hdtbMenus {
      display: block !important;
      position: static !important;
      float: left !important;
      height: 0 !important;
      overflow: visible !important;
      padding: 0 !important;
      background: transparent !important;
    }

    #hdtbMenus .hdtb-mn-cont {
      height: 0 !important;
    }

    #hdtbMenus .hdtb-mn-hd,
    #hdtbMenus .hdtbU {
      display: block !important;
      position: relative !important;
      top: 0 !important;
      width: var(--user-sidebar-width) !important;
      min-width: var(--user-sidebar-width) !important;
      max-width: var(--user-sidebar-width) !important;
      white-space: normal !important;
    }

    #hdtbMenus .hdtbU {
      margin-bottom: var(--user-sidebar-spacer) !important;
      border: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
    }

    #hdtbMenus .hdtb-mn-hd {
      box-sizing: border-box !important;
    }

    #hdtbMenus .hdtb-mn-hd,
    #hdtbMenus .hdtb-mn-hd .mn-dwn-arw {
      display: none !important;
    }

    #hdtbMenus .hdtb-mn-hd .mn-hd-txt {
      white-space: normal !important;
    }

    #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;
      padding-right: var(--user-sidebar-spacer) !important;
      padding-left: var(--user-sidebar-spacer) !important;
      color: var(--user-sidebar-primary-color) !important;
      font-weight: bolder !important;
      pointer-events: none !important;
    }

    #hdtbMenus .hdtbItm {
      background: transparent !important;
    }

    #hdtbMenus .hdtbItm.hdtbSel {
      background: transparent !important;
      color: var(--user-sidebar-primary-color) !important;
      font-weight: bolder !important;
    }

    /* Search Tools Sub Menu */

    #hdtbMenus .tnv-lt-sm {
      height: auto !important;
      overflow: visible !important;
      font-weight: normal !important;
      white-space: nowrap !important;
    }

    /* "Custom range..." and "Exactly..." Button */

    #cdrlnk,
    .exylnk {
      background: transparent !important;
      color: inherit !important;
    }

    /* "Reset" Button */

    #hdtb-rst.hdtb-mn-hd {
      display: block !important;
      padding: 0 var(--user-sidebar-spacer) !important;
    }

    /* Color Filter in Image Search */

    #color-specific #sc-block {
      width: inherit !important;
    }

    /* Result Status "About x results (y seconds)" Text */

    #resultStats {
      top: 0 !important;
      opacity: 1 !important;
    }

    /* Main Content and Footer */

    #hdtb-msb .hdtb-mitem:first-child,
    #center_col,
    #fbar ._HR,
    #fbar ._nW {
      margin-left: var(--user-sidebar-width) !important;
    }

    #appbar {
      width: calc(100% - var(--user-sidebar-width)) !important;
      margin-left: var(--user-sidebar-width) !important;
    }

    #appbar .ab_tnav_wrp,
    #appbar #lxhdr {
      margin-left: 0 !important;
    }

    #appbar ._bfj {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }

    /* Top Search Form */

    #searchform .tsf-p {
      padding-left: var(--user-sidebar-width) !important;
    }

    /* Wikipedia Information Block */

    #rhs {
      transform: translateX(var(--user-sidebar-spacer)) !important;
    }

    /* Image Search Results */

    #irc_bg {
      left: 0 !important;
    }

    #irc_bg .irc_b {
      width: calc(33% - var(--user-sidebar-width)) !important;
      min-width: 200px !important;
    }

    /* Image Search Result Buttons */

    #irc_bg .irc_but {
      white-space: nowrap !important;
    }

    #irc_bg .irc_but_t_pad {
      display: none !important;
    }
  `

  document.documentElement.appendChild(style)
})()