Alist V3 美化教程(4)

阿博特-安稳

编辑于 2022年12月23日 16:51

收录于文集

共5篇

V3.6.0版本迎来了搜索（索引）的功能，也有好多小伙伴想要美化一番~

好嘛，开始的时候我试了下貌似没成，今天脑瓜子一抽不知道怎么滴弄出来了

查看往期美化教程~点击食用

09:32

【Alist】Alist v3 美化教程（1）添加一个美美哒的看板娘~添加上背景~

4.1万

04:58

【Alist】Alist v3 美化教程（2）添加随机背景图片API ~ 适配一下夜间模式透明度 ~

1.6万

05:37

【Alist】Alist v3美化教程（3）添加一个评论区和一个计数器以及B友说的鼠标指针 ~

1.4万

正文直接开始

先来看下效果吧，效果还行，看到大家还有喜欢左侧的，左侧看起来不费眼睛吗哈哈，和后面的冲突一起了，

说下左侧和右侧有什么区别吧，左侧是直接透明状态，右侧是除了透明之外还加了一层毛玻璃效果，看起来没有的那么冲突，河蟹一点儿~

既然看到大家有喜欢左侧的也有喜欢右侧的，那干脆都放上来吧把代码哈哈....

代码自取

代码放到哪里就不说了吧？看了那么多期了应该都知道了

好吧，还是说一下吧，

我是放到了 后台 -->设置 --> 全局 -->自定义头部 --> <style> 代码块内

如果你找不到<style>标签，自己新建一个包起来就行...

右侧的代码

 代码块
CSS
自动换行
复制代码
/*白天模式 搜索主体+毛玻璃*/
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
   background: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}

/*白天模式 搜索栏输入框+毛玻璃*/
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
   background: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}

/*白天模式 搜索按钮+毛玻璃*/
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
   background: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}

/*夜间模式搜索主体+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
    background: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}

/*夜间模式搜索栏+毛玻璃*/
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
    background: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}

/*夜间模式 搜索按钮+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}复制成功

左侧的代码

 代码块
CSS
自动换行
复制代码
/*白天模式 搜索主体*/
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
   background: rgba(255,255,255,0.2)!important;
}

/*白天模式 搜索栏输入框*/
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
   background: rgba(255,255,255,0.2)!important;
}

/*白天模式 搜索按钮*/
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
   background: rgba(255,255,255,0.2)!important;
}

/*夜间模式搜索主体*/
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
    background: rgb(0 0 0 / 10%)!important;
}

/*夜间模式搜索栏*/
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
    background: rgb(0 0 0 / 10%)!important;
}

/*夜间模式 搜索按钮*/
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background: rgb(0 0 0 / 10%)!important;
}复制成功

网盘挂载 Alist Alist美化

本文为我原创，未经授权禁止转载

cv20369103

分享至

投诉或建议