Transparenten Hintergrund entfernen

Azzzu

Zitat von 2002Andreas

Oder diesen kompl. geänderten Code auch mal testen bitte:

CSS

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

.tabbrowser-tab:not([pinned]) {
  min-width: 120px !important;
}

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

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

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

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

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

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

Alles anzeigen

Guten Tag, ich bin grade über die Google Suche auf diesen Thread aufmerksam geworden.
Vielleicht kann mir hier jemand helfen

Ich schleppe schon seit ~2 Jahren eine userChrome.css mit mir rum der die Tabs nach unten zieht. Leider habe ich einen transparenten "Kasten" um die URL-Leiste. Auch den Code aus deinem letzten Post konnte dies nicht beheben (funktional ist alles gut, die Tabs sind unten).

Vielleicht hast du ja noch eine Idee?

2002Andreas

Zitat von Azzzu

Leider habe ich einen transparenten "Kasten" um die URL-Leiste.

Hallo und Willkommen hier im Forum. 😊

Hast du den nur mit dem Code für die Tableiste unten, oder auch ohne?

Welches Theme nutzt du?

Ist das mit einem anderen auch so?

Wie lautet der Inhalt deiner userChrome.css?

Azzzu

Zitat von 2002Andreas

Zitat von Azzzu

Leider habe ich einen transparenten "Kasten" um die URL-Leiste.

Hallo und Willkommen hier im Forum. 😊
Hast du den nur mit dem Code für die Tableiste unten, oder auch ohne?
Welches Theme nutzt du?
Ist das mit einem anderen auch so?
Wie lautet der Inhalt deiner userChrome.css?

Alles anzeigen

Vielen Dank
Das nenne ich mal eine Blitzantwort!

Ich habe grade mal die userChrome.css umbenannt und ohne gestartet.
Die Tabs sind nun unten, jedoch ist dort auch dieser Kasten da.

Es liegt also an etwas anderem.

Das Theme ist Space Fantasy von yoasif. Aber auch bei anderen Themes ist der Kasten dort.

Habe die letzten Monate Summerwood Grey genutzt.

Ich bin derzeit generell dabei eine cleane Installation vorzubereiten.

Ich muss zugeben das ich den Firefox-Profil Ordner seit 12-13 Jahren in Benutzung habe.

CSS

/* Mostly transparent on dark theme */
  /* More subtle background color on selected tab */
#main-window[lwthemetextcolor="bright"] #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme {
  background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.2) 80%, transparent) !important;
}
  /* No top line on selected tab */
#main-window[lwthemetextcolor="bright"] .tabbrowser-tab[selected="true"] .tab-line {
  display: none !important;
}
  /* Transparent toolbars */
#main-window[lwthemetextcolor="bright"] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
  background-color: transparent !important;
  background-image: none !important;
}
  /* Hide tab close buttons until hovered */
.tabbrowser-tab:not([pinned="true"]):not(:hover) .tab-close-button {
  display: none !important;
}

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
 
/* Modify to change window drag space width */
/*
Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top
*/
 
/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/
 
:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: var(--uc-titlebar-padding,0px);
right:0;
height: 40px;
}
/* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}
 
:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }
 
#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }
 
#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }
 
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
 
#titlebar{
-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}
 
.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }
 
@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }
 
/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }
 
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
 
/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */
 
:root{ --uc-window-control-width: 0px !important }
 
#navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }
 
#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: 29px;
width: 100%;
overflow: hidden;
}
 
#toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }
 
#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}
 
#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }
 
#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

/* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; /*adjust to set height or omit to use density*/
--tab-min-width: 80px !important; /*adjust to set width or omit to use default*/

#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}
 
.tab-background {
border-radius: 8px 8px 0px 0px !important; border-image: none !important;
}
.tab-line {
display: none;
}
 
.tab-close-button {
color: red!important;
}

/* Mostly transparent on dark theme */
  /* More subtle background color on selected tab */
#main-window[lwthemetextcolor="bright"] #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme {
  background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.2) 80%, transparent) !important;
}
  /* No top line on selected tab */
#main-window[lwthemetextcolor="bright"] .tabbrowser-tab[selected="true"] .tab-line {
  display: none !important;
}
  /* Transparent toolbars */
#main-window[lwthemetextcolor="bright"] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
  background-color: transparent !important;
  background-image: none !important;
}
  /* Hide tab close buttons until hovered */
.tabbrowser-tab:not([pinned="true"]):not(:hover) .tab-close-button {
  display: none !important;
}

