CSS-Code für Tabs unter der URL-Bar in Nightly ohne Funktion

Boersenfeger

Mit der aktuellen Version für Nightly von heute:

https://hg.mozilla.org/mozilla-centra…086e354d96ba2fc
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0 ID:20181108100100
funktioniert dieser Code nicht mehr...

CSS

/* Tabs runter */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important;}

Kann man den wieder funktionsfähig gestalten oder ist hier die Gestaltungsmöglichkeit entfallen....

[attachment=0]Unbenannt.JPG[/attachment]

Speravir

Ich habe mir das selbst noch nicht angesehen, aber soeben bemerkt, dass in CustomCSSforFx extra dafür einige Aktualisierungen erfolgt sind. Also dort mal forschen.

Sören Hentzschel

Das ist eine Folge von https://bugzilla.mozilla.org/show_bug.cgi?id=1356920.

Ich habe zwar ein Ticket eröffnet:
https://bugzilla.mozilla.org/show_bug.cgi?id=1505927

… vermute aber, dass sich daraus keine Änderung ergibt, weil Mozilla keine Anpassungen via userChrome.css in dem Sinne unterstützt. Falls das Ticket ein WONTFIX wird, wovon ich ausgehe, weiß vielleicht jemand anderes, ob es einen anderen Weg gibt. Damit kann ich nicht dienen.

macko

Zitat von Speravir

soeben bemerkt, dass in CustomCSSforFx extra dafür einige Aktualisierungen erfolgt sind.

Yep. Dieser CSS-Code zusammen mit diesem Code scheint zu funktionieren unter der aktuellsten Nightly.
[attachment=0]firefox_2018-11-08_22-45-26.png[/attachment]

Boersenfeger

Prima, vielen Dank fürs nachforschen...

Boersenfeger

Habe das GELÖST noch mal entfernt....

Ich nutze nun die beiden genannten .css-Codes sowie noch den u.a. weiteren ..

CSS

/* Tabs rund und farbig */


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


/* Schliessen-Button nur wenn angewähltem */


tab:not([selected]) .tab-close-button {display: none}




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

Alles anzeigen

Jetzt habe ich einen unschönen Effekt:
Beim aktiven Tab, rot... erkennt man einen zusätzlich eckigen Rahmen... diesen würde ich gern entfernen...
[attachment=0]Tab.JPG[/attachment]
Vielleicht mag ja mal jemand schauen...
Aufgrund von Mengenbegrenzung gibts noch einen 2. Teil..

Boersenfeger

Ferner wird das obige Hintergrundbild im Fuchs 63.0.1 und 64.0beta auch in der Tableiste gezeigt...
Hier für arbeitet dort dieser Code:

CSS

/* Navigationsleiste Hintergrundbild */


 #menubar,#PersonalToolbar,#TabsToolbar,#toolbar-menubar,#nav-bar{ 
 -moz-appearance: none !important;
 background-image: url....................................2Fvbu%2FuHasc2yqu5vbmeHj8sKxFmLuwpC%2BsOr5SYo2yp%2BejrUJWG1CYfTZ4m%2Fj1I%2FCPPBaLzceL3BwS7OZHO03Hp8W%2F7%2FQa%2BtawaAyOH%2FBrJ4TyWnpKTEAAAAAElFTkSuQmCC)!important;
}

Leider ist dies beim Nightly-Fuchs nicht so....
Wo könnte man dort was verbessern?
BTW:
Da der Code zu groß ist, habe ich ihn gekürzt.. das betrifft nur den base64 Teil...
Für hilfreiche Hinweise bin ich sehr dankbar...

macko

Zitat von Boersenfeger

Jetzt habe ich einen unschönen Effekt:
Beim aktiven Tab, rot... erkennt man einen zusätzlich eckigen Rahmen... diesen würde ich gern entfernen...
Tab.JPG

Versuche einmal folgenden CSS-Code innerhalb deiner Bestehenden einzufügen:
Dies sollte die überflüssigen Rahmenelemente entfernen.

CSS

/* Tab-Rahmenelemente entfernen (obere Linie aktiver Tab, Seitentrennlinien) */
#toolbar-menubar:not([autohide="true"]) + #TabsToolbar .tabbrowser-tab > .tab-stack > .tab-background, :root:not([tabsintitlebar]) .tab-background, :root[extradragspace] .tab-background {
	border-top-style: none !important;
}


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

[attachment=0]firefox_2018-11-09_19-29-31.png[/attachment]

2002Andreas

Zitat von Boersenfeger

das obige Hintergrundbild

Meinst du das so?

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

Wenn ja:

CSS

/* Navigationsleiste Hintergrundbild */


 #navigator-toolbox #menubar,#navigator-toolbox #PersonalToolbar,window#main-window toolbox#navigator-toolbox vbox#titlebar toolbar#TabsToolbar.browser-toolbar.titlebar-color,#navigator-toolbox #toolbar-menubar,#navigator-toolbox #nav-bar{ 
 -moz-appearance: none !important;
 background-image:  url(.......)!important;
}

Zwischen die beiden Klammern muss dann der base64 Code.

Ich hatte auch schon den Code von macko hier zwecks Test eingefügt. :klasse:

Speravir

Zitat von macko

Yep. Dieser CSS-Code zusammen mit diesem Code scheint zu funktionieren unter der aktuellsten Nightly.

Zitat von Boersenfeger

Prima, vielen Dank fürs nachforschen...

Von mir auch. Ich hatte mir das eben erst selber angesehen. Heute gab es übrigens bei Aris ein weiteres Update dahingehend!

ArisCTR

