Riesige Toolbar Buttons verkleinern

Thunderstruck

Hallo zusammen,

meine Toolbar Buttons sind momentan schrecklich groß und unterschiedlich groß:

Ich verwende um die Buttons mit sichtbaren Rand zu bekommen in der userChrome.css:

CSS

toolbarbutton {
background: -moz-linear-gradient(bottom,#dddddd,#ffffff) !important;
border: 1px solid grey !important;
margin: 1px 1px !important;
border-radius: 5px !important;
}

Was muss ich tun um die buttons kleiner zu bekommen und gleich groß zu bekommen?

Schon mal vielen Dank im Voraus.

Beste Grüße

Thunderstruck

Sören Hentzschel

Hallo,

das ist definitiv nicht der vollständige Code, der bei dir wirksam ist. Bitte zeige den vollständigen Code.

Thunderstruck

Stimmt!

Hier zur Sicherheit komplette css:

CSS

#TabsToolbar {
position: absolute;
display: block;
bottom: 0;
width: 100vw;
background-clip: padding-box;
color: var(--toolbar-color);
} 
#tabbrowser-tabs {
width: 100vw;
} 
#navigator-toolbox {
position: relative;
padding-bottom: calc( var(--tab-min-height) + 8px );
} 
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #titlebar {
height: 36px;
} 
.titlebar-buttonbox-container { 
position: fixed;
right: 0;
visibility: visible;
display: block;
}
#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar #window-controls {
display: none;
}


/* Do not display close button in tabs */
    
    #tabbrowser-tabs .tabbrowser-tab .tab-close-button {
    display:none !important;
    }


/* minimale tab breite ganz klein stellen dass die scrollpfeile verschwinden */
.tabbrowser-tab:not([pinned]) {
min-width: 4px !important;
}



/* This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to override default settings.
 */


/* Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */


/* Lesezeichen Sidebar - Ordnericon stehend gelb */
@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xhtml"), 
url("chrome://browser/content/history/history-panel.xhtml"),
url("chrome://browser/content/places/bookmarksSidebar.xul") {
    treechildren::-moz-tree-image(container) {
fill:orange !important;}
}


/* Lesezeichen verwalten - Ordnericon stehend gelb */
@-moz-document url-prefix("chrome://browser/content/places/places.xul") {
    treechildren::-moz-tree-image(container) {
fill:orange !important;}
}


/* Lesezeichen - Ordnericon gelb */
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
    .bookmark-item[container="true"] {
fill:orange !important;}
}

toolbarbutton {
    background: -moz-linear-gradient(bottom,#dddddd,#ffffff) !important;
    border: 1px solid grey !important;
    margin: 1px 1px !important;
    border-radius: 5px !important;
    }

/*Abgerundete Tabs und farben der Tabs einstellen und blaue Leiste oben auf dem Tab ausschalten*/

/*Tableisten Abstand nach unten*/
#TabsToolbar {
margin-bottom:1px!important;
      }

/*Aktiver Tab mit hellblauen Hintergrund, und schwarzem Rahmen*/
.tabbrowser-tab:not([selected="true"]){
  background:#D8D8D8!important; 
  border-radius: 7px !important; 
  border:1px solid black!important;
      }

/*Inaktiver Tab mit orangem Hintergrund, und schwarzem Rahmen*/
.tab-background[selected="true"] {
  background:#F4FA58!important; 
  border-radius: 7px !important; 
  border:1px solid black!important;
      }

/*Tabschattierung im Hintergrund entfernt*/
.tabbrowser-tab::after, .tabbrowser-tab::before {
    margin-inline-start: 0px!important;
    border-left: 0px solid!important;
    border-image:none!important;
    border-image-slice: 0!important;
    width: 0px!important;
    box-sizing: border-box;
    opacity: 0!important;
      }
      
/*Farbige Leiste oben im aktiven Tab entfernt*/
.tab-line { 
    display:none!important
      }

Alles anzeigen

Beste Grüße

2002Andreas

Zitat von Thunderstruck

