MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

ver108でブックマークツールバーの自動開閉がおかしい。
https://forums.mozillazine.jp/viewtopic.php?f=2&t=20811		 ページ 1 ／ 1
作成者:  okb [ 2022年12月06日(火) 13:22 ]
記事の件名:  ver108でブックマークツールバーの自動開閉がおかしい。
Ver107で次のCSSにてブックマークツールバーをマウスオーバーで自動開閉が正常動作しています。
#PersonalToolbar:not([customizing="true"]) {
transform: translateY(-500px);
transition: transform 0s ease 300ms !important;
position: absolute !important; z-index: 1;
display: block;
width: 100%;
}
#navigator-toolbox:hover > #PersonalToolbar:not([customizing="true"]) {
transform: translateY(0px);
transition: transform 0s !important;
}
そのままVer108で適用したいのですが、バーがトップに位置してアクティブタブが前面表示されます。
対応策、アドバイス願います。

添付ファイル:
コメント: Ver107のとき
アクティブタブは「Home」でブックマークツールバーは二段表示してます。
Art166.png
Art166.png [ 172.27 KiB | 表示数: 5709 回 ]
コメント: Ver108のとき
クティブタブは「Home」で前面表示され、ブックマークでツールが隠れてます。
Art162.png
Art162.png [ 195.88 KiB | 表示数: 5709 回 ]
作成者:  EarlgreyTea [ 2022年12月08日(木) 08:28 ]
記事の件名:  Re: ver108でブックマークツールバーの自動開閉がおかしい。
okb さんが書きました:
Ver107で次のCSSにてブックマークツールバーをマウスオーバーで自動開閉が正常動作しています。

ご提示の userChrome.css 内容ですが、
#PersonalToolbar（ブックマークツールバー）が、#titlebar、#nav-bar の下に配置されてることを前提に、
まずY座標-500した画面外の位置に display:block でレンダリングさせ、マウスオーバー時に元座標に移動させるという、少しトリッキーなことをやっているようです。

ベータ版のVer.108ですが、#PersonalToolbar に、「ブックマークツールバーの項目」の前に「ブックマークをインポートする」ボタンが追加されています。
これにより、綱渡り的な前提条件が崩れてしまい、
  • 表示位置が #navigator-toolbox 内のトップにリセットされる
  • 「ブックマークをインポートする」と「ブックマークツールバーの項目」が2段に表示
ということになっているようです。

あらかじめ「ブックマークをインポートする」をカスタマイズで取り除いておいて、表示位置シフト量を #navigator-toolbox の高さ分決め打ちで指定してはどうでしょうか。
きちんとやるにはスクリプトで行う必要があるように思います。
作成者:  okb [ 2022年12月08日(木) 10:42 ]
記事の件名:  Re: ver108でブックマークツールバーの自動開閉がおかしい。
レス、ありがとう。
提示したCSSはググって取得したもので、私には知識はありません。

＞#PersonalToolbar に、「ブックマークツールバーの項目」の前に「ブックマークをインポートする」ボタンが追加されています。
？
＞ブックマークツールバーの項目」が2段に表示
CSSで多段表示してます。

今回提示したCSSは諦めます。
下記CSSは正常に動作するのですが、画面がズレるので好みではありません。
これを表示領域に上書き表示するようにできませんか？
/*ブックマークツールバーをマウスオーバーで開閉する*/
#PersonalToolbar:not(:hover) {
visibility: collapse !important;
background-color:transparent !important;
-moz-transition-duration: .5s !important;
-moztan-rsition-timing-function: ease-in-out !important;
}
#navigator-toolbox:hover > #PersonalToolbar {
visibility: visible !important;
-moz-transition: .5s ease-in-out;
}
作成者:  EarlgreyTea [ 2022年12月08日(木) 14:05 ]
記事の件名:  Re: ver108でブックマークツールバーの自動開閉がおかしい。
okb さんが書きました:
？

説明はしたつもりなのですが、話が噛み合っていないようです。
UIをいじる前に、新しいプロファイルで起動してVer.108本来の挙動を確認してみてください。
作成者:  okb [ 2022年12月08日(木) 15:02 ]
記事の件名:  Re: ver108でブックマークツールバーの自動開閉がおかしい。
なぜ、噛み合わないのでしょう？
Ver107のサンプル画像のようにしたいということだけです。
サンプルのバーは2行表示してますが、1行表示と見てください。
新規プロファイルをつくる意味なんてありませんよ。
作成者:  EarlgreyTea [ 2022年12月08日(木) 16:54 ]
記事の件名:  Re: ver108でブックマークツールバーの自動開閉がおかしい。
ベータ版のVer.108ですが、#PersonalToolbar に、「ブックマークツールバーの項目」の前に「ブックマークをインポートする」ボタンが追加されています。
↑
これが通じていない様子でしたので、ご自身で確認してくださいということです。
元の挙動を知らずしてのカスタマイズはありえません。
作成者:  okb [ 2022年12月08日(木) 18:36 ]
記事の件名:  Re: ver108でブックマークツールバーの自動開閉がおかしい。
「ツールバーのカスタマイズ」のことだったんですね。
いずれにしろイレギュラーのことのようなので諦めます。
作成者:  okb [ 2022年12月22日(木) 09:11 ]
記事の件名:  Re: ver108でブックマークツールバーの自動開閉がおかしい。
ロダにUPしてもらったものが動作しました。
#PersonalToolbar{
--uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
--uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */
--uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */

/* 0deg = "show" ; 90deg = "hide" ; Set the following to control when bookmarks are shown */
--uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */
--uc-autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */
}
:root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px }
:root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px }
#PersonalToolbar:not([customizing]){
position: relative;
margin-bottom: calc(0px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
transform: rotateX(90deg);
transform-origin: top;
transition: transform 60ms linear var(--uc-autohide-toolbar-delay) !important;
z-index: 1;
}
#PlacesToolbarItems > .bookmark-item{ padding-block: var(--uc-bm-padding) !important; }
#nav-bar:focus-within + #PersonalToolbar{
transition-delay: 100ms !important;
transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0));
}
#navigator-toolbox:hover > #PersonalToolbar{
transition-delay: 100ms !important;
transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0));
}
#navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar {
transform: rotateX(0);
}


下記部分は数値変更して利用
margin-bottom: calc(0px - var(--uc-bm-height) - 3.5 * var(--uc-bm-padding));
ページ 1 ／ 1 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/