写了一个 Flarum 风格的 V2EX 自定义 CSS

[sisylocke]

最近在学习 CSS ，仿照 flarum 写了一个 V2EX 的自定义 CSS

截图

HOW

@import url("https://okdsl96uw.qnssl.com/v.flarum.css"); 

或者使用 stylish

https://userstyles.org/styles/138175/f-v2ex

推荐使用 stylish 哈，@import 的话限制太多，有些页面显示不太正常，我还没想清楚怎么弄才好(*´Д`)

还有 github 地址啦：github

由于是刚刚学习这个，可能有很多地方写得不好，请大家多多指教

最后祝新年快乐，鸡年大吉~~

[Droog]

不错👍

[Unknwon]

厉害了！正好用上

[Unknwon]

一点小小的建议。。在首页列表鼠标悬浮到标题的时候。。最好能加点颜色变化 加深或者变淡一些都行

[ecmadao]

反馈个 bug ，为主题增加附言时无法显示输入框

[DearTanker]

终于等到了。

[mtnveu]

已用上，不错，只是感觉一些地方的字号感觉不太协调。

@import 的问题主要是因为用户自定义的 CSS 被放到了 HTML 的底部，所以会先加载 V2EX 原来的 CSS ，然后再渲染用户自定义的 CSS ，每打开一个页面都会闪一下，体验很糟糕。跟 Livid 说过这件事，其实只要把用户自定义的 CSS 提前到 head tag 里面， V2EX CSS 之后就行了吧，但一直没解决。

[mtnveu]

好吧，用 Stylish 也会有这样的问题......

[quericy]

这个看起来很不错啊

[levywang]

不错噢，正准备搭个

[sisylocke]

谢谢大家的喜欢(づ￣ 3 ￣)づ

@Unknwon 有道理，我试试换点颜色看下效果，不错的话我就去更新

@ecmadao 之前没用上，我待会儿就去改~~

@mtnveu 字号的问题我倒是没太注意，我再试着调整一下好了，至于 @import 的问题是没法解决了吗？

[sobigfish]

好看，喜欢并已安装-。- 谢谢
v2ex plus 兼容性也不错

[sobigfish]

@sciooga 的 V2EX plus 在列表页加入了一个预览功能，可能这个 span 显示不是很兼容，不知道两位哪个兼容一下 谢谢
<td width="auto" valign="middle"><span class="item_title"><a href="/t/337230#reply11">写了一个 Flarum 风格的 V2EX 自定义 CSS</a></span>
<div class="sep5"></div>
<span class="small fade"><strong><a href="/member/sisylocke">sisylocke</a></strong> &nbsp;•&nbsp; 6 分钟前 &nbsp;•&nbsp; 最后回复来自 <strong><a href="/member/sobigfish">sobigfish</a></strong> &nbsp;•&nbsp; <span class="preview">预览</span></span>
</td>


这个[预览] 另一了一行， hover 时候有个下划线，会使行高抖动。
ref: https://github.com/sciooga/v2ex-plus/blob/master/v2ex_tab.js

[Kilerd]

看起来还行，色调不是喜欢的那种，先 mark ，到时候再自己改😃

[mtnveu]

@sisylocke #10 看了下 Stylish 也是通过在 </html> 前加 <style> 来实现的......

反馈下已知的问题：
通知页面消息无法显示，该页侧栏显示有问题；
@sobigfish 我这里装了 V2EX Plus 后楼层的回复按钮不见了，还有首页签到按钮也错位了；
帖子侧栏的 li 间距可以改大点，以及白色用的太多了，层次感不强也很晃眼，可以在一些地方加点阴影或线条（我自己的建议哈）；
一些地方的配色也还很奇怪，橙色配灰色感觉不太对，像回复按钮 hover 上去回复两个字的灰色就跟背景橙色很不搭；
还有 Workspace 炸了......

暂时这么多。

[mtnveu]

@sobigfish #12 CSS 加一句 .preview { display: inline; } 即可。

[sobigfish]

@mtnveu #13 楼层回复， lz 主动 display none 了，虽然不知道为什么

img[src="//cdn.v2ex.com/static/img/reply.png"] {
display: none;
}

#14 chrome 里检查器直接加 display: inline; 到.preview 上不行
要 inline !important 才行，但“貌似”不是好多人都建议避免!important 么？

[mtnveu]

@sobigfish #16 Line 1245 的 #Main div[class="cell item"] span 改为 #Main div[class="cell item"] span:first-child 即可。

不用 !important 的原因是因为后期维护起来太麻烦了吧，确实不应该用。（然而 @sisylocke 用了挺多的样子......）

[mtnveu]

@sobigfish #16 他是把原来的这个按钮换成自己的了，原来的自然要隐藏掉。现在问题是好像 V2EX Plus 把新加的按钮给弄没掉了......

[mtnveu]

@sobigfish #16 刚刚再看了下，应该是 V2EX Plus 在评论按钮区加了些链接，导致 CSS Line 1536 #Main .box:nth-child(4) table[width="100%"] td:nth-child(3) .thank_area + a:before 就定位错了， FontAwesome 图标就没有显示出来。

[joyc]

新年快乐，不错！