kleiner zu bekommen und gleich groß zu bekommen?

So sieht das hier damit aus:

Ich habe deinen Code aber mal angepasst, es waren Fehler drin bezüglich der farbigen Icons.

CSS

#TabsToolbar {
    position: absolute;
    display: block;
    bottom: 0;
    width: 100vw;
    background-clip: padding-box;
    color: var(--toolbar-color);
      } 

#tabbrowser-tabs {
    width: 100vw;
      } 

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

#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #titlebar {
    height: 36px;
      } 

.titlebar-buttonbox-container { 
    position: fixed;
    right: 0;
    visibility: visible;
    display: block;
      }

#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar #window-controls {
    display: none;
      }


/* Do not display close button in tabs */
    
#tabbrowser-tabs .tabbrowser-tab .tab-close-button {
    display:none !important;
      }


/* minimale tab breite ganz klein stellen dass die scrollpfeile verschwinden */
.tabbrowser-tab:not([pinned]) {
    min-width: 4px !important;
      }


/* Lesezeichen Sidebar - Ordnericon stehend gelb */
@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xhtml"), 
url("chrome://browser/content/history/history-panel.xhtml"),
url("chrome://browser/content/places/bookmarksSidebar.xhtml") {
    treechildren::-moz-tree-image(container) {
    fill:orange !important;}
      }


/* Lesezeichen verwalten - Ordnericon stehend gelb */
@-moz-document url-prefix("chrome://browser/content/places/places.xhtml") {
    treechildren::-moz-tree-image(container) {
    fill:orange !important;}
      }


/* Lesezeichen - Ordnericon gelb */
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
.bookmark-item[container="true"] {
    fill:orange !important;}
      }

toolbarbutton {
    background: -moz-linear-gradient(bottom,#dddddd,#ffffff) !important;
    border: 1px solid grey !important;
    margin: 1px 1px !important;
    border-radius: 5px !important;
      }

/*Abgerundete Tabs und farben der Tabs einstellen und blaue Leiste oben auf dem Tab ausschalten*/

/*Tableisten Abstand nach unten*/
#TabsToolbar {
   margin-bottom:1px!important;
      }

/*Aktiver Tab mit hellblauen Hintergrund, und schwarzem Rahmen*/
.tabbrowser-tab:not([selected="true"]){
  background:#D8D8D8!important; 
  border-radius: 7px !important; 
  border:1px solid black!important;
      }

/*Inaktiver Tab mit orangem Hintergrund, und schwarzem Rahmen*/
.tab-background[selected="true"] {
  background:#F4FA58!important; 
  border-radius: 7px !important; 
  border:1px solid black!important;
      }

/*Tabschattierung im Hintergrund entfernt*/
.tabbrowser-tab::after, .tabbrowser-tab::before {
    margin-inline-start: 0px!important;
    border-left: 0px solid!important;
    border-image:none!important;
    border-image-slice: 0!important;
    width: 0px!important;
    box-sizing: border-box;
    opacity: 0!important;
      }
      
/*Farbige Leiste oben im aktiven Tab entfernt*/
.tab-line { 
    display:none!important
      }

Alles anzeigen

Thunderstruck

Hallo,

vielen Dank für die Anpassung.

Wenn ich es richtig sehe hast Du nur .xul auf .xhtml geändert?

Ja, die Ansicht wie Du sie hast wäre genau das, was ich will.

Bei mir sieht es aber immer noch so aus:

Irgendwo muss bei mir noch was faul sein.

Die nicht aktiven Tabs sind auch höher als die aktiven und der "+" Button --> das möchte ich auch weg haben, sodass alle Tabs immer gleich groß sind.

Vielleicht hast Du ja noch eine Idee?

Beste Grüße

Thunderstruck

2002Andreas

Zitat von Thunderstruck

Die nicht aktiven Tabs sind auch höher als die aktiven und der "+" Button --> das möchte ich auch weg haben

CSS

#TabsToolbar {
    position: absolute;
    display: block;
    bottom: 0;
    width: 100vw;
    background-clip: padding-box;
    color: var(--toolbar-color);
      } 

