FX portable - Schließen-Kreuz verschwunden?

Büssen

Teste inzwischen wieder mal die portablen Versionen vom FX.
>> Schließen-Kreuz für die Tabs in V 58.0 sieht so aus

[Blockierte Grafik: https://www2.pic-upload.de/img/34736924/Tab_schlieen.jpg]

>> Schließen (Kreuz??) in V 59.0b4 sieht so aus:

[Blockierte Grafik: https://www2.pic-upload.de/img/34736938/Tab_schlieen_1.png]
hier ist zwar ganz schwach ein weißes Kreuz zu sehen - aber wo ist die rote Untermalung geblieben?
An dem Code "Tabs rund und farbig" habe ich nichts verändert.

2002Andreas

Zitat von Büssen

An dem Code "Tabs rund und farbig"

Kannst du den bitte mal ins nächste Antwortfenster einfügen zwecks Test.

Büssen

bitte schön:

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;
}
#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

2002Andreas

In Zeile 135

#TabsToolbar .tab-close-button[selected="true"].toolbarbutton-icon

bitte das mal entfernen im Code:

.toolbarbutton-icon

Büssen

Zitat von 2002Andreas

.toolbarbutton-icon

Eintrag entfernt - rotes Quadrat mit Kreuz wird zwar angezeigt - aber nicht so wie in Bild 1

Rufe ich dann den nächsten Tab auf - wird wieder nur das rote Quadrat angezeigt.
Dafür wird im vorherigem TAB alles wie in Bild 2 dargestellt - also ohne Quadrat!?

Büssen

hier 2 Bilder - inzwischen gefertigt:

[Blockierte Grafik: https://www2.pic-upload.de/img/34737227/Tab_schlieen_2.png]

[Blockierte Grafik: https://www2.pic-upload.de/img/34737233/Tab_schlieen_3.png]

so sah es sonst aus:

[Blockierte Grafik: https://www2.pic-upload.de/img/34737260/Tab_schlieen_4.png]

Es eilt aber nicht - habe noch andere funktionierende "Portables"

2002Andreas

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

Teste bitte wieder, ist der kompl. 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:2px solid lightgrey!important;
}
#TabsToolbar .tab-close-button:not([selected="true"]) {
  height: 22px !important;
  width:  22px !important;
  background: red !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;
}


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

Alles anzeigen

2002Andreas

Wenn du diesen Code noch unten drunter setzt, sind die kleinen senkrechten Striche neben den Tabs weg.

CSS

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

Büssen

@ Andreas
so viel Entgegenkommen konnte ich gar nicht erwarten.
Deine Lösung klappt - den zusätzlich Anhang werde ich noch später testen.

Vielen Dank noch mal! :klasse:
Nun ist aber Bundesliga angesagt!!
Bis dann!

2002Andreas

Zitat von Büssen

so viel Entgegenkommen konnte ich gar nicht erwarten.

Warum denn nicht...wenn dann helfe ich doch gerne wenn ich es kann

Freut mich wenn du damit zufrieden bist...und viel Spaß dann beim Fussball gucken.

Büssen

Eine Kleinigkeit hätte ich noch für später.
Die Quadrate sind mir noch ein wenig zu scharfkantig. Siehe #6 , unteres Bild
So sehen sie sonst aus.
Hat aber Zeit!

2002Andreas

Bitte wieder testen, ist der kompl. Code incl. dem Zusatz unten:

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

Büssen

[quote='2002Andreas','https://camp-firefox.de/forum/index.ph…298#post1072298']
Bitte wieder testen, ist der kompl. Code incl. dem Zusatz unten:

Habe gleich heute morgen getestet - perfekt! :klasse:

HT-Frogger

Ich habe da gerade Teile aus (anscheinend) meinem Retro-Design gesehen: Da haben die Jungs die Klassen und etwas mehr geändert. Hatte ich bisher noch gar nicht bemerkt, gut das ich hier mitlese... ich habe mich für folgenden Code entschieden:

CSS

/*57er: toolbarbutton.tab-close-button.close-icon image.toolbarbutton-icon -> klappt nicht mehr
 *60er: .tab-close-button.close-icon */
#TabsToolbar .tab-close-button.close-icon {
  height: 22px !important;
  width:  22px !important;
  background: var(--tcb-hgf) !important;
  border: 1px solid !important;
  border-color: var(--tcb-rah) !important;
  border-radius: var(--tcb-rad) !important;
}


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


/* Tab-Schließen-Button bei Mauskontakt (hover)
 */
#TabsToolbar .tab-close-button.close-icon:hover {
  background: var(--tcb-hgf-hov) !important;
}

Alles anzeigen

Damit klappt es bei mir auch ab V 60 (die Variablen natürlich durch Farben ersetzen).

Gruß Harry

PS Info: Der Tab-Schließen-Button war bisher ein kleiner Toolbarbutton der ein Image enthält, ab V60 bzw kurz davor ist es nur noch ein Image, das muß jetzt alleine richtig formatiert werden. Da lag der Hund begraben... Solche Änderungen sind wohl immer mal möglich.