Rahmen um Suchleiste - CSS zum Färben geht nicht mehr

Arsen

Hallo,

mit folgendem CSS-Code habe ich meine Adress- und Suchleiste farblich eingestellt. Leider wirkt sich , seit FF 150, der Code nur noch auf die Adresszeile aus. Der Rahmen um die Suchleiste hat die Farbe des FF Dark Theme. Gibt es da eine Lösung?

CSS

/*Adress- und Suchleiste - Rahmen farblich einstellen*/
#urlbar[open] > .urlbar-background {
   margin-top: 4px !important;
   margin-bottom: 4px !important;
   margin-left: 5px !important;
   margin-right: 5px !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
   box-shadow: none !important;
}

#urlbar[focused] > .urlbar-background{
   --toolbar-field-focus-border-color: transparent !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
   box-shadow: none !important;
}

#urlbar ::selection,
#searchbar ::selection {
   color: white !important;
   background: #083469 !important;
}

.urlbar-background {
   border-radius: 4px !important;;
}

#urlbar[breakout][breakout-extend][breakout-extend-animate] > .urlbar-background {
   animation-name: none !important;
}

#urlbar[breakout][breakout-extend] > .urlbar-background {
   box-shadow: none !important;
}

Alles anzeigen

2002Andreas

Zitat von Arsen

seit FF 150

Extra die Version 149 mal installiert mit neuem Profil.

Mit deinem Code sieht das hier dann so aus:

An der Seachbar ändert sich damit gar nichts

Auch in ESR 140 ist das so.

Hast du für die Searchbar noch einen anderen Code?

Arsen

Ich glaube nicht. Auf jeden Fall waren waren bei mir beide Leisten bis FF 149 umgefärbt. Ab 150 nur noch die Adressleiste.

Hier ist der gesamte CSS:

CSS

/*Adress- und Suchleiste - Rahmen farblich einstellen*/
#urlbar[open] > .urlbar-background {
   margin-top: 4px !important;
   margin-bottom: 4px !important;
   margin-left: 5px !important;
   margin-right: 5px !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
   box-shadow: none !important;
}

#urlbar[focused] > .urlbar-background{
   --toolbar-field-focus-border-color: transparent !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
   box-shadow: none !important;
}

#urlbar ::selection,
#searchbar ::selection {
   color: white !important;
   background: #083469 !important;
}

.urlbar-background {
   border-radius: 4px !important;;
}

#urlbar[breakout][breakout-extend][breakout-extend-animate] > .urlbar-background {
   animation-name: none !important;
}

#urlbar[breakout][breakout-extend] > .urlbar-background {
   box-shadow: none !important;
}

/*Popup-Menü wird ausgeblendet wenn Suche über Adressleiste erfolgt*/
.urlbarView {
   display: none !important;
}

#PopupAutoCompleteRichResult {
   display: none !important;
}

#searchbar:focus-within {
   --toolbar-field-focus-border-color: transparent !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
}

/*Abstände der Einträge in Menüs wieder schmaler*/
menupopup > menuitem,
menupopup > menu {
   padding-block: 1px !important;
   padding-inline-start: 14px !important;
   font-size: 13px !important;
}

/*Anpassung der Schriftgrösse Menüleiste */
#main-menubar > menu {
   font-size: 14px !important;
}

/*Mehrzeilige Lesezeichen-Symbolleiste*/
#PersonalToolbar {
   max-height: calc(19px * 3) !important;
}

#personal-bookmarks,
#PlacesToolbar,
#PlacesToolbar > hbox {
   display: block !important;
}

#PersonalToolbar toolbarbutton {
   min-height: 19px !important;
   max-height: 19px !important;
}

#PlacesToolbarItems {
   max-height: 57px!important;
   display: flex!important;
   flex-wrap: wrap!important;
   overflow-x: visible!important;
   overflow-y: auto!important;
}

#PlacesToolbar,
#PersonalToolbar > scrollbar {
   -moz-window-dragging: no-drag !important;
}

#PlacesToolbar #PlacesChevron {
   display: none !important;
}


