Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

分享自己用的样式改进和暗黑模式css #550

Open
GVD20 opened this issue Sep 30, 2022 · 3 comments
Open

分享自己用的样式改进和暗黑模式css #550

GVD20 opened this issue Sep 30, 2022 · 3 comments

Comments

@GVD20
Copy link

GVD20 commented Sep 30, 2022

样式改进和暗黑模式css

在原脚本的基础上,分别搭配Stylus和DarkReader使用。
CSS是一个个硬替换的,而且比较乱,凑合用一下啦。
同时也包含了对油猴脚本SearchEngingJump的适配

改进版:

cg1

包含:

  • 首页和搜索页的搜索框圆角
  • 搜索结果的圆角
  • 各种阴影的微调
  • 搜索框和搜索结果hover动画
  • 原有样式一些问题的修复

CSS:

.wrapper_new .s_ipt_wr {
    border: 2px solid #fff0;
}
#head_wrapper .s_btn{
    transition-duration: 0.2s;
    border-radius: 0 20px 20px 0;
}
#head_wrapper .ipt_rec, #head_wrapper .soutu-btn{
    transition-duration: 0.2s;
}
body{
   background:#f7f7f7
}
#s_main{
    box-shadow: 0 1px 30px 0 rgb(0 0 0 / 8%);
}
.container_l.sam_newgrid .cr-content{
    width: 500px
}
.c-group-wrapper{
    width: 690px;
    background :rgb(253 253 253)
}
.container_l.sam_newgrid #content_right{
    width: 300px
}
#wrapper #rs, #wrapper #content_left .result, #wrapper #content_left>.c-container{
    border-radius: 15px;
    width: 750px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .07);
    transition-duration: 2s!important;
}
#wrapper #content_left>.c-container:hover{
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2)!important;
    transition-duration: 0.5s!important;
}
#s_menu_gurd.s-down{
    background:#fff;
}
.wrapper_new #form .bdsug-new {
    width: 559px;
}
.vmp-zxenterprise-new_qayMC .vmp-zxenterprise-border_11NYN {
    background:#fff;
    left:18px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .07)!important;
    width:716px;
    border: 1px solid rgba(0,0,0,0.1);
}
.options_2Vntk{
    width:752px
}
.new-pmd .c-img-border{
    border:0px!important
}
#head_wrapper #kw{
    transition-duration: 0.2s;
    border-radius: 20px 0 0 20px !important;
}
#head_wrapper #kw:focus{
    transition-duration: 0.2s;
    border-radius: 10px 0 0 10px !important;
}
.soutu-env-new .soutu-layer #soutu-url-kw{
    transition-duration: 0.2s;
    border-radius: 20px 0 0 20px !important;
}
.soutu-env-new .soutu-layer .soutu-url-btn-new{
    transition-duration: 0.2s;
    border-radius: 0 20px 20px 0 !important;
}
#s_top_wrap .s-center-box{
    box-shadow: 0 1px 30px 0 rgb(0 0 0 / 2%);
}
#form{
    box-shadow: 0 1px 30px 0 rgba(0, 0, 0, .17);
    transition-duration: 1s;
}
#form:hover{
    box-shadow: 0 9px 25px 0 rgba(0, 0, 0, .23);
    transition-duration: 0.2s;
}
.fm{
    border-radius: 20px 20px 20px 20px !important;
}
.vmp-zxenterprise-new_qayMC .vmp-zxenterprise-border_11NYN {
    background:#fff;
    left:18px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .07)!important;
    width:716px;
    border: 1px solid rgba(0,0,0,0.1);
}
.sp-separator {
    width:750px!important;
    margin: 10px -2px 8px!important;
}
#wrapper #content_left > .result h3, #wrapper #content_left > .c-container h3{
    border-radius: 15px 15px 0px 0px !important;
}

.new-pmd .c-border {
    width: 700px;
    box-shadow: 0 0px 0px 0 rgba(0,0,0,0)!important;
}
.c-container h3#head_wrapper #kw{
    transition-duration: 0.2s;
    border-radius: 20px 20px 0 20px !important;
}

暗黑样式:

cg2

包含:

  • 首页和搜索页的暗黑色调
  • 百度logo降饱和度和提高亮度,增强其在黑色背景下的可读性

CSS:

/*背景*/
body{
    background:#1e1e1e!important
}   
/*顶栏*/
.s-top-wrap{
   background:#2b2b2b!important
}
/*顶栏字体*/
.c-color-t{
    color:#fff
}
/*搜索框背景*/
#head_wrapper #kw{
    background:#1e1e1e;
    border-color:#646464;
    color:#fff;
}
/*识图按钮背景*/
#head_wrapper .ipt_rec, #head_wrapper .soutu-btn{
    background:#1e1e1e url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-10750f3f7d.png) no-repeat
}
/*底栏*/
#bottom_layer{
    background:#1a1a1a
}
/*底栏字体*/
#bottom_layer .text-color{
    color:#484848
}
/*提示框*/
.bdsug{
    background:#1e1e1e;
}
#head_wrapper #form .bdsug-new ul li{
    color:#97afd0
}
#head_wrapper #form .bdsug-new ul li b{
    color:#828282;
}

