ページ内検索バーをChrome風にする.css

Chrome風findbar(Firefox57から)

.browserContainer {
  direction: rtl !important;
}
.browserStack > browser * {
  direction: ltr !important;
}
statuspanel {
  left: 0 !important;
  direction: ltr !important;
}
findbar {
  -moz-box-ordinal-group: 0 !important;
  direction: ltr !important;
  position: fixed !important;
  margin: -1px 20px 0 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--toolbox-border-bottom-color) !important;
  border-top: 0 !important;
  background-color: var(--toolbar-bgcolor) !important;
  background-image: none !important;
  display: -webkit-box !important;
}
.findbar-textbox {
  font-size: medium !important;
}
.findbar-highlight[checked="true"],
.findbar-case-sensitive[checked="true"] {
  box-shadow: var(--toolbarbutton-active-boxshadow) !important;
  background: var(--toolbarbutton-active-background) !important;
}
.findbar-highlight:not([checked="true"]):hover,
.findbar-case-sensitive:not([checked="true"]):hover {
  box-shadow: var(--toolbarbutton-hover-boxshadow) !important;
  background: var(--toolbarbutton-hover-background) !important;
}
.findbar-highlight,
.findbar-case-sensitive {
  padding: var(--toolbarbutton-inner-padding) !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-highlight .toolbarbutton-text,
.findbar-case-sensitive > .toolbarbutton-text {
  display: none !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風findbar(Firefox56まで)

.browserContainer {
  direction: rtl !important;
}
statuspanel {
  left: 0 !important;
}
statuspanel[mirror="true"] {
  margin-left: -14px !important;
}
findbar {
  -moz-box-ordinal-group: 0 !important;
  direction: ltr !important;
  position: fixed !important;
  margin: -1px 20px 0 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  border: 1px solid threedshadow !important;
  border-top: 0 !important;
}
/*
.findbar-textbox {
  font-size: medium !important;
}
*/
.findbar-highlight[checked="true"],
.findbar-case-sensitive[checked="true"] {
  border: 1px solid !important;
  border-radius: 2px !important;
  border-color: var(--toolbarbutton-active-bordercolor) !important;
  box-shadow: var(--toolbarbutton-active-boxshadow) !important;
  background: var(--toolbarbutton-active-background) !important;
}
.findbar-highlight:not([checked="true"]):hover,
.findbar-case-sensitive:not([checked="true"]):hover {
  border: 1px solid !important;
  border-radius: 2px !important;
  border-color: var(--toolbarbutton-hover-bordercolor) !important;
  box-shadow: var(--toolbarbutton-hover-boxshadow) !important;
  background: var(--toolbarbutton-hover-background) !important;
}
.findbar-highlight:not(:hover):not([checked="true"]) {
  padding: 0 1px !important;
}
.findbar-highlight .toolbarbutton-text{
  border: none !important;
  box-shadow: none !important;
  font-size: 0 !important;
  padding: 10px 11px !important;
  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 {
  padding: 0 3px !important;
}
.findbar-case-sensitive[checked="true"],
.findbar-case-sensitive:not([checked="true"]):hover {
  padding: 1px 2px !important;
}
.findbar-case-sensitive > .toolbarbutton-text {
  display: none !important;
}
.findbar-case-sensitive:after {
  content: "Aa" !important;
  margin: 0 2px 0 !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;
}

更新履歴

2017-11-20
×ボタンが改行しないように
2017-11-18
Firefox57
2015-04-05
2015-04-02
2013-11-08
公開

Status-4-EvarをCSSで

2017/11/18
余ってるツールバーを代わりに使います(メニューバーか、ブックマークツールバー)

Status-4-Evarもどき(Firefox57から)

メニューバーVer

:root{
  --addonbar-height: 22px; /* バーの高さ */
}
#main-window:not([inFullscreen]) {
  margin-bottom: var(--addonbar-height) !important;
}
#toolbar-menubar {
  position: fixed;
  bottom: 0px;
  right: 0px;
  left: 0px;
  height: var(--addonbar-height) !important;
  direction: rtl !important;
  padding-bottom: 0 !important;
  border-top: 1px solid var(--toolbox-border-bottom-color) !important;
  background-color: var(--chrome-secondary-background-color) !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;
}
#toolbar-menubar #menubar-items {
  display: none !important;
}
#main-window:not([inFullscreen]) statuspanel {
  position: fixed !important;
  bottom: 0 !important;
  left: 0px !important;
  max-width: 80% !important;
}
#main-window:not([inFullscreen]) statuspanel[mirror="true"] {
  left: -12px !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;
}

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

