Plurk 02.16 版型發佈.css

/**=======佈景發佈 by疾患=======**/
/*作者噗浪 http://www.plurk.com/hoshikata*/
/*
請直接在自訂佈景把所有的語法貼上，而且必須先選擇新版的預設佈景，
背景圖片當然自己放即可。
此佈景適合搭配的背景是偏灰色單調背景。
*/

/**隱藏廣告**/
#resp_banner_ads.show {height: 0px; overflow: hidden;}


/**噗浪生物**/
/*隱藏原本的生物*/
#dynamic_logo img {opacity: 0;}
/*新生物*/
#dynamic_logo
{
    height: 200px; /*生物高度*/
    width: 200px; /*生物寬度*/
    background: url() no-repeat; 
    margin-top: -10px; /*生物距離頂部的位置*/
    margin-right: 0px; /*生物的左右位置*/
}


/**文字**/
body
{
    color: #333 !important; 
    font-size: 12px !important; /*大小*/
    font-weight: 400 !important; /*粗細*/
    letter-spacing: 0.08em !important; /*段高*/
    text-transform: normal; /*字母大小寫*/
}


/**連結**/
a, /*平常*/
a:link, /*未訪問*/
a:visited, /*訪問後*/ 
a:active /*按下時*/
{
    color: #888 !important;
    text-decoration: none !important; 
}
/*滑鼠移至*/
a:hover
{
    color: #666 !important;
    text-decoration: underline !important; /*底線*/
}


/**全介面圓角**/
.dots .inner, .plurk_cnt {border-radius: 6px !important;}
#form_holder, .info_box {border-radius: 0px 0px 6px 6px;}
#form_holder {margin-top: -6px; padding-top: 6px;} /*調整噗內的上端，使圓角不要太突兀*/


/**河道高度位置**/
#timeline_holder
{
    height: 450px !important; /*整個河道的高度*/
    margin-top: 10px !important; /*上外邊界，可調整河道的最高高度*/
    margin-bottom: 35px !important; /*下外邊界，可把頻道按鈕往下調*/
    padding-bottom: 30px !important; /*下內邊界，可調整河道的最低高度*/
}


/**時間區**/
/*時間軸透明度*/
.div_bottom {opacity: 0;}
/*時間軸線*/
#bottom_line {background: none;}
/*噗下出現的時間*/
#time_show {background: #333 !important; opacity: 0.9;}


/**解放頻道切換列**/
/*一整列頻道*/
#filter_tab {margin-right: 10px;}
/*各頻道*/
#filter_tab li 
{
    width: 30px; 
    margin-right: 5px; 
    overflow: hidden;
    clear: none; 
}
/*頻道背景*/
#filter_tab a 
{
    height: 25px !important; 
    margin: 0 !important; 
    padding-top: 0px;
} 
/*回應通知的位置*/
#updater {left: 5px; bottom: 30px} 
/*可避免標籤蓋在較低的噗上*/
#timeline_bg {z-index: -1;}
#timeline_cnt, .timeline_control {z-index: 800;}
.timeline_control {margin-left: 0;}
#timeline_control_holder {width: 100%;}


