Änderungen am Theme nach dem Update auf die 157.0 rückgängig machen

Skippy

Gestern war mein erster Eindruck nach dem Update so, dass ich dachte, ich müsse am neuen Aussehen meines alten Themes wieder vieles ändern. Jetzt habe ich aber schon eine Weile mit ihm gearbeitet und die kleinen Neuerungen sind doch gar nicht so übel. Zwei Dinge möchte ich allerdings doch wieder anders haben.
1) Wie bekomme ich es hin, dass der Reiter des aktiven Tabs wieder so aussieht wie auf dem nachfolgenden Bild? Also oben leicht abgerundete Ecken und unten offen?

.
2) In der Lesezeichen-Symbolleiste erhalten die ausgewählten Ordner oder Websites bei Mouseover einen etwas dunkleren Hintergrund, der an den Seiten sehr rund ist. Wie kann ich es ändern, dass der Hintergrund zum einen rechts und links leicht breiter wird und dann auch nur noch oben und unten an den Ecken leicht abgerundet ist?
Im Beispiel hier ist oben das aktuelle Aussehen und unten das alte, so wie es wieder werden soll.

Mira_Belle

Bitte testen.

CSS

/* Eckige statt abgerundete Elemente */
   :root {
     --border-radius-xsmall: 0 !important;
     --border-radius-small: 0 !important;
     --border-radius-medium: 0 !important;
     --border-radius-large: 0 !important;
     --border-radius-xlarge: 8px !important;
     --border-radius-circle: 0 !important;
   }

/* ================================================== */
/* Toolbar-Hintergründe                                */
/* ================================================== */

/* Menüleiste */
#toolbar-menubar {
  background: #ffff00 !important;
}

/* Tableiste */
#TabsToolbar-customization-target {
  background: #00ff00 !important;
}

/* Adressleiste */
#nav-bar-customization-target {
  background: #00ffff !important;
}

/* Lesezeichenleiste */
#PersonalToolbar {
  background: #ff00ff !important;
}

/* ================================================== */
/* Feine Linie: Unterkante der Tab-Leiste              */
/* (wird vom aktiven Tab unterbrochen)                 */
/* ================================================== */

/* Linie als Pseudo-Element am unteren Rand der Tab-Leiste */
#TabsToolbar {
  position: relative !important;
  border-bottom: none !important;
}

#TabsToolbar::before {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: gray !important;
  z-index: 0 !important;
}

.tabbrowser-tab[visuallyselected] .tab-background {
  box-shadow: 0 15px 0 0 #00ffff !important;
  margin-bottom: -15px !important;
}
/* ================================================== */
/* Tabs                                                */
/* ================================================== */

/* Basis aller Tabs – kein Rahmen hier! */
.tabbrowser-tab .tab-background {
  background-color: yellow !important;
  outline: none !important;
  border: none !important;
}

/* aktiver Tab mit Rahmen, unten offen */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
  background-color: #00ffff !important;
  border: 1px solid gray !important;
  border-bottom: none !important;
}

/* multiselektierte Tabs */
.tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
  background-color: blue !important;
  border: 1px solid gray !important;
  border-bottom: none !important;
}

/* multiselected hover */
.tabbrowser-tab:not([visuallyselected]):hover .tab-background {
  background-color: lime !important;
}

/* unselektiert hover */
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
  background-color: orange !important;
}

/* ---------------------------------------------------------------------------------- */

Alles anzeigen

Skippy

Danke erst mal für deine css-Codes und sorry, dass ich mich jetzt erst wieder melde.
Gestern und heute habe ich einige Zeit mit den Codes herumprobiert, aber es hat nicht ganz geklappt. Manches wurde zwar so geändert, wie ich es mir gewünscht habe, aber anderes ging dann nur teilweise oder auch gar nicht.

Wahrscheinlich liegt es hieran: Die userChrome.css wurde vor einiger Zeit schon mal ziemlich geändert und da habe ich es mit meinem Halbwissen jetzt nicht hinbekommen, die von dir geschriebenen Codes dort mit einzufügen bzw. auch altes unnützes gegen neues auszutauchen.
Ein Problem war auch mal – zumindest bei meinen Versuchen – dass bei dem verwendeten Theme die hellen blaugrauen Teile Farbverläufe haben, die man beim kurz mal draufgucken kaum bemerkt.

Hier ist mal die komplette alte userChrome.css. Vielleicht kannst du dort mal drüberschauen und gucken, wie ich meine neuen Wünsche dort eintragen muss. Es eilt auch nicht!