#wrapper #rs, #wrapper #content_left .result, #wrapper #content_left>.c-container{
    background:#2f2f2f!important 
}
.new-pmd .c-abstract{
    color:#fff
}
#sej-container{
    background:#e1e1e1
}
#wrapper #content_left>.result[tpl='soft'] .op-soft-title, #wrapper #content_left>.result h3, #wrapper #content_left>.c-container h3{
    background:#444!important
}
#wrapper #content_left>.c-container[tpl='soft'] .op-soft-title a, #wrapper #content_left>.c-container[tpl='soft'] .op-soft-title a em, #wrapper #content_left>.c-container h3 a, #wrapper #content_left .result h3 a em, #wrapper #content_left .result-op h3 a em{
    color:#fff
}
em{
    color:#ff7a7a
}
#wrapper #content_left .f13 a{
    color:#28a25c!important
}
#container.sam_newgrid .result .c-tools .c-icon, #container.sam_newgrid .result-op .c-tools .c-icon{
    color:#ffffff4f
}
a{
    color:#fff!important
}
.new-pmd .c-color-gray{
    color:#9f9f9f
}
a em{
    color:#ff7a7a
}
.new-pmd .c-color-t{
    color:#9f9f9f
}
#page{
    background:#1e1e1e!important;
}
.rs-link_2DE3Q{
    background:#2e2e2e!important;
}
.rs-link_2DE3Q:hover {
    color: #bfcdff;
    background: #383838
}
.new-pmd .c-color-link {
    color: #b9b9b9!important;
    transition-duration: 0.2s;
}
.page_2muyV strong, .page_2muyV a {
    background-color: #282828!important;
}
#wrapper #page .n:hover, #wrapper #page a:hover .pc {
    border: 1px solid transparent;
    background: #3e3e3e!important;
    color: #72aaff!important;
}
.foot-container_2X1Nt {
    background: #181818!important;
}
body #head {
    background-color: rgba(0, 0, 0, 0)!important;
}
#wrapper #s_tab {
    border-bottom: #e0e0e0 0px solid!important;
    background-color: #2e2e2e!important;
}
form.fm .s_ipt_wr.bg {
    background: #1e1e1e!important;
}
#kw {
    color:#fff;
}
.opr-toplist1-link_2YUtD a:link {
    color: #c3c3c3;
}
.new-pmd.c-container {
    color: #fff;
}
.a-se-st-single-video-zhanzhang-capsule {
    color: #CDD4FF!;
}
.wrapper_new #form .bdsug-new ul li b {
    font-weight: 400;
    color: #9b9b9b;
}
.wrapper_new #form .bdsug-new ul li {
    color: #d0d0d0;
}
.wrapper_new #form .bdsug-new {
    width: 559px;
}
.wrapper_new #u>a {
    color: #fff;
}
/*.wrapper_new .s_ipt_wr {
border: 2px solid #5e5e5e;}*/
.wrapper_new #s_tab a {
    color: #b9b9b9;
}
#result_logo img{
    filter:brightness(300%)contrast(90%)
}
.new-pmd .c-color-text {
    color: #fff!important;
}
.opr-toplist1-link_2YUtD a:link {
    color: #adadad;
}
.pc-tabs-content_2Ga6e {
    background: #303030;
}
.pc-tabs-nav_3QAFE {
    color: #9195A3!important;
    background: #404040;
}
.vmp-zxenterprise-new_qayMC .vmp-zxenterprise-border_11NYN {
    background: #2F2F2F;
}
.vmp-zxenterprise-new_qayMC .vmp-zxenterprise-border_11NYN .vmp-describe_3zafc{
color:#fff
}
#head_wrapper .s-p-top{
    filter:brightness(300%)contrast(90%)
}
#wrapper #content_left>.c-container:hover{
    box-shadow: 0 0 15px 0 rgba(255, 255, 255, .5);
    background:#383838
}
.op_dict3_inlineblock{
color:#b1d0ff
}
.op_dict3_else_items a{
color:#b1d0ff
}
.op_dict3_else_items a:hover{
color:#b1d0ff
}
.c-container .c-result-content:hover{
background:#404040!important;
}
#wrapper #content_left .c-container{
border:0px!important;
background-color:#383838!important;
}
}
.c-container:hover{
background-color:#383838!important;
}
#bottom_layer .lh{
color:#222222
}
.c-floating-box {
    background: #343434;
}.s-top-left-new .s-top-more {
    background: #282828;
}

#sej-container {
    background: #121212;
}
#wrapper #content_left .result-op:hover, #wrapper #content_left .result:hover, #wrapper #content_left .result-op:hover article{
background-color: #383838 !important;
}
body{
color:white
}
#wrapper.wrapper_new .bdpfmenu, #wrapper.wrapper_new .usermenu {
    background: #383838;
}
.wrapper_new #u .bdpfmenu a:hover, .wrapper_new #u .usermenu a:hover{
    background: #505050;
}
.wrapper_new #u .bdpfmenu a, .wrapper_new #u .usermenu a{

    background: #505050;
}
.item_3WKCf {
    background: #525252 !important;
}
.wenda-abstract-new_YM2dW em {
    color: #d9dbff !important;
}
.selected-search-box {
    background: #5a5a5a !important;
}
.render-item_GS8wb .group-content_3jCZd .group-sub-abs_N-I8P {
    color: #fff !important;
}
@langren1353 langren1353 pinned this issue Sep 30, 2022
@Jyuan-Ip
Copy link

大佬有没有必应的。

@tkp206093
Copy link

暗黑色调

error

image

@GVD20
Copy link
Author

GVD20 commented Oct 30, 2022

暗黑色调

error

image

用DarkReader静态模式试一下

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants