Material design for V2EX

[aliuwr]

参考 Google Inbox 的网页版为 V2EX 写了个自定义样式。



喜欢请 Star。

由于本人非专业前端，有些地方可能为了实现效果而写的比较糟糕，接受各种错误指正。

好吧，我是标题党，希望接下来回复的人忽视掉标题中的 "Material design"，给您带来错觉表示抱歉。

Material design 不只是外观样式，还包括内容布局和交互流程等。受限于 CSS 的能力，我只能尽力向其外观靠拢。
其次 V2EX 是一个内容为主的地方，除了文字和链接外，就只有文本框和按钮了。并没有过多的交互流程和控件展示，这也导致 Material design 能发挥的地方大大减少，请大家了解。

[hatcloud]

地址没了

[lingyired]

@hatcloud 是 gist.github.com 被墙了

[lingyired]

感受不到 Material design 的风格。。。

https://material.angularjs.org/

[twor2]

V2EX报错，超过8k了，我去掉图片部分才行

[pubby]

同报错，超过8K，如何压缩？

[twor2]

很喜欢 ~\(≧▽≦)/~

[aliuwr]

@twor2 感谢反馈，我改成外链吧。

[aliuwr]

@lingyired 单纯改 CSS 能做的有限，只能从外观上尽量靠拢，一些交互效果没法实现。

[Showfom]

@pubby
@twor2 压缩一下 css 就行了

Bottom{box-shadow:0 0 4px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.28);}#Main .box:nth-child(-2n+4):not(.transparent){box-shadow:0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);}#Search div{background-image:none!important;border-image-repeat:repeat;border-image-slice:27 27 27 50;border-image-source:url(https://v2ex.com/static/img/[email protected]);border-image-width:27px 27px 27px 50px;width:auto!important;}#Search input{transition:width .2s cubic-bezier(.4,0,.2,1);width:100px;}#Search input:focus{width:200px;}#Top{background-color:#607D8B;background-image:none;box-shadow:0 0 4px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.28);width:100%;}#Top .content{width:100%;}#Top a{color:#fff;font-size:14px;font-weight:700;outline:none;}#Top td:nth-child(1){left:10px;position:absolute;}#Top td:nth-child(1) a{background-image:url(https://dn-cz-misc.qbox.me/v2ex/[email protected]);background-size:94px 30px;display:inline-block;height:30px;width:94px;}#Top td:nth-child(1) img{display:none;}#Top td:nth-child(2){position:absolute;right:10px;top:7px;}#Top td:nth-child(3){display:flex;text-align:left;width:970px;margin:6px auto;}#Wrapper{background-color:#ECEFF1;background-image:none;margin-top:10px;}.box,a.tab_current:link,a.tab_current:visited,a.tab_current:active,a.count_livid:link,a.count_livid:active,.vote:link,.vote:visited,.vote{border-radius:0;}.box:not(.transparent){border-bottom:none;box-shadow:0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);}.cell{border-bottom:1px solid #e5e5e5;}.collapsed{display:block;}.mll{background-color:#f6f6f6;border-bottom:1px solid #e5e5e5!important;margin-left:-10px;margin-top:-10px;width:660px;transition:background-color .2s cubic-bezier(.4,0,.2,1);border-style:none none solid!important;padding:10px;}.mll,.ml,.mle{border-radius:0;box-shadow:none!important;resize:none!important;}.mll:focus{background-color:#fff;}#topic_form{margin:-10px;}#topic_form td{padding:0;}#topic_form input[type=submit]{margin:10px;}#topic_title,#topic_content{border:none;border-bottom:1px solid #e5e5e5;width:660px!important;padding:10px;}.sl{border-radius:0;box-shadow:none!important;}.super.button{background-color:#78909c;background-image:none;border:none!important;border-radius:2px;box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);color:#fff!important;display:inline-block;font-size:13px;font-weight:700;height:32px;line-height:30px;outline:none;text-shadow:none!important;transition:box-shadow .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1);padding:0 16px;}.super.button:focus{background-color:#546e7a;box-shadow:0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);outline:none;transition:none;}.super.button:hover{background-color:#607d8b;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);transition:none;}.tag:link,.tag:visited,img.avatar{border-radius:2px;}.topic_buttons{background:#eee;border-radius:0;}a.balance_area:link,a.balance_area:visited,.balance_area{background:none repeat scroll 0 0 #f5f5f5!important;border-radius:0!important;}a.tb:hover{background-color:#ccc;border-radius:0;}balance_area:hover{background:none repeat scroll 0 0 #f9f9f9;}body{background-color:#ECEFF1;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif!important;min-width:1200px;}

[StackGao]

给贴个效果图呗 &_^

[Showfom]

@StackGao 效果很不错，如图

http://ki.ki.ki/kiki/2014/11/06/0ffb1c10ce53b7cd6d5bc4051b1c13ad.png

[StackGao]

@Showfom 很漂亮!

[TrustyWolf]

@Showfom 又是神域名！0rz

[Showfom]

@TrustyWolf 你还可以把 ki.ki.ki 替换成：

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo.ooo

[aliuwr]

@Showfom 域名好评，只是字母 o 的数量怕是数不清楚，哈哈。

[Showfom]

@aliuwr 前面63个，后面3个，哈哈

[breeswish]

- - 这个一点也不 material design..

[freeze]

放到 Stylish 里可以直接用~

[anying]

我把颜色换亮一点了 http://ptpimg.me/p5mgjh.jpg

[aliuwr]

@anying 本来也是用 Inbox 的蓝色的，但是感觉与之前 V2EX 的主题色差太远，就换了个颜色。

[Showfom]

@anying 求配色方案

[anying]