#tabbrowser-tabs {
    width: 100vw;
      } 

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

#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #titlebar {
    height: 36px;
      } 

.titlebar-buttonbox-container { 
    position: fixed;
    right: 0;
    visibility: visible;
    display: block;
      }

#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar #window-controls {
    display: none;
      }


/* Do not display close button in tabs */
    
#tabbrowser-tabs .tabbrowser-tab .tab-close-button {
    display:none !important;
      }


/* minimale tab breite ganz klein stellen dass die scrollpfeile verschwinden */
.tabbrowser-tab:not([pinned]) {
    min-width: 4px !important;
      }


/* Lesezeichen Sidebar - Ordnericon stehend gelb */
@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xhtml"), 
url("chrome://browser/content/history/history-panel.xhtml"),
url("chrome://browser/content/places/bookmarksSidebar.xhtml") {
    treechildren::-moz-tree-image(container) {
    fill:orange !important;}
      }


/* Lesezeichen verwalten - Ordnericon stehend gelb */
@-moz-document url-prefix("chrome://browser/content/places/places.xhtml") {
    treechildren::-moz-tree-image(container) {
    fill:orange !important;}
      }


/* Lesezeichen - Ordnericon gelb */
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
.bookmark-item[container="true"] {
    fill:orange !important;}
      }

toolbarbutton {
    background: -moz-linear-gradient(bottom,#dddddd,#ffffff) !important;
    border: 1px solid grey !important;
    margin: 1px 1px !important;
    border-radius: 5px !important;
      }

/*Abgerundete Tabs und farben der Tabs einstellen und blaue Leiste oben auf dem Tab ausschalten*/

/*Tableisten Abstand nach unten*/
#TabsToolbar {
   margin-bottom:1px!important;
      }

/*Inaktiver Tab mit hellblauen Hintergrund, und schwarzem Rahmen*/
.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
  background:#D8D8D8!important; 
  border-radius: 7px !important; 
  border:1px solid black!important;
      }

/*Aktiver Tab mit orangem Hintergrund, und schwarzem Rahmen*/
.tab-background[selected="true"] {
  background:#F4FA58!important; 
  border-radius: 7px !important; 
  border:1px solid black!important;
      }

/*Tabschattierung im Hintergrund entfernt*/
.tabbrowser-tab::after, .tabbrowser-tab::before {
    margin-inline-start: 0px!important;
    border-left: 0px solid!important;
    border-image:none!important;
    border-image-slice: 0!important;
    width: 0px!important;
    box-sizing: border-box;
    opacity: 0!important;
      }
      
/*Farbige Leiste oben im aktiven Tab entfernt*/
.tab-line { 
    display:none!important
      }

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

Alles anzeigen

Zitat von Thunderstruck

nur .xul auf .xhtml geändert?

Ja.

Und so ohne Titelleiste:

.DeJaVu

Zitat

treechildren::-moz-tree-image(container)

Gleich 2 Mal.

Thunderstruck

Danke Andreas!

Die Tabs sind nun alle gleich groß, SUPER!

Leider sind aber die Buttons immer noch ungleich groß:

Ich sehe gerade, es sind nur die Buttons, die Add-Ons betreffen kleiner. Die Standard-Buttons, und Skript-Aufrufe-Buttons sind größer.

Die Titelleiste habe ich meistens aus, ja.

@ DeJaVu: Was meinst Du mit treechildren gleich 2 mal? Muss ich das ändern?

Beste Grüße

Thunderstruck

2002Andreas

Zitat von Thunderstruck

meine Toolbar Buttons sind momentan schrecklich groß

Hast du diese Möglichkeit auch?

Wenn nicht, dann stell bitte die about:config den Wert:

browser.compactmode.show

mal auf true.

Thunderstruck

Danke Andreas,

ich habe browser.compactmode.show auf true gesetzt und "Kompakt" gewählt, das gefällt mir schon mal viel besser.

Leider sind aber die Buttons immer noch ungleich groß.

