[ plurk css ] 噗浪CSS架構對照表 @ 金羽銀華

為了方便自己選用與組合噗版的各個CSS項目，所以整理了一份對照表，羅列了大部份使用過的項目清單，也放上來提供大家參考～

/*------------------------------------------------------------------------
噗浪語法 Plurk CSS: 噗浪CSS架構對照表
列表整理 List order by: Be Myself Inc. M6
-- 此噗版CSS僅供個人練習參考用，請勿改製再分享或用於商業用途 --
-- Copyright: 版權所有保留一切權利 All Rights Reserved --
------------------------------------------------------------------------*/

/*-----#前置設定-----*/

img   /*所有圖片*/
a:focus, :focus, a, a:link, a:visited, a:active /*連結文字*/
a:hover
select /*下拉選單*/
select:focus
input    /*輸入欄位*/
input:focus

/*-----語言字型-----*/

body.language-large-font
.language-large-font #top_login
.language-large-font #footer
.language-large-font .small
.language-large-font .tooltip_cnt
.language-large-font .direct-l

/*-----Google瀏覽器捲軸-----*/

::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-thumb:hover

/*-----畫面背景-----*/

body, html
#page_title /*標題*/
#top_login    /*頁首登入列*/
#top_bar /*頁首左邊*/
#top_bar a   /*頁首左邊連結*/
#top_bar .content a#edit_link   /*編輯*/
#alert_beacon /*通知*/
.unread #alert_beacon    /*未讀通知*/
#top_bar .item img /*頁首左邊小圖*/
/* USE_DARK_ICONS */ /*頁首左方小圖使用深色*/
#top_login a /*頁首右邊文字*/
a#login_link   /*登入登出*/
#languge_selector /*切換語言*/
#languge_selector form select /*尚未展開時的下拉表格欄位*/
#languge_selector form select option /*展開後的表格*/
div#footer /*頁尾*/
div#footer p    /*頁尾段落*/
#footer a /*頁尾連結*/

/*-----時間軸背景-----*/

#timeline_holder
#timeline_bg .day_bg .div_inner /*換日線*/
.div_inner   /*日區*/
.day_start .bottom_start, .day_start .div_start /*日期*/
#bottom_line /*底軸時間線*/
.bottom_start, .bottom_end /*時間*/
#time_show, #time_show span   /*每一則對應時間*/
.block_bg .div_one_line /*特定時間軸主題的直線*/
.small_timeline .block_bg .div_one_line
#timeline_cnt, #timeline_bg, #timeline_fg /*時間區塊*/
#empty_timeline_bg /*沒有任何未讀訊息-搜尋噗浪*/
#empty_timeline_fg
#dynamic_logo, #logo img, img#creature   /*噗浪logo生物*/
.cmp_loading   /*主畫面loading圖*/
#div_loading .cnt
.loading img   /*每則噗loading圖*/
.loading
.browse_button /*往前往後箭頭*/
.cmp_arrow_right    /*向右*/
.cmp_arrow_left   /*向左*/
.cmp_back_to_today     /*跳至最前*/
.cmp_arrow_right:hover
.cmp_arrow_left:hover
.cmp_back_to_today:hover

/*-----所有訊息列標籤-----*/

#filter_tab /*所有標籤*/
#filter_tab a.off_tab   /*未選標籤*/
#filter_tab a.off_tab:hover
#filter_tab a.filter_selected /*正選(使用中)標籤*/
#filter_tab a.filter_selected:hover
.unread_generic   /*未讀數字*/
#filter_tab a.filter_selected .unread_generic   /*正選未讀數字*/

/*-----更新通知與音樂播放器-----*/

#updater /*更新通知(幾則新訊息)*/
#updater .text {color:#ffffff !important;}   /*幾則新訊息與回應*/
#updater a /*更新檢視連結*/
.cmp_poll_line /*中間的間隔線*/
#music_player /*音樂播放器(影音視窗縮小只放音樂bar)*/
#music_player a   /*音樂播放器連結文字*/

/*-----發噗區背景-----*/

div#plurk_form
.plurkaction   /*plurk區塊*/
#toggle_tab     /*plurk-搜尋*/
#toggle_tab li.tt_selected    /*正選頁籤*/
#toggle_tab li     /*未選頁籤*/
#toggle_tab li span#plurk_tab /*頁籤圖示-plurk*/
#toggle_tab li span#search_tab   /*頁籤圖示-搜尋*/
#main_poster .qual_holder /*使用者名稱*/
.char_updater /*尚餘字數*/
.char_highlight /*超過字數*/

/*-----發噗區輸入欄位-----*/

