1.简单介绍
百度美化TAB版 ( 精简美化、卡片模糊、十余种风格一键更换 )
建议使用设置中氢气系列壁纸,纯色不花眼
利用浏览器插件Stylus,对百度搜索页面风格进行一系列的美化。
现已适配搜索页、资讯页、视频页,点击查看使用教程。
已经上传到 UserStylus ,点击跳转至样式安装页面。
2.更新日志
百度美化TAB 3.0 2021/9/18:
1.加入Stylus预处理,实现更高级的代码逻辑。
2.新增十种背景风格,一键定制自己专属风格。
3.进一步地开放设置,高斯模糊颜色搭配你定!
4.修复几处错版问题,若有问题欢迎联系反馈~
百度美化TAB 3.0 2021/9/16:
1.可自定义风格,调节卡片颜色模糊
2.内置五种可选风格,设置一键更换
3.主要功能
1.精简繁冗元素,页面重新布局
2.搜结果卡片化,背景高斯模糊
3.一键切换样式,定制专属风格
4.食用方法
1.下载浏览器插件: 扩展 Stylus
2. 安装 CSS 样式: Stylus样式 百度美化TAB
5.说明注意
1.拥有十数中风格可选,风格涵盖动漫,人物,简约等,可根据喜好自选。
2.本样式尽可能地开放调参设置,不用修改代码也能定制属于自己的风格。
3.建议卡片颜色与背景图主色调相近,更改卡片颜色,卡片阴影,透明度。
4.极少数的网页搜索结果栏卡片化后,适配效果不太完美,欢迎反馈问题。
目前已适配百度网页、资讯页、视频页,效果分别如下图:
6.源码更新 2021/9/16
@-moz-document url-prefix("http://www.baidu.com/s"), url-prefix("https://www.baidu.com/s") {
/* ==UserStyle==
@name 百度美化TAB版 (精简美化、卡片模糊、多样式可选)
@namespace userstyles.world/user/alpherkin
@author 无白Herk
@version 2.5.210915
@description 百度搜索,卡片模糊,精简美化,自选样式 已适配百度网页、资讯、视频 TCB表示TabulateCardBlur
@advanced dropdown default "全局默认样式" {
0 "自定义样式" <<<EOT EOT;
1 "默认样式1" <<<EOT :root {
--bg_img: url(https://pic.3gbizhi.com/2020/0821/20200821111007102.jpg);
--card_color: rgba(154, 154, 154, .8);
--card_shadow: rgba(49, 49, 49, .5);
--card_radius: 15px;
--input_color: rgba(166, 167, 168, .85);
} EOT;
2 "默认样式2" <<<EOT :root {
--bg_img: url(https://doge.zzzmh.cn/wallpaper/origin/139d5a3c75724393bcd2ea1ab5350090.jpg?response-content-disposition=attachment);
--card_color: rgba(208, 219, 232, .8);
--card_shadow: rgb(109, 129, 142);
--card_radius: 15px;
--input_color: rgba(206, 225, 238, .95);
} EOT;
3 "默认样式3" <<<EOT :root {
--bg_img: url(https://doge.zzzmh.cn/wallpaper/origin/3e8c0bd21c7c4fa3b60e0104028a8dda.jpg?response-content-disposition=attachment);
--card_color: rgba(207, 221, 236, .8);
--card_shadow: rgb(134, 154, 168);
--card_radius: 15px;
--input_color: rgba(199, 220, 235, .95);
} EOT;
4 "默认样式4" <<<EOT :root {
--bg_img:url(https://doge.zzzmh.cn/wallpaper/origin/66bf69ac882111ebb6edd017c2d2eca2.jpg?response-content-disposition=attachment);
--card_color: rgba(224, 226, 207, .8);
--card_shadow: rgb(158, 159, 120);
--card_radius: 15px;
--input_color: rgba(214, 214, 194, .95);
} EOT;
5 "默认样式5" <<<EOT :root {
--bg_img:url(https://www.wallpaperup.com/wallpaper/download/212854/94376beb019e2f7860dd5de793fdf44a);
--card_color: rgba(214, 215, 200, .8);
--card_shadow: rgb(163, 164, 125);
--card_radius: 15px;
--input_color: rgba(212, 212, 192, .95);
} EOT;
}
@advanced text tips "||||||||||选择自定义样式||||||||||" 以下配置才会生效
@advanced text user-img "填入图片链接" https://pic.3gbizhi.com/2020/0909/20200909114051862.jpg
@advanced color card-color "卡片颜色透度" rgba(92, 92, 92, .6)
@advanced color card-shadow "卡片阴影颜色" rgba(52, 52, 52, .5)
@advanced text card-radius "卡片圆角弧度" 15px
==/UserStyle== */
}
@-moz-document url-prefix("http://www.baidu.com/s"), url-prefix("https://www.baidu.com/s") {
/* =============用户自定 使用配置============= */
/* 变量说明 变量说明 变量说明 变量说明 变量说明
--bg_img:括号内可自定义背景图片链接
--card_bgcolor: 卡片背景颜色
--card_radius: 卡片圆角弧度
--input_color: 搜索框的颜色
变量说明 变量说明 变量说明 变量说明 变量说明 */
/* ——————————————————————————用户自定 使用配置—————————————————————— */
/*用户自定义样式*/
:root {
--bg_img: url( /*[[user-img]]*/);
--card_color: /*[[card-color]]*/ ;
--card_shadow: /*[[card-shadow]]*/;
--card_radius: /*[[card-radius]]*/;
}
/*自带默认样式*/
/*[[default]]*/
}
@-moz-document url-prefix("http://www.baidu.com/s"), url-prefix("https://www.baidu.com/s") {
/* =============百度搜索 卡片模糊============= */
/* ————————————————————————搜索结果美化—————————————————————— */
#container {
margin: 0 !important;
width: 100% !important;
}
#content_left,
#content_left>.ecom_pingzhuan.old-pmd+div,
#content_left>.video_list_container {
display: flex;
/*卡片父容器调整*/
flex-wrap: wrap;
justify-content: center;
width: 100% !important;
padding: 0px !important;
}
/* 双栏卡片 圆角模糊 */
[id^="1"], [id^="2"], [id^="3"], [id^="4"], /*普通搜索结果*/
[id^="5"], [id^="6"], [id^="7"], [id^="8"], [id^="9"],
#content_left .video_list.video_short, /*百度视频搜索*/
#content_left>div[class='c-container result new-pmd'],
#content_left>div[class='c-container result'] {
width: 600px !important; /*双栏卡片 整体风格*/
height: 123px !important;
padding: 8px 0px 0px 8px !important;
margin: 10px !important;
display: block !important;
overflow: auto !important;
border-radius: var(--card_radius) !important; /*搜索结果圆角模糊*/
background: var(--card_color) !important;
box-shadow: 0px 10px 15px var(--card_shadow) !important;
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
box-sizing: content-box!important; /*部分卡片属性*/
}
/* 卡片内嵌 消除边界 */
#content_left>div>div>article>section>div,
#content_left>div[class='c-container result'].c-result-content {
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
}
@-moz-document url-prefix("http://www.baidu.com/s"), url-prefix("https://www.baidu.com/s") {
/* =========百度搜索 基础设置=========*/
/* ———————————————————————百度头部 顶栏设置——————————————————— */
.s_form/*百度头部 搜索框 */ {
width: 800px !important;
margin: auto !important;
padding: 0 !important;
}
.s_ipt_wr/*百度搜索框*/ {
background-color: var(--card_color) !important;
}
.s_ipt_wr:hover, .ipthover, .iptfocus,
.bdsug.bdsug-new /*搜索框建议卡片*/ {
background-color: var(--card_color) !important;
}
#head/*隐藏搜索框底图*/ {
position: fixed !important;
height: 0px !important;
}
#s_tab/*搜索选项(网页、资讯、视频)*/ {
top: -10px !important;
height: 45px !important;
padding-left: 0px !important;
text-align: center!important;
background: rgba(0, 0, 0, 0) !important;
}
#header_top_bar /*资讯页相关数目*/ {
margin:0 0 0 420px
}
/* ————————————————————————搜索结果美化—————————————————————— */
a {
color: #4879BD;
/*搜索结果 标题颜色*/
font-size: 16px !important;
text-decoration: none !important;
}
a:hover {
border-bottom: #4879BD 1.2px solid;
text-decoration: none !important;
}
em {
color: #EA4335;
font-size: 16px !important;
text-decoration: none !important;
}
.c-showurl.c-color-gray {
font-size: 12px !important;
}
.page-inner {
padding-left: 10px !important;
text-align: center!important;
}
#page {
background-color: rgba(0, 0, 0, 0) !important;
}
/* ——————————————————————设置页面背景图片—————————————————————— */
body {
background-image: var(--bg_img) !important;
background-attachment: fixed !important;
background-size: cover !important;
}
/* ———————————————————————搜索页精简隐藏—————————————————————— */
#u, /*最右上角用户*/
#rs, /*相关搜索条数*/
#result_logo img, /*百度logo图片*/
#content_right, /*百度右侧推广*/
::-webkit-scrollbar, /*右垂直滚动条*/
.nums.new_nums, /*相关搜索数目*/
.foot-container_2X1Nt, /*最底部帮助栏*/
.foot-inner, /*最底部帮助栏*/
.c-tools.c-gap-left, /*百度快照图标*/
.m.c-gap-left.c-color-gray.kuaizhao.snapshoot {
display: none;
}
}
免责声明:源码仅用于学习交流,请勿用于非法用途,转载请联系作者授权。