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

再來是發噗區的設定。包括「私人訊息、語系及選項」選單，以及"plurk"與"搜尋"頁籤及內容的設計。

_07_私人選項

/*======================== 私人選項 ========================*/

#more_options_link /*打開前*/
{
   background:transparent url(http://) left top no-repeat !important;
   padding-left:15px !important;
   border:0 !important;
   color:#aaa !important;
   font-size:12px !important;
}
#more_options td,
#more_options .caption,
#more_options_holder
{
   background:none !important;
   border:0 !important;
   color:#eee !important;
   font-size:12px !important;
   letter-spacing:;
   text-decoration:none !important;
}
#more_options_holder   /*打開後*/
{
   background:#444 !important;
   border:1px solod #222 !important;
}

.small {font-size:10px !important;} /*欄位說明*/
.advert a {font-size:0px !important;} /*噗浪同步訊息至FB*/
.private_to {color:#ccc !important;} /*私人訊息給...*/

.private_to b,   /*私人訊息*/
.selectedSmartInputItem, .selectedSmartInputItem a, /*移動選擇*/
.selectedSmartInputItem a:hover,
.auto_ta .person /*已選擇的噗友底色*/
{
   background:#000 !important;
   color:#ddd !important;
   font-size:12px !important;
   font-weight:normal !important;
   text-decoration:none !important;
   top:0px;
   left:0px;
   -moz-border-radius:4px;
   -khtml-border-radius:4px;
   -webkit-border-top-left-radius:4px;
   -webkit-border-top-right-radius:4px;
   -webkit-border-bottom-right-radius:4px;
   -webkit-border-bottom-left-radius:4px;
}
#smartInputFloaterContent /*下拉選單*/
{
   background:#f4f4f4 !important;
}
.private_to b,   /*私人訊息*/
.auto_ta .person /*已選擇的噗友底色*/
{
   padding:2px 4px;
}
.wickEnabled, .wickEnabled:focus /*輸入欄*/
{
   background:none !important;
   border:0 !important;
   -moz-box-shadow:0px 0px 0px #ccc;
   -webkit-box-shadow:0px 0px 0px #ccc;
   box-shadow:0px 0px 0px #ccc;
}

_08_發噗選項

主控台中輸入文字的區域，稱作「發噗區」，包括輸入欄位、發噗按鈕、表情符號與語助詞等項目的設定。

/*======================== 發噗選項 ========================*/

div#plurk_form
{
   width:965px;
   height:px;
   margin:20px auto;
}

/*使用者名稱*/
#main_poster .qual_holder
{
   color:#ddd !important;
   font-size:20px !important;
}

/*尚餘字數*/
.char_updater {color:#ccc !important;}

/*超過字數*/
.char_highlight {color:#fff !important;background:none !important;}
.char_highlight a {color:#fff !important;background:#333 !important;}

/*對齊中間*/
.plurkForm td {vertical-align:middle !important;}

/*頁籤*/
#toggle_tab,
#toggle_tab li,
#toggle_tab li.tt_selected
{
   color:#ccc !important;
   font-size:14px !important;
}
#toggle_tab {margin-left:px;}

/*隱藏頁籤圖示*/
#toggle_tab li span#plurk_tab,
#toggle_tab li span#search_tab
{
   width:0px !important;
}

/*輸入欄位*/
textarea#input_big_private, /*發送私密噗視窗*/
textarea#input_big_private.content,
textarea#input_big, /*發噗輸入*/
textarea#input_permalink,
textarea#input_big.content,
input#current_query   /*搜尋輸入*/
{
   color:#111 !important;
   font-size:20px !important;
   line-height:1.5;
   padding:5px 5px;
   min-height:100px;
}

input#current_query,   /*搜尋輸入*/
input#current_query:focus
{
   color:#111 !important;
   min-height:31px !important;
}

/*發噗按鈕*/
.cmp_plurk
{
   background:url(http://) no-repeat scroll top left;
}

/*搜尋按鈕*/
input.orange-but
{
   background:# !important;
   color:#fff !important;
   font-size:20px !important;
   padding:5px 4px !important;
   text-shadow:0px 0px 3px #ccc !important; /*文字陰影*/
   border:0px solid #333 !important;
   -moz-box-shadow:0 0px 0 #aaa !important;   /*框線陰影*/
   -webkit-box-shadow:0 0px 0 #aaa !important;
   box-shadow:0 0px 0 #aaa !important;
}

.u_search, .u_search a, /*搜尋其它會員*/
.share_search b   /*分享搜尋結果*/
{
   color:#ffffff !important;
   font-weight:normal;
}
input#share_link
{
   background:none !important;
   color:#444 !important;
   border:0 !important;
   border-bottom:1px solid #ccc !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;
   filter:alpha(opacity=70); opacity:0.7; zoom:1;   /*透明度*/
}

/*發噗輸入區整體透明度變化*/
textarea#input_big
{filter:alpha(opacity=20) !important; opacity:0.2 !important; zoom:1;}
textarea#input_big:hover
{
   background:#fff !important;
   filter:alpha(opacity=80) !important; opacity:0.8 !important; zoom:1;
}

/*======================== 微笑表情 ========================*/

.smily_holder img
{filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;}
.smily_holder
{
   background:url(http://) center center no-repeat;
   padding-right:24px;
   padding-left:0 !important;
   margin:0 !important;
   width:24px !important;
}

/*======================== 分享功能 ========================*/

#main_poster .icons_holder /*發噗區圖示*/
{
   position:absolute;
   left:px;
}
.cmp_image_off, .cmp_youtube_off, .cmp_link_off, .cmp_webcam_off
{filter:alpha(opacity=50) !important; opacity:0.5 !important; zoom:1;}
.cmp_image_on, .cmp_youtube_on, .cmp_link_on, .cmp_webcam_on
{
   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;
}

/*======================== 語助詞 ========================*/

/*語助詞旁的箭頭符號*/
.dd_img img
{
filter:alpha(opacity=50) !important;opacity:0.5 !important; zoom:1;
}

.qualifier, .m_qualifier, .r_qualifier, /*所有*/
div.bigplurk .r_qualifier /*單噗頁面上下則*/
{
   background:none !important; /*將外觀的背景去除*/
   border:0 !important;
}

.qualifier, /*浪上*/
.mini_form .m_qualifier, /*浪上每則噗發噗區*/
.r_qualifier /*單噗頁面字*/
{
   font-size:12px !important;
}
.m_qualifier, /*發噗區*/
#reply_box .m_qualifier, /*單一噗浪發噗區*/
.content .r_qualifier   /*單噗主噗區*/
{
   font-size:15px !important;
}

/*--------------------------------------------------------------各欄位*/

.qual_menu .q_freestyle,
.q_freestyle,
td .q_freestyle   /*自由發揮*/
{
   background:none !important;
   color:#999 !important;
}
.qual_menu .q_loves,
.q_loves,
td .q_loves   /*愛*/
{
   background:none !important;
   color:#B20C0C !important;
}
.qual_menu .q_likes,
.q_likes,
td .q_likes   /*喜歡*/
{
   background:none !important;
   color:#CB2728 !important;
}
.qual_menu .q_shares,
.q_shares,
td .q_shares   /*分享*/
{
   background:none !important;
   color:#A74949 !important;
   border:0 !important;
}
.qual_menu .q_gives,
.q_gives,
td .q_gives    /*給*/
{
   background:none !important;
   color:#620E0E !important;
}
.qual_menu .q_hates,
.q_hates,
td .q_hates    /*討厭*/
{
   background:none !important;
   color:#ccc !important;
}
.qual_menu .q_wants,
.q_wants,
td .q_wants    /*想要*/
{
   background:none !important;
   color:#8DB241 !important;
}
.qual_menu .q_wishes,
.q_wishes,
td .q_wishes   /*期待*/
{
   background:none !important;
   color:#5BB017 !important;
}
.qual_menu .q_needs,
.q_needs,
td .q_needs    /*需要*/
{
   background:none !important;
   color:#7A9A37 !important;
}
.qual_menu .q_will,
.q_will,
td .q_will   /*打算*/
{
   background:none !important;
   color:#B46DB9 !important;
}
.qual_menu .q_hopes,
.q_hopes,
td .q_hopes   /*希望*/
{
   background:none !important;
   color:#e05be9 !important;
}
.qual_menu .q_asks,
.q_asks,
td .q_asks   /*問*/
{
   background:none !important;
   color:#8361bc !important;
}
.qual_menu .q_has,
.q_has,
td .q_has    /*已經*/
{
   background:none !important;
   color:#777 !important;
}
.qual_menu .q_was,
.q_was,
td .q_was   /*曾經*/
{
   background:none !important;
   color:#525252 !important;
}
.qual_menu .q_wonders,
.q_wonders,
td .q_wonders   /*好奇*/
{
   background:none !important;
   color:#2e4e9e !important;
}
.qual_menu .q_feels,
.q_feels,
td .q_feels   /*覺得*/
{
   background:none !important;
   color:#2D83BE !important;
}
.qual_menu .q_thinks,
.q_thinks,
td .q_thinks   /*想*/
{
   background:none !important;
   color:#689CC1 !important;
}
.qual_menu .q_says,
.q_says,
td .q_says   /*說*/
{
   background:none !important;
   color:#E2560B !important;
}
.qual_menu .q_is,
.q_is,
td .q_is    /*正在*/
{
   background:none !important;
   color:#E57C43 !important;
}

/*--------------------------------------------------------------表格欄位*/

.qual_menu td /*選單表格*/
{
   text-align:center !important;
   font-size:12px;
}
.qual_menu
{
   background:#000 !important;
   border:1px solid #222 !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;
}
.qual_menu .on
{
   color:#FFF !important;
   text-shadow:0px 0px 5px #eeeeee;
}

/*======================== 表情選單 ========================*/

#emoticons_show /*圖片背景*/
{
   background:#fff;
   border-right:0px solid #fcfcfc;
   border-bottom:0px solid #fcfcfc;
   border-top:1px dashed #ccc !important;
   padding-top:10px;
}
#emoticon_selecter /*選單背景*/
{
   text-align:center;
   position:absolute;
   background:#eee;
   border:1px solid #eee !important;
   width:450px !important;
   overflow:no;
   -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;
}
#emoticon_selecter img {border:0px solid #fff !important;}
#emoticon_selecter a:hover img {border:0px solid #bebebe !important;}
#emoticons_tabs ul li
{
   background:#eee;
   font-size:12px;
   font-weight:500;
   text-transform:normal;
   margin-left:0px;
   border:0 !important;
   padding:;
}
#emoticons_tabs ul li a {color:# !important;}
#emoticons_tabs ul li.current a {color:#eee !important;}
#emoticons_tabs ul li.current /*項目正選*/
{
   background:#555 !important;
   border:0;
   border-bottom:0px solid #222 !important;
   font-weight:500;
   -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;
}
#emoticon_selecter a:hover,
#emoticons_tabs ul li a:hover
{
   color:#333 !important;
   top:0px;
   left:0px;
}
#emoticons_show .red_link /*額外連結*/
{
   background:none !important;
   font-weight:normal;
   font-size:11px;
   text-decoration:none !important;
}