Bangumi 应援 » 讨论
[Stylish] Bgm 手机版页面多栏样式

#1 - 2012-8-13 20:40

utt

Fx 应该没问题；Chrome 问题是总会先显示原页面，然后才应用样式…测试的是 dev 版。
以下黑色版（如果有喜欢浅色的话…
超展开列表

时间线

以下 CSS，不想放到 userstyles 上，就直接贴了，大家手动。应用的域名用了好几条，是因为会和 bangumi.tv/music 混淆…



@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://bangumi.tv/m"), url-prefix("http://bangumi.tv/m/"), url-prefix("http://bangumi.tv/m?") {

/*2012-08-16 Black bgm-mobile*/



/*all page*/

body {background-color: #fff ; color: #ddd !important;}



#header { -moz-transition: all 300ms; position: fixed; top: -35px; left: 40%; opacity: 0.1; z-index: 200;}

#header:hover { top: -8px; opacity: 1;}



#nav {border:none !important; float: right;}

#nav li a { line-height: 18px !important; height: 18px !important;}

#nav li a.focus { background-color: #FE8894 !important; font-weight: bold;}



ul.subNav li a { padding: 0 10px !important;}

ul.subNav li a.focus { background-color: #428EE4 !important;}



/*list page*/

ul.mobileTpcList li { padding: 2px 0px 2px 10px !important; border: none !important;min-height: 40px; outline: 1px solid rgba(17, 17, 17, 0.3);}

li.line_even { background-color: #333;}

ul.mobileTpcList li a.title {color: #eee !important; font-size: 13px !important;}

ul.mobileTpcList li a.title:hover {color: #F56F7A !important;}

ul.mobileTpcList {-moz-columns: 350px; -moz-column-gap:2px; -webkit-columns: 350px; -webkit-column-gap:2px;}

ul.mobileTpcList li small.grey {float: right; padding:0 5px;}



/*topic page*/

#pageHeader { padding: 0 !important; color: #eee; text-align: center;}

#pageHeader h1 span {float: left;}

#pageHeader br {display: none;}



div.row_reply { border-bottom: none !important; border-top: 1px dashed gray !important;}

div.row_reply:last-child {border-bottom: 1px dashed gray !important;}

div.sub_reply_bg {border-top: 1px dashed gray !important;}



div.topic_sub_reply {border-left: none !important;}



input.inputBtn { border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 2px 5px !important; text-shadow: none  !important;}



#comment_list { counter-reset: reply;}

#comment_list div.re_info:before { content: counter(reply); counter-increment: reply; font-family: monospace; font-size: 50px; position: absolute; right: 0; color: rgba(200, 200, 200, 0.2); z-index: -100;}



div.quote q {color:gray;}

img.code { margin: 2px 5px;}

span.tip.rr {font-size:smaller; color: gray; padding: 0 5px;}



/*timeline page*/

#timeline ul li { border: none !important;}

#timeline ul li.reply_item { border: none !important;}

span.avatar + span.info {border-top: 1px dashed gray;}



div.TsukkmiBox {padding: 10px 10px 0 !important;}

#timeline h4.Header {border-bottom: none !important; color:rgba(200, 200, 200, 0.2); font-size: 45px !important; padding: 5px 10px !important; text-align: center; }



#timeline li.tml_item:nth-child(2n+1) span.info { background-color: #333;}



li.reply_item span.tip_j ~ a.l { color:gray !important;}

a.cmt_reply { color: transparent !important; position: absolute; left: -10px;}

a.cmt_reply:before { color: gray; content: "@ ";}



.suggest-overlay ul li { padding: 3px 8px !important;}



div.page_inner {text-align: center;}

div.page_inner a.p {padding: 2px 5px !important; border-radius:0 !important;}

}