[ plurk css ] 十二段落的配搭變化_04_06 @ 金羽銀華

在前一篇噗版的主要背景與頁首頁尾設定後，細部調整時間軸（河道）相關的設計變化：

_04_時間顯示

/*======================== 時間顯示 ========================*/

.bottom_start, .bottom_end /*隱藏底線時間*/
{
   font-size:0px;
   height:0;
   width:0;
   overflow:hidden;
   filter:alpha(opacity=0); opacity:0; zoom:1;
}
.day_start .bottom_start, .day_start .div_start /*顯示日期*/
{
   background:#09628a !important;
   color:#edffff !important;
   font-size:11px !important;
   padding:0 22px;
   margin-top:2px;
   width:auto;
   height:auto;
   filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
}

#timeline_bg .day_bg .div_inner
{
   width:24px !important;
   height:1px !important;
}

/*每則噗的對應時間*/
#time_show
{
   background:# !important;
   border:0 !important;
   height:px;
   margin-top:px;
   padding:px;
   -moz-border-radius:5px 5px 0px 0px;
   -khtml-border-radius:5px 5px 0px 0px;
   -webkit-border-top-left-radius:5px;
   -webkit-border-top-right-radius:5px;
   -webkit-border-bottom-right-radius:0px;
   -webkit-border-bottom-left-radius:0px;
}
#time_show span
{
   color:#;
   font-size:12px !important;
}

/*======================== 顯示訊息 ========================*/

#empty_timeline_bg {text-transform:normal; font-size:0px;}
#empty_timeline_fg
{
   color:#fff !important;
   font-size:18px !important;
   text-decoration:none !important;
   text-shadow:0pt 0px 2px #eee; /*陰影*/
}
#empty_timeline_fg a {text-transform:normal;}
#empty_timeline_fg a:hover {text-transform:normal;}

/*======================== 往前往後 ========================*/

.cmp_arrow_right /*向右*/
{
   background:url(http://);
   width:px; height:px;
   margin:0;
}
.cmp_arrow_left /*向左*/
{
   background:url(http://);
   width:px; height:px;
   margin:0;
}
.cmp_back_to_today /*移至最前*/
{
   background:url(http://);
   width:px; height:px;
   margin:0;
}

div.cmp_arrow_right,
div.cmp_arrow_left,
div.cmp_back_to_today
{
   -moz-border-radius:10px;
   -khtml-border-radius:10px;
   -webkit-border-top-left-radius:10px;
   -webkit-border-top-right-radius:10px;
   -webkit-border-bottom-right-radius:10px;
   -webkit-border-bottom-left-radius:10px;
   -moz-box-shadow:0px 0px 5px #111;
   -webkit-box-shadow:0px 0px 5px #111;
   box-shadow:0px 0px 5px #111;
}
div.cmp_arrow_right:hover,
div.cmp_arrow_left:hover,
div.cmp_back_to_today:hover
{
   filter: alpha(opacity=90); opacity:0.9; zoom:1;
}

/*---隱藏顯示---*/

.browse_button
{filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;}
.browse_button:hover
{filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;}

/*======================== loading ========================*/

.cmp_loading {width:0px;height:0px;}   /*主畫面*/
#div_loading .cnt
{
   background:transparent url(http://) no-repeat scroll center !important;
   margin-top:140px;
   filter: alpha(opacity=50); opacity: 0.5; zoom:1;
}
.loading img {width:0px;height:0px;}   /*每則噗*/
.loading
{
   background: url(http://) no-repeat scroll center top !important;
   margin-top:30px;
   filter: alpha(opacity=50); opacity: 0.5; zoom:1;
}

/*(http://statics.plurk.com/7f5c4282d2e9accfdae99cc6abb6c9bb.gif) 噗預設圖*/

_05_所有訊息

河道右下方的選單列，所有訊息、我發表的訊息、私人訊息等等。

/*======================== 所有訊息 ========================*/

#filter_tab /*所有標籤*/
{
   margin-top:px !important;
   margin-right:px !important;
   padding:px px;
   z-index:1000;
   font-size:12px !important;
}

#filter_tab a.off_tab /*未選*/
{
   background:# !important;
   color:# !important;
   border:0 !important;
   -moz-border-radius:0px 0px 5px 5px;
   -khtml-border-radius:0px 0px 5px 5px;
   -webkit-border-top-left-radius:0px;
   -webkit-border-top-right-radius:0px;
   -webkit-border-bottom-right-radius:5px;
   -webkit-border-bottom-left-radius:5px;
}
#filter_tab a.filter_selected /*正選*/
{
   background:# !important;
   color:# !important;
   border:0 !important;
   -moz-border-radius:0px 0px 5px 5px;
   -khtml-border-radius:0px 0px 5px 5px;
   -webkit-border-top-left-radius:0px;
   -webkit-border-top-right-radius:0px;
   -webkit-border-bottom-right-radius:5px;
   -webkit-border-bottom-left-radius:5px;
}
.unread_generic /*未讀噗的數目*/
{
   background:none !important;
   color:# !important;
}
#filter_tab a.filter_selected .unread_generic /*正選的未讀噗數目*/
{
   background:none !important;
   color:# !important;
}

/*滑鼠移至效果*/
#filter_tab a.off_tab:hover,
#filter_tab a.filter_selected:hover
{
   background:# !important;
   color:#026BA6 !important;
   text-decoration:none !important;
   top:0px;
   left:0px;
   filter:alpha(opacity=70) !important; opacity:0.7 !important; zoom:1;
}

_06_更新通知

河道左下方出現的「幾則新訊息幾則新回應」通知，以及播放音樂時縮小後置於河道右下的選單。

/*======================== 更新通知 ========================*/

#updater, #music_player
{
   background:#fffef2 !important;
   border:1px solid #edffff !important;
   color:#111 !important;
   font-weight:500 !important;
   -moz-border-radius:5px;
   -khtml-border-radius:5px;
   -webkit-border-top-left-radius:5px;
   -webkit-border-top-right-radius:5px;
   -webkit-border-bottom-right-radius:5px;
   -webkit-border-bottom-left-radius:5px;
   padding:3px 12px;
}

/*隱藏中間的間隔線*/
.cmp_poll_line
{
   filter:alpha(opacity=0) !important;opacity:0 !important; zoom:1;
   width:0 !important;
   overflow:hidden;
}

#updater .text {color:#111111 !important;}   /*則數*/
#updater a, #music_player a   /*更新檢視*/
{
   color:#026BA6 !important;
}
#updater a:hover, #music_player a:hover
{
   color:#026BA6 !important;
   text-decoration:none !important;
   top:0px;
   left:0px
}

（待續）