/**頻道顏色設定**/
/*通知常態*/
#updater .item a {background: #D9D9D9 !important;}
/*通知滑鼠移至*/
#updater .item a:hover 
{
    background: #FCFCFC !important; 
    color: #333 !important;
}
/*頻道常態*/
#filter_tab a.off_tab 
{
    background: none !important; 
    color: rgba(0,0,0,0) !important;
} 
/*頻道滑鼠移至*/
#filter_tab a.off_tab:hover 
{
    background: rgba(100,100,100,0.25) !important; 
    text-decoration: none !important;
}
/*選中的頻道*/
#filter_tab a.filter_selected 
{
    background: #333 !important; 
    color: rgba(0,0,0,0) !important;
}
/*未讀數字設定*/
.unread_generic
{
    width: 25px !important; /*底色寬度*/
    height: 25px !important; /*底色高度*/
    font-size: 11px; /*字大小*/
    top: -18px; /*內容位置上*/
    margin-left: -65px; /*內容位置左*/
    border-radius: 20px; /*底色圓角*/
    position: absolute;
}
/*未選中頻道的未讀數量*/
#filter_tab a.off_tab .unread_generic
{
    background: none !important; /*底色*/
    color: #000 !important; /*字色*/
    text-shadow: 0px 0px 1px #666; /*文字陰影-X軸 Y軸 暈染 顏色*/
}
/*選中頻道的未讀數字*/
#filter_tab a.filter_selected .unread_generic
{
    background: #333 !important; /*底色*/
    color: #fff !important; /*字色*/
    text-shadow: 0px 0px 1px #bbb; /*文字陰影-X軸 Y軸 暈染 顏色*/
}
/*我的訊息的位置修正*/
#filter_tab a#own_plurks_tab_btn .unread_generic {margin-left: -90px !important;}
/*私人訊息的位置修正*/
#filter_tab a#private_plurks_tab_btn .unread_generic {margin-left: -60px !important;}
/*回應過的訊息字的位置修正*/
#filter_tab a#responded_plurks_tab_btn .unread_generic {margin-left: -90px !important;}
/*喜歡轉撲訊息字的位置修正*/
#filter_tab a#favorite_plurks_tab_btn .unread_generic {margin-left:- 110px !important;}
/*icon顏色-常態*/
#filter_tab i {color: #333 !important;}
/*icon顏色-選中*/
#filter_tab a.filter_selected i {color: #bbb !important;}
/*私人訊息icon位置修正*/
.pif-message-private:before {left: 3px;}


/**河道的噗設定**/
/*河道的噗上內邊界加寬*/
.plurk_cnt {padding-top: 5px;}
/*噗友頭貼*/
.p_img 
{ 
    border-radius: 10px; /*圓角*/
    margin-right: 6px; /*頭貼右側與噗的距離*/
    padding: 0px; 
}
/*頭貼圓角*/
.p_img img {border-radius: 5px;}
/*噗友暱稱向上移*/
#timeline_holder div.plurk .td_qual span a
{
    color: #000 !important; /*暱稱顏色*/
    font-size: 12px; /*暱稱字大小*/
    top: -20px; /*暱稱與噗的上方距離*/
    margin-left: -31px !important; /*暱稱與噗的左邊距離*/
    position: absolute;
}
/*噗的回應數*/
/*常態*/ 
.response_count 
{ 
    background: none !important; /*底色*/ 
    color: #333 !important; /*文字*/
}
/*未讀*/
.new .response_count 
{
    background: #000 !important; /*底色*/ 
    color: #fff !important; /*文字*/
    text-shadow: 0px 0px 1px #ddd; /*字陰影*/
    box-shadow: 2px 1px 3px rgba(0,0,0,0.2); /*底色陰影*/
    border: 1px solid #000 !important; /*邊框-大小 樣式 顏色*/
    border-radius: 5px !important; /*圓角*/
    padding: 1px 2px 2px 3px !important; /*內邊界*/
}
/*新訊息的底色*/
.plurk_cnt.new6,
.plurk_cnt.new5,
.plurk_cnt.new4,
.plurk_cnt.new3,
.plurk_cnt.new2,
.plurk_cnt.new1 
{
    background: #ffffff;
} 
/*噗內回應底色-噗主*/
.list .highlight_owner .plurk_cnt, 
.list .highlight_owner .plurk_cnt:hover 
{
    background: #E0E0E0 !important;
}
/*噗內回應底色-其他人*/
.list .plurk_cnt, 
.list .plurk_cnt:hover 
{
    background: #fff !important;
} 
/**讓噗內容與發噗人名換行**/
.list .plurk_cnt .td_qual
{
    width: auto;
    margin-left: 0.7em;
    overflow: visible;
    position: absolute;
}
.list .plurk_cnt .text_holder
{
    width: auto !important;
    background: none !important; /*噗內字的底色*/
    margin-top: 1.8em;
    margin-left: 0.7em;
    padding: 0.5em;
}
/*消音噗的透明度*/
.muted {opacity: 0.2;}


