1. Nachrichten
  2. Forum
    1. Unerledigte Themen
    2. Forenregeln
  3. Spenden
  • Anmelden
  • Registrieren
  • Suche
Alles
  • Alles
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. camp-firefox.de
  2. Real Radioactiveman

Beiträge von Real Radioactiveman

  • Tableiste unten per CSS-Code, oder per Skript.

    • Real Radioactiveman
    • 9. Juli 2021 um 17:38

    Ein letztes Update, bevor FF90 uns vor neue Herausforderungen stellt. Meinen Code von #289 habe ich nochmal gründlich aufgepeppt. Ein paar Ergänzungen, damit es auch für nicht-Proton und Firefox 88 und früher kompatibel ist, geht mindestens bis FF76, noch weiter zurück wären weitere Anpassungen nötig. Die Farben trotzen jetzt auch dem Dark Mode des Betriebssystems und werden nur noch dann gesetzt, wenn bei Firefox das System-Theme ausgewählt ist. Wer andere Farben braucht, nimmt also einfach ein anderes Theme.

    RRM

    CSS
    /* FF89+ - TABS: on bottom */
    /* RRM 20210707 - Version 7 */
    
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #titlebar{
      height: 25px !important;
    }
    
    .titlebar-buttonbox-container{
      position: fixed !important;
      right: 0px !important;
      visibility: visible !important;
      display: block !important;
    }
    
    #TabsToolbar .titlebar-buttonbox-container,
    #TabsToolbar #window-controls{
      display: none !important;
    }
    
    #TabsToolbar{
      position: absolute !important;
      display: block !important;
      bottom: 0px !important;
    }
    
    :root{
      --tab-min-height: 27px !important; /* increase if you want higher tabs */ 
    }
    
    #navigator-toolbox{
      position: relative !important;
      padding-bottom: var(--tab-min-height) !important;
    /* border: none !important; */ /* you might need it here in case you skip it at the end of the code */
    }
    
    #TabsToolbar, #tabbrowser-tabs,
    #tabbrowser-tabs > .tabbrowser-arrowscrollbox,
    .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]{
      max-height: var(--tab-min-height) !important;
    }
    
    #tabbrowser-tabs{
      width: 100vw !important;
    }
    
    /* end of the essential part */
    
    /* next part needed for compatibility with Windows 7 and non-Proton and FF88 and previous */ 
    
    .tab-background{
    /* margin-block: 0px !important; */ /* if you don't want Proton tabs in FF themes - also uncomment line 33 */ 
      box-shadow: none !important;
      border: none !important;
    }
    
    #TabsToolbar > .toolbar-items{
      padding-top: 0px !important;
      margin-top: 0px !important;
    }
    
    .tab-line{
      display: none !important;
    }
    
    .tabbrowser-tab::after,
    .tabbrowser-tab::before{
      border: none !important;
    }
    
    /* next part for slim style of tabs */
    /* you may insert your own code instead */
    
    .tabbrowser-tab{
      padding-inline: 0px !important;
      margin-left: 1px !important;
      min-height: 4px !important;
      border: none !important;
    }
    
    .tabbrowser-tab[selected]{
      border-radius: 3px !important;
    }
    
    .tab-background[selected]{
      border-radius: 3px !important;
    }
    
    .tabbrowser-tab:not([selected]){
      border-radius: 3px !important;
    }
    
    .tab-background:not([selected]){
      border-radius: 3px !important;
    }
    
    .tabbrowser-tab .tab-label{
      font-size: 12px !important;
    }
    
    .tabbrowser-tab .tab-label[selected]{
      font-size: 12px !important;
    }
    
    #TabsToolbar .tab-icon-image{
      height: 16px !important;
      width:  16px !important;
      margin-left:  -2px !important;
      margin-bottom: 2px !important;
    }
    
    toolbarbutton#scrollbutton-up,
    toolbarbutton#scrollbutton-down{
      margin-top: -2px !important;
      margin-bottom: -2px !important;
    }
    
    @media not (-moz-proton){
    .tab-close-button{
      width: 17px !important;
    }}
    
    /* and now let's go for colours */
    /* this one is TARDIS-blueish in case of FF System-Theme */
    /* select another theme in FF if you want different colours */
    /* for example if you need to adapt to a dark mode of your OS */
    /* or you can skip or replace this part of the code by your own */
    
    .tabbrowser-tab[selected]:not(:-moz-lwtheme) .tab-content{
      background-color: #DAD7D0 !important;
    }
    
    .tabbrowser-tab:not([selected]):not(:-moz-lwtheme){
      background-color: #ACBDD7 !important;
    }
    
    #tabbrowser-tabs:not([fokus]):not(:-moz-lwtheme){
      opacity: 1 !important;
    }
    
    .tabbrowser-tab .tab-label:not(:-moz-lwtheme){
      color: white !important;
    }
    
    .tabbrowser-tab .tab-label[selected]:not(:-moz-lwtheme){
      color: black !important;
    }
    
    .tab-close-button:not(:-moz-lwtheme){
      color: white !important;
    }
    
    .tab-close-button[selected]:not(:-moz-lwtheme){
      color: black !important;
    }
    
    #urlbar-search-mode-indicator-close:not(:-moz-lwtheme),
    #nav-bar:not(:-moz-lwtheme) toolbarbutton,
    #PersonalToolbar:not(:-moz-lwtheme) toolbarbutton,
    #TabsToolbar:not(:-moz-lwtheme) #new-tab-button,
    #tabs-newtab-button:not(:-moz-lwtheme),
    #alltabs-button:not(:-moz-lwtheme),
    toolbarbutton#scrollbutton-up:not(:-moz-lwtheme),
    toolbarbutton#scrollbutton-down:not(:-moz-lwtheme){
      fill: #5B5B66 !important; /* FF89 - you can use both */
      color: #5B5B66 !important; /* FF88 - you can use both */
    }
    
    #urlbar:not(:-moz-lwtheme), #searchbar:not(:-moz-lwtheme){
      color: black !important;
    }
    
    #urlbar-background:not(:-moz-lwtheme), #searchbar:not(:-moz-lwtheme){
      background-color: white !important;
    }
    
    #urlbar-search-mode-indicator:not(:-moz-lwtheme){
      background-color: #D6EBFF !important;
      outline: 1px solid #0060DF !important;
      color: #0060DF !important;
    }
    
    :root:not(:-moz-lwtheme){
      --button-hover-bgcolor: #B0C4E9 !important;
    }
    
    :root{
      --menubar-bgcolor1: #B4C8E4 !important;
      --menubar-bgcolor2: #B4C8E4 !important;
    }
    
    @media(-moz-windows-glass){
    :root[tabsintitlebar]{
      --menubar-bgcolor2: transparent !important;
    }}
    
    @media(-moz-os-version: windows-win10){
    :root[tabsintitlebar]{
      --menubar-bgcolor1: transparent !important;
      --menubar-bgcolor2: transparent !important;
    }}
    
    #navigator-toolbox:not(:-moz-lwtheme){
      -moz-appearance: none !important;
      background-image: linear-gradient(to right, var(--menubar-bgcolor1), var(--menubar-bgcolor2)) !important;
      border: none !important;
    }
    
    #nav-bar:not(:-moz-lwtheme){
      -moz-appearance: none !important;
      background-image: none !important;
      background-color: #C2D3ED !important;
    }
    
    #PersonalToolbar:not(:-moz-lwtheme){
      -moz-appearance: none !important;
      background-image: none !important;
      background-color: #CADBF2 !important;
      color: black !important;
    }
    
    #TabsToolbar:not(:-moz-lwtheme){
      -moz-appearance: none !important;
      background-image: none !important;
      background-color: #D2E3F2 !important;
    }
    
    /* by Real Radioactiveman */
    /* enjoy */
    Alles anzeigen
  • Tableiste unten per CSS-Code, oder per Skript.

    • Real Radioactiveman
    • 3. Juli 2021 um 17:24

    StandingBill,

    falls sich Laien für meine Code-Version interessieren sollten, dann werde ich selbstverständlich Hilfestellung geben. Als ersten Schritt empfehle ich Anfängern, es genauso zu machen wie ich, ich habe jeden Code, der hier gepostet wurde, probehalber in meine userchrome.css eingegeben und geguckt, was passiert. Dann habe ich Schritt für Schritt Teile des Code weggelassen, um zu sehen, was sich dadurch verändert.

    Mein Code von #289 ist auf diese Methode zugeschnitten. Bis Zeile 54 wird alles genauso gebraucht, wie es ist, um die Tabs nach unten zu bringen. Ab da kann man wahlweise Abschnitte hinzufügen oder weglassen. Bei den Farben kann man z.B. in den Zeilen mit color den Wert hinter dem Doppelpunkt durch red oder green ersetzen, dann wird unmittelbar erkennbar, wofür das jeweils zuständig ist.

    Wenn man lediglich die Tabs nach unten haben möchte, dann ist der Code in #1 von Andreas immer noch das Maß aller Dinge. Wenn man darüber hinaus das Aussehen der Tabs selbst gestalten möchte, dann gibt es jedoch Probleme, weil Firefox ja bereits ein eigenes Layout für die Tabs festgelegt hat. Und das muss man erst einmal neutralisieren, damit der eigene Code überhaupt die gewünschte Wirkung zeigen kann.

    Das ist der Sinn meiner Version von #289. Die Methode, die ich angewendet habe, um das alles herauszufinden, ist für Laien allerdings absolut ungeeignet. In Bezug auf CSS gehöre ich selbst zwar auch noch zu den Laien, aber ich habe reichlich Erfahrung mit anderen Programmiersprachen und kann deshalb zumindest zielgerichtet herumstochern. Dazu habe ich chrome://browser/content/browser.xhtml mittels about:config aufgerufen und abgespeichert. Im zugehörigen Ordner befindet sich eine browser.css und da steht genau drin, wie Firefox seine Oberfläche gestaltet. Mit glücklich gewählten Suchbegriffen finde ich dann die Stellen, wo Firefox unvermittelt die Tabs um ein paar Pixel nach unten verschiebt, mit einem unerwünschten Schatten umgibt oder einen Mindestabstand, der mir zu groß ist, definiert.

    Auf diesem Wege habe ich inzwischen noch festgestellt, dass die Anweisungen border, margin und padding, die ich durchprobiert hatte, nicht ausreichen, um nebenwirkungsfrei den Abstand zwischen den Tabs auf 1px zu verringern. Ich muss statt dessen padding-inline nehmen. Betrifft nur nur den Extremfall, wenn ich ganz viele Tabs geöffnet habe. Damit es keine Beeinträchtigung des Scrollbuttons links gibt, muss in meinem Code #289 die Zeile 57 ersetzt werden durch ->

    padding-inline: 0px !important;

    margin-left: 1px !important;

    Apropos Laien, ich habe gelesen, dass nur Anfänger !important verwenden. Da ich in mehreren Fällen aber die Erfahrung gemacht habe, dass ohne !important keine Wirkung erzielt wurde, setze ich es vorsichtshalber trotzdem überall ein.

    Beim Recherchieren bin ich übrigens auf eine lustige Sache gestoßen. Bei den Seiten, die ich mir Anfang Juni heruntergeladen hatte, ist auch ein Blog von Github. Da hat ein Yochaym bereits am 5. Mai aufgrund der Beta von FF89 darauf hingewiesen, dass Firefox für navigator-toolbox jetzt nicht mehr position: relative setzt und man das nur wieder einzufügen braucht.

    Wenn das allgemein durchgedrungen wäre, hätten wir uns den Umweg mit top: 95px, genauen Wert experimentell ermitteln, sparen können. Ist übrigens nicht nur hier passiert, sondern auch beim Firefox Support Forum und vermutlich noch vielen anderen. Und auch der Code von Github, der auf etlichen Webseiten und auch hier zitiert wurde, hatte die Erkenntnis von Yochaym nicht aufgegriffen. Wir alle hätten bei Github nur etwas weiter schauen müssen, wo die ganze Zeit in mehreren Entwicklungsstufen auch eine tabs_below_navigation_toolbar_fx89.css auf der Basis von Yochaym verfügbar war.

    RRM

  • Tableiste unten per CSS-Code, oder per Skript.

    • Real Radioactiveman
    • 29. Juni 2021 um 17:21

    Hier ein Update meiner Version 3 von #286. Es hat sich herausgestellt, dass auch in diesem Fall eine Anpassung bei den Farben für das Glas/Aero-Theme und ebenso für WIndows 10 (ich teste allerdings nur bei einem Win10PE) nötig war. Und wenn ich die Farben schon selbst setze, dann ist die Zeile "color: var(--toolbar-color) !important;" überflüssig.

    Auch der Block, auf den Andreas hingewiesen hat, ein Relikt aus Version 1, ist überflüssig, denn die Höhe wird ja bereits unmittelbar davor in Zeile 5 gesetzt. Der Wert von 0px funktioniert bei mir übrigens hervorragend, weil Firefox es durch die vom Betriebssystem für das jeweiligen Theme vorgegebene Höhe ersetzt. Irgendwo gibt es also einen Unterschied, warum das bei Andreas anders ist. 25px ist ein hervorragender Kompromiss. Erst irgendwo über 30px zeigt sich bei mir ein Unterschied, dass die Menüleiste tatsächlich höher wird. Und Windows hat es so eingerichtet, dass für "normal" und "maximized" bei einigen Themes unterschiedliche Höhen vorgesehen sind. Ich habe es aufgegeben, das ausgleichen zu wollen. Gerade aus solchen Gründen bevorzuge ich sowieso den Classic-Look.

    Damit haben wir dann den Zustand der Perfektion asymptotisch erreicht? Beinahe. Es gibt noch einen winzig kleinen Nebeneffekt. Es lohnt sich nicht, dafür weiteren Forschungsaufwand zu betreiben und nach weiteren Änderungen des Code zu suchen. Es soll nur erwähnt werden, damit niemand zufällig darüber stolpert und sich dann wundert. Ich benutze WebScrapBook. Das erzeugt ein kleines Fenster, um den Verlauf eines Downloads anzuzeigen. Durch den Code von Github, einschließlich meiner Adaption, wird dort eine zusätzliche Menüleiste, die auch voll funktionsfähig ist, angezeigt. In dem Code von Andreas, einschließlich meiner Adaption, erscheint dort eine leere Leiste. Überflüssig, aber zum Glück völlig harmlos. Nehmen wir es als Kuriosität.

    Und jetzt werde ich herumgehen und bei den Rechnern, die ich betreue, die userchrome.css durch die aktuelle Fassung erstzen. Dank an Andreas für seine Arbeit und schöne Grüße von Radio Flora aus Hannover

    RRM

    CSS
    /* FF89 - TABS: on bottom */
    /* RRM 20210629 - Version 3 */
    
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #titlebar{
      height: 25px !important;
    }
    
    .titlebar-buttonbox-container{
      position: fixed !important;
      right: 0px !important;
      visibility: visible !important;
      display: block !important;
    }
    
    #TabsToolbar .titlebar-buttonbox-container,
    #TabsToolbar #window-controls{
      display: none !important;
    }
    
    #TabsToolbar{
      position: absolute !important;
      display: block !important;
      bottom: 0px !important;
      width: 100vw !important;
      background-clip: padding-box !important;
    }
    
    :root{
      --tab-min-height: 27px !important;
    }
    
    #navigator-toolbox{
      position: relative !important;
      padding-bottom: var(--tab-min-height) !important;
      border: none !important;
    }
    
    #TabsToolbar, #tabbrowser-tabs,
    #tabbrowser-tabs > .tabbrowser-arrowscrollbox,
    .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]{
      max-height: var(--tab-min-height) !important;
    }
    
    .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background{
      box-shadow: none !important;
    }
    
    #TabsToolbar > .toolbar-items{
      padding-top: 0px !important;
    }
    
    #tabbrowser-tabs{
      width: 100vw !important;
    }
    
    .tabbrowser-tab{
      margin-left: -3px !important;
      min-height: 4px !important;
    }
    
    .tabbrowser-tab[selected] .tab-content{
      background-color: #DAD7D0 !important;
      border-radius: 3px !important;
    }
    
    .tabbrowser-tab:not([selected]) .tab-content{
      background-color: #ACBDD7 !important;
      border-radius: 3px !important;
    }
    
    #tabbrowser-tabs:not([fokus]){
      opacity: 1 !important;
    }
    
    .tabbrowser-tab .tab-label{
      font-size: 12px !important;
      color: white !important;
    }
    
    .tabbrowser-tab .tab-label[selected]{
      font-size: 12px !important;
      color: black !important;
    }
    
    #TabsToolbar .tab-icon-image{
      height: 16px !important;
      width:  16px !important;
      margin-left:  -2px !important;
      margin-bottom: 2px !important;
    }
    
    .tab-close-button{
      color: white !important;
    }
    
    .tab-close-button[selected]{
      color: black !important;
    }
    
    #tabs-newtab-button{
      color: black !important;
    }
    
    toolbarbutton#scrollbutton-up image.toolbarbutton-icon,
    toolbarbutton#scrollbutton-down image.toolbarbutton-icon{
      margin-top: -2px !important;
      margin-bottom: -2px !important;
    }
    
    :root{
      --menubar-bgcolor1: #B4C8E4 !important;
      --menubar-bgcolor2: #B4C8E4 !important;
    }
    
    @media(-moz-windows-glass){
    :root[tabsintitlebar]{
      --menubar-bgcolor2: transparent !important;
    }}
    
    @media(-moz-os-version: windows-win10){
    :root[tabsintitlebar]{
      --menubar-bgcolor1: transparent !important;
      --menubar-bgcolor2: transparent !important;
    }}
    
    #navigator-toolbox{
      -moz-appearance: none !important;
      background-image: linear-gradient(to right, var(--menubar-bgcolor1), var(--menubar-bgcolor2)) !important;
    }
    
    #nav-bar{
      -moz-appearance: none !important;
      background-image: none !important;
      background-color: #C2D3ED !important;
    }
    
    #PersonalToolbar{
      -moz-appearance: none !important;
      background-image: none !important;
      background-color: #CADBF2 !important;
    }
    
    #TabsToolbar{
      -moz-appearance: none !important;
      background-image: none !important;
      background-color: #D2E3F2 !important;
    }
    Alles anzeigen
  • Tableiste unten per CSS-Code, oder per Skript.

    • Real Radioactiveman
    • 28. Juni 2021 um 19:42

    Hier ein Update meiner Tabs-Down-Bemühungen, siehe #262. Einige Zeit war ich nicht sicher, welcher Variante ich den Vorzug geben würde, da beide gravierende Nachteile hatten. Es ist mir dann aber gelungen, die Probleme bei der Methode von Github überzeugend in den Griff zu bekommen. Klarer Gewinner war für mich war also in meiner Zählung die Version 2. Eine nahezu perfekte Lösung, die ich inzwischen auf mehreren Rechnern, die ich betreue, installiert habe.

    Aber dann kam Andreas mit einem noch besseren Code. Das habe ich mit meiner Version 1 gekreuzt und heraus kam die jetzt endlich vollständig perfekte Version 3.

    Da sind ein paar wichtige Maßnahmen für Windows 7 drin, damit die Tableiste nicht durch die 1-4px verrutscht, die Firefox einschiebt, falls man die Menüleiste abschaltet. Und box-shadow: none vermeidet die Schlagschatten bei den Tabs. Und bei einer niedrigen Tableiste kann man die Pfeilbuttons auf eine angenehmere Größe bringen.

    Wie gehabt, sollte man bis Zeile 59 nichts ändern, abgesehen von der Höhe von Menüleiste und Tableiste in den Zeilen 5 und 34. Ab Zeile 61 wird dann das Aussehen der Tabs bestimmt, frei nach dem Vorbild hier von #219 auf Seite 11. Die Farben der Buttons entsprechen dabei dem, was Firefox sowieso vorgibt, aber ich wollte ja eventuellen zukünftigen Änderungen des Layouts durch Firefox vorbeugen. Ab Zeile 115 bis 137 geht es dann um die Hintergrundfarben der einzelnen Leisten. In Version 2 entspricht die Menüleiste dem Classic-Theme von Windows 7, funktioniert aber auch mit Aero/Glass. Wie man es ensprechend für Windows 10 anpassen kann, ist angedeutet. Aber nun werde ich mich erst einmal weiter auf Version 3 konzentrieren, falls es da doch noch irgendwelche Schwachstellen geben sollte.

    RRM

    CSS
    /* FF89 - TABS: on bottom */
    /* RRM 20210628 - Version 3 */
    
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #titlebar{
      height: 25px !important;
    }
    
    #toolbar-menubar{
      height: 0px !important;
    }
    
    .titlebar-buttonbox-container{
      position: fixed !important;
      right: 0px !important;
      visibility: visible !important;
      display: block !important;
    }
    
    #TabsToolbar .titlebar-buttonbox-container,
    #TabsToolbar #window-controls{
      display: none !important;
    }
    
    #TabsToolbar{
      position: absolute !important;
      display: block !important;
      bottom: 0px !important;
      width: 100vw !important;
      background-clip: padding-box !important;
      color: var(--toolbar-color) !important;
    }
    
    :root{
      --tab-min-height: 27px !important;
    }
    
    #navigator-toolbox{
      position: relative !important;
      padding-bottom: var(--tab-min-height) !important;
      border: none !important;
    }
    
    #TabsToolbar, #tabbrowser-tabs,
    #tabbrowser-tabs > .tabbrowser-arrowscrollbox,
    .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]{
      max-height: var(--tab-min-height) !important;
    }
    
    .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background{
      box-shadow: none !important;
    }
    
    #TabsToolbar > .toolbar-items{
      padding-top: 0px !important;
    }
    
    #tabbrowser-tabs{
      width: 100vw !important;
    }
    
    .tabbrowser-tab{
      margin-left: -3px !important;
      min-height: 4px !important;
    }
    
    .tabbrowser-tab[selected] .tab-content{
      background-color: #DAD7D0 !important;
      border-radius: 3px !important;
    }
    
    .tabbrowser-tab:not([selected]) .tab-content{
      background-color: #ACBDD7 !important;
      border-radius: 3px !important;
    }
    
    #tabbrowser-tabs:not([fokus]){
      opacity: 1 !important;
    }
    
    .tabbrowser-tab .tab-label{
      font-size: 12px !important;
      color: white !important;
    }
    
    .tabbrowser-tab .tab-label[selected]{
      font-size: 12px !important;
      color: black !important;
    }
    
    #TabsToolbar .tab-icon-image{
      height: 16px !important;
      width:  16px !important;
      margin-left:  -2px !important;
      margin-bottom: 2px !important;
    }
    
    .tab-close-button{
      color: white !important;
    }
    
    .tab-close-button[selected]{
      color: black !important;
    }
    
    #tabs-newtab-button{
      color: black !important;
    }
    
    toolbarbutton#scrollbutton-up image.toolbarbutton-icon,
    toolbarbutton#scrollbutton-down image.toolbarbutton-icon{
      margin-top: -2px !important;
      margin-bottom: -2px !important;
    }
    
    #nav-bar{
      -moz-appearance: none !important;
      background-image: none !important;
      background-color: #C2D3ED !important;
    }
    
    #PersonalToolbar{
      -moz-appearance: none !important;
      background-image: none !important;
      background-color: #CADBF2 !important;
    }
    
    #navigator-toolbox{
      -moz-appearance: none !important;
      background-image: none !important;
      background-color: #B4C8E4 !important;
    }
    
    #TabsToolbar{
      -moz-appearance: none !important;
      background-image: none !important;
      background-color: #D2E3F2 !important;
    }
    
    /* FF89 - TABS: on bottom */
    /* RRM 20210627 - Version 2 */
    /*
    :root{
      --uc-titlebar-padding: -1px !important;
      --uc-titlebar-paddinx: 0px !important;
      --uc-titlebar-height: 0px !important;
    }
    
    :root[sizemode="maximized"]{
      --uc-titlebar-padding: 0px !important;
      --uc-titlebar-paddinx: 0px !important;
      --uc-titlebar-height: 0px !important;
    }
    
    :root[sizemode="maximized"]:not([tabsintitlebar]){
      --uc-titlebar-padding: -1px !important;
      --uc-titlebar-paddinx: 0px !important;
      --uc-titlebar-height: 0px !important;
    }
    
    @media(-moz-os-version: windows-win10){
    :root{
      --uc-titlebar-padding: 0px !important;
      --uc-titlebar-paddinx: -1px !important;
      --uc-titlebar-height: 0px !important;
    }}
    
    @media(-moz-os-version: windows-win10){
    :root[sizemode="maximized"]{
      --uc-titlebar-padding: 1px !important;
      --uc-titlebar-paddinx: 0px !important;
      --uc-titlebar-height: 1px !important;
    }}
    
    #navigator-toolbox{
      padding-top: calc(25px + 10 * var(--uc-titlebar-height)) !important;
      border: none !important;
    }
    
    #titlebar{
      -moz-box-ordinal-group: 2 !important;
      -moz-appearance: none !important;
    }
    
    .titlebar-placeholder,
    #TabsToolbar .titlebar-spacer{
      display: none !important;
    }
    
    #toolbar-menubar{
      position: fixed !important;
      display: flex !important;
      top: calc(var(--uc-titlebar-padding) * 4 + var(--uc-titlebar-paddinx) * 4 + 5px) !important;
      width: 100% !important;
      overflow: hidden !important;
    }
    
    #toolbar-menubar > .titlebar-buttonbox-container,
    #TabsToolbar > .titlebar-buttonbox-container{
      position: fixed !important;
      display: block !important;
      top: calc(var(--uc-titlebar-paddinx) * 8 + 5px) !important;
      right: 0px !important;
    }
    
    :root{
      --tab-min-height: 27px !important;
    }
    
    #TabsToolbar, #tabbrowser-tabs,
    #tabbrowser-tabs > .tabbrowser-arrowscrollbox,
    .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]{
      max-height: var(--tab-min-height) !important;
    }
    
    .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background{
      box-shadow: none !important;
    }
    
    #TabsToolbar > .toolbar-items{
      padding-top: 0px !important;
    }
    
    #tabbrowser-tabs{
      width: 100vw !important;
    }
    
    .tabbrowser-tab{
      margin-left: -3px !important;
      min-height: 4px !important;
    }
    
    .tabbrowser-tab[selected] .tab-content{
      background-color: #DAD7D0 !important;
      border-radius: 3px !important;
    }
    
    .tabbrowser-tab:not([selected]) .tab-content{
      background-color: #ACBDD7 !important;
      border-radius: 3px !important;
    }
    
    #tabbrowser-tabs:not([fokus]){
      opacity: 1 !important;
    }
    
    .tabbrowser-tab .tab-label{
      font-size: 12px !important;
      color: white !important;
    }
    
    .tabbrowser-tab .tab-label[selected]{
      font-size: 12px !important;
      color: black !important;
    }
    
    #TabsToolbar .tab-icon-image{
      height: 16px !important;
      width:  16px !important;
      margin-left:  -2px !important;
      margin-bottom: 2px !important;
    }
    
    .tab-close-button{
      color: white !important;
    }
    
    .tab-close-button[selected]{
      color: black !important;
    }
    
    #tabs-newtab-button{
      color: black !important;
    }
    
    toolbarbutton#scrollbutton-up image.toolbarbutton-icon,
    toolbarbutton#scrollbutton-down image.toolbarbutton-icon{
      margin-top: -2px !important;
      margin-bottom: -2px !important;
    }
    
    :root{
      --menubar-bgcolor1: #0A246A !important;
      --menubar-bgcolor2: #A6CAF0 !important;
      --menubar-bordertop: 3px !important;
    }
    
    :root:-moz-window-inactive{
      --menubar-bgcolor1: #808080 !important;
      --menubar-bgcolor2: #C0C0C0 !important;
      --menubar-bordertop: 3px !important;
    }
    
    :root:not([tabsintitlebar]){
      --menubar-bgcolor1: #B4C8E4 !important;
      --menubar-bgcolor2: #B4C8E4 !important;
      --menubar-bordertop: 0px !important;
    }
    
    @media(-moz-windows-glass){
    :root{
      --menubar-bgcolor2: transparent !important;
    }}
    
    #navigator-toolbox{
      -moz-appearance: none !important;
      background-image: linear-gradient(to right, var(--menubar-bgcolor1), var(--menubar-bgcolor2)) !important;
      border-top: var(--menubar-bordertop) solid #D4D0C8 !important;
    }
    
    @media(-moz-os-version: windows-win10){
    #navigator-toolbox{
      background-image: none !important;
      background-color: white !important;
      border-top: 0px solid #D4D0C8 !important;
    }}
    
    #nav-bar{
      -moz-appearance: none !important;
      background-image: none !important;
      background-color: #C2D3ED !important;
    }
    
    #PersonalToolbar{
      -moz-appearance: none !important;
      background-image: none !important;
      background-color: #CADBF2 !important;
    }
    
    #TabsToolbar{
      -moz-appearance: none !important;
      background-image: none !important;
      background-color: #D2E3F2 !important;
    }
    */
    Alles anzeigen
  • Tableiste unten per CSS-Code, oder per Skript.

    • Real Radioactiveman
    • 14. Juni 2021 um 16:54

    Es gibt zwei gegensätzliche Methoden, die Tabs nach unten zu bekommen. In beiden Fällen beruht es darauf, dass eine Navigator-Toolbox hinzugefügt wird. Bei der Methode hier von Seite 1 kommt diese Navigator-Toolbox nach unten und befindet sich auch automatisch an der richtigen Stelle. Leider müssen die Tabs dann aber erst überredet werden, sich innerhalb dieser Navigator-Toolbox zu positionieren. Der erforderliche Wert dort für Zeile 18 differiert je nach Konstellation und Rechner und muss experimentell ermittelt werden. Und man darf auf gar keinen Fall auf die Idee kommen, Menü oder Lesezeichensymbolleiste abzuschalten. Nicht gerade optimal. Nun, zumindest, dass die Box mit dem Exitbutton beim Abschalten des Menüs abwandert, konnte ich beheben, siehe Version 1 im Code.

    Die andere Methode ist die von Github auf Seite 7. Da wird die Navigator-Toolbox oben eingefügt und in diesem Fall sind es die Elemente der Menüleiste, die erst dazu dazu überredet werden müssen, sich dort zu positionieren. Das ist nicht trivial. Normalerweise wird die Menüleiste vom Betriebssystem organisiert und hat deshalb immer das passende Aussehen. Wenn man sich selbst darum kümmern muss, gerät ohne besondere Vorkehrungen schnell alles an die falsche Stelle.

    Ich habe am Code geschraubt, um diese Geometrieprobleme zu beheben. Erfolgreich getestet habe ich es auf Windows 7 und einem Win10PE. Wer selber damit experimentieren möchte, sollte die Zeilen 1 - 64 auf keinen Fall ändern, allenfalls die Höhe der Menüleiste kann in Zeile 30 bei Bedarf eingestellt werden.

    In Zeile 66 wird die Höhe der Tabs festgelegt. In Zeile 72-101 kann der persönliche Lieblingscode für das Aussehen der Tabs eingefügt werden. Vor allem die Farben in den Zeilen 103-131 müssen an das jeweils verwendete Theme angepasst werden. Was ich nicht hinbekommen habe, ist, die Farbe der Menüleiste auf grau zu setzen, wenn das Fenster inaktiv ist. Auch wünsche ich mir einen Verlauf, bei dem es von einem dunkleren Farbton links nach rechts hin heller wird. Falls dazu jemand Ideen hat.

    Funktioniert im Prinzip übrigens auch mit älteren Versionen von Firefox. Dort sehen die Tabs dann aber jeweils sehr unterschiedlich aus. Ein Code, der für zukünftige Versionen von Firefox und deren wechselnde Layouts gewappnet sein soll, müsste also die Tabs wesentlich genauer definieren, als ich es getan habe. Aber, zumindest für diesen Monat reicht es erst einmal wieder.

    RRM

    CSS
    /* FF89 - TABS: on bottom */
    /* RRM 20210613 - Version 2 */
    
    :root{
    --uc-titlebar-padding: -1px;
    --uc-titlebar-paddinx: 0px;
    --uc-titlebar-height: 0px;
    }
    
    :root[sizemode="maximized"]{
    --uc-titlebar-padding: 0px;
    --uc-titlebar-paddinx: 0px;
    --uc-titlebar-height: 0px;
    }
    
    @media (-moz-os-version: windows-win10){
    :root{
    --uc-titlebar-padding: 0px;
    --uc-titlebar-paddinx: -1px;
    --uc-titlebar-height: 0px
    }}
    
    @media (-moz-os-version: windows-win10){
    :root[sizemode="maximized"]{
    --uc-titlebar-padding: 1px;
    --uc-titlebar-paddinx: 0px;
    --uc-titlebar-height: 1px
    }}
    
    #navigator-toolbox{ padding-top: calc(25px + 10 * var(--uc-titlebar-height)) !important }
    
    #titlebar{
    -moz-box-ordinal-group: 2;
    -moz-appearance: none !important;
    }
    
    .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
    
    .titlebar-placeholder,
    #TabsToolbar .titlebar-spacer{ display: none; }
    
    #toolbar-menubar{
    position: fixed;
    display: flex;
    top: calc(var(--uc-titlebar-padding) * 4 + var(--uc-titlebar-paddinx) * 4 + 5px);
    width: 100%;
    overflow: hidden;
    }
    
    #toolbar-menubar > .titlebar-buttonbox-container{ order: 100; }
    
    #toolbar-menubar > [flex]{ flex-grow: 100; }
    #toolbar-menubar > spacer[flex]{
    order: 99;
    flex-grow: 1;
    }
    
    #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
    #TabsToolbar > .titlebar-buttonbox-container{
    position: fixed;
    display: block;
    top: calc(var(--uc-titlebar-paddinx) * 4 + var(--uc-titlebar-height) * 4 + 5px);
    right: 0px;
    }
    
    :root{ --tab-min-height: 27px !important; }
    
    #TabsToolbar{
    margin-bottom: -1px !important;
    }
    
    .tabbrowser-tab{
    margin-top: -4px !important;
    margin-bottom: -2px !important;
    margin-left: -3px !important;
    min-height: var(--tab-min-height) !important;
    max-height: var(--tab-min-height) !important;
    }
    
    .tab-background{
    background-color: #ACBDD7 !important;
    }
    
    .tab-background[selected="true"]{
    background-color: #DAD7D0 !important;
    }
    
    #tabbrowser-tabs{
    width: 100vw !important;
    }
    
    #tabs-newtab-button{
    margin-top: 0px !important;
    margin-bottom: -5px !important;
    }
    
    #tabbrowser-tabs,
    #tabbrowser-tabs > .tabbrowser-arrowscrollbox,
    .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]{
    max-height: var(--tab-min-height) !important;
    }
    
    #navigator-toolbox{
    -moz-appearance: none !important;
    background-image: none !important;
    background-color: #304C8A !important;
    border-top: 3px solid #D4D0C8 !important;
    }
    
    @media (-moz-os-version: windows-win10){
    #navigator-toolbox{
    border-top: 0px solid #D4D0C8 !important;
    }}
    
    #nav-bar{
    -moz-appearance: none !important;
    background-image: none !important;
    background-color: #C2D3ED !important;
    }
    
    #PersonalToolbar{
    -moz-appearance: none !important;
    background-image: none !important;
    background-color: #CADBF2 !important;
    }
    
    #TabsToolbar{
    -moz-appearance: none !important;
    background-image: none !important;
    background-color: #D2E3F2 !important;
    }
    
    /* FF89 - TABS: on bottom */
    /* RRM 20210613 - Version 1 */
    /*
    #TabsToolbar[inFullscreen="true"]{
    -moz-box-ordinal-group:1000 !important;
    }
    
    #main-window[inFullscreen="true"] #navigator-toolbox{
    margin-top:-80px !important;
    }
    
    #main-window[inFullscreen="true"] #navigator-toolbox:hover{
    margin-top:1px !important;
    }
    
    #toolbar-menubar{
    position: fixed;
    display: flex;
    width: 100%;
    overflow: hidden;
    }
    
    #toolbar-menubar > .titlebar-buttonbox-container{
    order: 100;
    }
    
    #toolbar-menubar > [flex]{ flex-grow: 100; }
    #toolbar-menubar > spacer[flex]{
    order: 99;
    flex-grow: 1;
    }
    
    #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
    #TabsToolbar > .titlebar-buttonbox-container{
    position: fixed;
    display: block;
    right: 0px;
    }
    
    #TabsToolbar:not([inFullscreen="true"]){
    position: absolute !important;
    display: block !important;
    top: 91px !important;
    width: 100% !important;
    }
    
    :root{
    --tab-min-height: 27px !important;
    }
    
    .tabbrowser-tab{
    margin-top: -4px !important;
    margin-left: -3px !important;
    min-height: var(--tab-min-height) !important;
    max-height: var(--tab-min-height) !important;
    }
    
    .tab-background{
    background-color: #ACBDD7 !important;
    }
    
    .tab-background[selected="true"]{
    background-color: #DAD7D0 !important;
    }
    
    #tabbrowser-tabs{
    width: 100vw !important;
    }
    
    #tabs-newtab-button{
    margin-top: -3px !important;
    margin-bottom: -5px !important;
    }
    
    #tabbrowser-tabs,
    #tabbrowser-tabs > .tabbrowser-arrowscrollbox,
    .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]{
    max-height: var(--tab-min-height) !important;
    }
    
    #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox{
    padding-bottom: calc(var(--tab-min-height) - 1px) !important;
    }
    
    #nav-bar{
    -moz-appearance: none !important;
    background-image: none !important;
    background-color: #C2D3ED !important;
    }
    
    #PersonalToolbar{
    -moz-appearance: none !important;
    background-image: none !important;
    background-color: #CADBF2 !important;
    }
    
    #navigator-toolbox{
    -moz-appearance: none !important;
    background-image: none !important;
    background-color: #D2E3F2 !important;
    }
    
    #TabsToolbar{
    -moz-appearance: none !important;
    background-image: none !important;
    background-color: #D2E3F2 !important;
    }
    */
    Alles anzeigen

Unterstütze uns!

Jährlich (2025)

60,4 %

60,4% (392,55 von 650 EUR)

Jetzt spenden
  1. Kontakt
  2. Datenschutz
  3. Impressum
Community-Software: WoltLab Suite™
Mastodon