ページ内検索バーを右上に配置する.css

2021-06-08
テーマによってはボタンの背景色が消えてた

右上findbar

.browserContainer {
  position: relative !important;
}
#statuspanel-inner {
  width: unset !important;
}
findbar {
  -moz-box-ordinal-group: 0 !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  margin: -1px 20px 0 0 !important;
  border: 1px solid var(--chrome-content-separator-color) !important;
  border-top: 0 !important;
  background-color: var(--toolbar-bgcolor) !important;
  background-image: none !important;
  z-index: 1002 !important;
  display: flex !important;
}
#main-window[inFullscreen] findbar{
  margin-top: 0 !important;
}
.findbar-textbox {
/*  font-size: medium !important; */
}
.findbar-container checkbox.tabbable {
  border-radius: 4px !important;
  margin: 0px 1px !important;
  padding: 3px 7px !important;
  line-height: 16px !important;
}
/*テーマによっては背景色が消えてしまう*/
#main-window[lwtheme-mozlightdark] .findbar-container checkbox.tabbable:hover {
  background: var(--button-hover-bgcolor) !important;
}
#main-window[lwtheme-mozlightdark] .findbar-container checkbox[checked].tabbable {
  background: var(--button-active-bgcolor) !important;
}
.findbar-container checkbox.tabbable:hover {
  background: rgba(190,190,190,.4) !important;
}
.findbar-container checkbox[checked].tabbable {
  background: rgba(190,190,190,.6)!important;
}
.findbar-container .checkbox-check,
.findbar-highlight .checkbox-label,
.findbar-case-sensitive .checkbox-label,
.findbar-match-diacritics .checkbox-label {
  display: none !important;
}
.findbar-highlight:after,
.findbar-case-sensitive:after,
.findbar-match-diacritics:after {
  display: inline-block !important;
  box-sizing: border-box !important;
  margin: 1px 0 !important;
}
.findbar-highlight:after {
  content: "\00a0\00a0\00a0\00a0";
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAABlElEQVR42mL8//8/Ay0BQAAxMdAYAAQQzS0ACCCaWwAQQDS3ACCAWEjVsGzLvv/HLlxjsDLQYojycWIkpB4ggJhINZyfl5thcnU2Aw83J8OijbsJJkGAAGIi1XAvOzOG33/+MDia6TMwMzExzF69Da8lAAHERI7hP3/9Zvj24yeDlaE2mD9l6UaclgAEEBMphv/5+xdu+LfvQPzjB4OpjjrD4aNHceoHCCAWclwOMxxE7z1xnsHc3BynGQABxIivqNC3dPh/4dh+rIZ///GLYc/xcwxsbKwMRfHBOFMTQADhDaJLJw4yxBU1gA1DdzkxhoMAQADhDKL44kaw15ZMaALzm4oz4YbvO3mBKMNBACCAcFrw8d0bOBtmSV5SFDjMiTUcBAACiAEUB+h4w96j/0HYyt0f5As41rOw/9+7YM1/bHpwYYAAwumD4xeuM9i6+YLZKtqGDAt76xnJKYsAAogFl+GHd20Gs4/u2MBISWEHEECMtK7RAAKI5sU1QADR3AKAAKK5BQABRHMLAAKI5hYABBgAGVz2EZX7WKAAAAAASUVORK5CYII=) center no-repeat !important;
}
.findbar-case-sensitive:after {
  content: "Aa" !important;
}
.findbar-match-diacritics:after {
  content: "eê" !important;
}
.found-matches {
  -moz-box-ordinal-group: 0 !important;
  margin: 0 8px 0 0 !important;
}
.findbar-find-status {
  display: none !important;
}
.findbar-container,
.findbar-closebutton {
  vertical-align: middle !important;
}

旧タイトル:ページ内検索バーをChrome風にする.css

更新履歴

2021-06-08
テーマによってはボタンの背景色が消えてた
2021-06-07
微修正
2021-04-22
89に対応
2020-11-27
84ぐらいから消えてた
2020-08-21
細々修正
2019-12-08
72からfindbarが見えなくなったので直した
2017-11-24
2017-11-20
×ボタンが改行しないように
2017-11-18
Firefox57
2015-04-05
2015-04-02
2014-05-04
微修正
2013-11-08
公開

タブバーを下段に移動させる

2021-06-08
フルスクリーン時メニューバーが消えてた

89でまたタブバーが上に行きやがった。
上から、タイトルバー、メニューバー、ツールバー、タブバーの順で表示させたい
それ以外は知らない

タブバーを下段に移動させる.css(Firefox89から)

:root {
  --menubar-height: 22px;
}
:root[inFullscreen]:not([macOSNativeFullscreen]) toolbar:not([fullscreentoolbar="true"]) {
  visibility: visible !important;
}
#titlebar {
  -moz-box-ordinal-group: 2;
}
#main-window:not([chromehidden="menubar toolbar location directories status extrachrome "]) #navigator-toolbox {
  padding-top: var(--menubar-height) !important;
}
/*フルスクリーン時コンテンツ領域に被る*/
#main-window:not([chromehidden="menubar toolbar location directories status extrachrome "]) #navigator-toolbox[inFullscreen][style*="margin-top:"] #toolbar-menubar {
  display: none !important;
}
#main-window:not([chromehidden="menubar toolbar location directories status extrachrome "]) #toolbar-menubar{
  position: absolute !important;
  display: flex !important;
  top: 0 !important;
  height: var(--menubar-height) !important;
  width: 100vw !important;
}

cssがまた駄目になった時用に

css書いたけどまたすぐ使えなくなりそうなのでuserChrome.jsで切り貼りしてみた。
多分色んな不具合あるだろうけど知らない。

document.getElementById("navigator-toolbox").appendChild(document.getElementById("TabsToolbar")); 

更新履歴

2021-06-04
微修正
2021-05-05
公開

Status-4-EvarをCSSで

2021-06-03
89に対応

Status-4-Evarもどき

あまってるツールバーを代わりに使います

メニューバーVer

:root{
  --addonbar-height: 22px; /* バーの高さ */
}
/* メニューを消す
#menubar-items {
  visibility: collapse !important;
}
*/

#main-window:not([inFullscreen]) #browser-bottombox {
  margin-bottom: var(--addonbar-height) !important;
}
#toolbar-menubar[autohide="true"][inactive="true"]:not([customizing="true"]) {
  visibility: visible !important;
  min-height: var(--addonbar-height) !important;
}
#toolbar-menubar > .titlebar-buttonbox-container {
  display: none !important;
}
#main-window[inFullscreen] #toolbar-menubar {
  visibility: collapse !important;
}
#toolbar-menubar {
  display: flex;
  position: fixed;
  bottom: 0px;
  right: 0px;
  left: 0px;
  direction: rtl !important;
  height: var(--addonbar-height) !important;
  min-height: var(--addonbar-height) !important;
  max-height: var(--addonbar-height) !important;
  padding: 0 !important;
  border: solid var(--chrome-content-separator-color) !important;
  border-width: 1px 0 0 !important;
  background-color: var(--toolbar-bgcolor);
  -moz-window-dragging: no-drag !important;
}
#toolbar-menubar:-moz-lwtheme {
  background-position: bottom left !important;
  background-image: var(--lwt-header-image) !important;
}
#toolbar-menubar toolbarbutton,
#toolbar-menubar toolbaritem {
  direction: ltr !important;
  height: var(--addonbar-height) !important;
}
#toolbar-menubar toolbarbutton:not(.bookmark-item) > .toolbarbutton-icon,
#toolbar-menubar toolbarbutton > .toolbarbutton-badge-stack {
  padding: 0px var(--toolbarbutton-inner-padding) !important;
}
#main-window:not([inFullscreen]) #statuspanel {
  position: fixed !important;
  bottom: 0 !important;
  left: 0px !important;
  max-width: 80% !important;
}
#main-window:not([inFullscreen]) #statuspanel-inner {
  -moz-box-align: center !important;
  height: var(--addonbar-height) !important;
}
#main-window:not([inFullscreen]) #statuspanel-label {
  background: transparent !important;
  border: none !important;
  color: #000 !important;
}
#main-window:not([inFullscreen]) #statuspanel:-moz-lwtheme-brighttext #statuspanel-label {
  color: #fff !important;
}
#main-window:not([inFullscreen]) #statuspanel-label[mirror] {
  margin-left: unset !important;
}