.plurkForm td   /*整區*/
textarea#input_big /*發噗輸入*/
textarea#input_permalink
textarea#input_big.content
textarea:focus
textarea#input_big_private:focus
textarea#input_big:focus
textarea#input_permalink:focus
input#current_query   /*搜尋輸入*/
input#current_query:focus
.u_search /*搜尋其它會員*/
.share_search b   /*分享搜尋結果*/
input#share_link    /*搜尋結果網址*/
.cmp_plurk /*發噗按鈕*/
input.orange-but /*搜尋按鈕*/
textarea#input_big_private /*發送私密噗*/
textarea#input_big_private.content

/*-----語助詞-----*/

.dd_img img /*語助詞旁的箭頭符號*/
.qualifier   /*浪上*/
.mini_form .m_qualifier /*浪上每則噗發噗區*/
.m_qualifier /*發噗區*/
#reply_box .m_qualifier /*單一噗浪發噗區*/
.r_qualifier   /*單噗頁面*/
.content .r_qualifier   /*單噗主噗區*/
div.bigplurk .r_qualifier /*單噗頁面上下則*/
.qual_menu   /*下拉選單*/
.qual_menu td   /*選單表格*/
.qual_menu .on   /*滑鼠移至效果*/

/*-----語助詞各欄位-----*/

.qual_menu .q_freestyle,
.q_freestyle,
td .q_freestyle   /*自由發揮*/

.qual_menu .q_loves,
.q_loves,
td .q_loves   /*愛*/

.qual_menu .q_likes,
.q_likes,
td .q_likes   /*喜歡*/

.qual_menu .q_shares,
.q_shares,
td .q_shares   /*分享*/

.qual_menu .q_gives,
.q_gives,
td .q_gives    /*給*/

.qual_menu .q_hates,
.q_hates,
td .q_hates    /*討厭*/

.qual_menu .q_wants,
.q_wants,
td .q_wants    /*想要*/

.qual_menu .q_wishes,
.q_wishes,
td .q_wishes   /*期待*/

.qual_menu .q_needs,
.q_needs,
td .q_needs    /*需要*/

.qual_menu .q_will,
.q_will,
td .q_will   /*打算*/

.qual_menu .q_hopes,
.q_hopes,
td .q_hopes   /*希望*/

.qual_menu .q_asks,
.q_asks,
td .q_asks   /*問*/

.qual_menu .q_has,
.q_has,
td .q_has    /*已經*/

.qual_menu .q_was,
.q_was,
td .q_was   /*曾經*/

.qual_menu .q_wonders,
.q_wonders,
td .q_wonders   /*好奇*/

.qual_menu .q_feels,
.q_feels,
td .q_feels   /*覺得*/

.qual_menu .q_thinks,
.q_thinks,
td .q_thinks   /*想*/

.qual_menu .q_says,
.q_says,
td .q_says   /*說*/

.qual_menu .q_is,
.q_is,
td .q_is    /*正在*/

/*-----分享功能-----*/

#main_poster .icons_holder /*發噗區分享連結圖片等圖示*/
.cmp_image_off
.cmp_youtube_off
.cmp_link_off
.cmp_webcam_off

/*滑鼠移至圖示效果*/
.cmp_image_on
.cmp_youtube_on
.cmp_link_on
.cmp_webcam_on

/*-----表情選單-----*/

.smily_holder img /*微笑符號*/
.smily_holder   /*圖示區*/
#main_poster .smily_holder   /*發噗區的圖示區*/
#emoticon_selecter /*選單區背景*/
#emoticons_show /*圖片區背景*/
#emoticon_selecter img   /*圖片*/
#emoticon_selecter a:hover img   /*滑鼠移至時圖片*/
#emoticons_tabs ul li /*選擇項目*/
#emoticons_tabs ul li.current /*正選項目*/
#emoticons_show .red_link /*額外圖示連結*/

/*-----私人訊息、語系及選項 -----*/

#more_options_link /*打開前的連結*/
#more_options_holder   /*打開後的區塊*/
#more_options td, #more_options .caption /*內容標題*/
.wickEnabled /*輸入欄*/
.small   /*請輸入…的欄位說明文字*/
.advert a   /*噗浪同步訊息至FB*/
.private_to /*私人訊息給...*/
.private_to b /*私人訊息底色標注*/
.selectedSmartInputItem /*移動選擇底色*/
.selectedSmartInputItem a /*移動選擇連結文字*/
.auto_ta .person /*已選擇的噗友底色*/
#smartInputFloaterContent /*下拉選單*/

/*-----主控台背景-----*/