Es gibt mehrere Herangehensweisen die Tabs wieder "nach unten" zu bringen. Der Versuch gestern hat zwar schon zu einem brauchbaren Ergebnis geführt, aber ein anderer Vorschlag eines Github-Nutzers hat mich auf eine weitere Idee gebracht. Das aktuelle Ergebnis scheint, basierend auf den aktuellen Tests, besser zu sein. Einen weitere Fix für macOS wird es mit dem nächsten Update geben.

Für diejenigen, die nicht das komplette Paket verwenden, sind diese beiden Dateien nötig, wobei unter Firefox 65 nur die letztere importiert werden muss, da sie selbst die andere Datei "mitimportiert".

https://github.com/Aris-t2/Custom…ion_toolbar.css
https://github.com/Aris-t2/Custom…oolbar_fx65.css

Boersenfeger

So, ich bin vollkommen zufriedengestellt....
macko: Dank deines Codes ist der Kasten weg...
2002Andreas: Dank deiner Ergänzung habe ich jetzt das Hintergrundbild über alle von mir ausgewählten Leisten...
ArisCTR: Deine letzten Codes verhagelt mir die Darstellung der Tableiste... es wird nur ein Tab dargestellt in die URLBar hineingedrückt und vor allem kann man die Tabs nicht wechseln...
Ich nutze also nun für Nightly die Codes aus Post 4 und die Ergänzungen...
[attachment=0]Unbenannt.JPG[/attachment]
Vielen Dank allen Beteiligten...

ArisCTR

Boersenfeger
Versuch mal testweise nur den Code aus den verlinkten Dateien zu testen, um einen Konflikt mit deinem Code auszuschließen.

Beim Testen unter Windows 7, 8 und 10 sowie macOS 10.1x.xx und verschiedenen Linux Versionen trat dieses Problem nicht auf, aber es kann natürlich sein, dass ich irgendeinen Fall übersehen habe.

Boersenfeger

So, vielen Dank für deinen Vorschlag!
Ich habe jetzt die beiden verlinkten Dateien einerseits und meinen Code andererseits im Nightly Profil mit folgendem Ergebnis...
[attachment=0]Nightly.JPG[/attachment]
Alles funktioniert.... allerdings ist das Innere der URL und der Suchleiste nicht im runden Rahmen gefüllt... ferner sollten beide die Höhe der Nav-Bar einnehmen...
Hier mein Code:

CSS

/* Tabs rund und farbig */


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


/* Schliessen-Button nur wenn angewähltem */


tab:not([selected]) .tab-close-button {display: none}




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


/* Tab-Rahmenelemente entfernen (obere Linie aktiver Tab, Seitentrennlinien) */
#toolbar-menubar:not([autohide="true"]) + #TabsToolbar .tabbrowser-tab > .tab-stack > .tab-background, :root:not([tabsintitlebar]) .tab-background, :root[extradragspace] .tab-background {
	border-top-style: none !important;
}


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

Alles anzeigen

BTW: Mit dem heutigen Nightly funktionieren diverse Scripts und Codes nicht mehr...
Von daher ist die Nightly-Version auf dem Stand vom 11.11.2018

milupo

Bei mir zeigt BackupProfile.uc.js nun auch keinen Eintrag hinter dem Download-Pfeil mehr an. Gestern zeigte es nur die Benachrichtigung nicht mehr an (heute auch nicht). Das Speichern funktioniert aber noch.

Boersenfeger

@ Milupo... hier gehts um CSS... Ggf. die Dauer für Skriptausführung verlängern..
@ Aris: Mit der heutigen Nightlyversion habe ich nun einen Abstand (gelb markiert) zwischen der heruntergesetzten Tab-Leiste und der URL-Leiste... :?
[attachment=0]Unbenannt.JPG[/attachment]

ArisCTR

Boersenfeger

Blöde Frage, aber ist es möglich, dass es sich dabei um die leere Lesezeichenleiste oder eine andere per Script eingebundene Leiste handelt? Teste bitte mal die aktuellste CustomCSSforFx Version ohne andere Veränderungen an der Oberfläche vorzunehmen außer der Aktivierung des Codes für Fx65, der die Tabs unter die Navigationsleiste bringt.

https://i.imgur.com/EjRrOOW.png

Ich kann diesen Fehler nicht reproduzieren.
Getestet wurde die heutige Nightly mit den aufgeführten Kombinationen:
- Windows 7 (AeroGlass, AeroBasic, Classic), Windows 8, Windows 10, macOS 10.1x.x, Ubuntu, Kubuntu, Xubuntu
- Systemtitelleiste und Firefoxtitelleiste
- Menuleiste an/aus (außer macOS versteht sich)
- Lesezeichenleiste an/aus
- Theme: Standard, Hell, Dunkel sowie einige LW-Themes von AMO
- Code ausschließlich aus der aktuellsten CustomCSSforFx Version (keine anderen CSS oder JS Scripte)

https://i.imgur.com/OOl37Sn.png

Frage am Rande, gibt es einen Grund warum der BBCode für Bilder [ img ] deaktiviert ist?

Fox2Fox

Zitat von ArisCTR

Frage am Rande, gibt es einen Grund warum der BBCode für Bilder [ img ] deaktiviert ist?

Hier nachzulesen:

https://www.camp-firefox.de/forum/viewtopi…083186#p1083186

Boersenfeger

Hat sich erledigt..... ein Script war 2x aktiv... vielen Dank!
Beitrag 14 ist aber noch aktuell

milupo

Zitat von Boersenfeger

@ Milupo... hier gehts um CSS... Ggf. die Dauer für Skriptausführung verlängern..

Oh, sorry, war in den falschen Thread gerutscht.