ブックマークツールバーVer

:root{
  --addonbar-height: 22px; /* バーの高さ */
}
#main-window:not([inFullscreen]) #browser-bottombox {
  margin-bottom: var(--addonbar-height) !important;
}
#main-window:not([inFullscreen]) #PersonalToolbar {
  visibility: visible !important;
}
#PersonalToolbar {
  display: flex;
  position: fixed;
  bottom: 0px;
  right: 0px;
  left: 0px;
  direction: rtl !important;
  height: var(--addonbar-height) !important;
  min-height: var(--addonbar-height) !important;
  max-height: var(--addonbar-height) !important;
  padding: 0 !important;
  border: solid var(--chrome-content-separator-color) !important;
  border-width: 1px 0 0 !important;
  background-color: var(--toolbar-bgcolor);
  -moz-window-dragging: no-drag !important;
}
#PersonalToolbar:-moz-lwtheme {
  background-position: bottom left !important;
  background-image: var(--lwt-header-image) !important;
}
#PersonalToolbar toolbarbutton,
#PersonalToolbar toolbaritem {
  direction: ltr !important;
}
#main-window:not([inFullscreen]) #statuspanel {
  position: fixed !important;
  bottom: 0 !important;
  left: 0px !important;
  max-width: 80% !important;
}
#main-window:not([inFullscreen]) #statuspanel-inner {
  -moz-box-align: center !important;
  height: var(--addonbar-height) !important;
}
#main-window:not([inFullscreen]) #statuspanel-label {
  background: transparent !important;
  border: none !important;
  color: #000 !important;
}
#main-window:not([inFullscreen]) #statuspanel:-moz-lwtheme-brighttext #statuspanel-label {
  color: #fff !important;
}
#main-window:not([inFullscreen]) #statuspanel-label:-moz-locale-dir(ltr) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

更新履歴

2021-06-03
89に対応
2020-08-21
ステータスがガタガタ動くのを直した
2019-12-10
フルスクリーンにした時消えてなかった
2019-12-08
Firefox70ぐらい?から使えなくなってたので直した
2017-12-10
強制表示とテーマによってはステータスが見えなかったので
2017-11-19
ボタンが潰れてた
2017-11-18
Firefox57でS4Eが死んでたので
2013-11-01
25で色々変わったから直した
2012-09-04
2011-11-28
公開

タブバーをブラウザ最下部に移動するやつ

2021-06-03
89に対応

最下部へ移動する

#main-window:not([inFullscreen]) #browser-bottombox {
  margin-bottom: calc(var(--tab-min-height) + var(--proton-tab-block-margin) + var(--proton-tab-block-margin)) !important;
}
#tabbrowser-tabs {
  width: 100vw !important;
}
.titlebar-spacer {
  width: 0 !important;
}
.toolbar-items {
  display: unset !important;
  position: fixed !important;
  bottom: 0 !important;
  min-height: var(--tab-min-height) !important;
  padding: 0 !important;
  z-index: 1000000000 !important;
}
/*フルスクリーン時は隠しておく*/
#main-window[inFullscreen] .toolbar-items {
  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
}
#main-window[inFullscreen] .toolbar-items:not(:hover) {
  height: 1px !important;
  opacity: 0 !important;
}

更新履歴

2021-06-03
89に対応
2020-08-14
背景色
2020-08-07
公開

CSSで多段タブ

2017/11/16
Firefox57用に直した。タブの入れ替えは出来ません
2012/12/09
Firefox17からD&D時に変な動きをするようになったので zzzz-removeTabMoveAnimation.uc.js が必要です

多段タブ(Firefox57から)

