河道語法整理.css

/*
:hover 滑鼠移至，在任何標籤加上此時不需要空格
*/
/*
:before :after 偽元素，:before 是 icon，:after 是 icon 的背景
*/

/**雪花**/
/*下雪範圍*/
#snow_canvas
{
    width: 100% !important;
    height: 100% !important;
}

/*雪花按鈕*/
.snowflake 
{
    color: #FFF; /*顏色*/
    font-size: 4em; /*大小*/
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5); /*陰影-X軸 Y軸 暈染 顏色*/
    opacity: 0.33; /*透明度*/
    top: 370px; 
    right: 15px;
    position: absolute;
}

/*雪花按鈕-滑鼠移至*/
.snowflake:hover 
{
    text-shadow: 1px 1px 5px rgba(0,0,0,0.66); /*陰影-X軸 Y軸 暈染 顏色*/
    opacity: 0.66; /*透明度*/
}


/**噗浪生物**/
/*隱藏原本的生物*/
#dynamic_logo img {opacity: 0;}

/*新生物*/
#dynamic_logo
{
    height: 200px; /*生物高度*/
    width: 200px; /*生物寬度*/
    background: #fff url() right top fixed no-repeat; 
    margin: 1px 1px 1px 1px; /*外邊界-上 右 下 左*//*可調整生物在畫面上的位置*/
}


/**河道的噗**/
/*河道*/
#timeline_holder 
{
    width: 100% !important; /*寬度*/
    height: 500px !important; /*高度*/
    background: #fff url() left top fixed no-repeat; /*背景-圖片(網址) 顏色 左右對齊 上下對齊 固定 重複*/
    border: solid 1px #000; /*邊框-樣式(實線) 粗度 顏色*/
    border-radius: 1px 1px 1px 1px; /*圓角-左上 右上 右下 左下*/
    margin: 1px 1px 1px 1px; /*外邊界-上 右 下 左*/
    padding: 1px 1px 1px 1px; /*內邊界-上 右 下 左*/
}

/*河道噗首*/
.p_img, /*河道噗頭貼*/
.pictureservices, /*噗首放上的圖片框*/
.pictureservices img, /*噗首放上的圖片*/
.meta img  /*噗首放上的影片框圖片*/
{
    background: #fff !important;
    border: solid 1px #000 !important; /*邊框-樣式(實線) 粗度 顏色*/
    border-radius: 1px 1px 1px 1px !important; /*圓角-左上 右上 右下 左下*/
    margin: 1px 1px 1px 1px !important; /*外邊界-上 右 下 左*/
    padding: 1px 1px 1px 1px !important; /*內邊界-上 右 下 左*/
    overflow: hidden !important; /*超出部分(隱藏)*/
}
.plurk_cnt, /*該噗首*/
.plurk_box, /*噗的回應內容*/
#timeline_holder .plurk_box .plurk_cnt, /*被打開的噗首*/
#timeline_cnt .td_qual /*該噗友暱稱狀態區*/
#timeline_cnt .td_qual a, /*該噗友暱稱*/
#timeline_cnt .text_holder, /*該噗內容*/
#timeline_cnt .text_holder .name /*被轉噗，原噗主暱稱*/
.ex_link, /*該噗連結*/
.meta, /*噗首放上的影片框*/
.hashtag /*TAG文字*/
{
    width: 100% !important; /*寬度*/
    height: 500px !important; /*高度*/
    background: #fff url() left top fixed no-repeat; /*背景-圖片(網址) 顏色 左右對齊 上下對齊 固定 重複*/
    color: #000; /*字體顏色*/
    font: italic bold 12px/20px Arial; /*字體-樣式(斜體) 粗體 大小/行高 字型*//*font簡寫必有大小和字型*/
    text-decoration: none; /*文字效果(底線)*/
    border: solid 1px #000; /*邊框-樣式(實線) 粗度 顏色*/
    border-radius: 1px 1px 1px 1px; /*圓角-左上 右上 右下 左下*/
    margin: 1px 1px 1px 1px; /*外邊界-上 右 下 左*/
    padding: 1px 1px 1px 1px; /*內邊界-上 右 下 左*/
}
.response_count, /*回應數常態*/ 
.new .response_count, /*回應數未讀*/
.qualifier, /*轉噗、狀態圖示*/
.manager a, /*噗的功能按鈕*/
.pif-push promote, /*推文*/
.pif-volume mute-off, /*消音前*/
.pif-replurk replurk-off, /*轉噗前*/
.pif-like like-off, /*喜歡前*/
.pif-volume mute-on, /*消音後*/
.pif-replurk replurk-on, /*轉噗後*/
.pif-like like-on, /*喜歡後*/
{
    background: #fff; /*背景顏色*/
    color: #000; /*字體顏色*/
    font-size: 12px; /*字體大小*/
    text-shadow: 0px 0px 1px #ddd; /*字陰影*/
    box-shadow: 2px 1px 3px rgba(0,0,0,0.2); /*底色陰影*/
    border: solid 1px #000; /*邊框-樣式(實線) 粗度 顏色*/
    border-radius: 1px 1px 1px 1px; /*圓角-左上 右上 右下 左下*/
}
.pif-privacy-circle:before, /*噗首私人訊息標示icon*/
.pif-replurk-circle:before, /*噗首轉噗訊息標示icon*/
.pif-like-circle:before /*噗首喜歡訊息標示icon*/
{
    color: #000; /*字體顏色*/
    font-size: 12px; /*字體大小*/
    margin: 0px 0px 0px 0px; /*外邊界-上 右 下 左*/
}
.pif-privacy-circle:after, /*噗首私人訊息標示icon背景*/
.pif-replurk-circle:after, /*噗首轉噗訊息標示icon背景*/
.pif-like-circle:after /*噗首喜歡訊息標示icon背景*/
{
    width: 10px;
    height: 10px;
    background: #000 !important; /*背景顏色*/
    border-radius: 20px; /*圓角-左上 右上 右下 左下*/
    margin: 0px 0px 0px 0px; /*外邊界-上 右 下 左*/
}

