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.

Arsen

Hallo,

leider funktioniert bei mir der CSS Code zum Einstellen Rahmenfarbe der Suchleiste nicht mehr. der sieht wie folgt aus:

CSS

/*Adress- und Suchleiste - Rahmen farblich einstellen*/
#urlbar-input::selection {
  color: white !important;
  background: #083469 !important;
}
#urlbar {
	--toolbar-field-border-color-focus: #083469 !important;
}
#urlbar-input::selection {
  color: white !important;
  background: #083469 !important;
}
#searchbar-new > div:focus-within {
    outline:2px solid #083469 !important;
}

Alles anzeigen

Die Adresszeile sieht normal aus, die Suchleiste nicht.

Ev. kann man da etwas anpassen.

2002Andreas

Zitat von Arsen

zum Einstellen Rahmenfarbe der Suchleiste

Teste bitte mal:

CSS

#searchbar-new {
    border:2px solid #083469 !important;
    border-radius: 20px !important;
}

Arsen

Ich hätte dazusagen sollen, dass ich es lieber eckicher mag als rund. Mit diesem CSS klappt das super:

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: 0 !important;
  --border-radius-circle: 0 !important;
}

Aber egal, jetzt sieht es so aus (den Radius hab ich entfernt):

Ohne dass ich in die Leiste klicke:

Wenn ich die anklicke:

Der Rahmen sollte erst erscheinen, wenn ich die Suchleiste anklicke.

2002Andreas

Zitat von Arsen

wenn ich die Suchleiste anklicke.

Teste bitte:

CSS

#searchbar-new > div:focus-within {
  outline: 2px solid red !important;
  border: none !important;
}

Farbe wenn dann anpassen.

Arsen

Danke, ich hab Rot gelassen, da sieht man das Problem besser. Für mich sind da zwei Rahmen zu sehen. Leider weiss ich nicht , wie ich das gezoomt abfotografieren kann. Meine Augen sind auch nicht mehr die Besten aber mit dem roten CSS sieht mans.

2002Andreas

Zitat von Arsen

Für mich sind da zwei Rahmen zu sehen.

Teste bitte:

CSS

#searchbar-new {
   --toolbar-field-border-color-focus: none !important;
}

#searchbar-new > div:focus-within {
  outline: 2px solid red !important;
}

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