Tabs rund und farbig - FX 68.0.1

Büssen

Moin,

nutze für die Tabs diesen Code:

CSS

/* Tabs rund und farbig */
/* Do not remove the @namespace line -- it's required for correct functioning
 * set default namespace to XUL
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/**********************************************************
 ********** Reihenfolge der Leisten ***********************
 **********************************************************/

/* Die Reihenfolge der Leisten im Leisten-Container wird durch die
 * zugewiesenen Zahlen der "-moz-box-ordinal-group" bestimmt:
 * Oben die Menü-Leiste, darunter die Navigations-Leiste danach
 * die Lesezeichen-Leiste, unten die TAB-Leiste, so wie man es
 * von früher her gewohnt ist.
 * 
 * Oft wird eine andere Vorgehensweise beschrieben.
 * Ob es wichtig ist? Ich habe sie jedenfalls einfach von 1 bis 4
 * durchnummeriert, das ist übersichtlich und hat bisher geklappt.
 */
#toolbar-menubar {
  -moz-box-ordinal-group: 1 !important;
}
#nav-bar {
  -moz-box-ordinal-group: 2 !important;
}
#PersonalToolbar {
  -moz-box-ordinal-group: 3 !important;
}
#TabsToolbar {
  -moz-box-ordinal-group: 4 !important;
}


/**********************************************************
 ********** Vollbildmodus *********************************
 **********************************************************/

/* Damit die Rückkehr aus dem Vollbildmodus mit der Maus klappt:
 * Bei 0 bleiben die URL-Leiste und die Tab-Leiste immer sichtbar,
 * je größer der negative Wert, desto mehr verschwindet aus dem sichtbaren
 * Bereich, ein Pixel muß für den Mauskontakt am oberen Rand immer sichtbar
 * bleiben. Den Wert an die Leistenhöhe anpassen!
 */
#main-window[inFullscreen="true"] #navigator-toolbox {
  margin-top: -80px !important;
}

/* Bei Mauskontakt des noch sichtbaren Pixels die Leisten wieder einblenden
 */
#main-window[inFullscreen="true"] #navigator-toolbox:hover {
  margin-top: 0 !important;
}

/* Etwas schnellere Animation beim ein- und ausblenden, normal ist 1.5s
 */
#navigator-toolbox {
  transition: 0.5s !important;
}


/**********************************************************
 ********** Angaben für die TAB-Leiste ********************
 **********************************************************/

/* TAB normal (inaktiv):
 * Hintergrundfarbe, Schriftfarbe,
 * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
 * unten kein Rahmen -> Abschlußrahmen vom Container.
 */
 
 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
  border:none!important;}
 
#TabsToolbar .tabbrowser-tab {
 
  color: black !important;
  border: 1px solid !important;
  border-bottom: none !important;
 
  border-radius: 15px 15px 0 0 !important;
  margin: 3px 1px 1px 2px !important;
  padding: 1px 0 !important;
}

/* TAB bei Mauskontakt:
 * Hintergrundfarbe, Rahmen
 */
#TabsToolbar .tabbrowser-tab:hover {
 
  color: black !important;

}

/* TAB bei bei angewähltem TAB (aktiv):
 * Hintergrundfarbe, Rahmen,
 * Schriftfarbe.
 */
#TabsToolbar .tabbrowser-tab[selected="true"] {
 background: yellow !important;
  font-weight:bold !important;
  color: black ! important;

}

/* Tab-Icon etwas größer,
 * links weniger, unten etwas mehr Abstand zum TAB-Rand.
 */
#TabsToolbar .tab-icon-image {
  height: 20px !important;
  width:  20px !important;
  margin-left: -4px !important;
  margin-bottom: 2px !important;
}
/* Tab-Schließen-Button:
 * Rechts weniger Abstand zum TAB-Rand, etwas größer,
 * Textfarbe (Kreuz)
 * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt.
 */
#TabsToolbar .tab-close-button {
  margin-right: -4px !important;
  padding: 0 !important;
  color: white !important;
  border-radius: 5px !important;
  border:2px solid lightgrey!important;
}
#TabsToolbar .tab-close-button:not([selected="true"]) {
  height: 22px !important;
  width:  22px !important;
  background: red !important;
  border:2px solid lightgrey!important;
  border-radius: 5px !important;
}

/* Tab-Schließen-Button bei angewähltem TAB (aktiv):
 * Hintergrundfarbe.
 */
#TabsToolbar .tab-close-button[selected="true"] {
    border:2px solid lightgrey!important;
  background-color: red !important;
  border-radius: 5px !important;
}

/* Alle anderen Elemente in den TABs ohne Hintergrund.
 */
#TabsToolbar .tabbrowser-tab * {
  background: none !important;
}

.tabbrowser-tab::after, .tabbrowser-tab::before {
    border: none !important;
}

Alles anzeigen

Lässt sich diese Ansicht noch verbessern?

Sören Hentzschel

Hallo,

Zitat von Büssen

Lässt sich diese Ansicht noch verbessern?