Alles anzeigen

2002Andreas

Zitat von Azzzu

Es liegt also an etwas anderem.

Es liegt am Theme.

So sieht das hier mit deinem Code aus:

Den hellen Hg kannst du mit diesen Zusatzcode entfernen:

CSS

.browser-toolbar:not(.titlebar-color) {
  background-color: transparent !important;
}

Sieht dann so aus:

Teste also bitte mal.

Azzzu

Zitat von 2002Andreas
Zitat von Azzzu

Es liegt also an etwas anderem.

Es liegt am Theme.
So sieht das hier mit deinem Code aus:
Den hellen Hg kannst du mit diesen Zusatzcode entfernen:
CSS
.browser-toolbar:not(.titlebar-color) {
  background-color: transparent !important;
}
Sieht dann so aus:
Teste also bitte mal.
Alles anzeigen

Es ist ein Traum!

Es funktioniert!

Vielen, vielen Dank!

Mir ist noch aufgefallen das nun eine feine schwarze Linie oberhalb der URL-Leiste vorhanden ist. Kriegst du die auch noch weg?
Im Vergleich zum Kasten ist das aber ein Problem mit dem ich Leben kann...

2002Andreas

Zitat von Azzzu

Es ist ein Traum!
Es funktioniert!
Vielen, vielen Dank!

Gerne doch

Da sind viele Einträge doppelt in deinem Code:

Zeile:

11 - 141

15 - 145

20 - 150

Zitat von Azzzu

eine feine schwarze Linie oberhalb der URL-Leiste

Teste bitte:

CSS

#nav-bar:-moz-lwtheme {
  box-shadow:  none !important;
}

Azzzu

Zitat von 2002Andreas
Zitat von Azzzu

Es ist ein Traum!
Es funktioniert!
Vielen, vielen Dank!

Gerne doch
Da sind viele Einträge doppelt in deinem Code:
Zeile:
11 - 141
15 - 145
20 - 150

Zitat von Azzzu

eine feine schwarze Linie oberhalb der URL-Leiste

Teste bitte:
CSS
#nav-bar:-moz-lwtheme {
  box-shadow:  none !important;
}
Alles anzeigen

Es funktioniert, super!

Ich habe jetzt deinen Code aus dem Beitrag #501 genommen und die zwei Erweiterungen an das Ende gesetzt.

Nun ist alles wie gewünscht

2002Andreas

Zitat von Azzzu

Nun ist alles wie gewünscht

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

PS:

Ich verschiebe die Beiträge mal in einen eigenen neuen Thread, denn sie haben ja nichts mit der Tableiste unten zu tun.

Azzzu

Jetzt habe ich doch noch ein kurzes Anliegen...

Nachdem ich deinen Code in der .css nutze habe ich gemerkt das die angepinnten Tabs größer als vorher sind.

Ich fande das kompakte schmale besser. Leider kann ich die Stelle in dem Code aus Beitrag #3 nicht finden den ich dafür übertragen muss

2002Andreas

Zitat von Azzzu

die angepinnten Tabs größer als vorher sind.

Daran habe ich aber nichts verändert

Ansonsten:

CSS

tab.tabbrowser-tab[pinned] {
  margin-right: -15px !important;
}

Den Wert evtl. anpassen.

Du solltest deinen Code mal dringend überarbeiten, da passt so einiges nicht mehr

Besser wäre dieser Code:

CSS

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
  margin-left: -5px !important;
}

2002Andreas

Zitat von 2002Andreas

Du solltest deinen Code mal dringend überarbeiten

Ab Zeile 112:

CSS

/* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; /*adjust to set height or omit to use density*/
--tab-min-width: 80px !important; /*adjust to set width or omit to use default*/

da fehlt am Ende die }

Und wenn du die setzt, dann wird die Tableiste höher. Passt dann also nicht mehr.

Und wie schon gesagt, einige Codes sind doppelt enthalten.

Das funktioniert auch nicht mehr:

CSS

#tabbrowser-tabs {
width: 100vw !important;
}

.tab-background {
border-radius: 8px 8px 0px 0px !important; border-image: none !important;
}
.tab-line {
display: none;
}
 
.tab-close-button {
color: red!important;
}

Alles anzeigen

Wenn du den Haken gesetzt hast, muss das raus:

CSS

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}
}

Das war jetzt mal nur auf die Schnelle getestet

Azzzu

Danke für deine Mühe, aber spätestens jetzt sehe ich nicht mehr durch...

