Material design for V2EX

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

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

喜欢请 Star。

由于本人非专业前端,有些地方可能为了实现效果而写的比较糟糕,接受各种错误指正。
5861 次点击
所在节点    分享创造
36 条回复
Showfom
2014-11-06 16:42:48 +08:00
@anying 求配色方案
anying
2014-11-06 16:49:30 +08:00
@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/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:#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/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;}
anying
2014-11-06 16:50:32 +08:00
@aliuwr 和原来颜色差得远没关系,只要看着舒服就行。
jakwings
2014-11-06 17:12:39 +08:00
顶栏无爱。感觉其它变化不大。
aliuwr
2014-11-06 17:20:20 +08:00
@jakwings 因为布局没有做调整吧。
想把右边栏隐藏了,但是没有 JS 的配合就没法再让它显示出来了。
sethverlo
2014-11-06 17:45:19 +08:00
还挺好看的…
kokdemo
2014-11-06 17:48:50 +08:00
感觉这个css 似乎是移除掉 所有的圆角,给元素加一个阴影……
panxianhai
2014-11-06 17:54:28 +08:00
@kokdemo 我的感觉就是把顶栏改变了一点,然后移除圆角,然后,就没有然后了...
aliuwr
2014-11-06 17:59:19 +08:00
@kokdemo 主要改了三个地方:导航栏、文本框、按钮。
haiyon
2014-11-06 18:42:00 +08:00
秀一下我用的样式...
aliuwr
2014-11-06 19:09:32 +08:00
@haiyon 太白了,亮瞎眼。。。
我果然还是喜欢灰色的背景。
nan0kai
2014-11-07 09:30:26 +08:00
@Showfom 又被你歪了
asca
2014-11-07 13:41:59 +08:00
@haiyon 分享下呗 (。í _ ì。)
haiyon
2014-11-07 14:15:30 +08:00
@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
2014-11-07 21:06:07 +08:00
chrome 28表示显示不正常
aliuwr
2014-11-07 21:17:31 +08:00
@tammy 你这 Chrome 已经是一年前的版本了,更新下吧。

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

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

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

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

© 2021 V2EX