【stylus】通过css简化搜索页面样式

LAM LAB2023-08-21 8:50

发现stylus专门修改样式的插件后，发现之前写JS调整样式的方式是在太蠢了，不过有一些交互的东西还是得用JS，例如设置按钮来交互显示功能，或记录功能等。

插件可以让简化网站变得简单，而且可以实时显示，真的不要太舒服，以后看那个网站不顺眼，就可以直接简化，不懂就查一下一下CssSelector。

使用技巧。下载一个别人模板，然后根据自己的喜好去修改。

百度样式调整

json 复制代码

 /* 关闭用户 */ 
.result-molecule, #u {
    display: none;
}
    
/* 调整关闭元素后导致的显示异常 遮罩高度调整 */
 #s_tab {
    padding-left: 150px !important;

} 
.s_form {
    height: 10px !important;
}

 /* 调整关闭元素后导致的显示异常 搜索内容*/
#content_left {
    padding-top: 60px !important;
    width: 90%!important;
}
 /* 调整关闭元素后导致的显示异常 导航栏*/
 #s_tab {
    padding-left: 150px !important;
} 

 /* 固定分列显示后的高度，否则一高一低浪费很多显示空间 */ 
.result, .result-op, .c-container{
    height: 300px!important;
}
    
 /* 固定搜索框 */    
#head {
    position: absolute !important;

} 

    
     /* 百度知道 贴吧 顶部冗余部分*/ 
.header-wrapper ,.navbar-wrapper , .head_inner, .pc-topbar{
    display: none;
}
.lemmaWgt-searchHeader, .fixedWrapper_OveTv, .-F_R2 {
    display: none!important;
    
}

谷歌调整

json 复制代码

 /* 关闭搜索字数显示、用户栏、导航栏 */   
#appbar,.rfiSsc, .Q3DXx > *[class^="Q3DXx"] {
    display: none;

}
    
 /* 调整框分列后的搜索框显示 */   
.MjjYud , .hlcw0c, .ULSxyf {
 /* 框 使其透明 */ 
    border: 1px!important;
    background-color: rgba(255, 255, 255, 0.5)!important;    
   
    margin-bottom: 1px!important;              
     
}


  /* 使分列框其自动换行 */ 
  div[jscontroller="SC7lYd"], .g{
		width: 100% !important;          
	}
    
 /* 特殊调整边距 */ 
    div[data-hveid="CAgQGw"]{
		margin-left: -10% ; 
	}

ybmusic

json 复制代码

    
    
    // 设置显示专辑封面而不是视频
    #song-video{
        display: none!important;
    }
    
    #song-image{
    display: block!important;
    }

    
    //冗余的padding去掉
    #player-page > div{
        padding: 5px
        
    }