CSS

#context_moveTabToNewGroup,
#context_askChat,
#context_askChat + menuseparator,
#context_closeDuplicateTabs {
  display: none !important;
}

#context_reloadTab {
  order: -1 !important;
}

#context_selectAllTabs{
  order: -1 !important;
}


/* Abstände/Höhe der Einträge in Lesezeichen-Popup-Menüs ändern */
#PlacesToolbar menuitem,
#PlacesToolbar menu {
  margin: 0 0 !important;
  min-height: 20px !important;
  padding-top: 1px !important; 
  padding-bottom: 0 !important;
  border-radius: unset !important;
}

/* Abstände/Höhe der Einträge in Lesezeichen-Popup-Menüs ändern */
/* 1px = Abstand Zeile oben und unten, 10px = Abstand linker Rand */
menupopup > menuitem,
menupopup > menu {
  padding-block: 1px !important;
  padding-inline-start: 10px !important;
}

#tab-preview-panel {
  --panel-width: auto !important;
}

/* Entfernt in der Tabzeile rechts die Grafik für -Alle Tabs Auflisten- */
#alltabs-button {
  display: none !important;
  }

/* Höhe der Tabs */
.tabbrowser-tab {
min-height: 36px !important;
max-height: 36px !important;
margin-top: 2px !important;
margin-bottom: 0 !important;
}

/* Rahmen des aktiven Tabs */
.tabbrowser-tab .tab-background[selected="true"] {
border-left: 1px solid #767676 !important;   /* Farbe der festsichtbaren Rahmenlinien, mittelgrau */
border-right: 1px solid #767676 !important;
border-top: 1px solid #767676 !important;
border-bottom: 2px solid #E6F0F8 !important; /* Höhe und Farbe der unteren Rahmenlinie */
box-shadow: none !important;  /* Entfernt den Schatten um den Rahmen */
}

/* Fügt eine schwarze Linie über der Symbolleiste als Trennlinie zum Tabbereich ein. Der aktive Tab hat dann 
Rahmenlinien seitlich und oben, aber nicht unten. Diese Ansicht war mal verschwunden, daher nun ein extra Code */
.tabbrowser-tab[selected] {
   position: relative;
   z-index: 1;
}

/* Tab Inhalt Abstände */
:root {
   --proton-tab-radius: 0px !important;   
   --proton-tab-block-margin: 2px !important;
   --inline-tab-padding: 9px !important;
}

/* Seitliche Abstände der Texte in Tab-Kontextmenüs */
menupopup#tabContextMenu menuitem,
menupopup#tabContextMenu menu {
  padding-left: 10px !important;
  padding-right: 10px !important;
 }
 
menupopup#placesContext menuitem,
menupopup#placesContext menu {
 padding-left: 10px !important;
 padding-right: 10px !important;
 }
 
 
/* Farbverlauf in der Tabzeile von oben nach unten */
#TabsToolbar {
   background: linear-gradient(to bottom, #CDDBE9, #E0EDF5 ) !important;
}

/* Aktiver Tab Hintergrund mit Farbverlauf */
.tabbrowser-tab[visuallyselected="true"]> .tab-stack > .tab-background {
   background: linear-gradient(to bottom, #EDF4FA, #E8F1F9 ) !important;
}

/* Inaktiver Tab hover Hintergrund */
.tabbrowser-tab:not([visuallyselected="true"]):hover  > .tab-stack > .tab-background {
   background: #BEC9D1 !important;    
}

/* Neuer-Tab-Button hover HG, funktioniert nur ohne eigenen HG für den Button */
#TabsToolbar #tabs-newtab-button {
  --toolbarbutton-hover-background: #BEC9D1 !important;  
}

/* Abstand zwischen den Lesezeichen in der Lesezeichen-Symbolleiste */
toolbarbutton.bookmark-item {
  margin-inline: 5px !important;
}

/* Entfernt die farbigen Rahmen bei allen aktiven Eingabefeldern */
input:not([type="file"], [type="image"]):focus-visible,
select:focus-visible,
button:focus-visible,
textarea:focus-visible {
    outline-style: none !important;
    }

/* Entfernt den farbigen Rahmen um das Adressfeld bei neu geöffneten Tab-Seiten */
#urlbar {
    --toolbar-field-focus-border-color: transparent !important;   
}

/* Entfernt den farbigen Rahmen ums vorgeschlagene Auswahlfeld bei der Auswahl, ob eine 
Datei im Net nach dem Anklicken geöffnet oder runtergeladen werden soll, z.B. PDFs */
@-moz-document url(chrome://mozapps/content/downloads/unknownContentType.xhtml){

:root {
  --focus-outline-width: 0 !important;
}
}

