Keine Grössenänderung der Adressleiste und Rahmen bei Klick*

Arsen

Hallo,

leider funktioniert der CSS Code nicht mehr, der verhinderte, dass sich an der Grösse von Adressleiste

samt Rahmen etwas ändert wenn man hineinklickt.

Diesen Code hab ich bisher dazu verwendet:

CSS

/*keine Größenänderung der Adressleiste und Rahmen bei Klick*/
#urlbar {
--toolbar-field-focus-border-color: #0F7E8F !important;
}

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

#urlbar > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding-block: 0 !important;
padding-inline: 0 !important;

border-radius: 4px !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding-block: 0 !important;
padding-inline: 0 !important;
border: 2px solid #0F7E8F !important;
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

ev. kann man da was anpassen

2002Andreas

Zitat von Arsen

kann man da was anpassen

Ich weiß nicht ob ich dich richtig verstanden habe.

Teste bitte mal diesen kompl. Code:

CSS

#urlbar[open] > #urlbar-background {
  margin-top: 5px !important;
}

/*keine Größenänderung der Adressleiste und Rahmen bei Klick*/
#urlbar {
--toolbar-field-focus-border-color: #0F7E8F !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

Arsen

Danke erstmal,

also wenn ich ins Adressfeld reinklicke ist das gut so.

wenn ich was reinschreibe siehts komisch aus.

Horstmann

Zitat von Arsen

ev. kann man da was anpassen

Du könntest auch zunächst mal probieren, #urlbar-input-container mit .urlbar-input-container zu ersetzen.

Ein möglicher aktueller Code dazu, für Fx133, ist auch bei Aris zu finden.

Zitat von Arsen

wenn ich was reinschreibe siehts komisch aus.

Wohl wegen dem margin-top für [open] .

2002Andreas

Zitat von Arsen

wenn ich was reinschreibe siehts komisch aus.

Sieht hier so damit aus:

Nutzt du noch weitere Codes für die Urlbar?

Arsen

Zitat von 2002Andreas

Nutzt du noch weitere Codes für die Urlbar?

ja, umfärben und so. das müsste das hier sein.

CSS

/*Adress und Suchfeld farblich einstellen*/
#urlbar ::selection,
#searchbar ::selection {
   color: white !important;
   background: #083469 !important;
}

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

Alles anzeigen

und hier ist die komplette userChrome

CSS

/*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;
}

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

#PopupAutoCompleteRichResult{
  display: none !important;
}


/*Mehrzeilige Lesezeichen-Symbolleiste*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
     #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;
    }
	

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

/*Höhe der Tabs*/
.tabbrowser-tab {
   min-height: 32px !important;
   max-height: 32px !important;
   box-shadow: none !important; 
}

/*Anpassung der Schriftgrösse Menüleiste */
#main-menubar > menu {
   font-size: 14px !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;
}

/*Adress und Suchfeld farblich einstellen*/
#urlbar ::selection,
#searchbar ::selection {
   color: white !important;
   background: #083469 !important;
}

#urlbar[focused],
#searchbar:focus-within {
   --toolbar-field-focus-border-color: transparent !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !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);}
}

/*keine Größenänderung der Adressleiste und Rahmen bei Klick*/
#urlbar {
--toolbar-field-focus-border-color: #0F7E8F !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

ist die komplette userChrome

Ich denke, es liegt an diesem Teil von deinem Code

CSS

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

Ich habe mal die erste Zeile entfernt, und oben noch etwas hinzugefügt.

Teste bitte wenn du magst:

CSS

#urlbar[open] > #urlbar-background {
  margin: 5px !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;
}

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

#PopupAutoCompleteRichResult{
  display: none !important;
}


/*Mehrzeilige Lesezeichen-Symbolleiste*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
     #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;
    }
	

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

/*Höhe der Tabs*/
.tabbrowser-tab {
   min-height: 32px !important;
   max-height: 32px !important;
   box-shadow: none !important; 
}

/*Anpassung der Schriftgrösse Menüleiste */
#main-menubar > menu {
   font-size: 14px !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;
}

/*Adress und Suchfeld farblich einstellen*/
#urlbar ::selection,
#searchbar ::selection {
   color: white !important;
   background: #083469 !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);}
}

/*keine Größenänderung der Adressleiste und Rahmen bei Klick*/
#urlbar {
--toolbar-field-focus-border-color: #0F7E8F !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

Dharkness

Zitat von 2002Andreas