/**河道噗的透明度變化**/
/*常態*/
#timeline_holder .p_img, 
#timeline_holder .plurk_cnt
{
    opacity: 0.5;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);/*底色陰影-X軸 Y軸 暈染 顏色*/
}
/*滑鼠移至*/
#timeline_holder .link_extend .p_img, 
#timeline_holder .link_extend .plurk_cnt
{
    opacity: 0.8;
    transition: opacity 0.5s ease;
}
/*點開噗*/
#timeline_holder .plurk_box .p_img, 
#timeline_holder .plurk_box .plurk_cnt
{opacity: 1;}


/***小圖更換與設置***/
/**loading**/
/*舊河道loading隱藏*/
#div_loading .cnt {opacity: 0.0;}
/*新河道loading*/
#div_loading 
{
    background: transparent url(http://i.imgur.com/rXrFmtr.gif) center scroll no-repeat !important;
    margin-top: -2%;
}
/*舊噗內loading隱藏*/
.loading img {width: 0px; height: 0px;}
/*新噗內loading*/
.loading
{
    background: transparent url(http://i.imgur.com/z6alUcx.gif) center top scroll no-repeat !important;  
    margin-top: 30px;
}

/**往前往後**/
/*往右*/
.cmp_arrow_right
{
    font-size: 30px;
    margin-right: 10px !important;
}
/*往左新圖示*/
.cmp_arrow_left
{
    font-size: 30px;
    margin-left: 15px !important;
}
/*移至最前新圖示*/
.cmp_back_to_today
{
    background: none;
    color: #333;
    font-size: 10px !important;
    margin-left: 15px !important;
}
/*按鈕常態*/
.browse_button
{
    top: 250px;
    opacity: 0.1 !important;
    transition: opacity 0.2s ease-out;
}
/*按鈕常態-滑鼠移至*/
.browse_button:hover
{
    opacity: 1 !important;
    transition: opacity 0.2s ease-in;
}

/**分享與表情選項圖片**/
/*縮小圖示*/
.cmp_emoticon_off, .cmp_emoticon_on, 
.cmp_media_off, .cmp_media_on, 
.cmp_sync_off, .cmp_sync_on, 
.cmp_privacy_off, .cmp_privacy_on
{
    font-size: 18px !important; 
    width: 20px !important;
}
/*去除表符圖示背景*/
.cmp_emoticon_off::before,
.cmp_emoticon_off::after,
.cmp_emoticon_on::before,
.cmp_emoticon_on::after
{
    background: none !important;
}
/*顏色*/
.cmp_emoticon_off, /*表符常態*/ 
.cmp_media_off, /*分享常態*/
.cmp_sync_off, /*同步常態*/
.cmp_privacy_off /*私人訊息常態*/
{
    color: #91928D !important;
}
.cmp_emoticon_mini_off, /*噗內表符常態*/
.cmp_media_mini_off /*噗內分享常態*/
{
    color: #c0c0c0 !important;
}

/**噗上小圖片**/
/*消音前底色*/
.manager .mute-off:hover {background: #C0C0C0 !important}
/*推文前底色*/
.manager .promote:hover {background: #6495ED !important} 
/*轉噗前底色*/
.manager .replurk-off:hover {background: #3CB371 !important;} 
/*喜歡前底色*/
.manager .like-off:hover {background: #DC143C !important}
/*……後底色*/
.manager .mute-on:hover, /*消音後底色*/
.manager .cancel:hover, /*推文後底色*/
.manager .replurk-on:hover, /*轉噗後底色*/
.manager .like-on:hover /*喜歡後底色*/
 {
     background: none !important
}
/*……前圖示色*/
.manager .mute-off, /*消音前圖示色*/
.manager .promote, /*推文圖示色*/
.manager .replurk-off, /*轉噗前圖示色*/
.manager .like-off, /*喜歡前圖示色*/
.manager .delete, /*刪除圖示色*/
.manager .edit /*編輯圖示色*/
 {
     color: #333 !important
} 
/*消音後圖示色*/
.manager .mute-on {color: #C0C0C0 !important}
/*轉噗後圖示色*/
.manager .replurk-on {color: #3CB371 !important;}
/*喜歡後圖示色*/
.manager .like-on {color: #DC143C !important}


/**主控台**/
/*主控台*/
#plurk-dashboard
{
    color: #c0c0c0 !important; /*字的顏色*/
    font-size: 11px !important; /*字的大小*/
    line-height: 20px !important; /*行距*/
}
/*暱稱*/
#full_name 
{
    font-weight: 600 !important; 
    font-size: 14px !important;
}
/*統計區*/
#dash-stats h3, 
#dash-stats table th, 
#dash-stats table td 
{
    color: #c0c0c0 !important; 
    font-size: 12px !important;
}
/*卡馬*/
#karma
{
    color: #FFF !important;
}
/*主控台圖片*/
#plurk-dashboard img, 
#dash-stats .award_bar img:hover 
{
    border-radius: 5px !important;
}
/*發噗區文字顏色*/
.textarea_holder textarea 
{
    color: #333333 !important;
}
/*發噗按鈕*/
.submit_img 
{
    width: 64px; /*底色寬度*/
    height: 30px; /*底色高度*/
    background: #c0c0c0 !important; /*底色*/
    color: #333; /*字體顏色*/
    font-size: 18px; /*字體大小*/
    text-align: center; /*字的對齊*/
    line-height: 30px; /*行高*/
}


/**朋友粉絲按鈕**/
/*常態*/
.friend_man.add_follow, .friend_man.add_friend,
.friend_man.remove, .friend_man.private_plurk
{
    background: #444 !important; /*底色*/
    color: #999 !important; /*字色*/
    border-radius: 5px !important; /*圓角*/
}
/*滑鼠移上*/
.friend_man.add_follow:hover, .friend_man.add_friend:hover, 
.friend_man.remove:hover, .friend_man.private_plurk:hover 
{
    background: none !important; /*底色*/
    color: #999 !important; /*字色*/
    border: 1px solid #bbb !important; /*按鈕邊框的大小顏色*/
    border-radius: 5px !important; /*圓角*/
}


/**主控台透明度變化**/
/*發噗區背景隱藏*/
.dash-group-form .segment-content {background: none !important;}
/*發噗區常態透明度*/
.dash-group-form {opacity: 0.1 !important;}
/*發噗區指定後透明度*/
.dash-group-form:hover {opacity: 0.75 !important;}


/*==========主控台收縮==========*/
/*隱藏頁尾*/
footer.clearfix {
    width: 0px !important; 
    height: 0px !important; 
    overflow: hidden !important;
}
/*徽章調整*/
.award_bar {margin: 0 !important; padding: 0 !important;}
.dash-segment-award .segment-content 
{padding-top: 0 !important; padding-bottom: 0 !important;}
#dash-award .link_arrow {
    width: 100px !important;
    color: rgba(0,0,0,0) !important; 
    margin: 0 !important; 
    padding: 0 !important;
}
/*主控台下內距隱藏*/
#dashboard_holder 
{
    height: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/**主控台左側**/
/*調整原本背景*/
.dash-segment-profile .segment-content {background: none; padding: 0;}
/*調整頭像暱稱區與自介區背景*/
#dash-profile,
#dash-additional-info
{
    background: rgba(34,34,34,0.9);
    border-radius: 10px;
    padding: 10px !important;
}
#dash-profile {margin-left: 96px;}
.profile-pic {margin: -10px 0 0 -106px;}
#full_name, .profile-info {margin-left: 0px !important; margin-bottom: 10px;}
/*左側寬度*/
.dash-group-left {
    width: 86px !important; /*寬度*/
    top: 42px !important; /*上方距離*/
    left: 10px !important; /*左方距離*/
    position: fixed !important;
    z-index: 999;
}
/*漸變*/
.dash-segment-profile /*主控台左側-常態*/
{
    width: 86px !important; /*寬度*/
    height: 96px !important; /*高度*/
    opacity: 0.5 !important; /*透明度*/
    overflow: hidden !important; /*超出部分(隱藏)*/
    transition: width 0.1s ease-out 0.5s, height 0.5s ease-out, opacity 0.5s ease-out;
    /*漸變-寬度 總時間0.1秒 漸漸變慢 延遲0.5秒，高度 總時間0.5秒 漸漸變慢，透明度  總時間0.5秒 漸漸變慢*/
}
.dash-segment-profile:hover /*主控台左側-滑鼠移至*/
{
    width: 300px !important; /*寬度*/
    height: 350px !important; /*高度*/
    opacity: 1 !important; /*透明度*/
    transition: width 0.1s ease-in, height 0.5s ease-in 0.1s;
    /*漸變-寬度 總時間0.1秒 漸漸變快，高度 總時間0.5秒 漸漸變快 延遲0.5秒*/
}

/**主控台右側**/
/*左右收縮*/
.dash-group-right /*常態*/
{
    width: 335px !important; /*寬度*/
    top: 138px !important; /*上方距離*/
    left: -325px !important; /*左方距離*/
    transition: left 1s ease-out 0.5s; /*漸變-左方距離 總時間1秒 漸漸變慢 延遲0.5秒*/
    position: fixed !important; 
    z-index: 900;
}
.dash-group-right:hover /*滑鼠移至*/
{
    left: 10px !important; /*左方距離*/
    transition: left 1s ease-out; /*漸變-左方距離 總時間1秒 漸漸變快*/
}
.dash-segment-fans {clear: left !important;} /*清除左方浮動*/
.dash-stats-karma {width: auto !important;} /*卡馬區寬度調整*/
.dash-segment-stats .segment-content {border-radius: 10px 10px 0 0;} /*統計區圓角*/
.dash-segment-friends .segment-content {border-radius: 0;} /*朋友區圓角*/
.dash-segment-fans .segment-content {border-radius: 0 0 10px 10px;} /*粉絲區圓角*/
/*朋友區、粉絲區上外邊界清除*/
.dash-segment-friends .segment-content, 
.dash-segment-fans .segment-content {margin-top: 0px;}
/*統計區、朋友區、粉絲區、徽章區寬度*/
.dash-segment-stats .segment-content,
.dash-segment-friends .segment-content,
.dash-segment-fans .segment-content,
.dash-segment-award .segment-content
{
    width: 335px !important;
    padding: 10px;
}
/*漸變*/
#dash-stats /*統計區-常態*/
{
    height: 75px !important; /*高度*/
    overflow: hidden !important; /*超出部分(隱藏)*/
    transition: height 1s ease-out; /*漸變-高度 總時間1秒 漸漸變慢*/
}
#dash-stats:hover /*統計區-滑鼠移至*/
{
    height: 225px !important; /*高度*/
    transition: height 1s ease-in; /*漸變-高度 總時間1秒 漸漸變快*/
}
#dash-friends, #dash-fans /*朋友區、粉絲區-常態*/
{
    height: 20px !important; /*高度*/
    overflow: hidden !important; /*超出部分(隱藏)*/
    transition: height 1s ease-out; /*漸變-高度 總時間1秒 漸漸變慢*/
}
#dash-friends:hover, #dash-fans:hover /*朋友區、粉絲區-滑鼠移至*/
{
    height: 135px !important; /*高度*/
    transition: height 1s ease-in; /*漸變-高度 總時間1秒 漸漸變快*/
}