/*河道的噗內*/
.favorite_count, /*喜歡人數*/
.replurk_count, /*轉噗人數*/
.mini_form .dd_img, /*回應狀態*/
.report_link a, /*回報濫用*/
.perma_link a /*訊息網址*/
{
    background: #fff; /*背景顏色*/
    color: #000; /*字體顏色*/
    font-size: 12px; /*字體大小*/
    text-shadow: 0px 0px 1px #ddd; /*字陰影*/
    box-shadow: 2px 1px 3px rgba(0,0,0,0.2); /*底色陰影*/
}
.highlight_owner .plurk_cnt, /*噗主*/
.plurk_cnt, /*其他人*/
.list .td_qual a, /*回應人名*/
.list .text_holder, /*回應文字*/
.mini_form .input_holder, /*回應框*/
.mini_form .content, /*回應框內容*/
.char_updater, /*按 Enter 送出*/
.info_box, /*噗尾端的控制欄*/
{
    background: #fff; /*背景顏色*/
    color: #000; /*字體顏色*/
    font: italic bold 12px/20px Arial; /*字體-樣式(斜體) 粗體 大小/行高 字型*//*font簡寫必有大小和字型*/
    text-decoration: none; /*文字效果(底線)*/
    border: solid 1px #000; /*邊框-樣式(實線) 粗度 顏色*/
    border-radius: 1px 1px 1px 1px; /*圓角-左上 右上 右下 左下*/
    margin: 1px 1px 1px 1px; /*外邊界-上 右 下 左*/
    padding: 1px 1px 1px 1px; /*內邊界-上 右 下 左*/
}
.cmp_emoticon_mini_off:before, /*噗內表符mini icon*/
.cmp_media_mini_off, /*噗內分享mini icon*/
.cmp_emoticon_mini_on:before, /*表符mini icon-滑鼠移上*/
.cmp_media_mini_on /*分享mini icon-滑鼠移上*/
{
    color: #000 !important; /*字體顏色*/
    font-size: 12px !important; /*字體大小*/
    margin: 1px 1px 1px 1px; /*外邊界-上 右 下 左*/
}
.cmp_emoticon_mini_off:after, /*噗內表符mini icon背景*/
.cmp_emoticon_mini_on:after /*表符mini icon背景-滑鼠移上*/
{
    width: 10px;
    height: 10px;
    background: #000 !important; /*背景顏色*/
    border-radius: 20px; /*圓角-左上 右上 右下 左下*/
    margin: 0px 0px 0px 0px; /*外邊界-上 右 下 左*/
}