:root{
  --addonbar-height: 22px; /* バーの高さ */
}
#main-window:not([inFullscreen]) {
  margin-bottom: var(--addonbar-height) !important;
}
#PersonalToolbar {
  position: fixed;
  bottom: 0px;
  right: 0px;
  left: 0px;
  direction: rtl !important;
  height: var(--addonbar-height) !important;
  padding-bottom: 0 !important;
  border-top: 1px solid var(--toolbox-border-bottom-color) !important;
}
#PersonalToolbar toolbarbutton,
#PersonalToolbar toolbaritem {
  direction: ltr !important;
  height: var(--addonbar-height) !important;
}
#main-window:not([inFullscreen]) statuspanel {
  position: fixed !important;
  bottom: 0 !important;
  left: 0px !important;
  max-width: 80% !important;
}
#main-window:not([inFullscreen]) statuspanel[mirror="true"] {
  left: -12px !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;
}

Status-4-Evarもどき(昔の)

※要調整

#addonbar-closebutton {
  display: none !important;
}
#main-window:not([inFullscreen]) statuspanel {
  position: fixed !important;
  bottom: 1px !important;
  left: 0px !important;
  max-width: 80% !important;
}
#main-window:not([inFullscreen]) statuspanel[mirror="true"] {
  left: -12px !important;
}
#main-window:not([inFullscreen]) .statuspanel-label {
  background: transparent !important;
  border: none !important;
  color: #000 !important;
}

更新履歴

2017-11-19
ボタンが潰れてた
2017-11-18
Firefox57でS4Eが死んでたので
2013-11-01
25で色々変わったから直した
2012-09-04
2011-11-28
公開

CSSで縦置きタブ

サイドバー出しながらでも縦タブしたかったから無理やり立てた

縦置きタブ(Firefox57から)

タイトルバーを表示しておかないとスクロールできません

:root {
  --verticaltabbar-width:        120px; /* タブバーの横幅 */
  --verticaltab-height:           25px; /* タブの高さ */
  --verticaltabpinned-width:       25%; /* ピン留めタブの横幅 */
}
#main-window {
  margin-left: var(--verticaltabbar-width) !important;
}
#TabsToolbar {
  width: var(--verticaltabbar-width) !important;
  position:fixed !important;
  left: 0px !important;
  top: 0px !important;
  bottom: var(--verticaltab-height) !important;
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
  overflow: visible !important;
  padding: 0 !important;
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
  display: block !important;
}
#tabbrowser-tabs {
  height: 100% !important;
  overflow-x: hidden !important;
}
.tabbrowser-tab:not([pinned]) {
  width:100% !important;
}
.tabbrowser-tab[pinned] {
  width: var(--verticaltabpinned-width) !important;
}
.tab-content[pinned] {
    padding: 0 0 0 7px !important;
}
.tab-content[pinned] .tab-text {
    display: none !important;
}
.tabbrowser-tab {
  -moz-box-align: unset !important;
  min-height: var(--verticaltab-height) !important;
  vertical-align: top !important;
}
.tabs-newtab-button {
  display: none !important;
}
#new-tab-button {
  visibility: visible !important;
  width: 100% !important;
}
#new-tab-button:hover {
  background: var(--toolbarbutton-hover-background) !important;
}
#new-tab-button .toolbarbutton-icon {
  width: 16px !important;
  height: 16px !important;
  margin: 0px !important;
  padding: 0px !important;
  background: none !important;
}

更新履歴

2017-11-18
ピン留めタブと新しいタブを開くボタン
2017/11/16
公開

CSSで多段タブ

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

多段タブ(Firefox57から)

タイトルバーを表示しておかないとスクロール出来ません

:root {
  --multirowtab-height:        25px; /* タブの高さ */
  --multirowtab-width:        225px; /* タブの横幅 */
  --multirowtabbar-height:        3; /* タブバーの高さ(段数) */
}
.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: calc( (var(--multirowtab-height) + 1px ) * var(--multirowtabbar-height) ) !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--multirowtab-height) !important;
}
.tabbrowser-tab:not([pinned]) {
  min-width: var(--multirowtab-width) !important;
}
.tabbrowser-tab {
  -moz-box-align: unset !important;
  min-height: var(--multirowtab-height) !important;
  vertical-align: top !important;
}
.tabs-newtab-button {
  min-width: 0px !important;
  width: 28px !important;
  height: var(--multirowtab-height) !important;
}
.tabs-newtab-button:hover {
  background: var(--toolbarbutton-hover-background) !important;
}
.tabs-newtab-button .toolbarbutton-icon {
  width: 16px !important;
  height: 16px !important;
  margin: 0px !important;
  padding: 0px !important;
  background: 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-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
公開

uAutoPagerize

uAutoPagerizeの区切り線

左右に水平線を引きたかった。
出来たからメモ

AutoPagerize
/* autopagerize */
.autopagerize_page_separator {
  display: none;
}
.autopagerize_page_info {
  display: flex;
  align-items: center;
}
.autopagerize_page_info:before,
.autopagerize_page_info:after {
  content: "";
  flex-grow: 1;
  background: orange;
  height: 2px;
}
.autopagerize_page_info:before {
  margin-right: .5em;
}
.autopagerize_page_info:after {
  margin-left: .5em;
}

更新履歴

2016-08-06
border よりも background の方が便利そう
2015-03-28
公開

プロフィール

豆腐

Author:豆腐

最新記事

最新コメント

カテゴリ

月別アーカイブ

FC2カウンター