Ich komme derzeit am Besten mit dem alten Code + deinen zwei Anpassungen für den Kasten & die Linie aus. Auch wenn der Code nicht optimal und sauber ist... er funktioniert und alles sieht so aus wie gewünscht.

Ich denke damit kann ich leben

2002Andreas

Zitat von Azzzu

alles sieht so aus wie gewünscht.

Ok, nur das zählt

Es geht nur darum wenn du ein Problem haben solltest, dann ist es schwierig das zu lösen, wenn der Code nicht einwandfrei ist.

Azzzu

Zitat von 2002Andreas

Zitat von Azzzu

alles sieht so aus wie gewünscht.

Ok, nur das zählt
Es geht nur darum wenn du ein Problem haben solltest, dann ist es schwierig das zu lösen, wenn der Code nicht einwandfrei ist.

Da hast du natürlich recht! Vielleicht schaffe ich es die Tage mal die gewünschten Anpassungen der Tabs in deinen Code einzupflegen.

2002Andreas

Zitat von Azzzu

die gewünschten Anpassungen

Die funktionieren ja jetzt teilweise zumindest nicht.

Das X zum Schließen ist mit deinem Code nicht rot, wie es laut Code aber sein sollte.

2002Andreas

Zitat von Azzzu

die gewünschten Anpassungen

Ich habe den Code mal etwas bearbeitet.

So sieht das dann hier damit aus:

Bei hover wird das X dann wieder in rot angezeigt:

Wenn du magst, dann teste doch diesen Code mal und sag mir, was dir dann noch fehlt.

CSS

/*Transparenter Hintergrund oben*/
.browser-toolbar:not(.titlebar-color) {
  background-color: transparent !important;
}

/*Schwarze Linie oben weg*/
#nav-bar:-moz-lwtheme {
  box-shadow: none !important;
}

/*Abstand nach rechts vom angepinnten Tab zum offenen Tab*/
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
  margin-left: -5px !important;
}

.tab-background {
border-radius: 8px 8px 0px 0px !important; 
  border-image: none !important;
}
 
#toolbar-menubar .toolbarbutton-1 { 
  --toolbarbutton-inner-padding: 3px;
}

/* Hide tab close buttons until hovered */
.tabbrowser-tab:not([pinned="true"]):not(:hover) .tab-close-button {
  display: none !important;
}

.tab-close-button {
  color: red !important;
}

/*Tableiste unten*/

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

.tabbrowser-tab:not([pinned]) {
  min-width: 120px !important;
}

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

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

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

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

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

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

Alles anzeigen

Azzzu

Zitat von 2002Andreas

Zitat von Azzzu

die gewünschten Anpassungen

Ich habe den Code mal etwas bearbeitet.

So sieht das dann hier damit aus:

Bei hover wird das X dann wieder in rot angezeigt:

Wenn du magst, dann teste doch diesen Code mal und sag mir, was dir dann noch fehlt.

CSS

/*Transparenter Hintergrund oben*/
.browser-toolbar:not(.titlebar-color) {
  background-color: transparent !important;
}

/*Schwarze Linie oben weg*/
#nav-bar:-moz-lwtheme {
  box-shadow: none !important;
}

/*Abstand nach rechts vom angepinnten Tab zum offenen Tab*/
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
  margin-left: -5px !important;
}

.tab-background {
border-radius: 8px 8px 0px 0px !important; 
  border-image: none !important;
}
 
#toolbar-menubar .toolbarbutton-1 { 
  --toolbarbutton-inner-padding: 3px;
}

/* Hide tab close buttons until hovered */
.tabbrowser-tab:not([pinned="true"]):not(:hover) .tab-close-button {
  display: none !important;
}

.tab-close-button {
  color: red !important;
}

/*Tableiste unten*/

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

.tabbrowser-tab:not([pinned]) {
  min-width: 120px !important;
}

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

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

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

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

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

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

Alles anzeigen

Ich bin erst wieder ab dem 11.4 erreichbar, dann hab ich Zeit es mir genauer anzusehen.

Melde mich dann mit einer genauen Beschreibung und ggfls. Vergleichsscreenshots.

Wünsche dir ein schönes Oserfest!

2002Andreas

Zitat von Azzzu

Wünsche dir ein schönes Oserfest!

Danke, das wünsche ich dir auch

Zitat von Azzzu

Melde mich dann

Ok, eilt ja nicht.

Azzzu 4. April 2023 um 13:25