Skip to content

百度搜索毛玻璃卡片美化(兼容深色模式插件) by atomseek

Screenshot of 百度搜索毛玻璃卡片美化(兼容深色模式插件)
Write a review Install Get Stylus

Details

Authoratomseek

LicenseMIT

Categoryhttps://www.baidu.com

Created

Updated

Size14 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

随便百度了CSS写了点东西，照着几个样式调出自己想要的效果。
效果如图，搜索卡片化，蓝色标题背景。
主力浏览器是火狐，其他浏览器自测效果。

兼容Dark Reader深色模式插件。
顺带兼容搜索引擎跳转插件：https://greasyfork.org/zh-CN/scripts/27752

Notes

2023-7-10：修正某些热门搜索词，顶部弹出的推荐搜索词汇位置
2023-2-17：对Dark Reader深色模式插件做兼容
2023-2-15：心血来潮重写了很多东西，更新了毛玻璃效果，如果不需要，请删除代码1中有关毛玻璃部分
2022-10-10：必应每日一图api失效，已更换
2021-12-18：必应每日一图api失效，已更换
2021-09-25：百度更新页面代码，相关搜索和页码元素错位，将其修正。
2021-09-09：改了搜索框居中父元素宽度，原先受滚动栏影响对不齐，现在宽度强制固定为浏览器窗口宽度。

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         百度搜索毛玻璃卡片美化(宽屏优化)
@version      20230710.17.00
@namespace    userstyles.world/user/atomseek
@description  随便百度了CSS写了点东西，照着几个样式调出自己想要的效果。
效果如图，搜索卡片化，蓝色标题背景。
主力浏览器是火狐，其他浏览器自测效果。

顺带兼容搜索引擎跳转插件：https://greasyfork.org/zh-CN/scripts/27752
@author       atomseek
@license      MIT
==/UserStyle== */

