Firefox 64のmy設定【userChrome.cssその2】

ブラウザの端にマウスを持っていくとサイドバーがぬるっと表示されるようにするためのuserChrome.cssです。

前提

  • サイドバーはあらかじめ表示しておく
  • Firefox本体(サイドバーヘッダーの項目横の下向き矢印から)の設定でサイドバーを右に表示
  • 上の動画ではタブをサイドバーに置くのにTab Center Reduxを利用しています

マウスホバーでサイドバーがぬるっと表示されるuserChrome.css

サイドバー右側表示用は以下。

/* サイドバー自動開閉 */
#sidebar-box{
position:relative !important;
overflow-x:hidden !important;
margin-left:-5px !important;
right:5px !important;
min-width:5px !important;
max-width:5px !important;
box-shadow:0 0 2px 0 rgba(0,0,0,.35);
transition:all .3s ease 0s !important;
opacity:0 !important;
}
#sidebar-box:hover{
margin-left:-170px !important;
right:170px !important;
min-width:170px !important;
max-width:170px !important;
box-shadow:0 0 5px 0 rgba(0,0,0,.35);
opacity:1 !important;
}
/* 上記だけだと普段スクロールバーが見えないので */
#sidebar{
opacity:0 !important;
}
#sidebar:hover{
opacity:1 !important;
}

サイドバー左側表示用は以下(上記の「left」を「right」、「right」を「left」に書き換えるだけ)。

/* サイドバー自動開閉 */
#sidebar-box{
position:relative !important;
overflow-x:hidden !important;
margin-right:-5px !important;
left:5px !important;
min-width:5px !important;
max-width:5px !important;
box-shadow:0 0 2px 0 rgba(0,0,0,.35);
transition:all .3s ease 0s !important;
opacity:0 !important;
}
#sidebar-box:hover{
margin-right:-170px !important;
left:170px !important;
min-width:170px !important;
max-width:170px !important;
box-shadow:0 0 5px 0 rgba(0,0,0,.35);
opacity:1 !important;
}

左側用表示はトグル用の余白が見えるようになっています。またサイドバーやトグル用余白(?)の幅はお好みで調整してください。

Recent Entries

2019-01-10
サイドバーにタブを表示するFirefoxアドオン16選
2019-01-06
Firefox 64のmy設定【userChrome.cssその2】
2019-01-05
Firefox 64のmy設定【userChrome.cssその1】
2019-01-04
Firefox 64のmy設定【user.js】
2018-01-18
freo設置ディレクトリをルートURLで表示させる

Categories

Tags

Archives

2019年
01月
2018年
01月

Recent Images

  • サイドバーにタブを表示するFirefoxアドオン16選
  • Firefox 64のmy設定【userChrome.cssその1】
  • Firefox 64のmy設定【user.js】
  • WAF有効でも403エラーを回避する
  • Photo by ガーリードロップ

Utility Link

Page Top