/* Farbe des Sterns im Suchfeld bei schon gesetztem Lesezeichen für die aktuelle Seite */
#star-button[starred="true"] {
    fill: #7D7C7C !important;
    }

/* Farbe des Seite-Neu-Laden-Buttons in der Symbolzeile */
#reload-button {
    color: #0558E2 !important;
    }

menuitem#context_selectAllTabs {
  -moz-box-ordinal-group: 1 !important;
}

/* Entfernt den Eintrag "Teilen" aus Tab-Kontextmenü */ 
menuitem[data-l10n-id="tab-context-share-url"] {
display: none !important;
}


#context_moveTabToSplitView.badge-new::after {
  display: none !important;
}

Alles anzeigen

2002Andreas

Zitat von Skippy

anderes ging dann nur teilweise oder auch gar nicht.

Sieht hier so aus:

mit diesem Code:

CSS

/* Eckige statt abgerundete Elemente */
   :root {
     --border-radius-xsmall: 0 !important;
     --border-radius-small: 0 !important;
     --border-radius-medium: 0 !important;
     --border-radius-large: 0 !important;
     --border-radius-xlarge: 8px !important;
     --border-radius-circle: 0 !important;
   }

/* ================================================== */
/* Toolbar-Hintergründe                                */
/* ================================================== */

/* Menüleiste */
#toolbar-menubar {
  background: #ffff00 !important;
}

/* Tableiste */
#TabsToolbar-customization-target {
  background: #00ff00 !important;
}

/* Adressleiste */
#nav-bar-customization-target {
  background: #00ffff !important;
}

/* Lesezeichenleiste */
#PersonalToolbar {
  background: #ff00ff !important;
}

/* ================================================== */
/* Feine Linie: Unterkante der Tab-Leiste              */
/* (wird vom aktiven Tab unterbrochen)                 */
/* ================================================== */

/* Linie als Pseudo-Element am unteren Rand der Tab-Leiste */
#TabsToolbar {
  position: relative !important;
  border-bottom: none !important;
}

#TabsToolbar::before {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: gray !important;
  z-index: 0 !important;
}

.tabbrowser-tab[visuallyselected] .tab-background {
  box-shadow: 0 15px 0 0 #00ffff !important;
  margin-bottom: -15px !important;
}
/* ================================================== */
/* Tabs                                                */
/* ================================================== */

/* Basis aller Tabs – kein Rahmen hier! */
.tabbrowser-tab .tab-background {
  background-color: yellow !important;
  outline: none !important;
  border: none !important;
}

/* aktiver Tab mit Rahmen, unten offen */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
  background-color: #00ffff !important;
  border: 1px solid gray !important;
  border-bottom: none !important;
}

/* multiselektierte Tabs */
.tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
  background-color: blue !important;
  border: 1px solid gray !important;
  border-bottom: none !important;
}

/* multiselected hover */
.tabbrowser-tab:not([visuallyselected]):hover .tab-background {
  background-color: lime !important;
}

/* unselektiert hover */
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
  background-color: orange !important;
}

/* ---------------------------------------------------------------------------------- */


#context_moveTabToNewGroup,
#context_askChat,
#context_askChat + menuseparator,
#context_closeDuplicateTabs {
  display: none !important;
}

#context_reloadTab {
  order: -1 !important;
}

#context_selectAllTabs{
  order: -1 !important;
}


/* Abstände/Höhe der Einträge in Lesezeichen-Popup-Menüs ändern */
#PlacesToolbar menuitem,
#PlacesToolbar menu {
  margin: 0 0 !important;
  min-height: 20px !important;
  padding-top: 1px !important; 
  padding-bottom: 0 !important;
  border-radius: unset !important;
}

/* Abstände/Höhe der Einträge in Lesezeichen-Popup-Menüs ändern */
/* 1px = Abstand Zeile oben und unten, 10px = Abstand linker Rand */
menupopup > menuitem,
menupopup > menu {
  padding-block: 1px !important;
  padding-inline-start: 10px !important;
}

#tab-preview-panel {
  --panel-width: auto !important;
}

/* Entfernt in der Tabzeile rechts die Grafik für -Alle Tabs Auflisten- */
#alltabs-button {
  display: none !important;
  }

/* Höhe der Tabs */
.tabbrowser-tab {
min-height: 36px !important;
max-height: 36px !important;
margin-top: 2px !important;
margin-bottom: 0 !important;
}