@media not (-moz-bool-pref: 'sidebar.verticalTabs') {
  .tabbrowser-tab[fadein]:not([pinned]) {
  	flex: 0 1 auto !important;
    max-width: 150px !important;

    tab-group[collapsed] > & {
      min-width: 0 !important;
      max-width: 0 !important;
    }
  }
}

/*tabbreite an tabtext anpassen*/
.tabbrowser-tab {
  &:not([pinned]) {
   flex: 0 0 auto !important;
   max-width: 250px !important;
  }
}

.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  padding-left: 5px !important;
  margin-left: 1px !important;
  width: unset !important;
}

.tab-close-button {
  display: flex !important;
}

.tab-close-button {
  display: flex !important;
}


/*Lautsprechersymbol auf Tab größer und blau*/
.tab-icon-overlay {
   fill: #083469 !important;
   transform: scale(1.3) !important;
}

/*Tab schließen Button HG bei hover (background) und  x (fill) je nach Farbe*/
.tab-close-button[fadein]:hover {
   fill: white !important;
   background: #70100c !important;
}

/*Keine Einblendungen bei Hover über Tab*/
#tab-preview-panel {
   display: none !important;
}

/*Eckige Tabs ohne HG Schatten*/
.tab-background {
   box-shadow: none !important;
   border-radius: 2px !important;
}

/*Aktiver Tab HG Farbeinstellung*/
.tabbrowser-tab[visuallyselected] .tab-background {
   background: #083469 !important;
}

/*Neuer Tab Button ausblenden*/
#TabsToolbar #tabs-newtab-button {
  display: none !important;
}

/*Neuer Tab ausblenden*/
.tabbrowser-tab[label="Neuer Tab"] {
  display: none !important;
}

.tabbrowser-tab[label="Neuer Tab"] {
  display: none !important;
}

/* Visuelle Anzeige des Seitenladezustands in der Kopfzeile der Tabs*/
/* progress-bar page loading in the tab header */
.tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
   opacity: 0;
   background-color: #2A970A;
   height: 3px;
}

.tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
   opacity: 1;
   transform-origin: left center;
   animation: 2s ease-in-out scale;
}

.tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
   transition: opacity 2s ease-out;
}

@keyframes scale {
   0% {transform: scaleX(0);}
   100% {transform: scaleX(1);}
}

#TabsToolbar {
    position: absolute;
    display: block;
    bottom: 0;
    width: 100vw;
}

#navigator-toolbox {
    position: relative;
    padding-bottom: calc( var(--tab-min-height) + 8px );
}


/*...................Ab hier nur Privater Modus...................*/

/* Das lila Icon für privaten Modus oben rechts eingefügt */
#main-window[privatebrowsingmode=temporary] #PanelUI-button::before {
    margin-left: 0 !important;
    margin-right: 0 !important;
    content: '' !important;
    display: block !important;
    width: 20px !important;
    height: 30px !important;
    background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
    background-repeat: no-repeat !important;
    background-position: 0 8px !important;
    background-size: 25px 17px !important;
}

/* Der neue zusätzliche Eintrag: Privater Modus unter dem Tab entfernt */
.private-browsing-indicator-with-label {
    display: none !important;
}

/* Tabbreite tab max-width */
.tabbrowser-tab[fadein]:not([pinned]) {
   max-width: 150px !important;
   overflow: hidden !important;

Alles anzeigen

2002Andreas

Zitat von Arsen

Hier ist der gesamte CSS:

Ändere bitte mal Zeile 46 zu:

#searchbar-new:focus-within {

und teste es damit.

Arsen

Ja, hab ich gemacht und Danke das funktionert bestens.

2002Andreas

Zitat von Arsen

das funktionert bestens.

freut mich

War gern geschehen.

Rahmen um Suchleiste - CSS zum Färben geht nicht mehr

Ähnliche Themen

Alter Zustand der Searchbar mit Anpassungen

Vollbild-Fenstermodus

urlbar im Fx 145.0 (64-Bit)

Diskussion über neues Unterforum nur für Skripte