Firefox 29「タブ」をツールバーの下に配置


Firefox29の「タブ」をツールバーの下に配置するスタイル

Firefox 29 タブ・ツールバーの高さを変える」スタイル専用です。

※ 適当な感じでやってるので修正の可能性大です。
戻るボタンをバーから分離するスタイル 使用時は 96行以下を削除してください。
※ メニューバーを非表示で↓のスタイルを適用すると黄枠の無駄な部分ができてしまいま...
黄枠部分ができないスタイルも作りましたが メニューバーを表示してから適用してくだ...

  
ddghfxjs.png



■ タブをツールバーの下に置くスタイル [最終修正日:5/19]
  
#main-window[sizemode="normal"] > #titlebar {
margin: -25px 0px 0px 0px !important;
height: 0px !important;
}
#main-window[sizemode="maximized"] > #titlebar {
margin: -38px 0px 0px 0px !important;
height: 0px !important;
}

#TabsToolbar {
margin: -1px 0px 0px -7px !important;
-moz-box-ordinal-group: 101 !important;
}

#navigator-toolbox {
margin-left: 1px !important;
margin-right: 1px !important;
}

#nav-bar {
margin: 12px 113px 0px -2px !important; /* 環境により変わります */
/* position: relative !important; z-index: 1 !important;*/
}
#main-window[sizemode="maximized"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #nav-bar {
margin: 12px 117px 0px 0px !important; /* 環境により変わります */
}
#main-window[inFullscreen="true"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #nav-bar {
margin: -2px 0px 0px 0px !important; /* 環境により変わります */
}
/* 全画面表示用(不具合ある場合削除) */
#main-window[inFullscreen="true"] > #tab-view-deck > #browser-panel > #navigator-toolbox:hover {
height: 51px !important;
}

/* タブデザイン */
/* tab, .tabs-newtab-button, .tab-content {
-moz-transform:scaleY(-1) !important;
}*/

#urlbar-container.chromeclass-location {
margin-left: -5px !important;
}

/* ツールバー背景色(適当な色に変えてください) */
#nav-bar {
background-color: transparent !important;
/* background-color: #000000 !important; */
}
#nav-bar.toolbar-primary{
border-color: transparent !important;
}

/* ツールバー */
#nav-bar {
height: 26px !important;
}
#urlbar {
min-height: 22px !important;
height: 22px !important;
margin-top: 0px !important;
margin-right: 0px !important;
padding-top: 2px !important;
}
#identity-box {
min-height: 18px !important;
height: 18px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: -1px !important;
}

/* ツールバーボタン */
#nav-bar .toolbarbutton-1:not([type=menu-button]),
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#PanelUI-menu-button.toolbarbutton-1 {
padding-top: 4px !important;
padding-bottom: 4px !important;
margin-top: 1px !important;
margin-bottom: 0px !important;
}

/* 戻るボタン *//* 四角ボタン */
#urlbar-container.chromeclass-location #back-button.toolbarbutton-1 {
padding: 0px 0px 0px 5px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
border-left: solid 1px #ADBCCB !important;
}
#urlbar-container.chromeclass-location #back-button > .toolbarbutton-icon {
-moz-image-region: rect(0px, 72px, 18px, 54px) !important;
-moz-transform: rotate(180deg) !important;
padding: 1px 2px 1px 2px !important;
border-radius: 2px !important;
}
#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
background-image: none !important;
background-color: transparent !important;
box-shadow: none !important;
}

/* 進むボタン */
#urlbar-container.chromeclass-location #forward-button.toolbarbutton-1 {
padding: 0px 2px 0px 0px !important;
margin: 0px 0px 0px 0px !important;
margin-right: -4px !important;
width: 22px !important;
height: 22px !important;
}
#urlbar-container.chromeclass-location #forward-button > .toolbarbutton-icon {
border-color: #B4C2D0 !important;
box-shadow: none !important;
}

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

/* 以下、戻るボタンをバーから分離するスタイル 使用時は削除 */
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #identity-box {
padding-left: 3px !important;
}
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled][switchingtabs] + #urlbar-container > #urlbar,
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar {
margin-left: -23px !important;
}
#urlbar-container.chromeclass-location #forward-button > .toolbarbutton-icon {
border-right-color: transparent !important;
border-top-color: #768495 !important;
border-bottom-color: #768495 !important;
}