/* Rahmen des aktiven Tabs */
.tabbrowser-tab .tab-background[selected="true"] {
border-left: 1px solid #767676 !important;   /* Farbe der festsichtbaren Rahmenlinien, mittelgrau */
border-right: 1px solid #767676 !important;
border-top: 1px solid #767676 !important;
border-bottom: 2px solid #E6F0F8 !important; /* Höhe und Farbe der unteren Rahmenlinie */
box-shadow: none !important;  /* Entfernt den Schatten um den Rahmen */
}

/* Fügt eine schwarze Linie über der Symbolleiste als Trennlinie zum Tabbereich ein. Der aktive Tab hat dann 
Rahmenlinien seitlich und oben, aber nicht unten. Diese Ansicht war mal verschwunden, daher nun ein extra Code */
.tabbrowser-tab[selected] {
   position: relative;
   z-index: 1;
}

/* Tab Inhalt Abstände */
:root {
   --proton-tab-radius: 0px !important;   
   --proton-tab-block-margin: 2px !important;
   --inline-tab-padding: 9px !important;
}

/* Seitliche Abstände der Texte in Tab-Kontextmenüs */
menupopup#tabContextMenu menuitem,
menupopup#tabContextMenu menu {
  padding-left: 10px !important;
  padding-right: 10px !important;
 }
 
menupopup#placesContext menuitem,
menupopup#placesContext menu {
 padding-left: 10px !important;
 padding-right: 10px !important;
 }
 
 
/* Farbverlauf in der Tabzeile von oben nach unten */
#TabsToolbar {
   background: linear-gradient(to bottom, #CDDBE9, #E0EDF5 ) !important;
}

/* Aktiver Tab Hintergrund mit Farbverlauf */
.tabbrowser-tab[visuallyselected="true"]> .tab-stack > .tab-background {
   background: linear-gradient(to bottom, #EDF4FA, #E8F1F9 ) !important;
}

/* Inaktiver Tab hover Hintergrund */
.tabbrowser-tab:not([visuallyselected="true"]):hover  > .tab-stack > .tab-background {
   background: #BEC9D1 !important;    
}

/* Neuer-Tab-Button hover HG, funktioniert nur ohne eigenen HG für den Button */
#TabsToolbar #tabs-newtab-button {
  --toolbarbutton-hover-background: #BEC9D1 !important;  
}

/* Abstand zwischen den Lesezeichen in der Lesezeichen-Symbolleiste */
toolbarbutton.bookmark-item {
  margin-inline: 5px !important;
}

/* Entfernt die farbigen Rahmen bei allen aktiven Eingabefeldern */
input:not([type="file"], [type="image"]):focus-visible,
select:focus-visible,
button:focus-visible,
textarea:focus-visible {
    outline-style: none !important;
    }

/* Entfernt den farbigen Rahmen um das Adressfeld bei neu geöffneten Tab-Seiten */
#urlbar {
    --toolbar-field-focus-border-color: transparent !important;   
}

/* Entfernt den farbigen Rahmen ums vorgeschlagene Auswahlfeld bei der Auswahl, ob eine 
Datei im Net nach dem Anklicken geöffnet oder runtergeladen werden soll, z.B. PDFs */
@-moz-document url(chrome://mozapps/content/downloads/unknownContentType.xhtml){

:root {
  --focus-outline-width: 0 !important;
}
}

/* Farbe des Sterns im Suchfeld bei schon gesetztem Lesezeichen für die aktuelle Seite */
#star-button[starred="true"] {
    fill: #7D7C7C !important;
    }

/* Farbe des Seite-Neu-Laden-Buttons in der Symbolzeile */
#reload-button {
    color: #0558E2 !important;
    }

menuitem#context_selectAllTabs {
  -moz-box-ordinal-group: 1 !important;
}

/* Entfernt den Eintrag "Teilen" aus Tab-Kontextmenü */ 
menuitem[data-l10n-id="tab-context-share-url"] {
display: none !important;
}


#context_moveTabToSplitView.badge-new::after {
  display: none !important;
}

Alles anzeigen

Der obere Teil ist neu.

Änderungen am Theme nach dem Update auf die 157.0 rückgängig machen

Ähnliche Themen

Mozilla veröffentlicht Firefox 157 mit Nova-Design

Farbe der Tabs je nach Status definieren

Das Security-Märchen

2026-Update: Aktualisierung auf WoltLab Suite 6.2

Exklusiv: So sieht das neue „Nova”-Design von Firefox aus