:root {
  --multirowtab-height:          25px; /* タブの高さ */
  --multirowtab-min-width:      100px; /* タブの最小横幅 */
  --multirowtab-max-width:      225px; /* タブの最大横幅 */
  --multirowtabbar-height:          3; /* タブバーの高さ(段数) */
}
.tabbrowser-arrowscrollbox {
  -moz-binding: url("chrome://global/content/bindings/scrollbox.xml#arrowscrollbox") !important;
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
  display: block !important;
  overflow: visible !important;
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  
  /*段数制限いらない人はこれを消す*/
  max-height: calc(var(--multirowtab-height) * var(--multirowtabbar-height)) !important;

}
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned],
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox,
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
  min-height: var(--multirowtab-height) !important;
}
#main-window[tabsintitlebar] #tabbrowser-tabs {
  -moz-window-dragging: no-drag !important;
}
.tabbrowser-tab:not([pinned]) {
  flex-grow: 1 !important;
  min-width: var(--multirowtab-min-width) !important;
  max-width: var(--multirowtab-max-width) !important;
}
.tabbrowser-tab {
  min-height: var(--multirowtab-height) !important;
  vertical-align: top !important;
  display: -webkit-box !important;
}
.tab-stack {
  width: 100% !important;
  min-height: unset !important;
}
[uidensity="touch"]:root .tab-close-button {
  padding: 0 calc(9px - 2px) !important;
}
.tab-label-container[pinned] {
  visibility: collapse !important;
}
#new-tab-button,
.tabs-newtab-button {
  min-width: 0px !important;
  width: 28px !important;
  margin-bottom: -1px !important;
  height: var(--multirowtab-height) !important;
}
#new-tab-button .toolbarbutton-icon,
.tabs-newtab-button .toolbarbutton-icon {
  width: 16px !important;
  height: 16px !important;
  margin: 0px !important;
  padding: 0px !important;
  background: none !important;
}
#new-tab-button:hover,
.tabs-newtab-button:hover,
#TabsToolbar > toolbarbutton:hover,
#TabsToolbar > .panel-wide-item > toolbarbutton:hover {
  background: var(--toolbarbutton-hover-background) !important;
}
#new-tab-button:active,
.tabs-newtab-button:active,
#TabsToolbar > toolbarbutton:active,
#TabsToolbar > .panel-wide-item > toolbarbutton:active {
  background: var(--toolbarbutton-active-background) !important;
}
#TabsToolbar > toolbarbutton:not(.bookmark-item):not(#new-tab-button) > .toolbarbutton-icon,
#TabsToolbar > toolbarbutton > .toolbarbutton-badge-stack,
#TabsToolbar > .panel-wide-item .toolbarbutton-icon {
  padding: 0px var(--toolbarbutton-inner-padding) !important;
  background: none !important;
}
#TabsToolbar .toolbarbutton-text {
  padding-top: 0 !important;
  min-height: unset !important;
  background: none !important;
}
#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#tabbrowser-tabs .autorepeatbutton-up,
#tabbrowser-tabs .autorepeatbutton-down,
.arrowscrollbox-overflow-start-indicator,
.arrowscrollbox-overflow-end-indicator,
.tabbrowser-tab:not([fadein]){
  display: none !important;
}

多段タブ(Firefox56まで)

CSS を有効にした後一度再起動してください

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
  display: block !important;
  overflow: visible !important;
  padding: 0 !important;
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 93px !important; /*タブバーの高さ*/
}
.scrollbutton-up,
.scrollbutton-down {
  display: none !important;
}
.tabbrowser-tab:not([pinned]) {
  min-width: 250px !important; /*タブの横幅*/
}
.tabs-newtab-button {
  vertical-align: top !important;
  height: 31px !important;
}

更新履歴

2017-12-08
UI密度とアイコン類
2017-11-28
可変幅とホイールでスクロールできるように
2017-11-26
タイトルバーなくてもスクロールできるように
2017-11-19
タブが一段の時隙間空いてた
2017-11-17
新しいタブを開くボタンが変だった
2017-11-16
Firefox57
2015-04-07
2014-04-07
2012-12-09
2012-09-11
2012-09-04
2011-12-18
2011-11-29
公開

プロフィール

豆腐

最新記事

最新コメント

カテゴリ

月別アーカイブ