@-moz-document url-prefix("https://www.baidu.com/s?"), url-prefix("https://www.baidu.com/baidu") {
/* 背景 */
body 
{
/* 必应每日一图 */
    background:url(https://api.dujin.org/bing/1920.php);
    
    background-attachment: fixed !important;
    background-position:top left !important;
    background-size:calc(100vw)!important;
}
html[data-darkreader-scheme^="dark"] body
{
    background:#313131;
}


/* 搜索内容背景样式 */
#container #content_left .result,
#container #content_left .result-op,
#container div[tpl^="app/rs"],
#wrapper_wrapper #content_right #con-ar
{
    background-color: var(--darkreader-neutral-background,#fff );
}

/* 毛玻璃效果，如不想使用则删掉以下这块内容 */
/* ---------------------------------------------------------------------------- */
#container #content_left .result,
#container #content_left .result-op,
#container div[tpl^="app/rs"],
#wrapper_wrapper #content_right #con-ar
{
    background-color: var(--darkreader-neutral-background,#ffffffba );
    backdrop-filter: blur(20px)!important;
}
/* ---------------------------------------------------------------------------- */
}

@-moz-document url-prefix("https://www.baidu.com/s?"), url-prefix("https://www.baidu.com/baidu") {

/* 顶栏样式 */
/* 顶栏位置 */
#head
{
    position:fixed!important;
    height:70px!important;
    width:calc(100vw)!important;
    
    background: #fff0!important;
        
    transition: all 300ms cubic-bezier(.23, 1, .32, 1);
}
#head .head_wrapper
{
    transform: none!important;
    height:100%;
    width:100%;
    
    margin:0!important;
    padding:0!important;
}
/* 搜索栏位置 */
#head .s_form
{
    position:relative;
    height:100%!important;
    width:1100px!important;
    
    margin:0 auto 0 auto!important;
    padding:0 0 0 0!important;
}
/* 向下滚动顶栏样式 */
#head.s_down
{
    background: #73bcf6e6!important;
    
    border-bottom: none;
    box-shadow: 0 0 20px #00000038!important;
    
    transition: all 300ms cubic-bezier(.23, 1, .32, 1);
}


/* 定义弹出动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100px, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}  
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate(0, -10%);
    }
    to {
        opacity: 1;
        transform: none;
    }
}


/* 隐藏搜索框左侧logo */
#head #result_logo
{
    display:none;
}
/* 搜索分类按钮样式和动画 */
#s_tab
{
    position:relative;
    width:1100px!important;
    
    margin:0 auto 0 auto!important;
    padding:55px 0 0 0!important;
    
    animation-delay: 300ms;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeInUp;
}
#s_tab .s_tab_inner
{
    padding:0!important;
}

/* 搜索Tag相关界面 */
#searchTag,
#searchTag .tag-fixed
{
    position:relative!important;
    width:1100px!important;
    top:0px!important;
    
    margin:0 auto 0 auto!important;
    padding:5px 0 0 0!important;
    
    background: #fff0!important;
    
    animation-delay: 300ms;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeInUp;
}
#searchTag div[class^="tag-wrapper"]
{
    margin-left:0px !important;
    left:0px!important;
}
#searchTag div[class^="tag-scroll"]
{
    position:relative!important;
    left:0px!important;
}


/* 搜索框样式和动画 */
#head #form
{
    margin-left:0px!important;
    
    animation-delay: 300ms;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeInUp;
}

/* 搜索框文字区域宽度 */
#head #form #kw
{
    width: 580px!important;
}

/* 搜索框样式 */
#head #form .s_ipt_wr 
{
    position: relative;
    width: 680px!important;
    height: 40px!important;
    
    margin-left: 0px!important;
    
    border: none!important;
    border-radius: 10px!important;
    background-color: var(--darkreader-neutral-background,#d8d8d8a3);
    
    transition: all 300ms cubic-bezier(.23, 1, .32, 1);
    
}

/* 鼠标停留搜索框时颜色 */
#head #form .s_ipt_wr:hover 
{
    box-shadow: 0px 0px 3px 3px  var(--darkreader-selection-background,#fff0);
    background-color: var(--darkreader-neutral-background,#fafafa)!important;
}

/* 弹出搜索推荐栏 */
#head #form .bdsug-new
{
    width: 680px!important;
    
    border: none!important;
    box-shadow: 0px 3px 2px 0px #5b92bd36;
    border-bottom-right-radius:10px!important;
    border-bottom-left-radius:10px!important;
    
    background-color: var(--darkreader-neutral-background,#fafafa)!important;
    
    animation-duration: 100ms;
    animation-fill-mode: both;
    animation-name: fadeInDown;
}

/* 百度搜索按钮 */
#head #form .s_btn_wr
{
    width:auto!important;
    
    margin-left:20px!important;
}
#head #form .s_btn 
{
    width: 120px!important;
    height: 40px!important;
    
    border-radius: 10px!important;
    
    transition: all 300ms cubic-bezier(.23, 1, .32, 1);
}



/* 账号信息 */
#head #u
{
    right:20px!important;
}


}

@-moz-document url-prefix("https://www.baidu.com/s?"), url-prefix("https://www.baidu.com/baidu") {
/* 搜索内容页面 */
#wrapper_wrapper
{
    width:calc(100vw)!important;
    margin:0!important;
}

/* 固定宽度，防止元素错位 */
#wrapper_wrapper #container,
#wrapper_wrapper div[tpl^="app/page"],
#wrapper_wrapper div[tpl^="app/footer"]
{
    width:1100px!important;
    margin:0 auto 0 auto!important;
    padding:0!important;
}

/* 搜索工具 */
#container div[tpl^="app/search-tool"] 
{
    padding:0px 15px 0px 15px!important;
}
#container div[tpl^="app/search-tool"] div[class^="options"]
{
    width:100%!important;
}

/* 左侧结果栏内元素统一宽度 */
#wrapper_wrapper #container .result-molecule,
#wrapper_wrapper #container #content_left,
#wrapper_wrapper #container #content_left .result,
#wrapper_wrapper #container #content_left .result-op
{
    width:650px!important;
}

/* 左侧搜索结果样式 */
#container #content_left .result,
#container #content_left .result-op
{
    margin:0 0 10px 0!important;
    padding:0px 15px 15px 15px!important;
    
    overflow: hidden!important;
    border-radius: 10px!important;
    box-shadow: 0 0 10px 2px #0000003b!important;
    
    transition: all 300ms cubic-bezier(.23, 1, .32, 1);
}
html[data-darkreader-scheme^="dark"] #container #content_left .result
{
    box-shadow: 0 2px 8px 2px #8282823b!important;
}

/* 相关搜索样式 */
#container div[tpl^="app/rs"]
{
    margin:0px!important;
    padding:0px 15px 0px 15px!important;
    
    overflow: hidden!important;
    border-radius: 10px!important;
    box-shadow: 0 0 10px 2px #0000003b!important;
    
    transition: all 300ms cubic-bezier(.23, 1, .32, 1);
}
#container #rs_new,
#container #rs_new table
{
    width:100%!important;
}
#container #rs_new a
{
    width:250px!important;
    
    overflow: hidden!important;
    border-radius: 10px!important;
    box-shadow: 1px 1px 1px 1px #0000001a!important;
    
    background-color: #ffffff82!important;
    
    transition: all 300ms cubic-bezier(.23, 1, .32, 1);
}




/* 右侧结果样式 */
#container #content_right
{
    width:auto!important;
    margin-top:0px!important;
}
#container #content_right #con-ar
{
    width: 370px!important;
    
    margin: 40px 0 0 0!important;
    padding: 15px!important;
    
    border-radius: 10px!important;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2)!important;
    
    transition: all 300ms cubic-bezier(.23, 1, .32, 1);
}
#container #content_right div[class^="right-ceiling"]
{
    position:static!important;
}
#container #content_right .hint_right_middle
{
    display:none;
}


/* 鼠标悬停在内容上的效果 */
/* 左侧搜索内容 */
#container #rs_new a:hover,
#container div[tpl^="app/rs"]:hover,
#container #content_left .result:hover,
#container #content_left .result-op:hover,
#container #content_right #con-ar:hover
{
    border-radius: 25px!important;
    box-shadow: 0px 0px 3px 3px var(--darkreader-neutral-text,#0000003b)!important;
    
    background: var(--darkreader-neutral-background,#ffffffde);
    
    transition: all 300ms cubic-bezier(.23, 1, .32, 1);
}
html[data-darkreader-scheme^="dark"] #container #content_left .result:hover
{
    box-shadow: 0 0px 3px 3px #ffffffde!important;
}

/* 鼠标悬停在文字内容的效果 */
#container #content_left div[class^="c-span"] 
{
    padding: 6.3px!important;
    margin-right: 0!important;
    
    transition: 300ms!important;
}
#container #content_left div[class^="c-span"]:hover {
    box-shadow: 0 0 10px var(--darkreader-neutral-text,#0000003b)!important;
    
    background: var(--darkreader-neutral-background,#ffffffb5)!important;
}
/* 右侧结果图片内容 */
#container #content_right div[class^="c-span"]:hover
{
    
    border-radius:8px!important;
    box-shadow: 0px 0px 5px 10px var(--darkreader-neutral-text,#fff)!important;
    
    background: var(--darkreader-neutral-background,#fff);
    
    transition: all 300ms cubic-bezier(.23, 1, .32, 1);
}
/* 右侧结果新闻内容 */
#container #content_right div[class^="toplist1-td"]:hover
{
    
    border-radius: 3px!important;
    box-shadow: 0px 0px 2px 2px var(--darkreader-neutral-text,#0000003b)!important;
    
    background: var(--darkreader-neutral-background,#ffffffde);
    
    transition: all 300ms cubic-bezier(.23, 1, .32, 1);
}


/* 搜索结果顶部蓝条 */
#container #content_left .result h3,
#container #content_left .result-op h3
{
    margin: 0 -20px 10px!important;
    padding: 8px 20px 5px!important;
    
    border-radius: 10px 10px 0 0!important;
    
    background-color: #9dddecab!important;
    
}
#container #content_left .bg-header_5SZvD
{
    display:none!important;
}

/* 鼠标经过搜索结果下划线动画*/
#container #content_left .result h3 a ,
#container #content_left .result-op h3 a 
{
    position: relative
}
#container #content_left .result h3 a:after,
#container #content_left .result-op h3 a:after
{
    position: absolute;
    width: 0;
    left: 100%;
    bottom: -3px;
    
    content: "";
    border-bottom: 2px solid #2866bd...

Reviews

No reviews yet.