Höhe Tabs reduzieren / Webseite Icon verschieben / Schriftgröße Webadresse vergrößern

bluuubb33

Hallo, ich wollte:

1) Höhe der Tabs verkleinern: Wie auf dem Screenshot zu sehen ist der Tab kleiner geworden, jedoch entsteht unter dem Tab ein Leerraum. Wie bekomme ich diesen weg?

2) Webseite Icon nach oben verschieben: Auf dem Screnshot kann man erkennen das das Webseiten-Icon (in diesem Fall von Firefox) zu weit unten ist. Wie kann ich das beheben?

3) Schriftgröße der Webadresse vergrößern: Wie kann ich die Schriftgröße der Webadresse vergrößern? (Damit meine ich "https://www.[....]", dies soll einfach größer dars

CSS

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

.tab-icon-image {
margin-top: 0px !important;
margin-left: 0px !important;
}

.tab-text {
margin-top: -20px !important;
margin-left: 5px !important;
}

.tab-close-button {
margin-top: -7px !important;
margin-right: -15px !important;
height: 30px !important;
width: 30px !important;
}

#TabsToolbar .tabbrowser-tab{
  background: lightblue !important; 
  height: 25px!important;
  border-radius: 1px !important; 
  border:none!important;
}

.tab-background[selected="true"] {
  background: orange !important; 
  border-radius: 1px !important; 
  border:none!important;
}

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

.tab-line[selected=true] { 
    display:none!important;
    }


#urlbar, .searchbar-textbox{
	height: 20px !important;
}

toolbarbutton.bookmark-item {
	margin-left: -5px !important;
}

#PersonalToolbar {
	height: 16px !important;
}

#PlacesToolbarItems > .bookmark-item, #OtherBookmarks {
  	font-size: 14px !important;
}

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]),
#OtherBookmarks.bookmark-item[container] > .toolbarbutton-icon {
  height: 14px !important;
  width: 14px !important;
}

Alles anzeigen

grisu2099

Zitat von bluuubb33

Firefox-Version 123.0.1

Zitat von bluuubb33

Hallo, ich wollte:

...erst mal das Update auf die aktuelle Version machen - oder?

Mitleser

Zitat von bluuubb33

2) Webseite Icon nach oben verschieben: Auf dem Screnshot kann man erkennen das das Webseiten-Icon (in diesem Fall von Firefox) zu weit unten ist. Wie kann ich das beheben?

Du könntest diese Werte anpassen: margin-top

CSS

.tab-icon-image {
margin-top: 0px !important;
margin-left: 0px !important;
}

.tab-text {
margin-top: -20px !important;
margin-left: 5px !important;
}

.tab-close-button {
margin-top: -7px !important;
margin-right: -15px !important;
height: 30px !important;
width: 30px !important;
}

Alles anzeigen

Aber auch sonst scheint offensichtlich einiges z.B margin, height optisch nicht ansprechend.

Ich würde die css löschen und neu aufbauen.

bluuubb33

".tab-icon-image" "margin-top" hat auch mit negativen Zahlen keinen Einfluss auf die Position des Webseiten Icons. Wird scheinbar komplett ignoriert.

FuchsFan

Zitat von bluuubb33

Wird scheinbar komplett ignoriert.

Kann ich so nicht bestätigen, denn so #TabsToolbar .tab-icon-image arbeitet der code hier schon ewig und noch immer.

2002Andreas

Zitat von bluuubb33

Wird scheinbar komplett ignoriert.

Hallo und Willkommen hier im Forum. 😊
Wenn du magst, dann teste bitte, und pass dir die Werte an:

CSS

*|*:root { 
  --tab-toolbar-navbar-overlap: 0 !important;  
  --tab-min-height: 28px !important;
}

/*Favicon im Tab etwas nach rechts verschoben*/
.tab-throbber-tabslist, .tab-throbber, .tab-icon-pending,
.tab-icon-image, .tab-sharing-icon-overlay, .tab-icon-overlay {
  margin-left: -3px !important;;
}

.tabbrowser-tab[visuallyselected]:not(:hover),
#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected]):not(:hover) {
  --tab-label-mask-size: 1em !important;
}

/* Tabtext nicht verschoben bei hover */
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 7px !important;
  width: unset !important;
}

/*Tab schließen Button verschoben*/
.tab-close-button{
  flex-shrink: 0 !important;
  margin-right: -6px !important;  
}

/*Aktiver Tab hover HG rot*/
tab.tabbrowser-tab[selected]:hover stack.tab-stack vbox.tab-background {
  background: red !important;
}

tab.tabbrowser-tab[selected]:hover {
  color: white !important;
}

tab.tabbrowser-tab[selected] {
  color: black !important;
  font-weight: bold !important;
}

/*Aktiver Tab HG orange*/
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  background: orange !important;
  box-shadow: none !important;
}

/*Inaktiver Tab hover HG blau*/
tab.tabbrowser-tab:not([selected]):hover stack.tab-stack vbox.tab-background {
  background: blue !important; 
  opacity: 1 !important;
}

tab.tabbrowser-tab:not([selected]):hover {
  color: white !important;
}

/*Inaktiver Tab HG dunkelgrau*/
tab.tabbrowser-tab:not([selected]) stack.tab-stack vbox.tab-background {
  background-color: darkgrey !important;  
}

/*Inaktiver Tab genauso hoch wie der aktive Tab*/
.tabbrowser-tab {
  position: relative !important;
  z-index: 2!important;
}

/*Tab Abstand nebeneinander*/
.tabbrowser-tab {  
  padding-inline: .9px !important;
}

/*Damit wird der Tabtext nicht blasser, wenn kein Fokus auf dem Fx ist*/
.tab-label {
  opacity: 1 !important;
}

/* Tabtext wird nicht ausgeblendet Kurzform */
.tabbrowser-tab .tab-label-container {
  mask-image: none !important;
}

#TabsToolbar {
  margin-bottom: -6px !important;
}

#TabsToolbar .tabbrowser-tab .tab-background {
  min-height: 26px !important;
  max-height: 26px !important;
  border-radius: 2px !important;
}

Alles anzeigen

Was du aus dem Code nicht brauchst, einfach entfernen.

2002Andreas

Zitat von bluuubb33

die Schriftgröße der Webadresse vergrößern?

Du meinst in der Urlbar?

Wenn ja, dann teste bitte:

CSS

.urlbar-input-box {
  font-size: 19px !important;
}

Horstmann

Zitat von bluuubb33

Hallo, ich wollte:
1) Höhe der Tabs verkleinern: Wie auf dem Screenshot zu sehen ist der Tab kleiner geworden, jedoch entsteht unter dem Tab ein Leerraum. Wie bekomme ich diesen weg?
2) Webseite Icon nach oben verschieben: Auf dem Screnshot kann man erkennen das das Webseiten-Icon (in diesem Fall von Firefox) zu weit unten ist. Wie kann ich das beheben?

Als ersten Schritt würde ich den Code für die Tabs nehmen, und in die Tonne klopfen.
Die Farben könntest du evtl. behalten, ist aber auch nicht das Wahre; die Positionierung der Elemente geht so aber nicht.

Danach kommt es darauf an, wie du die Tabs haben möchtest: nur die Höhe (der Leiste oder der Tabs?) geringer, mit oder ohne Abstand oben/unten und seitlich, und jeweils wieviel.

Das kann man alles anpassen, nur müsstest du genauer beschreiben was du haben möchtest.