#dashboard_holder   /*發噗區與主控台整體*/
div#plurk-dashboard   /*主控台整區*/
.dash-segment .segment-content /*四欄位各區*/
#dash-profile /*自介區*/
#profile_pic /*個人頭貼*/
#profile_pic:hover
#full_name    /*姓名*/
#span_years    /*年齡*/
#m_or_f    /*性別*/
#location    /*所在位置*/
p#about_me   /*關於我自己*/
#dash-additional-info /*關於我自己描述內容*/
#dash-additional-info a      /*連結文字*/
#dash-additional-info a:hover
p#relationship_container /*感情婚姻狀態*/
#dash-stats    /*統計區*/
#dash-stats h2    /*標題-統計*/
#dash-stats h3   /*卡馬區*/
.karma_hover /*卡馬karma*/
#karma   /*卡馬數值*/
#dash-stats table    /*統計資料區*/
#dash-stats table th, /*項目*/
#dash-stats table td    /*數值*/
.link_arrow, .cmp_points-arrow /*卡馬升降與說明箭頭*/
.cmp_karma_up,.cmp_karma_down
a.link_arrow, a.link_arrow link_badges
.award_bar     /*小徽章*/
.award_bar div    /*每個小徽章*/
.award_bar img     /*小徽章圖片*/
#dash-friends    /*朋友區*/
#dash-friends h2    /*標題-朋友*/
#dash-fans    /*粉絲區*/
#dash-fans h2     /*標題-粉絲*/
.show_all_friends a /*列出所有朋友粉絲連結*/

/*-----朋友粉絲按鈕-----*/

a.friend_man /*整體*/
a.friend_man:hover
.friend_man.private_plurk   /*傳送私人訊息*/
.friend_man.add_friend   /*加入朋友*/
.friend_man.remove /*取消朋友*/
.friend_man.pending /*取消追蹤*/
.friend_man.add_follow   /*追蹤粉絲*/
.friend_man.block /*加入黑名單*/
#block_user a.block
#block_user a.block:hover
body.language-large-font .friend_man

/*滑鼠移至效果*/
.friend_man.add_follow:hover,
.friend_man.remove:hover,
.friend_man.add_friend:hover,
.friend_man.pending:hover,
.friend_man.private_plurk:hover,
.friend_man.block:hover

/*-----朋友粉絲圖像-----*/

.friend_holder /*整區*/
.friend_holder table
.friend_holder img    /*圖片*/
.friend_holder td   /*圖片格*/
.friend_holder .user_link /*個別連結*/
.user_link img /*連結圖片*/

/*-----粉絲區文字與連結-----*/

div#fan_holder
div#fan_holder a
div#fan_holder a:hover

/*-----常設隱藏區域-----*/

#dash-friends p, #dash-friends form /*朋友搜尋*/
div #tw_help   /*入門說明*/
div a#dashboard-invite   /*邀請朋友*/
div #sharePlurk   /*分享連結*/
.dash-icon    /*社交小圖示*/

#dash-friends input.orange-but /*搜尋其他噗浪會員按鈕*/
input#loc_field     /*輸入區*/
a#dashboard-invite span /*邀請朋友圖片區*/
#dash-friends p /*邀請朋友段落*/
#dash-friends form /*邀請朋友文字*/
#sharePlurk input.clipboard   /*分享網址連結欄*/
#sharePlurk input.clipboard:hover
#sharePlurk span
#sharePlurk div

/*-----浪上的噗-----*/

#timeline_holder div.plurk   /*噗外框*/
.block_cnt .plurk_cnt /*噗外框*/
.block_cnt .link_extend .plurk_cnt   /*滑鼠移過去延伸的噗*/
.block_cnt .plurk_box .plurk_cnt   /*噗打開後*/
.plurk .truncated /*浪上噗的高度*/
#timeline_cnt   /*時間軸內容區整體*/
#timeline_cnt:hover
#timeline_holder .plurk_cnt   /*浪上的噗*/
#timeline_holder div.plurk .td_qual span a   /*浪上的暱稱區*/
#timeline_holder div.plurk .td_img   /*浪上的頭貼*/
#timeline_holder div.link_extend .td_img    /*滑鼠移過去時的頭貼*/
#timeline_holder div.plurk_box .td_img    /*噗打開後的頭貼*/
.p_img   /*頭貼圖片*/
.manager, .manager a, .manager .action /*編輯*/
.manager .cancel   /*取消*/
.manager .delete /*刪除*/
.mute, .unmute   /*消音,解除消音*/
.muted /*已消音的噗*/
td.td_cnt texture   /*編輯噗欄位*/
.td_cnt .text_holder /*噗文字內容*/
.list /*回應列表*/
.list .empty /*無回應 : )的噗*/
.list .plurk_cnt   /*列表中的噗*/
.list .plurk_cnt tr
.list table /*列表區表格寬度*/
.plurk_box .caption /*回應列表標題*/
.list .plurk_cnt .td_qual   /*列表中的暱稱區*/
.plurk_box .qual_holder
.list .plurk_cnt .text_holder     /*列表中的內容區*/
.plurk_box .mini_form /*下方您的回應區*/
.mini_form .qual_holder /*使用者名稱*/
.mini_form .char_updater /*尚餘字數*/
.char_updater span /*按Enter送出*/
textarea#input_small /*下方回應區輸入欄位*/
.info_box   /*下方回應區訊息列*/
.info_box a /*連結文字*/
.info_box a:hover
div.favorite_count /*喜愛的人數*/
div.limited_box /*私人訊息給...*/
.perma_link /*訊息連結區*/
.perma_link a
.perma_link a:hover

