ブックマークツリーのアイテム選択色変更(2) [バグあり]


ブックマークツリーのアイテムを、D&Dで移動させるとき、
前に書いたスタイルではいまいち見にくいので、このスタイル作りましたが、
”セパレーター部の選択色が表示されない” というバグがあります。
 
以前のスタイルより見やすいと思うのですが、
zubollaには、これに対応できるスキルがないので...
 
とりあえずコードを置いときます。

追記:「ブックマークツリーのアイテム選択色変更」スタイル
Firefox25でも使えるように修正しました。




【 D&Dで移動中のアイテムを見やすくします 】

■ [ アクティブ / 選択状態 ] のアイテム左部分をカットしました。

tree_d22e



【 バグ 】

[ アクティブ / 選択状態 ] のセパレーター部が、選択色になりません。

tree_d24e

        [ アクティブ / 選択状態 ]                               [ 非アクティブ / 選択状態 ]



■ ブックマークツリーのアイテム選択色変更


/* サイドバーのタイトルを表示しない */
#sidebar-box sidebarheader {display: none !important;}

/* ブックマークサイドバーの検索を表示しない */
#bookmarksPanel > hbox {display: none !important;}

/*-----------------------------------------------------*/
/* ::: 上、必要ない人は、ここから下をコピーして下さい ::: */

/* ブックマークサイドバーの背景色を設定 */
#bookmarks-view {
background-color: #FFFFF3 !important;
}

/*-----------------------------------------------------*/
/* 選択行全体 */
/* 非アクティブ状態で、選択状態のアイテム */
#bookmarksPanel treechildren::-moz-tree-row(selected) {
background-color: #E5ECF5 !important;
}

/* アクティブ状態で、選択状態のアイテム */
#bookmarksPanel treechildren::-moz-tree-row(selected,focus) {
border-color: transparent !important;
background-color: transparent !important;
}

/*-----------------------------------------------------*/

/* 非アクティブ状態で、選択状態のテキスト */
#bookmarksPanel treechildren::-moz-tree-cell-text(selected) {
color: black !important;
background-color: #E5ECF5 !important;
}

/* アクティブ状態で、選択状態のテキスト */
#bookmarksPanel treechildren::-moz-tree-cell-text(selected,focus) {
color: white !important;/*白抜き文字*/
background-color: #3399FF !important;
margin: -1px -2px 0px -2px !important;/*上右下左*/
padding: 0px 1px 0px 1px !important;
border: 1px dotted #D8AB15 !important;/*点線*/
}
/*-----------------------------------------------------*/

/* ドラッグ先フォルダ */
#bookmarksPanel treechildren::-moz-tree-row(dropOn) {
background-color: #FFC251 !important;
}

#bookmarksPanel treechildren::-moz-tree-cell-text(dropOn) {
color: white !important;/*白抜き文字*/
}

/* 最上位 ・ブックマークツールバー ・ブックマークメニュー
・未整理のブックマークフォルダ */
#bookmarksPanel treechildren::-moz-tree-cell-text(primary,dropOn) {
border-color: transparent !important;
background-color: transparent !important;
}

/*-----------------------------------------------------*/

#bookmarksPanel treechildren::-moz-tree-drop-feedback {
background-color: #FF0000 !important;
width: 70px !important;
height: 2px !important;
margin-left: -2px !important;
}

/*-----------------------------------------------------*/
/* セパレーター */
/*#bookmarksPanel treechildren::-moz-tree-separator {
border-top-color: ThreeDShadow !important;
border-bottom-color: ThreeDHighlight !important;
}*/





[関連記事]

Stylishを使って [ Firefoxの見た目を変える ]
ブックマークツリーのアイテム選択色を変更



[関連リンク]

ツリーのスタイル付け - MDN
XUL、Tree/ツリーのスタイル - oct inaodu
tree.css:MozillaFirefoxのテーマの作り方

色を指定する方法
HTML色見本
色見本
WEB用カラー見本 ソート機能付き

ColorZilla | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト
ColorZillaでWebページの色を簡単にチェックする! | Health is better than wealth




関連記事
プロフィール

Author:zubolla
  
あ~
めんどくちゃい めんどくちゃい

全記事表示リンク

全ての記事を表示する

カテゴリ
検索フォーム