Ach so, und den "+" Button wollte ich nicht weg haben sondern ich wollte weg haben dass er größer ist als der aktive Tab.

Deshalb habe ich

CSS

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

wieder gelöscht.

Sieht nun schon viel besser aus:

Beste Grüße

Thunder

2002Andreas

Zitat von Thunderstruck

die Buttons immer noch ungleich groß.

Teste bitte mal:

CSS

#TabsToolbar {
    position: absolute;
    display: block;
    bottom: 0;
    width: 100vw;
    background-clip: padding-box;
    color: var(--toolbar-color);
      } 

#tabbrowser-tabs {
    width: 100vw;
      } 

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

#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #titlebar {
    height: 36px;
      } 

.titlebar-buttonbox-container { 
    position: fixed;
    right: 0;
    visibility: visible;
    display: block;
      }

#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar #window-controls {
    display: none;
      }


/* Do not display close button in tabs */
    
#tabbrowser-tabs .tabbrowser-tab .tab-close-button {
    display:none !important;
      }


/* minimale tab breite ganz klein stellen dass die scrollpfeile verschwinden */
.tabbrowser-tab:not([pinned]) {
    min-width: 4px !important;
      }


/* Lesezeichen Sidebar - Ordnericon stehend gelb */
@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xhtml"), 
url("chrome://browser/content/history/history-panel.xhtml"),
url("chrome://browser/content/places/bookmarksSidebar.xhtml") {
    treechildren::-moz-tree-image(container) {
    fill:orange !important;}
      }


/* Lesezeichen verwalten - Ordnericon stehend gelb */
@-moz-document url-prefix("chrome://browser/content/places/places.xhtml") {
    treechildren::-moz-tree-image(container) {
    fill:orange !important;}
      }


/* Lesezeichen - Ordnericon gelb */
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
.bookmark-item[container="true"] {
    fill:orange !important;}
      }

.toolbarbutton-badge-stack {
    width: 30px !important;
    height: 30px !important;
    padding-top: 8px !important;
      }

toolbarbutton {
    background: -moz-linear-gradient(bottom,#dddddd,#ffffff) !important;
    border: 1px solid grey !important;
    margin: 1px 1px !important;
    border-radius: 5px !important;
      }

/*Abgerundete Tabs und farben der Tabs einstellen und blaue Leiste oben auf dem Tab ausschalten*/

/*Tableisten Abstand nach unten*/
#TabsToolbar {
   margin-bottom:1px!important;
      }

/*Inaktiver Tab mit hellblauen Hintergrund, und schwarzem Rahmen*/
.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
  background:#D8D8D8!important; 
  border-radius: 7px !important; 
  border:1px solid black!important;
      }

/*Aktiver Tab mit orangem Hintergrund, und schwarzem Rahmen*/
.tab-background[selected="true"] {
  background:#F4FA58!important; 
  border-radius: 7px !important; 
  border:1px solid black!important;
      }

/*Tabschattierung im Hintergrund entfernt*/
.tabbrowser-tab::after, .tabbrowser-tab::before {
    margin-inline-start: 0px!important;
    border-left: 0px solid!important;
    border-image:none!important;
    border-image-slice: 0!important;
    width: 0px!important;
    box-sizing: border-box;
    opacity: 0!important;
      }
      
/*Farbige Leiste oben im aktiven Tab entfernt*/
.tab-line { 
    display:none!important
      }

/*Neuer Tab Button weg*/
#tabs-newtab-button {
    height: 30px !important;
    margin-top: 4px !important;
      }

Alles anzeigen

Thunderstruck

Super Andreas!

Nun spitze und genau so wie es mir gefällt:

Beste Grüße

Thunderstruck

2002Andreas

Zitat von Thunderstruck

Nun spitze und genau so wie es mir gefällt:

Freut mich wenn ich dir damit helfen konnte, war gern geschehen

Zitat von Thunderstruck

Was meinst Du mit treechildren gleich 2 mal? Muss ich das ändern?

Nein.

Thunderstruck 8. Januar 2023 um 11:48