/*-----噗內新回應的底色漸層-----*/

.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

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

.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 /*單噗回應列表連結*/

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

.td_qual span a,
.td_qual span a:hover

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

.youtube img,
.video img,
.pictureservices img

/*滑鼠移至效果*/
.youtube:hover img,
.video:hover img,
.pictureservices:hover img

.list .pictureservices img /*列表中的圖片*/
.list .pictureservices img:hover

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

.response_time .plurk_cnt
div.response_time
div.response_time .holder

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

.td_response_count
.response_count
.new .response_count /*新回應*/
.dots .inner /*中間的...*/
.reply_to /*回應時間旁的小圖示-回覆*/
.reply_to:hover
.del_icon    /*回應時間旁的小圖示-刪除*/
.del_icon:hover

/*-----單則訊息網址頁 -----*/

div.bigplurk
.user-nick,    /*暱稱*/
.user-nick:hover

div.bigplurk h1.content .plurk_content   /*文字設定*/
div.contentwrapper h1.content    /*內容區*/
div.time    /*時間區*/

/*-----噗主代表圖-----*/

img.bubble_edge /*箭頭*/
div.user img /*圖片*/

/*-----上一則下一則-----*/

#prev_plurk, #next_plurk,
#prev_plurk:hover, #next_plurk:hover

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

#plurk_responses ul.responses
#plurk_responses h2   /*標題*/
#plurk_responses h2 a /*回應連結*/
div.feed-link a   /*分享連結*/
#plurk_responses ul.responses li /*每則回應*/
ul.responses .message /*文字設定*/
#plurk_responses ul.responses .message a.user /*暱稱*/
img.avatar /*噗友代表圖*/
#plurk_responses ul.responses .message a /*訊息內連結樣式*/
#plurk_responses ul.responses .message a:hover
ul.responses li:hover span.time /*回應時間*/
ul.responses .highlight_owner .time /*原噗者回應時間*/

/*-----下方回應區-----*/

#reply_box
#reply_box_holder
#reply_box_holder .qual_holder   /*使用者名稱*/
#reply_box #input_big /*輸入內容*/

/*-----登入或註冊以回應-----*/

div #not_logged_in h2
div #not_logged_in h2 a
div #not_logged_in h2 a:hover

/*-----浪上噗友小視窗-----*/

.AmiMenu.info_menu
.AmiMenu.info_menu .separator /*分隔線*/
.AmiMenu.info_menu .block   /*舉報濫用*/
.AmiMenu td     /*文字*/
.AmiMenu.info_menu td.on     /*滑鼠移至*/
.AmiMenu.info_menu .user_info.on
.AmiMenu.info_menu .user_info.on b
.AmiMenu.info_menu .user_info img   /*噗友圖片*/
.cmp_tooltips-down   /*下拉視窗箭頭*/
.cmp_tooltips-up

/*-----說明小視窗-----*/

.tooltip_cnt
.tooltip_cnt img /*噗友代表圖*/
.AmiTT_main   /*背景箭頭與文字*/
.AmiTT_main b   /*名稱*/

/*-----功能視窗-----*/

.GB_Window /*外框*/
.GB_Window .header   /*標題框*/
.GB_Window .content /*內容框*/
.GB_Window .header td.caption /*標題列*/
.GB_Window .close
.GB_Window .close span /*標題列關閉符號*/

/*-----彈出視窗-----*/

.GB_Gallery .iframe_holder
img[src="http://www.plurk.com/static/greybox/w_close1.gif"] /*關閉圖示*/
.GB_Gallery .content
.content div .hide_window /*隱藏影片在背景播放*/
div .hide_window a

/*-----註冊/登入-----*/

#top_login a#sign_up /*頁首上方*/
#validate_email
#sign_up_small
#registerToday
.plurk_box .login_to_see a    /*每則噗回應區*/
.red_link

div .adsense /*單則訊息廣告區*/
#getting_started /*外掛連結視窗*/

/*------------------------------------------------------------------------
Date: 2011-05-22
List order by: Be Myself Inc. M6
-- 此噗版CSS僅供個人練習參考用，請勿改製再分享或用於商業用途 --
-- Copyright: 版權所有保留一切權利 All Rights Reserved --
------------------------------------------------------------------------*/