金羽銀華

浪上的噗，是主要玩噗閱讀噗的所在，也是整體噗版設計的重點。

_10_浪上的噗

/*======================== 浪上的噗 ========================*/

#timeline_holder div.plurk  /*淡入效果*/
{
    -webkit-transition:top 0.5s ease, -webkit-transform 0.5s ease;
    -webkit-transform-origin:0 0;
    -moz-transition:top 0.5s ease, -moz-transform 0.5s ease;
    -moz-transform-origin:0 0;
}

/*浪上的噗往下移*/
.plurk {margin-top:12px;}

/*浪上噗的最小高度*/
.plurk .truncated {min-height:22px;}

/*讓超過時間軸的噗內容出現*/
#timeline_cnt {overflow: visible;}

/*表格寬度*/
.list table {width:100% !important;}

/*列表延伸動態*/
.list
{
    -webkit-transition:height 0.5s ease;
    -moz-transition:height 0.5s ease;
}

整體框的設定，常用的設計分為兩種：

{ 一般框 }

{ 包覆頭貼的整體框 }

/*----------------------------------------------------------噗外框設定(一般框)*/

#timeline_holder .plurk_cnt
{
    border:1px dashed # !important;
    filter:alpha(opacity=80) !important; opacity:0.8 !important; zoom:1;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
}
#timeline_holder div.link_extend .plurk_cnt
{
    border:1px solid # !important;
    filter:alpha(opacity=90) !important; opacity:0.9 !important; zoom:1;
}
#timeline_holder div.plurk_box .plurk_cnt
{
    border:1px solid # !important;
    filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
}

/*----------------------------------------------------------噗整體外框設定*/

.block_cnt .plurk_cnt  
{
    border:1px solid #ccc !important;
    padding:5px 5px 4px 26px !important;
    margin:-5px 0px 0px -28px !important;
    filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
}
.block_cnt .link_extend .plurk_cnt   /*滑鼠移過去延伸的噗*/
{
    min_height:40px;_height:px;
    border:1px solid #ccc !important;
}
.block_cnt .plurk_box .plurk_cnt   /*噗打開後*/
{
    border:1px solid #ccc !important;
}

/*----------------------------------------------------------文字設定*/

#timeline_holder .plurk_cnt
{
    font-size:14px !important;
    line-height:22px !important;
    letter-spacing:em;
    padding:2px;
}
.list .plurk_cnt
{
    background:none !important;
    font-size:14px !important;
    line-height:22px !important;
    padding:4px;
    border-bottom:1px dotted #ccc !important;
}
.td_cnt .text_holder
{
    color:#111 !important;
}

/*--------------------------------------------------------------浪上的噗友圖*/

#timeline_holder div.plurk .td_img /*隱藏顯示*/
{
    filter:alpha(opacity=0); opacity:0; zoom:1;
    -webkit-transition:opacity 0.5s ease;
    -moz-transition:opacity 0.5s ease;
}

#timeline_holder div.link_extend .td_img,
#timeline_holder div.plurk_box .td_img
{
    filter:alpha(opacity=100); opacity:1; zoom:1;
     -webkit-transition:opacity 0.5s ease;
    -moz-transition:opacity 0.5s ease;
}

.p_img
{
    border:1px solid # !important; /*框線*/
    padding:px;
    background:#;
    height:px;
    width:px;
    -moz-box-shadow: 1px 2px 2px #000;  /*陰影*/
    -webkit-box-shadow: 1px 2px 2px #000;
    box-shadow: 1px 2px 2px #000;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
}

/*浪上噗友圖向上移*/
#timeline_holder div.plurk .td_img img
{
    position: relative;
    top:-22px;
    left:-11px;
}

/*----------------------------------------------------------回應列表*/

.plurk_box .list
{
    border-color:# !important;
    filter:alpha(opacity=100) !important; opacity:1!important; zoom:1;
    -moz-border-radius:0px 0px 3px 3px;
    -khtml-border-radius:0px 0px 3px 3px;
    -webkit-border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
}

/*回應列表標題*/
.plurk_box .caption
{
    background:#8db6d3 !important;
    border-color:#8db6d3 !important;
    font-size:11px !important;
    color:#fff !important;
    -moz-border-radius:3px 3px 0px 0px;
    -khtml-border-radius:3px 3px 0px 0px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -webkit-border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
}

