Material design for V2EX

2014-11-06 14:48:28 +08:00
 aliuwr
参考 Google Inbox 的网页版为 V2EX 写了个自定义样式。

https://gist.github.com/CzBiX/beb567fa028d751dfa31

喜欢请 Star。

由于本人非专业前端,有些地方可能为了实现效果而写的比较糟糕,接受各种错误指正。
5863 次点击
所在节点    分享创造
36 条回复
hatcloud
2014-11-06 15:09:50 +08:00
地址没了
lingyired
2014-11-06 15:12:05 +08:00
@hatcloudgist.github.com 被墙了
lingyired
2014-11-06 15:12:57 +08:00
感受不到 Material design 的风格。。。

https://material.angularjs.org/
twor2
2014-11-06 15:13:25 +08:00
V2EX报错,超过8k了,我去掉图片部分才行
pubby
2014-11-06 15:14:22 +08:00
同报错,超过8K,如何压缩?
twor2
2014-11-06 15:14:24 +08:00
很喜欢 ~\(≧▽≦)/~
aliuwr
2014-11-06 15:15:20 +08:00
@twor2 感谢反馈,我改成外链吧。
aliuwr
2014-11-06 15:20:33 +08:00
@lingyired 单纯改 CSS 能做的有限,只能从外观上尽量靠拢,一些交互效果没法实现。
Showfom
2014-11-06 15:51:51 +08:00
@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/qbar_light@2x.png);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/logo@2x.png);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
2014-11-06 15:53:20 +08:00
给贴个效果图呗 &_^
Showfom
2014-11-06 15:56:26 +08:00
StackGao
2014-11-06 16:01:33 +08:00
@Showfom 很漂亮!
TrustyWolf
2014-11-06 16:06:12 +08:00
@Showfom 又是神域名!0rz
Showfom
2014-11-06 16:07:13 +08:00
@TrustyWolf 你还可以把 ki.ki.ki 替换成:

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo.ooo
aliuwr
2014-11-06 16:11:02 +08:00
@Showfom 域名好评,只是字母 o 的数量怕是数不清楚,哈哈。
Showfom
2014-11-06 16:20:36 +08:00
@aliuwr 前面63个,后面3个,哈哈
breeswish
2014-11-06 16:22:14 +08:00
- - 这个一点也不 material design..
freeze
2014-11-06 16:23:18 +08:00
放到 Stylish 里可以直接用~
anying
2014-11-06 16:27:20 +08:00
我把颜色换亮一点了 http://ptpimg.me/p5mgjh.jpg
aliuwr
2014-11-06 16:41:53 +08:00
@anying 本来也是用 Inbox 的蓝色的,但是感觉与之前 V2EX 的主题色差太远,就换了个颜色。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/144409

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX