分享一款自用的 V2EX 仿微信风格 CSS

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1251 天前的主题，其中的信息可能已经有所发展或是发生改变。

学习 CSS 顺便拿 V 站练练手。

全部基于 V2 自身的 css 调，理论上支持大部分插件，最后两张图是使用了插件后的效果。

使用方法：在 V2 的设置里开启自定义 CSS 后，将 css 文件内容粘贴进去保存即可。

https://github.com/CrazyMelody/v2ex_style

第 1 条附言 2022-05-07 23:49:30 +08:00

为了清爽效果，楼层、回复按钮、感谢按钮是在鼠标悬浮到对应的楼层才显示，不过忘记 push 代码了...现已更新

第 2 条附言 2022-05-08 00:41:22 +08:00

已上架 userstyles： https://userstyles.org/styles/238344/v2ex

64 条回复 2022-05-14 21:10:22 +08:00

ASHYWHISPER

2022-05-07 16:24:47 +08:00

很好用，谢谢楼主

Zoulan

2022-05-07 16:27:49 +08:00

不错感谢！

jonathanchoo

2022-05-07 16:30:34 +08:00

不适配夜间模式。。

cwcc

2022-05-07 16:41:36 +08:00

很好用，感谢楼主！但是感谢和隐藏按钮不见了，以及不知道怎么回复。

947

2022-05-07 16:46:50 +08:00

用上了，感谢，但是缺失了一些功能，希望可以修复

MemoryCorner

2022-05-07 16:48:42 +08:00

在用了，还不错

shmilypeter

2022-05-07 17:10:49 +08:00

楼主功底不错的

istevenshen

2022-05-07 17:11:21 +08:00

不错，已经用上~

youngce

2022-05-07 17:13:07 +08:00

666 ，好用好用，一下子进入次世代界面，不再是古早风了

cusuanan

2022-05-07 17:51:12 +08:00

可以叫做微信群聊风。哈哈，v 友成群友了。

frankkly

2022-05-07 17:51:45 +08:00

@youngce 我试一下回复的效果

cusuanan

2022-05-07 17:54:45 +08:00

我这般不能显示缩进

duix

2022-05-07 17:56:52 +08:00

可以

blockmin

2022-05-07 18:04:07 +08:00

试了一下，还是更喜欢极简扁平风，就是需要装插件

azhangbing

2022-05-07 18:10:50 +08:00

喜欢喜欢不错!

JimmyLX

2022-05-07 18:18:02 +08:00

这样摸鱼更明显了狗头

gbqqaybc

2022-05-07 18:52:06 +08:00

牛逼啊老哥，还挺好看的，非常感谢！

alike19

2022-05-07 18:58:10 +08:00

牛逼挺好看的眼看再用了非常感谢感谢

a570295535

2022-05-07 19:13:43 +08:00