Dazu müsstest du schon sagen, womit genau du nicht zufrieden bist. Ansonsten läuft das auf eine Geschmacksfrage hinaus und wenn ich mir den Screenshot ansehe, kann ich mit ziemlicher Sicherheit sagen, dass ich diesbezüglich einen komplett anderen Geschmack als du habe. Insofern wäre es schon gut zu wissen, was dir nicht passt, wenn das Ergebnis am Ende dir gefallen soll.

2002Andreas

Zitat von Büssen

Lässt sich diese Ansicht noch verbessern?

Ich habe einen anderen Code von Aris mal mit deinen pers. Daten erweitert.

Das sieht dann so aus:

Wenn du testen möchtest:

CSS

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


:root {
  --default_tab_border_roundness: 15px;
}

/* tab top border roundness */
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-stack,
#TabsToolbar .tabbrowser-tab .tab-background,
#TabsToolbar .tabbrowser-tab .tab-content {
  border-top-left-radius: var(--default_tab_border_roundness) !important;
  border-top-right-radius: var(--default_tab_border_roundness) !important;
  overflow: hidden;
}

#TabsToolbar .tabs-newtab-button{
  border-top-left-radius: var(--default_tab_border_roundness) !important;
  border-top-right-radius: var(--default_tab_border_roundness) !important;
}

/* hide tab separators */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
  opacity: 0 !important;
  border-image: unset !important;
  border-image-slice: unset !important;
  width: unset !important;
}
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
  content: unset !important;
  display: unset !important;
}

.tabbrowser-tab[selected] {
  font-weight: bold;
  color: black !important;
  border: 1px solid black !important;
}

.tabbrowser-tab:not([selected]){
  color: black!important;
  border: 1px solid black !important;
}

.tabbrowser-tab[selected] .tab-content { 
    background: yellow !important;
}



/* Tab-Icon etwas größer,
 * links weniger, unten etwas mehr Abstand zum TAB-Rand.
 */
#TabsToolbar .tab-icon-image {
  height: 20px !important;
  width:  20px !important;
  margin-left: -3px !important;
  margin-bottom: 2px !important;
}
/* Tab-Schließen-Button:
 * Rechts weniger Abstand zum TAB-Rand, etwas größer,
 * Textfarbe (Kreuz)
 * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt.
 */
#TabsToolbar .tab-close-button {
  margin-right: -3px !important;
  padding: 0 !important;
  color: white !important;
  border-radius: 5px !important;
  border:2px solid lightgrey!important;
}
#TabsToolbar .tab-close-button:not([selected="true"]) {
  height: 22px !important;
  width:  22px !important;
  background: red !important;
  border:2px solid lightgrey!important;
  border-radius: 5px !important;
}

/* Tab-Schließen-Button bei angewähltem TAB (aktiv):
 * Hintergrundfarbe.
 */
#TabsToolbar .tab-close-button[selected="true"] {
    border:2px solid lightgrey!important;
  background-color: red !important;
  border-radius: 5px !important;
}

Alles anzeigen

Büssen

Habe getestet - sieht so bei mir aus:

Lässt sich evtl. (Pfeil) wieder ein kleiner Spalt einbauen?

2002Andreas

Zusätzlich dann noch:

CSS

.tabbrowser-tab {
    margin-left: 2px !important;
    }

Büssen

Perfekt - Abstände sind ok, sogar ganz links zum Rand hin.

Vielen Dank!

2002Andreas

Gerne doch

Büssen

Zitat von Sören Hentzschel

Hallo,

Zitat von Büssen

Lässt sich diese Ansicht noch verbessern?

Dazu müsstest du schon sagen, womit genau du nicht zufrieden bist. Ansonsten läuft das auf eine Geschmacksfrage hinaus und wenn ich mir den Screenshot ansehe, kann ich mit ziemlicher Sicherheit sagen, dass ich diesbezüglich einen komplett anderen Geschmack als du habe. Insofern wäre es schon gut zu wissen, was dir nicht passt, wenn das Ergebnis am Ende dir gefallen soll.

Hat sich inzwischen zufriedenstellend erledigen können. Geschmacksrichtungen sind eben doch verschieden.

Sieht nunmehr so bei mir aus:

Mir gefällt das so!

Boersenfeger

Das hässliche grau lässt sich auch noch anhübschen, indem du das Theme installierst

https://addons.mozilla.org/de/firefox/add…er-renaissance/

sieht dann so aus:

Ich habe allerdings noch andere Anpassungen und nutze keine Lesezeichensymbolleiste..

StandingBill

Eine abgespeckte Version des Codes habe ich mal getestet.
Dazu eine Detailfrage.
Ist es möglich, die kleine Fläche zwischen den abgerundeten Tabs (blauer Pfeil) farblich zu modifizieren?

Grüße

2002Andreas

Das ist die Hintergrundfarbe deiner Tableiste, und nicht nur das Dreieck dazwischen.

CSS

#TabsToolbar {
  background: red !important;
  }

StandingBill

Danke!
Jetzt alles schick.

Tabs rund und farbig - FX 68.0.1

Ähnliche Themen

Tabsleiste unten im Nightly 68 ?

Position der Tab-Leiste