Firefox modifizieren mit "userChrome.css" File

M1LCHQ

Cadet 1st Year
Registriert
Jan. 2018
Beiträge
13
Hallo,

ich nutze den Firefox 79.0 (64bit ) und habe den Browser mit dem "userChrome.css" File, nicht von mir geschrieben, modifiziert.
Damit bin ich soweit auch zufrieden, nur leider hätte ich gerne dass die Menüleiste ganz oben platziert wird und nicht zwischen Lesezeichen-Symbolleiste und der Tableiste!

Nun meine Frage, was muss ich im "userChrome.css" File ändern damit ich diese Reihenfolge bekomme?

1. Menüleiste
2. Navigationsleiste
3. Lesezeichen-Symbolleiste
4. Tableiste


Code:
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


@import "./tabs_below_navigation_toolbar.css";

/* move titlebar and its content (menubar, tabs toolbar) below navigation/bookmarks toolbar */
#titlebar {
  -moz-box-ordinal-group: 100 !important;
}

/* space above tabs toolbar */
#main-window[tabsintitlebar][sizemode="maximized"] * #titlebar {
  margin-top: -8px !important;
}

/* space for menubar above navigation toolbar (Firefox titlebar) */
#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 26px !important;
}
#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 26px !important;
}

/* add 'drag' feature to space above navigation toolbar */
#main-window[tabsintitlebar] #navigator-toolbox,
#main-window[tabsintitlebar] #nav-bar {
  -moz-window-dragging: drag !important;
}

/* move menubar to the top and extend its with to full window width */
#toolbar-menubar {
  position: fixed !important;
  width: 100vw !important;
  -moz-window-dragging: drag !important;
}

/* move menubars / tab toolbars caption buttons to windows top right position */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  position: fixed !important;
  right: 0 !important;
  visibility: visible !important;
  display: block !important;
}

/* menubar postion after moving to the top */
#toolbar-menubar {
  top: 0px !important;
}

/* Linux/macOS */
/* space above navigation toolbar (OS titlebar) */
/* set to '0', if no menubar is used */
#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 28px !important;
}

/* menubar postion in maximized mode after moving to the top */
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
  top: 0px !important;
}

/* caption button position in maximized mode after moving to the top */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  top: -14px !important;
}

/* Windows */
@media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) {
    /* set to '0', if no menubar is used */
    #main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
      margin-top: 18px !important;
    }
    /* set to '0', if no menubar is used */
    #main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
      margin-top: 34px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
      top: 8px !important;
    }
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
      top: 0px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
      top: 8px !important;
    }
}

/* hide line above navigation toolbar appearing in some cases */
#main-window:not([tabsintitlebar]) #nav-bar,
#main-window:not([tabsintitlebar]) #navigator-toolbox {
  border-top: 0 !important;
  box-shadow: unset !important;
}

/* force buttons on menubar being very small to not break the toolbar */
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarbutton .toolbarbutton-icon {
  padding: 0px 0px !important;
  height: 16px !important;
  width: 16px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton,
#toolbar-menubar > toolbarpaletteitem toolbarbutton,
#toolbar-menubar > toolbarbutton {
  position: relative !important;
  padding: 0px 0px !important;
  margin: 0px 0px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarbutton .toolbarbutton-icon {
  padding: unset !important;
  height: unset !important;
  width: unset !important;
}

/* make sure button icon colors set correctly */
#main-window:not(:-moz-lwtheme) #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon,
#main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon {
  fill: var(--classic_squared_tabs_new_tab_icon_color) !important;
  color: var(--classic_squared_tabs_new_tab_icon_color) !important;
}

/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"] * #TabsToolbar {
 -moz-padding-start: 0px !important;
}
/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #PanelUI-button,
#main-window #TabsToolbar #window-controls {
  display: none !important;
}

/* hide non-required items */
#TabsToolbar .private-browsing-indicator,
#TabsToolbar #window-controls,
#TabsToolbar *[type="caption-buttons"],
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
  display: none !important;
}

/* Windows 7 extra tweaks */
@media (-moz-os-version: windows-win7) {
  @media all and (-moz-windows-compositor) {
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) * .titlebar-buttonbox-container {
      display: none !important;
    }
  }
  @media not all and (-moz-windows-compositor) {
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
      top: -8px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
      top: 0px !important;
    }
  }
}

/* Windows 10 extra tweaks */
@media (-moz-os-version: windows-win10) {
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme):hover:not([disabled="true"]),
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme)[_moz-menuactive="true"]:not([disabled="true"]) {
    background-color: Highlight !important;
    color: HighlightText !important;
  }
}

/* disable Mozillas tab jumping nonsense when moving tabs */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}
 
/* Mostly transparent on dark theme */
  /* More subtle background color on selected tab */
#main-window[lwthemetextcolor="bright"] #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme {
  background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.2) 40%, rgba(255,255,255,0.2) 60%, transparent) !important;
 
M1LCHQ schrieb:
damit ich diese Reihenfolge bekomme?
Also nur die Tableiste nach unten willst du haben?

Dann teste bitte:

CSS:
@-moz-document url(chrome://browser/content/browser.xhtml) {
      
#TabsToolbar {
    position: absolute !important;
    display:block !important;
    bottom: 0px !important;
    width: 100vw !important;
    }

#tabbrowser-tabs {
    width: 100vw !important;
    }
        
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
    padding-bottom: var(--tab-min-height) !important;
    }

:root {
    --tab-min-height: 30px !important;
    }
        
:root #tabbrowser-tabs {
    --tab-min-height: 30px !important;
    }
}

Zwischenablage01.png
 
  • Gefällt mir
Reaktionen: M1LCHQ und DeusoftheWired
Danke, das sieht schon mal gut aus!

Leider hat jetzt die Navigationsleiste und die Lesezeichen-Symbolleiste einen Grauschleier, was vorher nicht war.
firefox.jpg

Wenn man den noch weg bekommen würde, bzw. transparent machen könnte, wäre schön!
 
Perfekt! 👍

Vielen lieben Dank an Euch beide und noch nen schönen Abend 👋

Das Thema kann geschlossen werden.
 
Freut mich wenn ich dir damit helfen konnte, war gern geschehen :)

Danke, auch dir noch einen schönen Abend.
 
Zurück
Oben