Google Search Sidebar

A user script and user style to move Google search tools to sidebar.
当前为 2021-01-26 提交的版本，查看最新版本。
换行
// ==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;
  }
`)
欢迎访问Greasy Fork镜像