不要黑，自己减轻了一点：
a:link{color:#333333 !important;}.box{background:#fff !important;}.reply-box-sticky{position:relative;}#undock-button{display:none !important;}
h1{color:#000;}.topic_content,.reply_content{color:#000;}

div#Top{backdrop-filter:blur(20px);background-color:rgb(0 0 0 / 10%);box-shadow:0px 10px 10px 0px rgb(0 0 0 / 10%);}
.reply_content{font-size:14px;line-height:1.6;color:var(--box-foreground-color);word-break:break-word;background-color:white;border-radius:4px;padding:7px;position:relative;width:fit-content;}
.reply_content:before{content:"";width:0px;height:0px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #ffffff;position:absolute;top:5px;left:-4px;display:block;}
.cell{padding:10px;font-size:14px;line-height:150%;text-align:left;border-bottom:0px solid var(--box-border-color);background-color:#F3F3F3;}
#Wrapper{background-image:url(//res.wx.qq.com/t/wx_fed/webwx/res/static/img/2zrdI1g.jpg) !important;background-size:cover;}

ClarkAbe

2022-05-07 19:21:02 +08:00

好像没兼容 v2 的黑暗模式,先亮色将就吧

l1ve

2022-05-07 20:02:50 +08:00

顶部的毛玻璃。
爷青回！

codeCheng

2022-05-07 20:08:47 +08:00

已用，好看

mokeyjay

2022-05-07 20:27:35 +08:00

不错，挺好看的
建议上架到 https://userstyles.org/

yuzo555

2022-05-07 20:32:04 +08:00

如果能识别自己，把自己的发言变绿就不错了。不知道 V2EX 有没有留这个区别

mikeven

2022-05-07 21:06:44 +08:00

好像不能使用感谢功能了？

smilestar

2022-05-07 21:12:09 +08:00

很棒

Showfom

PRO

2022-05-07 21:30:05 +08:00

试了试，还不支持暗黑配色，然后回复按钮没了= =

codeCheng

2022-05-07 21:50:40 +08:00

好像不显示楼数

id7368

PRO

2022-05-07 21:54:00 +08:00

哈哈哈哈，就是好像没法显示楼层了

maemolee

2022-05-07 22:00:00 +08:00

好看！不过问题就是不能显示楼层了，也没法回复别人了

Godykc

2022-05-07 22:05:34 +08:00

饼神

lawsiki

2022-05-07 23:51:58 +08:00

@cwcc #4
@947 #5
@mikeven #25
@Showfom #27
@codeCheng #28
@id7368 #29
@maemolee #30

为了清爽一点，一些按钮是鼠标放到对应楼层才显示，不过忘记 push 相关代码了，现已更新

lawsiki

2022-05-07 23:53:09 +08:00

@cusuanan #12 楼中楼缩进是插件的效果

lawsiki

2022-05-07 23:54:27 +08:00

@shmilypeter #7 全靠 Google ，都没什么代码规范

lawsiki

2022-05-07 23:55:39 +08:00

@l1ve #21 一直对毛玻璃情有独钟

lawsiki

2022-05-07 23:57:10 +08:00

@yuzo555 #24 想过这个效果，不过需要脚本支持，V2 没对自己发言的节点做标识，所以单靠 css 做不到这种效果

lawsiki

2022-05-07 23:58:21 +08:00

@jonathanchoo #3 因为基本没用过暗黑模式，所以暂时没考虑到

lawsiki

2022-05-07 23:59:12 +08:00

@Godykc #31

prarpss

2022-05-08 00:13:01 +08:00

不至于不至于...我都把微信注销了

lawsiki

2022-05-08 00:40:16 +08:00

@mokeyjay #23 已上架 https://userstyles.org/styles/238344/v2ex

bs10081

2022-05-08 01:37:24 +08:00

感感，非常好看，甚至感比微信本身都好看，哈哈哈

rttds

2022-05-08 08:07:26 +08:00

已安装哈哈

isb

2022-05-08 10:27:15 +08:00

<div class="fr topic_stats" style="padding-top: 4px;">2855 次点击    51 人收藏     17 人感谢   </div>

这一段 css 被隐藏了好像

感谢收藏和主题 tag 这块都被隐藏了 display 是 none

KleinP

2022-05-08 11:37:47 +08:00

感谢，已经用上了

lawsiki

2022-05-08 12:01:14 +08:00

@isb 因为对我感觉没啥用，隐藏掉看着更舒服

947

2022-05-08 12:12:30 +08:00

@lawsiki 很棒，更新了，感谢

mofash

2022-05-08 15:11:02 +08:00

牛鼻感谢大佬

jiafb33

2022-05-08 16:17:08 +08:00

牛楼主牛

815979670

2022-05-08 18:18:42 +08:00

风格很不错喜欢

EricTing

2022-05-08 19:40:25 +08:00

很不错，感谢！

recosong

2022-05-08 20:37:19 +08:00

用上了有意思谢谢楼主

Krime

2022-05-08 21:01:08 +08:00

挺好玩的，用几天试试，感谢楼主～

vvjyun318

2022-05-09 07:07:32 +08:00

@lawsiki 会不会被腾讯微信告侵权?

lB2cGz9OQ1agw7XK

2022-05-09 09:04:12 +08:00

图片没有自适应哦，会被放得很大。

jiobanma

2022-05-09 09:21:04 +08:00

safari 可以用吗

jiobanma

2022-05-09 09:24:29 +08:00

@jiobanma 没注意看 op 介绍 safari 可以感谢

bsulike

2022-05-09 09:26:21 +08:00

试了一下，挺好看的

Vidic

2022-05-09 14:55:46 +08:00

很好用，多谢楼主！

lawsiki

2022-05-09 16:50:01 +08:00

@vvjyun318 不至于不至于。。。。。

Kazetachinu

2022-05-11 21:08:33 +08:00

那能不能也上架油猴呢？哈哈那样就不用再装 Stylish 了

lawsiki

2022-05-13 09:47:43 +08:00

@Kazetachinu 所以可以直接用 V 站自带的 CSS 效果

mabutou

2022-05-13 09:59:29 +08:00

v 站自定义 CSS 设置里可以直接填 jsdelivr 的 cdn 地址：
@import "https://cdn.jsdelivr.net/gh/CrazyMelody/v2ex_style/wechat.css";

Kazetachinu

2022-05-14 21:08:15 +08:00

@lawsiki 自己的头像，怎么是扁的？ edge

Kazetachinu

2022-05-14 21:10:22 +08:00

@Kazetachinu
@lawsiki
刚才说错了。。。。是在 edge ，用的 stylus 插件，是不起作用的。