無駄なスペースができないスタイル [最終修正日:6/12]
メニューバーを表示してからスタイルを適用してください。
戻るボタンをバーから分離するスタイル 使用時は 105行以下を削除してください。
メニューバーを表示したい場合はスタイルをオフにしてください。

  
  klkgyus.png

#toolbar-menubar:not([autohide="true"]) {
display: none !important;
}

#main-window[sizemode="normal"] > #titlebar {
margin: -39px 0px 0px 0px !important;
height: 0px !important;
}
#main-window[sizemode="maximized"] > #titlebar {
margin: -32px 0px 0px 0px !important;
height: 0px !important;
}

#TabsToolbar {
margin: -1px 0px 0px -7px !important;
-moz-box-ordinal-group: 101 !important;
}

#navigator-toolbox {
margin-left: 1px !important;
margin-right: 1px !important;
}

#nav-bar {
margin: 12px 113px 0px -1px !important; /* 環境により変わります */
/* position: relative !important; z-index: 1 !important;*/
}
#main-window[sizemode="maximized"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #nav-bar {
margin: 12px 117px 0px 0px !important; /* 環境により変わります */
}
#main-window[inFullscreen="true"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #nav-bar {
margin: -2px 0px 0px 0px !important; /* 環境により変わります */
}
/* 全画面表示用(不具合ある場合削除) */
#main-window[inFullscreen="true"] > #tab-view-deck > #browser-panel > #navigator-toolbox:hover {
height: 51px !important;
}

/* タブデザイン */
/* tab, .tabs-newtab-button, .tab-content {
-moz-transform:scaleY(-1) !important;
}*/

#urlbar-container.chromeclass-location {
margin-left: -5px !important;
}

/* ツールバー背景色(適当な色に変えてください) */
#nav-bar {
background-color: transparent !important;
/* background-color: #000000 !important; */
}
#nav-bar.toolbar-primary{
border-color: transparent !important;
}

/* ツールバー */
#nav-bar {
height: 26px !important;
}
#urlbar {
min-height: 22px !important;
height: 22px !important;
margin-top: 0px !important;
margin-right: 0px !important;
padding-top: 2px !important;
}
#identity-box {
min-height: 18px !important;
height: 18px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: -1px !important;
}

/* ツールバーボタン */
#nav-bar .toolbarbutton-1:not([type=menu-button]),
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
/* ツールメニューボタン */
#PanelUI-menu-button .toolbarbutton-icon {
padding-bottom: 1px !important;
}

/* 戻るボタン *//* 四角ボタン */
#urlbar-container.chromeclass-location #back-button.toolbarbutton-1 {
padding: 0px 0px 0px 5px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
border-left: solid 1px #ADBCCB !important;
}
#urlbar-container.chromeclass-location #back-button > .toolbarbutton-icon {
-moz-image-region: rect(0px, 72px, 18px, 54px) !important;
-moz-transform: rotate(180deg) !important;
padding: 1px 2px 1px 2px !important;
border-radius: 2px !important;
}
#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
background-image: none !important;
background-color: transparent !important;
box-shadow: none !important;
}

/* 進むボタン */
#urlbar-container.chromeclass-location #forward-button.toolbarbutton-1 {
padding: 0px 2px 0px 0px !important;
margin: 0px 0px 0px 0px !important;
margin-right: -4px !important;
width: 22px !important;
height: 22px !important;
}
#urlbar-container.chromeclass-location #forward-button > .toolbarbutton-icon {
border-color: #B4C2D0 !important;
box-shadow: none !important;
}

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

/* 以下、戻るボタンをバーから分離するスタイル 使用時は削除 */
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #identity-box {
padding-left: 3px !important;
}
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled][switchingtabs] + #urlbar-container > #urlbar,
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar {
margin-left: -23px !important;
}
#urlbar-container.chromeclass-location #forward-button > .toolbarbutton-icon {
border-right-color: transparent !important;
border-top-color: #768495 !important;
border-bottom-color: #768495 !important;
}




関連記事
プロフィール

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

全記事表示リンク

全ての記事を表示する

カテゴリ
検索フォーム