Greasy Fork

Greasy Fork is available in English.

Google 多列样式

Google 搜索结果多列展示

目前为 2023-03-14 提交的版本。查看 最新版本

/* ==UserStyle==
@name        Google Multi-Columns Style
@name:zh-CN    Google 多列样式
@namespace    doufu.ru
@version      1.0.0
@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,2,3]
==/UserStyle== */
@-moz-document regexp("https?://(www.?)google.com/search.*") {
    #searchform {
        display: flex;
        justify-content: center;
        gap: 8px;
    }
    #searchform form.tsf {
        margin-right: 25px;
    }
    #hdtb,
    #slim_appbar {
        display: flex;
        justify-content: center;
    }
    #hdtb-msb > div:first-child > div:first-child,
    #appbar,
    #center_col {
        margin-left: 0 !important;
    }
    #result-stats {
        width: 100%;
        text-align: center;
    }
    #rcnt {
        width: 100%;
        max-width: unset;
        justify-content: center;
    }
    #rhs {
        display: none;
    }
    @media (min-width: 1065px) {
        #center_col {
            width: 960px;
        }
        #rso {
            display: flex;
            flex-wrap: wrap;
        }
        #rso > div {
            width: 50%;
        }
        #rso > div > div {
            margin: 8px;
            overflow: hidden;
            width: calc(100% - 16px) !important;
        }
        #rso > div > div > div > h2 + div {
            width: 100%;
        }
    }
    @media (min-width: 1280px) {
        #center_col {
            width: 1280px;
        }
    }
    @media (min-width: 1536px) {
        #center_col {
            width: 1480px;
            min-width: unset;
        }
        #rso > div {
            --max-columns: maxColumns;
            width: calc(100% / max(2, var(--max-columns)));
        }
    }
}