@Showfom
Bottom{box-shadow:0 0 4px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.28);}#Main .box:nth-child(-2n+4):not(.transparent){box-shadow:0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);}#Search div{background-image:none!important;border-image-repeat:repeat;border-image-slice:27 27 27 50;border-image-source:url(https://v2ex.com/static/img/[email protected]);border-image-width:27px 27px 27px 50px;width:auto!important;}#Search input{transition:width .2s cubic-bezier(.4,0,.2,1);width:100px;}#Search input:focus{width:200px;}#Top{background-color:#4285f4;background-image:none;box-shadow:0 0 4px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.28);width:100%;}#Top .content{width:100%;}#Top a{color:#fff;font-size:14px;font-weight:700;outline:none;}#Top td:nth-child(1){left:10px;position:absolute;}#Top td:nth-child(1) a{background-image:url(https://dn-cz-misc.qbox.me/v2ex/[email protected]);background-size:94px 30px;display:inline-block;height:30px;width:94px;}#Top td:nth-child(1) img{display:none;}#Top td:nth-child(2){position:absolute;right:10px;top:7px;}#Top td:nth-child(3){display:flex;text-align:left;width:970px;margin:6px auto;}#Wrapper{background-color:#ECEFF1;background-image:none;margin-top:10px;}.box,a.tab_current:link,a.tab_current:visited,a.tab_current:active,a.count_livid:link,a.count_livid:active,.vote:link,.vote:visited,.vote{border-radius:0;}.box:not(.transparent){border-bottom:none;box-shadow:0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);}.cell{border-bottom:1px solid #e5e5e5;}.collapsed{display:block;}.mll{background-color:#f6f6f6;border-bottom:1px solid #e5e5e5!important;margin-left:-10px;margin-top:-10px;width:660px;transition:background-color .2s cubic-bezier(.4,0,.2,1);border-style:none none solid!important;padding:10px;}.mll,.ml,.mle{border-radius:0;box-shadow:none!important;resize:none!important;}.mll:focus{background-color:#fff;}#topic_form{margin:-10px;}#topic_form td{padding:0;}#topic_form input[type=submit]{margin:10px;}#topic_title,#topic_content{border:none;border-bottom:1px solid #e5e5e5;width:660px!important;padding:10px;}.sl{border-radius:0;box-shadow:none!important;}.super.button{background-color:#78909c;background-image:none;border:none!important;border-radius:2px;box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);color:#fff!important;display:inline-block;font-size:13px;font-weight:700;height:32px;line-height:30px;outline:none;text-shadow:none!important;transition:box-shadow .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1);padding:0 16px;}.super.button:focus{background-color:#546e7a;box-shadow:0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);outline:none;transition:none;}.super.button:hover{background-color:#607d8b;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);transition:none;}.tag:link,.tag:visited,img.avatar{border-radius:2px;}.topic_buttons{background:#eee;border-radius:0;}a.balance_area:link,a.balance_area:visited,.balance_area{background:none repeat scroll 0 0 #f5f5f5!important;border-radius:0!important;}a.tb:hover{background-color:#ccc;border-radius:0;}balance_area:hover{background:none repeat scroll 0 0 #f9f9f9;}body{background-color:#ECEFF1;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif!important;min-width:1200px;}

[anying]

@aliuwr 和原来颜色差得远没关系，只要看着舒服就行。

[jakwings]

顶栏无爱。感觉其它变化不大。

[aliuwr]

@jakwings 因为布局没有做调整吧。
想把右边栏隐藏了，但是没有 JS 的配合就没法再让它显示出来了。

[sethverlo]

还挺好看的…

[kokdemo]

感觉这个css 似乎是移除掉 所有的圆角，给元素加一个阴影……

[panxianhai]

@kokdemo 我的感觉就是把顶栏改变了一点，然后移除圆角，然后，就没有然后了...

[aliuwr]

@kokdemo 主要改了三个地方：导航栏、文本框、按钮。

[haiyon]

秀一下我用的样式...

[aliuwr]

@haiyon 太白了，亮瞎眼。。。
我果然还是喜欢灰色的背景。

[nan0kai]

@Showfom 又被你歪了

[asca]

@haiyon 分享下呗 (｡í _ ì｡)

[haiyon]

@asca

#Top{background:none;height:60px;background-image:-o-linear-gradient(-89deg,#FFFFFF 0%,rgba(252,252,252,0.90) 97%);background-image:-moz-linear-gradient(-89deg,#FFFFFF 0%,rgba(252,252,252,0.90) 97%);background-image:-ms-linear-gradient(-89deg,#FFFFFF 0%,rgba(252,252,252,0.90) 97%);background-image:linear-gradient(-179deg,#FFFFFF 0%,rgba(252,252,252,0.90) 97%);-moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,0.10);box-shadow:0px 2px 4px 0px rgba(0,0,0,0.10)}#Top .content{padding-top:9px}#Wrapper{background-color:#fafafa}.box{box-shadow:0px 1px 3px rgba(0,0,0,0.1);border-radius:0}.cell{border-bottom-color:#f3f3f3}#Bottom{border-top:1px solid #f3f3f3}.item_node{background:none;padding:5px 10px;border-radius:0;background-color:#f6f6f6}a.balance_area{background:none!important}.button{background:none!important;padding:6px 8px!important;box-shadow:none!important;border:1px solid #e3e3e3!important;text-shadow:none!important}.ml,.mll{border-radius:0;border-color:#e3e3e3;outline:none!important}.ml:focus,.mll:focus{border-radius:0;border-color:#e3e3e3!important}.topic_buttons{background:#f6f6f6!important}.subtle{background:#fffde3!important;border-left:none 0}

[tammy]

chrome 28表示显示不正常

[aliuwr]

@tammy 你这 Chrome 已经是一年前的版本了，更新下吧。