twicli の表示をシンプルに (3)
最新版をご覧ください。
(8月17日追記) メインのTL以外でボタンが表示されなくなっていたのを修正しました。
twicliの表示をシンプルに (2) - メモ用紙 からさらに改良。
- アイコンをクリックしたときにそのユーザの情報を表示するようにした
- 最新の取得分をハイライトするようにした
- お気に入り、返信、返信元ボタンはマウスが乗ってるときだけ表示
- ただしお気に入りのつぶやきは常に☆を表示
- 返信、返信元のボタンの位置を右下に固定して迷わないように
- 残り字数の表示を変更
- その他微調整
以下スタイルシート
body { font-size: 12px; } #tw, #tw2 { font-size: 11px; } #fst { font-size: 11px; height: 33px; margin: 0 0 -1px; font-family: "ヒラギノ角ゴPro", sans-serif; } #tw, #tw2 { background: #fefefe; } #tw > div:first-child { background: #ffeef4; } .tome { background: #ffffe4; } .fromme { background: #f2f2f4; } .emp { background-color: #ffd0de; } a { color: #088253; text-decoration: none; } a:hover { text-decoration: underline; } #tw > div { border: none; } #tw > div > div, #tw2c > div > div { padding: 4px 20px 2px 4px; border-bottom: 1px solid #ccc; } .uicon { margin: 0; } .uid { display: block; position: relative; width: 32px; height: 32px; float: left; margin: 0 6px 0 -32px; text-indent: -999px; text-decoration: none; } .uname { display: none; } .fav { margin-right: -16px; width: 16px; height: 16px; } .utils { display: block; margin-right: -16px; } .utils span { vertical-align: middle; } .utils .prop { display: block; float: left; margin: 3px 6px 0 0; } .utils .button { display: block; float: right; margin: 2px 0 -2px 6px; padding: 0; width: 13px; height: 13px; font-size: 10px; text-align: center; background: #deded8; color: #666; -moz-border-radius: 13px; border-radius: 13px } .utils .button:hover { text-decoration: none; } .utils .button:last-child { display: none; } img.fav[src="http://assets3.twitter.com/images/icon_star_empty.gif"], .utils .button { visibility: hidden; } #tw > div > div:hover img.fav[src="http://assets3.twitter.com/images/icon_star_empty.gif"], #tw2 > div > div > div:hover img.fav[src="http://assets3.twitter.com/images/icon_star_empty.gif"], #tw > div > div:hover .utils .button, #tw2 > div > div > div:hover .utils .button { visibility: visible; } #control { border-color: #92928e; } #menu a { background: #deded8; color: #888; border-color: #90908e; font-size: 11px; font-weight: bold; } #menu a.sel { background: #f4f4f2; color: #222; border-bottom-color: #fff; } #menu a.new { background: #fcfcd0; } #counter-div { opacity: 0.6; width: 36px; } #counter { background: #000; font-size: 13px; line-height: 16px; height: 17px; -moz-border-radius: 5px; } #counter-p1 { border-right: solid 4px #000; } #counter-p2 { border-left: solid 4px #000; } #counter-p1, #counter-p2 { border-top-width: 7px; }