eckige Tabs bei Quantum abrunden

spiderman

Boersenfeger: Und du brauchst die Rundungen, korrekt?

Boersenfeger

Was heisst brauchen, es wäre nett... wesentlicher ist die Breite der Tableiste..

HT-Frogger

Das ist MEIN minimierter Code für die abgerundeten Tabs, die komplette userChrome.css mit dem Screenshot. Die Farben natürlich anpassen und keine anderen Dinge rein die diese Werte wieder verändern würden. Ich benutze natürlich andere Farben...

CSS

/* 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.
 */
#TabsToolbar .tabbrowser-tab {
  background: gray !important;
  color: black !important;
  border: 1px solid !important;
  border-bottom: none !important;
  border-color: red !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 {
  background: yellow !important;
  color: black !important;
  border-color: gray !important;
}


/* TAB bei bei angewähltem TAB (aktiv):
 * Hintergrundfarbe, Rahmen,
 * Schriftfarbe.
 */
#TabsToolbar .tabbrowser-tab[selected="true"] {
  background: red !important;
  color: white !important;
  border-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;
}
#TabsToolbar .tab-close-button .toolbarbutton-icon {
  height: 22px !important;
  width:  22px !important;
  background-color: red !important;
  border-radius: 5px !important;
}


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


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

Alles anzeigen

[attachment=0]Screenshot_20171115_185911.png[/attachment]

Gruß Harry

spiderman

HT-Frogger Danke für's Teilen. Ein Schönheitsfehler ist, dass jeweils beim rechten Tab die Ecken stören. Dabei spielt es keine Rolle, ob es ein aktives Tab ist.

HT-Frogger

Das ist bei mir nicht so (bei meinem Screenshot waren nur die 3 sichtbaren Tabs auf). Im Original habe ich einen blauen Hintergrund, da sieht man es ohnehin nicht so... Das liegt vielleicht am Betriebssystem, ich habe hier ja Linux. Ansonsten sind alle Farben, Abstände etc anpaßbar.

Gruß Harry

spiderman

HT-Frogger

Zitat

Das liegt vielleicht am Betriebssystem, ich habe hier ja Linux.

Auf deinem Screenshot ist beim roten Tab ein Strich rechts nach oben zuviel.Ich nehme an, dass an der linken Seite ist es genauso, nur sieht man dies am Rande nicht. Sieht so aus, dass auf einem Linux-System das Problem sich - ideologisch bedingt? - nach links verlagert hat :-).

Boersenfeger

Vorab: vielen Dank für den Code.. :klasse:
Ich habe ihn mir ein wenig angepasst...
Allerdings habe ich nur im aktiven Tab die Ecken....
Kann man das noch wegkriegen?
[attachment=0]Ecken im Tab.PNG[/attachment]
Ferner würde ich gerne die Beschriftung des aktiven Tabs fett haben wollen..

CSS

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


}

Was muss ich ergänzen?
Vielen Dank im Voraus!

2002Andreas

Zitat von Boersenfeger

die Beschriftung des aktiven Tabs fett haben wollen.

CSS

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


}

Alles anzeigen

spiderman

Zitat

Kann man das noch wegkriegen?

Ich habe die Variante von HT-Frogger genommen und hier habe ich unter Windows 10 auch Ecken, aber nur bei dem Tab rechts. Es wird leichter deine Frage zu beantworten, wenn du dein Code komplett hier postest. Aber vlt. gibt es Foristen, die eine magische Kristallkugel haben :-).

//Edit 16.11.2017: Rückzieher: ich habe Ecken beim aktiven Tab, nicht beim Tab rechts. Keine Ahnung, wie es bei bisherigen bei mir Tests gelaufen ist mit den Ecken bem Tab rechts.

HT-Frogger

Verschwinden die kleinen Strichlein wenn man etwas anderes markiert? Ist es evt nur die Kennung vom Betriebssystem des zuletzt aktiv gewesenen Elementes? Dann kann man das natürlich nicht weg bekommen. Bei einem rechteckigen Rahmen fällt das natürlich nicht auf...

Ansonsten kann man den Eckenradius auch mit einer 1/4 Elipse gestalten, also mehr oder weniger schief. Dafür dann einfach statt eines Wertes ein Wertepaar eintragen(z.B. statt "15px" dann "15px/5px") das auch für jede Ecke getrennt.

Gzuß Harry

Boersenfeger

Danke Andreas...
Hier mein ganzer Code zu diesem Thema:

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.
 */
#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: red !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;
}
#TabsToolbar .tab-close-button .toolbarbutton-icon {
  height: 22px !important;
  width:  22px !important;
  background-color: red !important;
  border-radius: 5px !important;
}


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


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

Alles anzeigen

Und hier nochmal ein Screenshot...
[attachment=0]Unbenannt.PNG[/attachment]

2002Andreas

Teste bitte diesen kompl. Code mal, damit ist hier zumindest der Rahmen hinter dem aktiven Tab weg.

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: red !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;
}
#TabsToolbar .tab-close-button .toolbarbutton-icon {
  height: 22px !important;
  width:  22px !important;
  background-color: red !important;
  border-radius: 5px !important;
}


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


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

Alles anzeigen

Ab Zeile 72 habe ich diesen Code zusätzlich eingefügt:

CSS

#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
  border:none!important;}

[attachment=0]Zwischenablage01.jpg[/attachment]

Boersenfeger

Bingo.... jetzt bin ich zufrieden, vielen Dank!

2002Andreas

Freut mich wie immer, war gern geschehen

spiderman

Boersenfeger Kannst du ein Screenshot von deinen Tabs posten?

Boersenfeger

klar..
[attachment=0]Unbenannt.PNG[/attachment]
Mit dem Code aus Beitrag 52..

Büssen

Moin,
habe mir mal den Code aus #'52 ausgeliehen.

[attachment=0]Tabs_rund_farbig.jpg[/attachment]

Ist da etwas verkehrt gelaufen?

2002Andreas

Zitat von Büssen

Ist da etwas verkehrt gelaufen?

Du hast ganz andere Farben als im Code von Boersenfeger.

Evtl. ist da noch ein anderer Code bei dir der etwas mit den Tabs zu tun hat.

Boersenfeger

Welches Theme im Fenster Anpassen ist ausgewählt?
~~Sind sonstige einwirkende Codes aktiv?~~ ...zu spät..

Büssen

Kann sein, ich schaue mal nach - und melde mich!
Theme ist "Standard"