/*時間軸*/
.bottom_start, /*時間軸的時間區*/
.day_start .bottom_start, /*換日的時間區*/
#time_show, /*噗下出現的時間*/
#time_show span, /*噗下出現的時間-文字要另外設定*/
#bottom_line, /*時間軸線*/
.day_bg /*換日線*/
{
    width: 0px !important; /*寬度*/
    height: 0px !important; /*高度*/
    background: #fff; /*背景顏色*/
    color: #000; /*字體顏色*/
    font: 12px; /*字體大小*/
    text-decoration: none; /*文字效果(底線)*/
    border: solid 1px #000; /*邊框-樣式(實線) 粗度 顏色*/
    border-radius: 1px 1px 1px 1px; /*圓角-左上 右上 右下 左下*/
    margin: 1px 1px 1px 1px; /*外邊界-上 右 下 左*/
    padding: 1px 1px 1px 1px; /*內邊界-上 右 下 左*/
}

/*往左往右箭頭*/
.cmp_arrow_right, /*往右*/
.cmp_arrow_left, /*往左*/
.cmp_back_to_today /*回到最前(有文字)*/
{
    width: 32px; 
    height: 32px;
    background: #fff url() left top no-repeat;
    font-size: 0px !important;
    margin: 1px 1px 1px 1px; /*外邊界-上 右 下 左*/
}
.browse_button, /*按鈕常態*/
.browse_button:hover /*按鈕常態-滑鼠移至*/
{
    top: 280px;
    opacity: 0.1 !important;
    transition: opacity 0.2s ease;
}


/**廣告**/
#resp_banner_ads,
.cbox_ads
{
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}


/**頻道設定**/
/*普通頻道*/
/*.off_tab 未選擇、.filter_selected 選擇、:hover 滑鼠移至
欲控制其他狀態，請直接加上上述三種在標籤後頭，不需要空格，:hover可與其他兩個搭配
例如：#filter_tab a.filter_selected:hover*/
#filter_tab a, /*頻道*/
#all_plurks, /*所有訊息頻道*/
#own_plurks_tab_btn, /*我的頻道*/
#private_plurks_tab_btn, /*私人頻道*/
#responded_plurks_tab_btn, /*回應頻道*/
#favorite_plurks_tab_btn /*喜歡頻道*/
{
    width: 0px !important; /*寬度*/
    height: 0px !important; /*高度*/
    background: #fff url() left top fixed no-repeat; /*背景-圖片(網址) 顏色 左右對齊 上下對齊 固定 重複*/
    color: #000 !important; /*字色*/
    font: italic bold 12px/20px Arial; /*字體-樣式(斜體) 粗體 大小/行高 字型*//*font簡寫必有大小和字型*/
    line-height: 500px; /*垂直置中*//*行高設定與高度相同可置中，只適用單行文字*/
    text-decoration: none; /*文字效果(底線)*/
    border: solid 1px #000; /*邊框-樣式(實線) 粗度 顏色*/
    border-radius: 1px 1px 1px 1px; /*圓角-左上 右上 右下 左下*/
    margin: 1px 1px 1px 1px; /*外邊界-上 右 下 左*/
    padding: 1px 1px 1px 1px; /*內邊界-上 右 下 左*/
}

/*頻道未讀*/
/*加上各頻道後面，需要空格，可與.off_tab .filter_selected :hover搭配
例如：#filter_tab a.off_tab .unread_generic:hover*/
.unread_generic
{
    width: 0px !important; /*寬度*/
    height: 0px !important; /*高度*/
    background: #fff url() left top fixed no-repeat; /*背景-圖片(網址) 顏色 左右對齊 上下對齊 固定 重複*/
    color: #000 !important; /*字色*/
    font: italic bold 12px/20px Arial; /*字體-樣式(斜體) 粗體 大小/行高 字型*//*font簡寫必有大小和字型*/
    line-height: 500px; /*垂直置中*//*行高設定與高度相同可置中，只適用單行文字*/
    text-decoration: none; /*文字效果(底線)*/
    border: solid 1px #000; /*邊框-樣式(實線) 粗度 顏色*/
    border-radius: 1px 1px 1px 1px; /*圓角-左上 右上 右下 左下*/
    margin: 1px 1px 1px 1px; /*外邊界-上 右 下 左*/
    padding: 1px 1px 1px 1px; /*內邊界-上 右 下 左*/
    position: absolute !important; /*區塊獨立*//*需要區塊獨立後才可以調寬高*/
}