Teste bitte wenn du magst:

Kann es sein, das Du für den Eintrag ab Zeile 29 -, bis denke ich, Zeile 62 die schließende Geschweifte Klammer nicht gesetzt hast?

2002Andreas

Zitat von Dharkness

die schließende Geschweifte Klammer nicht gesetzt hast?

Hallo Ralf.

Das stimmt, ich habe nicht darauf geachtet, und einfach seinen Code aus Beitrag Nr. 6 übernommen.

Man kann Zeile 30 aber auch kompl. entfernen.

Arsen

Naja, soweit ist das schon gut, aber jetzt passt der Rahmen der Adressleiste farblich nicht mehr.

Sollte eigentlich #083469 sein.

Muss der Rahmen eigentlich verschwinden wenn man was in die Urlbar tippt?

Wenn ich was in die Suchleiste tippe bleibt der Rahmen auch.

Dharkness

Zitat von 2002Andreas

Man kann Zeile 30 aber auch kompl. entfernen.

Richtig, so kann es natürlich auch gelöst werden.

2002Andreas

Zitat von Arsen

Muss der Rahmen eigentlich verschwinden wenn man was in die Urlbar tippt?

Der obere Teil vom Code:

CSS

#urlbar[open] > #urlbar-background {
   margin: 5px !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
}

Die Rahmenfarbe ist dort enthalten

Ansonsten, ich habe deinen kompl. Code mal etwas sortiert. Teste also bitte mal incl. der Änderung:

CSS

#urlbar[open] > #urlbar-background {
   margin: 5px !important;
   border: 2px solid #083469 !important;
   border-radius: 2px !important;
}

/*keine Größenänderung der Adressleiste und Rahmen bei Klick*/
#urlbar {
   --toolbar-field-focus-border-color: #0F7E8F !important;
}

/*Adress und Suchfeld farblich einstellen*/
#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;
}
	

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

/*Höhe der Tabs*/
.tabbrowser-tab {
   min-height: 32px !important;
   max-height: 32px !important;
   box-shadow: none !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;
}

/* 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);}
}

Alles anzeigen

Arsen

Zitat von 2002Andreas

Ansonsten, ich habe deinen kompl. Code mal etwas sortiert. Teste also bitte mal incl. der Änderung

Vielen Dank dafür. Es wird auch immer besser!

Bei Klick sieht der Rahmen jetzt so aus, ich glaube das ist die original Farbe des Fx darktheme,

kann die aber mit nem Colorpicker nicht schnappen.

tippe ich was ein, wird umgefärbt in #083469

Damit kann ich auf jeden Fall zufrieden sein. Ich will dich ja nicht überstrapazieren.

2002Andreas

Zitat von Arsen

Ich will dich ja nicht überstrapazieren.

Alles ist gut

Nur ein weiterer Versuch.

Füg das bitte auch mal ein, und teste.

CSS

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

Arsen

Zitat von 2002Andreas

Nur ein weiterer Versuch

Und Volltreffer!

Jetzt siehts wieder aus wie früher, ich denke vor Update 133.

ein virtuelles Bier ausgeb....

2002Andreas

Zitat von Arsen

Und Volltreffer!

Zitat von Arsen

ein virtuelles Bier ausgeb...

Danke

Ansonsten hatte ich auch noch mal den kompl. Code etwas angepasst.

Wenn du also trotzdem testen magst:

CSS

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

/*Adress und Suchfeld farblich einstellen*/
#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;
}
	

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

/*Höhe der Tabs*/
.tabbrowser-tab {
   min-height: 32px !important;
   max-height: 32px !important;
   box-shadow: none !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;
}

/* 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);}
}

Alles anzeigen

Arsen

Ja geil, so stelle ich mir einen augefreundlichen Browser vor.

Auch unter Linux, zum test mal Kubuntu genommen,

wird der Code normal verarbeitet. Na warum auch nicht.

2002Andreas

Zitat von Arsen

so stelle ich mir einen augefreundlichen Browser vor.

Freut mich wenn du zufrieden bist, hat ja etwas gedauert..aber egal wenn es jetzt passt

Keine Grössenänderung der Adressleiste und Rahmen bei Klick*

Ähnliche Themen

userChrome.js Scripte für den Fuchs (Diskussion)

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

urlbar im Fx128

Script "Vertical Add-on Bar"--> seit FF 126 Leiste leer

Suchleiste

Fenster: Rahmenfarbe einstellen?