/*下方回應欄*/
.plurk_box .mini_form,
.info_box  
{
    background:# !important;
    border-color:# !important;
    filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
}
.info_box
{
    border-top:0 !important;
    overflow-x:hidden !important;
    overflow-y:hidden !important;
    -moz-border-radius:0px 0px 3px 3px;    -khtml-border-radius:0px 0px 3px 3px;
    -webkit-border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
}
.info_box a /*連結*/
{
    background:none !important;
    color:# !important;
    font-size:10px !important;
}
.info_box a:hover
{
    color:# !important;
    text-decoration:none !important;
}
div.favorite_count  /*喜愛的人數*/
{
    color:# !important;
    font-size:11px !important;
}
div.limited_box  /*私密的噗給...*/
{
    color:# !important;
    font-size:11px !important;
}

/*回應輸入區*/
td.td_cnt textarea,
textarea#input_small
{
    background:#fff !important;
    color:#111 !important;
    font-size:13px !important;
    padding:4px;
    min-height:80px;
    line-height:18px;
    letter-spacing:;
}

/*使用者名稱*/
.mini_form .qual_holder
{
    color:#fff !important;
    font-size:12px !important;
}
.mini_form .char_updater {color:#fff !important;} /*尚餘字數*/
.char_updater span {color:# !important;}  /*按Enter送出*/

/*----------------------------------------------------------刪除,編輯,消音,取消*/

.manager, .manager a, .manager .action
{
    color:#eba818 !important;
    font-size:11px !important;
}
.manager .cancel, .manager .delete, .unmute, .mute
{
    color:#39c !important;
    font-size:11px !important;
}

.manager:hover,
.manager a:hover
{
    text-decoration:none !important;
}

/*隱藏已經消音的噗*/
.muted {filter:alpha(opacity=30); opacity:0.3; zoom:1;}

/*----------------------------------------------------------無回應 : )*/

.list .empty
{
    color:# !important;
    background:url(http://) no-repeat 50% 0px transparent;  /*放背景圖*/
    margin:20px 0 0 0;
    padding:30px 0 0 0;
    text-indent:-9999px;  /*隱藏文字*/
}

/*----------------------------------------------------------新回應的底色*/

.plurk_box td .shade_6, td .shade_6,
.plurk_box td .shade_5, td .shade_5,
.plurk_box td .shade_4, td .shade_4,
.plurk_box td .shade_3, td .shade_3,
.plurk_box td .shade_2, td .shade_2,
.plurk_box td .shade_1, td .shade_1
{
    background:#fff !important;
    filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
}

/*----------------------------------------------------------原噗者的回應*/

.list .highlight_owner .td_qual a  /*暱稱*/
{
    color:# !important;
    text-decoration:none;
}  
.list .highlight_owner .plurk_cnt  /*底色*/
{
    background:# !important;
}

.list .highlight_owner .td_cnt a.ex_link {color:# !important;}
.list .highlight_owner .td_cnt a:hover {color:# !important;}
.list .highlight_owner .td_cnt .text_holder {color:# !important;}

/*----------------------------------------------------------讓噗列表換行*/

.list .plurk_cnt .td_qual
{
    position:absolute;
    width:auto;
    overflow:visible;
    margin-left:0.7em;
    background:# !important;
}
.list .plurk_cnt .text_holder  
{
    margin-top:1.5em;
    padding:0.5em;
    margin-left:0.6em;
    width:auto !important;
    background:# !important;
}

/*----------------------------------------------------------影音圖片*/

.youtube img,
.video img,
.pictureservices img
{
    border:0px solid #fff !important;
    filter:alpha(opacity=80); opacity:0.8; zoom:1;
}
.youtube:hover img,
.video:hover img,
.pictureservices:hover img
{
    border:1px solid # !important;
    filter:alpha(opacity=100); opacity:1; zoom:1;
    top:0px;
    left:0px;
}

/*影音圖片大小*/
.pictureservices img, .pictureservices img:hover
{max-width:100px !important;max-height:70px !important;}

.youtube img, .youtube:hover img,
.video img, .video:hover img
{min-width:100px !important; min-height:69px !important;}

.list .pictureservices img, .list .pictureservices img:hover  /*列表*/
{max-width:100px!important;max-height:60px!important;}

/*----------------------------------------------------------噗上的連結*/

.plurk a.ex_link, .text_holder a.ex_link,
.plurk a.ex_link:visited, .plurk a.ex_link:active,
div.bigplurk h1.content a.ex_link,   /*單噗頁面連結*/
#plurk_nav a:link,    /*上一則下一則噗連結*/
#plurk_nav a:visited, #plurk_nav a:active,
.plurk_content a.ex_link  /*單噗回應列表連結*/
{
    color:#026BA6 !important;
    font-weight:500 !important;
    text-decoration:none;
}
.plurk a.ex_link:hover, .text_holder a.ex_link:hover,
div.bigplurk h1.content a.ex_link:hover,
#plurk_nav a:hover,
.plurk_content a.ex_link:hover  
{
    color:#026BA6 !important;
    border-bottom:0;
    text-decoration:underline !important;
    font-weight:500 !important;
    top:0px;
    left:0px;
}

/*----------------------------------------------------------噗上的人名*/

.td_qual span a,
.td_qual span a:hover
{
    font-weight:500 !important;
    letter-spacing:px;
    top:0px;
    left:0px;
}

/*暱稱向上移*/
#timeline_holder div.plurk .td_qual span a
{
    position:absolute;
    top:-20px;
    margin-left:15px !important;
    text-shadow: 0pt 0px 1pt rgba(0,0,0,0.4);
}

/*---------------------------------------------------單一噗頁面連結*/

.perma_link
{
    margin-left:5px;
    padding-left:15px;
    background:url(http://) no-repeat 0 3px;
}
.perma_link a,
.perma_link a:hover
{
    text-decoration:none !important;
}


/*----------------------------------------------------------回應時間標示*/

.response_time .plurk_cnt,
div.response_time
{
    background:none !important;
    border:0 !important;
}

div.response_time .holder
{
    background:#fff !important;
    color:#555 !important;
    font-size:11px !important;
    filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    padding:4px;
}

/*--------------------------------------------------------回應時間旁的小圖示*/

.reply_to  /*16x32*/
{
    background:transparent url(http://) no-repeat scroll 0 0;
    margin-top:2px;
    margin-left:2px;
}
.reply_to:hover  /*滑鼠移至效果*/
{
    background:transparent url(http://) no-repeat scroll 0 0;
    margin-top:2px;
    margin-left:2px;
    top:0px;
    left:0px;
}
.del_icon
{
    background:transparent url(http://) no-repeat scroll 0 0;
    height:14px;
    width:16px;
    margin-top:2px;
}
.del_icon:hover   /*滑鼠移至效果*/
{
    background:transparent url(http://) no-repeat scroll 0 0;
    height:14px;
    width:16px;
    margin-top:2px;
    top:0px;
    left:0px;
}


/*--------------------------------------------------------------回應數*/

.td_response_count {padding-top:px;}  /*對齊*/

.response_count
{
    padding-left:10px;
    padding-right:4px;
    padding-bottom:3px;
    padding-top:3px;
    margin-top:0px;
    margin-left:2px;
    color:# !important;
    background:none !important;
}
.new .response_count  /*新回應*/
{
    background:# url(http://i) right 1px no-repeat !important;
    border:0 !important;
    font-size:14px !important;  
    color:#fff !important;
    padding-top:12px !important;  
    padding-left:8px !important;  
    padding-right:8px !important;
    padding-bottom:5px !important;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    -moz-box-shadow:0px 0px 9px #eee;
    -webkit-box-shadow:0px 0px 9px #eee;
    box-shadow:0px 0px 9px #eee;
}
.dots .inner  /*中間的...*/
{
    background:none;
    border:none;
    height:0;
    width:0;
    padding:0;
    margin:0;
    overflow:hidden;
    font-size:0px;
}


/*-------------------------------------------------浪上的噗透明度變化*/

#timeline_cnt  
{filter:alpha(opacity=100) !important;opacity:1 !important; zoom:1;}
#timeline_cnt:hover
{filter:alpha(opacity=80) !important;opacity:0.8 !important; zoom:1;}

/*-------------------------------------------------浪上噗的顯示變化*/

/*隱藏內容*/
#timeline_holder .plurk_cnt .text_holder
{filter:alpha(opacity=0) !important;opacity:0 !important; zoom:1;}

/*滑鼠移至後顯示內容*/
#timeline_holder .plurk_cnt .text_holder:hover
{filter:alpha(opacity=100) !important;opacity:1 !important; zoom:1;}

/*去掉噗背景跟框線*/
#timeline_holder .plurk_cnt
{background:transparent !important; border:0 !important;}

 /*滑鼠移至後的噗背景*/
.link_extend .text_holder {background-color:#FFFFFF;}  

/*浪上噗的寬與高*/
.plurk .truncated
{
    min-width:px;_width:px !important;
    height:auto;
    overflow:hidden;
}

/*噗打開後回應區寬度*/
.display,.toggled
{
    min-width:px;_width:px !important;
    z-index:1200;
}

.plurk_cnt tr  /*噗內底色*/
{
    background:#e2f2f2 !important;
    filter:alpha(opacity=90); -moz-opacity:0.9; opacity: 0.9;
    padding:2px;
    line-height:160%;
}

選擇需要的部份來變化使用～