/*更新欄*/
/*可在後面加上:hover*/
/*沒有單獨控制顯示訊息動作的標籤*/
#updater a, /*更新欄*/
#noti_np a, /*新訊息頻道*/ 
#noti_re_view a, /*新回應頻道*/
#noti_re_actions a, /*新回應動作(標示已讀、全部訊息)*/
#mark_all_link /*標示已讀動作*/
{
    width: 0px !important; /*寬度*/
    height: 0px !important; /*高度*/
    background: #fff url() left top fixed no-repeat; /*背景-圖片(網址) 顏色 左右對齊 上下對齊 固定 重複*/
    color: #000 !important; /*字色*/
    font: italic bold 12px/20px Arial; /*字體-樣式(斜體) 粗體 大小/行高 字型*//*font簡寫必有大小和字型*/
    line-height: 500px; /*垂直置中*//*行高設定與高度相同可置中，只適用單行文字*/
    text-decoration: none; /*文字效果(底線)*/
    border: solid 1px #000; /*邊框-樣式(實線) 粗度 顏色*/
    border-radius: 1px 1px 1px 1px; /*圓角-左上 右上 右下 左下*/
    margin: 1px 1px 1px 1px; /*外邊界-上 右 下 左*/
    padding: 1px 1px 1px 1px; /*內邊界-上 右 下 左*/
}

/*頻道icon*/
/*加上各頻道後面，需要空格，可與.off_tab .filter_selected :hover搭配
例如：#filter_tab a.off_tab i:hover*/
i
{
    color: #000 !important; /*字色*/
    text-decoration: none; /*文字效果(底線)*/
    border: solid 1px #000; /*邊框-樣式(實線) 粗度 顏色*/
    border-radius: 1px 1px 1px 1px; /*圓角-左上 右上 右下 左下*/
    margin: 1px 1px 1px 1px; /*外邊界-上 右 下 左*/
    padding: 1px 1px 1px 1px; /*內邊界-上 右 下 左*/
}

/*頻道iocn更換*/
/*加上各頻道後面，需要空格，可與.off_tab .filter_selected搭配
例如：#filter_tab a.off_tab i:before*/
/*選一種使用即可*/
i:before
{
    content : ""; /*換成文字*/
    content : url(''); /*換圖片*/
    content : none; /*移除icon*/
}


/**頻道展開**/
/*左方垂直展開*/
#filter_tab a {height: 25px; margin-top: 6px; position: relative;}
/*左方水平展開*/
#filter_tab li {clear: none; width: auto; margin-right: 5px;}
#filter_tab a {height: 25px !important; margin: 0 !important;}
#updater {left: 5px; bottom: 30px;} /*把更新訊息、新回應移到分類的上面*/
#timeline_bg {z-index: -1;} /*可避免標籤蓋在較低的噗上*/
#timeline_cnt, .timeline_control {z-index: auto;}
/*右方水平展開*/
#timeline_control_holder {width: 100%;}
.timeline_control {margin-right: 5px;}
#filter_tab li {clear: none; width: auto; margin-right: 5px;}
#filter_tab a {height: 25px !important; margin: 0 !important;}
#updater {left: 5px; bottom: 30px;} /*把更新訊息、新回應移到分類的上面*/
#timeline_bg {z-index: -1;} /*可避免標籤蓋在較低的噗上*/
#timeline_cnt, .timeline_control {z-index: auto;}


/**頁尾**/
/*頁尾基本設定*/
#footer
{
    width: 0px !important; /*寬度*/
    height: 0px !important; /*高度*/
    background: #fff !important; /*背景*/
    border: solid 1px #000; /*邊框-樣式(實線) 粗度 顏色*/
    border-radius: 1px 1px 1px 1px; /*圓角-左上 右上 右下 左下*/
    margin: 1px 1px 1px 1px; /*外邊界-上 右 下 左*/
    padding: 1px 1px 1px 1px; /*內邊界-上 右 下 左*/
    overflow: hidden !important; /*超出部分(隱藏)*/
}

/*頁尾連結*/
#footer a
{
    color: #000 !important; /*字色*/
    font: italic bold 12px/20px Arial; /*字體-樣式(斜體) 粗體 大小/行高 字型*//*font簡寫必有大小和字型*/
    text-decoration: none; /*文字效果(底線)*/
}