Google Multi-Columns Style

styled google search result list to multi-columns

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

/* ==UserStyle==
@name:zh-CN    Google 多列样式
@name        Google Multi-Columns Style
@namespace    doufu.ru
@version      1.0.4
@description   styled google search result list to multi-columns
@description:zh-CN Google 搜索结果多列展示
@author      Ryan
@license    gpl-3.0
@preprocessor stylus
@var number   maxColumns "Max Columns"       [2,1,3,1]
==/UserStyle== */
@-moz-document regexp("^https?:\\/\\/(www.?)google\\.co(m?)(\\.[a-z]+)?\\/search.*") {
    body {
        overflow-x: hidden;
    }
    .main {
        margin: 0 auto;
    }
    #searchform {
        display: flex;
        justify-content: center;
        gap: 8px;
        min-width: unset;
    }
    #searchform form.tsf {
        margin-right: 25px;
    }
    #hdtb,
    #slim_appbar {
        display: flex;
        justify-content: center;
    }
    #rcnt {
        width: 100%;
        max-width: unset;
        justify-content: center;
        --center-abs-margin: 0;
    }
    #main {
        width: 100%;
        max-width: calc(100% - 240px) !important;
        min-width: unset !important;
    }
    if maxColumns > 1 {
        #rhs {
            display: none;
        }
        #center_col {
            width: 100%;
        }
        #rso,
        #kp-wp-tab-overview,
        div[data-state-token],
        [id^="arc-srp"] > div[decode-data-ved]{
            --columns: maxColumns;
            --gap: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: var(--gap);
        }
        #kp-wp-tab-overview > span {
            display: none;
        }
        #rso > div,
        #kp-wp-tab-overview > div,
        [id^="arc-srp"] > div[decode-data-ved] > div {
            min-width: unset;
            max-width: unset;
            width: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
            margin: 0 !important;
        }
        #rso > div > div {
            margin: 0 !important;
        }
        #kp-wp-tab-overview > div:last-child,
        div[data-state-token] > div:last-child,
        #tvcap {
            display: none;
        }
    }
}