Aktiver Tab

Mira_Belle

Mh.

Hatte folgende Anpassung für den aktiven Tab.

CSS

    .tab-background[selected="true"] {                                                                                            
        background:rgba(255, 148, 0, 0.4) !important;                        /* Aktiver Tab: Hintergrundfarbe (Orange)*/                                                        
        box-shadow: inset  0px 0px 5px 0px #ff9400 !important;                /* Aktiver Tab: Schatten Breite, Art und Farbe (Orange) */
        border: hidden !important;                                            /* Aktiver Tab: Rahmen ausblenden */ 
    }

Tab wurde angezeigt wie gewünscht!

Nach dem Update gab es einen feinen weißen Rahmen um den aktiven Tab.

Auch das Symbol "X" im Schließenbutton war kaum mehr zu erkennen.

Um das Symbol "X" wieder "sichtbar" zu machen, habe ich ...

CSS

.close-icon {
    color: rgba(255, 255, 255, 0.9) !important;
}

... hinzugefügt.

Beeinflusst aber auch das Symbol "X" in anderen, nicht aktiven Tabs. (muss ich mir merken!)

Für den Rahmen nachfolgenden Code genutzt.

CSS

.tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme {
    color: var(--lwt-tab-text, rgba(255, 148, 0, 0.2)) !important;
}

Diesen verstehe ich aber nicht!

So war das Original

color: var(--lwt-tab-text, var(--toolbar-color));

Was hat es mit var(--lwt-tab-text auf sich?

var(--toolbar-color)); war für die Farbe.

Wie kann der Code anders geschrieben werden, ohne das "Text-Ding"?

Ich habe es nicht hinbekommen.

Gruß

Mira

Sören Hentzschel

Hallo,

Zitat von Mira_Belle

Nach dem Update gab es einen feinen weißen Rahmen um den aktiven Tab.

Du nutzt eine Beta-Version? Denn die finale Version Firefox 102 ist noch überhaupt nicht veröffentlicht worden. Veröffentlichungs-Tag für Major-Relases ist seit Jahren immer ein Dienstag.

Mira_Belle

Zitat von Sören Hentzschel

Hallo,

Du nutzt eine Beta-Version? Denn die finale Version Firefox 102 ist noch überhaupt nicht veröffentlicht worden. Veröffentlichungs-Tag für Major-Relases ist seit Jahren immer ein Dienstag.

Nunja, mag sein, dennoch war, bzw. ist diese Version schon auf dem Server.

Denkst Du, Mozilla könnte diese Versionen noch verändern oder zurückziehen?

Wenn ja, stellen wir die Problemlösung hinten an und warten bis nach der offiziellen Veröffentlichung.

Gruß

Mira

Sören Hentzschel

Zitat von Mira_Belle

Nunja, mag sein, dennoch war, bzw. ist diese Version schon auf dem Server.
Denkst Du, Mozilla könnte diese Versionen noch verändern oder zurückziehen?

Und welchen Druck hast, dass du nicht einen Tag warten kannst? Das Update kommt so oder so automatisch, du musst Updates nie manuell installieren. Dass es mehrere sogenannte Release Candidates gibt, kommt andauernd vor. Neue Versionen gelten dann freigegeben, wenn sie über die Website, d.h. auf http://www.mozilla.org, und/oder via Update verteilt werden. Bis dahin befindet sich eine neue Version noch in der Test- und Vorbereitungsphase und kann immer noch verändert werden.

Zitat von Mira_Belle

So war das Original

color: var(--lwt-tab-text, var(--toolbar-color));

Was hat es mit var(--lwt-tab-text auf sich?

var(--toolbar-color)); war für die Farbe.

Der zweite Parameter einer var()-Funktion in CSS ist ein Fallback für den Fall, dass der Inhalt der im ersten Parameter angegebenen Variable ungültig ist. Die Variable --lwt-tab-text wird (optional) durch Themes gesetzt (das entspricht tab_text in einem Theme) und kann daher auch leer sein. Nur wenn das der Fall ist, greift in deinem Beispiel var(--toolbar-color).

Mira_Belle

Zitat von Sören Hentzschel

Und welchen Druck hast, dass du nicht einen Tag warten kannst? Das Update kommt so oder so automatisch, du musst Updates nie manuell installieren. Dass es mehrere sogenannte Release Candidates gibt, kommt andauernd vor. Neue Versionen gelten dann freigegeben, wenn sie über die Website, d.h. auf http://www.mozilla.org, und/oder via Update verteilt werden. Bis dahin befindet sich eine neue Version noch in der Test- und Vorbereitungsphase und kann immer noch verändert werden.

Keinen! War einfach nur etwas ungeduldig.

Jetzt ist er halt drauf.

Zitat von Sören Hentzschel

Der zweite Parameter einer var()-Funktion in CSS ist ein Fallback für den Fall, dass der Inhalt der im ersten Parameter angegebenen Variable ungültig ist. Die Variable --lwt-tab-text wird (optional) durch Themes gesetzt (das entspricht tab_text in einem Theme) und kann daher auch leer sein. Nur wenn das der Fall ist, greift var(--toolbar-color).

Ok, ich wiederhole.

Die erste Anweisung ist für ein Theme und falls das Theme da nichts angibt, greift zweite Anweisung!

Da ich im Code nun aber Weiß angegeben habe, ist da auch kein Parameter, bzw. halt eben "Weiß".

Nur wie verändere ich den Code, dass erst gar nicht auf das Theme gewartet wird, sondern NUR auf meine Vorgaben reagiert wird?

Das hat dann, so glaube ich etwas mit diesem Stück Code zu tun, oder?

CSS

.tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme

Gruß

Mira

Sören Hentzschel

Zitat von Mira_Belle

Da ich im Code nun aber Weiß angegeben habe, ist da auch kein Parameter, bzw. halt eben "Weiß".

Ist der Code jetzt anders als im Startbeitrag angegeben? Denn dort sehe ich für die angegebene Stelle Orange mit 20 Prozent Deckkraft und nicht Weiß.

Zitat von Mira_Belle

Nur wie verändere ich den Code, dass erst gar nicht auf das Theme gewartet wird, sondern NUR auf meine Vorgaben reagiert wird?

Bezogen auf diese Code-Stelle: Ersetze color: var(--lwt-tab-text, rgba(255, 148, 0, 0.2)) durch color: rgba(255, 148, 0, 0.2).

Allerdings glaube ich nicht, dass das dein Problem lösen wird. Du hast nämlich geschrieben:

Zitat von Mira_Belle

Für den Rahmen nachfolgenden Code genutzt.

Der Code, den du dann genannt hast, verändert aber keinen Rahmen, sondern die Textfarbe. Das übrigens durch :-moz-lwtheme auch nur bei Verwendung eines Themes, wovon im Startbeitrag nichts steht, weswegen ich mir auch hier nicht sicher bin, ob das klar ist.

---

Zu einem möglichen Unterschied zwischen Firefox 101 und Firefox 102 kann ich aktuell nichts sagen, da an dem Computer, an dem ich aktuell bin, keine Beta-Version von Firefox installiert ist. Vielleicht kann jemand anderes eher helfen, ich werde das erst am Donnerstag prüfen können.

Mira_Belle

Ok, bin, war verwirrt!

Nutze ich "Deinen" abgewandelten Code ...

CSS

.tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme {
    color: rgba(255, 148, 0, 0.2)) !important;            /* Weißer Rahmen um aktiven Tab entfernen (Orange)    */    
}

... habe ich einen weißen Rahmen!

Nehme ich aber ...

CSS

.tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme {
    color: var(--lwt-tab-text, rgba(255, 148, 0, 0.2)) !important;            /* Weißer Rahmen um aktiven Tab entfernen    */    
}

... ist der Rahmen "natürlich" orange!

ACHTUNG!

Verändere ich die Farbe ...

CSS

.tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme {
    color: var(--lwt-tab-text, rgba(255, 0, 0, 0.8)) !important;            /* Weißer Rahmen um aktiven Tab entfernen    */    
}

so wie hier, Rot, fast keine Transparenz,

habe ich klaro einen roten Rahmen.

Sören Hentzschel

Ich verstehe nicht, wie das irgendeinen Rahmen verändern soll. Die Eigenschaft color verändert die Schriftfarbe.

Mira_Belle

Kann ich Dir auch nicht erklären, ist aber so!

ABER, ich habe mein Problem gelöst.

CSS

    .tabbrowser-tab:-moz-lwtheme {
        color: rgba(255, 148, 0, 0.2) !important;                            /* Weißer Rahmen um aktiven Tab entfernen (Orange)    */
}

Bringt den erwünschten Effekt.

Danke für Deine Mühe.

Gruß

Mira

.DeJaVu

Kann nur was Spezielles bei dir sein, weil - aktiver Tab v101 <> v102_rc2, Systemtheme.

Meine Anpassung an das dunkle Theme zeigt auch keine Veränderungen, optisch wie gewünscht.

Da wäre es hilfreich, das gesamt CSS von dir einzusehen, nicht nur die Schnipsel.

Mira_Belle

Zitat von .DeJaVu

Da wäre es hilfreich, das gesamt CSS von dir einzusehen, nicht nur die Schnipsel.

Ohweh.

Du hast es so gewollt!

Die userChrome.css

CSS

@import url("aboutDialog.css");
@import url("Hamburgermenü.css");
@import url("Lesezeichen.css");
@import url("Tabs.css");
@import url("Adressleiste.css");


@-moz-document url(chrome://browser/content/browser.xhtml)              
{
    
    /*----------------------------------------------------*/
    /* Anpassungen der Navigations- und Lesezeichenleiste */
    /*----------------------------------------------------*/

    /* Navigationsleiste Farbe */

    #nav-bar {
        background-color: transparent !important;
    }

    /* Menüleiste Farbe */
    
    #PersonalToolbar {
        background-color: transparent !important;
    }

    /* Breite des Leerzeichens ganz am Anfang */
    
    #customizableui-special-spring117 {
    max-width: 20px !important;
    }
    
/************** Flexibler Leerraum (Anpassen-Menue), die Breite ist anpassbar ***********************/

toolbarpaletteitem[id^="wrapper-customizableui-special-spring"] {
    min-width: 10px!important;
    max-width: 15px!important;
}

toolbarspring {
    -moz-box-flex: 1;
    min-width: 15px!important;
    max-width: 15px!important;
}
    /*----------------------------------*/
    /********** Line entfernen **********/
    /*----------------------------------*/

    /* Ich hatte eine helle Linie zwischen Tab- & Adressleiste */

    :root { --tabs-navbar-shadow-size: 0 !important; 
    }

    /*---------------------------------------------------*/
    /**** Anpassungen an der Lesezeichen-Symbolleiste ****/
    /*---------------------------------------------------*/

    /* "Breite" der Separatoren */
    
    #PlacesToolbarItems > toolbarseparator {
        padding-inline: 5px !important;
    }

    /* "Sichtbarkeit" der Separatoren */
    
    #PlacesToolbarItems > toolbarseparator::before {
        border-image-slice: 0 !important;
    }

    /*---------------------------------------------------*/
    /****     Anpassungen an dem Lesezeichen-Popup    ****/
    /*---------------------------------------------------*/

    #PlacesToolbar menuitem, #PlacesToolbar menu {
        color: #e1e1e1 !important;                                            /* Farbe Schrift */
    }

    #PlacesToolbar menupopup[placespopup="true"] menuseparator::before {
        border-top: 1px solid #5b5b66 !important;                           /* Farbe Separator */
    }

    :root[lwtheme-image]:-moz-lwtheme-brighttext {
    text-shadow: none !important;
    }

    .browser-toolbar:not(.titlebar-color) {
    color: rgba(225, 225, 225, 0.9) !important;
    }

    /*---------------------------------------------*/
    /****     Anpassungen an der Linkanzeige    ****/
    /*---------------------------------------------*/

    #statuspanel-label {
        background-color: #292c2f  !important;
        color: #e1e1e1 !important;
        font-weight: bold !important;
        font-size: 10px !important;        
        border: 2px solid #ff9600 !important;
        border-radius: 8px !important;
/*        border-width:3px !important;        */
/*        border-color: #ff9600 !important;        */    
/*        border-style: outset !important;        */
    }



    /* Markierter Text  */    
    
    ::selection {
        color: #ffffff !important;
        background: #ff8000 !important;
    }


  }

Alles anzeigen

Hamburgermenü.css

CSS

@-moz-document url(chrome://browser/content/browser.xhtml)
{
    /*---------------------------------------------------*/
    /********* Anpassungen des "Hamburgermenüs" **********/
    /*---------------------------------------------------*/

    .foo {    /* nur wegen der Klammern */
    }

    :root {
        --arrowpanel-menuitem-padding: 0px 8px !important;                    /* Zeilenabstand */
    }
    
    #appMenu-protonMainView {                                                /* Menübreite */
        width: 320px !important;            
    }    

    /* Farbe der Separatoren */
 
    #editBookmarkPanel toolbarseparator, 
    .cui-widget-panel toolbarseparator {
        appearance: none !important;
        background: #5b5b66 !important;                                    /* Helles Mausgrau */
    }

    /* Farbe der Schrift & Hintergrund */
    
    panelview,
    #appMenu-popup  .panel-subview-body {
        background: #292c2f !important;                                          /* Dunkles Grau */
        border: 1px solid #ff9600 !important;
        border-radius: 8px !important;
    }

    :is(menupopup, panel)[type="arrow"] {
    
        --panel-color: #e1e1e1 !important;                                 /* Schriftfarbe */        /* Hellgrau */
        --panel-border-color:#292c2f !important;                             /* Rahmenfarbe */
        --panel-border-radius: 8px !important;                                 /* Rahmenradius */
    } 
}

Alles anzeigen

Lesezeichen.css

CSS

@-moz-document url(chrome://browser/content/browser.xhtml)            
{
    /* ----------------------------------------------------------------------------*/
    /***** Abstände der Einträge in den Menüs und Lesezeichen wieder schmaler ******/
    /* ----------------------------------------------------------------------------*/

    /* Abstände */ 
    menupopup > menuitem,
    menupopup > menu {
        appearance: none !important;
        padding-block: 2px !important;
        padding-inline-start: 25px !important;
    }
    /* Anpassungen der Popups */
    menupopup {
        appearance: none !important;
        --panel-color: #e1e1e1 !important;                                    /* Hellgrau, Schrift */
        --panel-background: #292c2f !important;                                /* Dunkles Grau, Hintergrund */    
        --panel-border-color:transparent !important;                        /* Rahmenfarbe */
        --panel-border-radius: 4px !important;                                /* Rahmenradius */
        background-color: #292c2f !important;                             /* Hintergrund */
    border: 3px solid #ff9600 !important;
/*    border: 3px solid #ff9600 !important;    */
    border-radius: 8px !important;
    }
  
    /* Nur für anderes Windowstheme */
    #context-navigation {
        background-color: transparent !important;
    }

    #context-navigation:not([hidden]) {
        appearance: none !important;
        padding: 0 25px 4px !important;
    }

    menu[id="file-menu"],
    menu[id="edit-menu"],
    menu[id="view-menu"],
    menu[id="history-menu"],
    menu[id="bookmarksMenu"],
    menu[id="tools-menu"],
    menu[id="helpMenu"]  {
        appearance: none !important; 
        background:transparent !important;    
        color: #e1e1e1  !important;                                        /* Hellgrau, Schrift */
    }
    menu[id="file-menu"]:hover,
    menu[id="edit-menu"]:hover,
    menu[id="view-menu"]:hover,
    menu[id="history-menu"]:hover,
    menu[id="bookmarksMenu"]:hover,
    menu[id="tools-menu"]:hover,
    menu[id="helpMenu"]:hover {
        appearance: none !important; 
        background: rgba(225, 225, 225, 0.2) !important;                    /* Hellgrau, Feld */
    }

}

Alles anzeigen

Tabs.css

CSS

@-moz-document url(chrome://browser/content/browser.xhtml)              
{

    /* -------------------------------------------------*/
    /************* aktiven Tab einfärben ****************/
    /* -------------------------------------------------*/

    .tab-background[selected="true"] {                                                                                            
        background:rgba(255, 148, 0, 0.4) !important;                        /* Aktiver Tab: Hintergrundfarbe (Orange)*/                                                        
        box-shadow: inset  0px 0px 5px 0px #ff9400 !important;                /* Aktiver Tab: Schatten Breite, Art und Farbe (Orange) */
        border: hidden !important;                                            /* Aktiver Tab: Rahmen ausblenden */ 
/*    border: 1px solid #D4D4D4 !important;    */                                /* Aktiver Tab: Rahmen Breite, Art und Farbe */
    }

    .tab-label[selected]  {
        color: #ffffff !important;                                            /* Aktiver Tab: Schriftfarbe (Weiß) */
    }
    
    .tabbrowser-tab:-moz-lwtheme {
        color: rgba(255, 148, 0, 0.1) !important;                            /* Weißer Rahmen um aktiven Tab entfernen (Orange)    */
}

    /* --------------------------------------------------*/
    /************* passiven Tab einfärben ****************/
    /* --------------------------------------------------*/

    .tab-background:not([selected]):not([multiselected]) {
        background:rgba(225, 225, 225, 0.2) !important;                        /* Inaktiver Tab: Hintergrundfarbe (Hellgrau) */
        box-shadow: inset 0px 0px 5px 0px #e1e1e1 !important;                /* Inaktiver Tab: Schatten Breite, Art und Farbe (Hellgrau) */
        border: hidden !important;                                            /* Inaktiver Tab: Rahmen ausblenden */
/*    border: 1px solid #D4D4D4 !important;    */                                /* Inaktiver Tab: Rahmen Breite, Art und Farbe */
    }

    .tab-label:not([selected]):not([multiselected]) {
        color: #D4D4D4 !important;                                            /* Inaktiver Tab: Schriftfarbe (Hellgrau) */
    }
    
    /*---------------------------------------------------*/
    /************** Tab schließen X hover  ***************/
    /*---------------------------------------------------*/

    .tab-content > .tab-close-button:hover {
        background:rgba(255, 0, 0, 0.4) !important;                            /* Rot */
        box-shadow: 0 0 1em rgba(255, 0, 0, 0.7) !important;                /* Rot, glow */
/*      background: #E81123 !important;                            */            /* Kirschrot rgb(232, 17, 35) */
/*        box-shadow: inset 0px 0px 4px 0px #ff0000 !important;    */            /* Hellrot rgb(255, 0, 0) */
    }
    
    /*Tab schließen Button verschoben*/
    
    .tab-close-button{
        flex-shrink: 0 !important;
        margin-right: -6px !important;
    }

    /*Symbol für Schließen (X) wieder sichtbar gemacht*/

.close-icon {
    color: rgba(255, 255, 255, 0.9) !important;                                /* Weiß, nur leicht tranzparent, für ALLE    */
}

    
    /*---------------------------------------------------*/
    /***************** New Tab Icon  *********************/
    /*---------------------------------------------------*/
 
    /* Dies ist das Pluszeichen um einen neuen Tab zuöffnen */
 
    :is(.tabs-newtab-button,#tabs-newtab-button) {
        list-style-image: url("./image/newtab-inverted.png") !important;
        -moz-image-region: rect(2px, 15px, 16px, 1px) !important;
    }
    
    /*-----------------------------------------------*/
    /****     Tabtext nicht verkürzt bei hover    ****/
    /*-----------------------------------------------*/

    /* Ein längerer Tabtext wird am Ende ja ausgeblendet. */
    /* Diese Verkürzung bei hover hätte ich gerne verhindert. */

    .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
        padding-inline-start: 7px !important;
        width: 24px !important;
    }
  
    .tabbrowser-tab[visuallyselected=true]:not(:hover),
    #tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):not(:hover) {
        --tab-label-mask-size: 1em !important;
    }
    
    /* Tabtext wird nicht ausgeblendet */
    
    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
        mask-image: none !important;
    }    
    
    /*-------------------------------------------*/
    /****     Tabbar nach unten verschoben    ****/
    /*-------------------------------------------*/
    
    #navigator-toolbox {
        position: relative !important;
        padding-bottom: calc( var(--tab-min-height) + 10px ) !important;
    }

    #TabsToolbar {
        position: absolute !important;
        display: block !important;
        bottom: 0 !important;
    }

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

    /*---------------------------------------------------*/
    /****     Icon und Tabtext mittig ausgerichtet    ****/
    /*---------------------------------------------------*/
    
    .tab-content:not([pinned])::before{
        display: -moz-box;
        content: "";
        -moz-box-flex: 1;
    }


}

Alles anzeigen

und zu guter Letzt

Adressleiste.css

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {
    
    /*---------------------------------------------------*/
    /********** Anpassungen an der Adressleiste **********/
    /*---------------------------------------------------*/
    .foo {    /* nur wegen der Klammern */
    }
    /* Lesezeichen-Stern ungesetzt */

    #star-button:not([starred="true"]) {
        fill: #ff9600 !important; 
    /*    fill: rgb(80,160,225) !important;        */                           /* Hellblau */    
    }
    
    /* Lesezeichen-Stern gesetzt */
  
    #star-button[starred="true"] {
        fill: #ff9600 !important;                                            /* Orange */
    /*    fill: rgb(80,160,225) !important;        */                            /* Hellblau */    
    }
    
    /*  Download-Anzeige */

    #downloads-button[progress="true"] 
    #downloads-indicator-anchor 
    #downloads-indicator-icon {
        fill: #FFCC00 !important;                                            /* Orange */
    }
    #downloads-button {
        --toolbarbutton-icon-fill-attention: rgb(255,204,0) !important;        /* Orange */
    }
    #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { 
        border-color: #FFCC00 !important;                                    /* Orange */
    }
    #downloads-indicator-start-image {
        fill: #FFCC00 !important;                                            /* Orange */
    }

    /* Rahmen von Adressfeld und Suchfeld  */

    #urlbar-container {
        --toolbar-field-focus-border-color: transparent !important;
    }
    
    #urlbar {
        box-shadow: transparent !important;
        --toolbar-field-focus-border-color: transparent !important;
    }

#urlbar[open] > #urlbar-background {

    border-color: transparent !important;
/*    box-shadow: 0 0px 10px 10px rgba(41, 44, 47, 0.4);    */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}
    
    #search-container {
        --toolbar-field-focus-border-color: transparent !important;
    }
    
    #searchbar {
        box-shadow: transparent !important;        
        --toolbar-field-focus-border-color: transparent !important;
    }

    #urlbar:not([focused="true"], [open]):-moz-lwtheme > #urlbar-background,
    #searchbar:not(:focus-within):-moz-lwtheme {
        border: none !important;
    }

    /* Markierter Text  */    
    
    ::selection {
        color: #ffffff !important;
        background: #ff8000 !important;                                    /* käftiges Orange */
    }
    
    /* Schriftfarbe im Adress- und Suchfeld */
    
    #urlbar-input, #urlbar-scheme, .searchbar-textbox {    
        color: #e6e6e6 !important;                                            /* Sehr helles Grau */
    }
    
    /* Symbolfarbe im Adress- und Suchfeld */
    
    #urlbar:-moz-lwtheme, #searchbar:-moz-lwtheme {    
        color: #e1e1e1 !important;                                            /* Hellgrau */
    }
    
    *****
    :root {
        --arrowpanel-border-color: transparent !important;                        /* Schatten um Adress- & Suchfeld */
    }                    

    /* Farbe Hintergrund & Schrift im Suchfeld */

    .search-panel-tree {
        background: #292c2f !important;                                    /* (Dunkelgrau) */
        color: #e1e1e1 !important;                                            /* (Hellgrau) */
    }
    #PopupSearchAutoComplete {
        --panel-background: #292c2f !important;                            /* (Dunkelgrau) */
        --panel-color: #e1e1e1 !important;                                    /* (Hellgrau) */
    }

    /* Farbe der Felder (transparent) */

    #urlbar-results {
        background-color: #292c2f !important;
    }

    .urlbarView {
        background-color: #292c2f !important;
    }

    .search-panel-tree {
        background: #292c2f !important;
        color: #e1e1e1 !important;
    }

    #urlbar-background, #searchbar {
        background-color: transparent !important;
    }
    
    /* Farbe URL */
    
    .urlbarView-url {
        overflow: hidden !important;
        color: rgba(255, 204, 0, 0.7)!important;                            /* Helles Orange , Eidottergelb */
    }
    
    /* Schriftzug " -- Mit "Google" suchen" & Hintergrund */
    
    .urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, .urlbarView-row-inner[selected] {
         background-color: #484a4d  !important;                            /* Mausgrau */
        color: #e1e1e1 !important;                                        /* Hellgrau */
    }
    
}

Alles anzeigen

Ach nee halt

aboutDialog.css

gibt es auch noch.

CSS

@-moz-document url-prefix("chrome://browser/content/aboutDialog.xhtml")
{

    /*---------------------------------------------------*/
    /****       Anpassungen an dem About:Dialog       ****/
    /*---------------------------------------------------*/

    #aboutDialog {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        line-height: 1.5 !important;
}

    #aboutDialog vbox,
    #aboutDialogContainer hbox,
    #clientBox vbox,
    #contributeDesc > label:nth-child(1),
    #contributeDesc > label:nth-child(2),
    #releasenotes,
    #trademark,
    #updateButton,
    label.bottom-link:nth-child(3),
    [href='about:credits'],
    [href='about:license'],
    [href='about:rights'],
    [href='https://www.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-desktop&utm_campaign=about-dialog'] 
    {
            font-size: 15px !important;
    }

/*    Das ist Links das FF-Logo */
#leftBox {
    appearance: none !important;
    border-radius: 10px !important;
    background-image: url("file:///C:/Users/Andreas/image/index_test.png") !important;
    background-repeat: no-repeat !important;
    background-color: #292c2f !important;
    background-position: center center !important;
    background-size: 225px !important;
    min-width: 225px !important;
    margin-top: 80px !important;
}


/*    Das ist Rechts die Box    */
    #rightBox::before {
        content: "Firefox Browser" !important;
        font-size: 40px !important;
        font-weight: 700 !important;
        color: #fff582 !important;
        text-shadow: 4px 4px red !important;
    }

    #rightBox {
        background-image: none !important;
        padding-top: 1px !important;      
        margin-top: 1px !important;
    }

    #aboutDialog,
    #bottomBox,
    #clientBox {
        background-color: #292c2f !important;
    }

    #icons  .icon {
        margin: 10px !important;
    }

/*    Update-Check ohne Erwartung ;)*/
/*    Blendet Original-Animationen aus!*/
#icons > .update-throbber {
    visibility: hidden !important;
}

#updateDeck #checkingForUpdates > label {
    appearance: none !important;
    border-radius: 10px !important;
    background-image: url("./image/sample_3.gif") !important;
    background-repeat: no-repeat !important;
    background-color: #292c2f !important;
    background-position: 0% center !important;
    background-size: 36px !important;
    color: #eee8aa !important;
    font-size: 1.2em !important;
    font-weight: 200 !important;
    min-height: 28px !important;
    margin-top: 0 !important;
    margin-right: -10px !important;
    margin-bottom: 10px !important;
    margin-left: -40px !important;
    padding-top: 7px !important;
    padding-right: 25px !important;
    padding-bottom: 0 !important;
    padding-left: 45px !important;
}

/*    Blendet Original-Icon aus!*/
#icons > .noUpdatesFound {
    visibility: hidden !important;
}

#noUpdatesFound > label:nth-child(1) {
    appearance: none !important;
    border-radius: 10px !important;
    background-image: url("./image/tick_2.png") !important;
    background-repeat: no-repeat !important;
    background-color: #292c2f !important;
    background-position: 0 center !important;
    background-size: 36px !important;
    color: #ff9600 !important;
    font-size: 1.5em !important;
    font-weight: 400 !important;
    min-height: 28px !important;
    margin-top: 0 !important;
    margin-right: -10px !important;
    margin-bottom: 12px !important;
    margin-left: -40px !important;
    padding-top: 2px !important;
    padding-right: 25px !important;
    padding-bottom: 0 !important;
    padding-left: 45px !important;
}

/*  Das muss noch gecheckt werden   */


#downloadAndInstallButton    {
    appearance: none !important;
    border-radius: 10px !important;
/*    background-image:  url("./image/herz.png") !important;        */
    background-repeat: no-repeat !important;
    background-color: #5b5b66 !important;
    background-position: 0% center !important;
    background-size: 16px !important;
    color: #e1e1e1 !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 10px !important;
    padding-top: 0px !important;
    padding-right: 10px !important;
    padding-bottom: 2px !important;
    padding-left: 10px !important;

        
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width: 5px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;
    }
    
    #downloadAndInstallButton:hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }
    
    

    
    #updateButton    {
        appearance: none !important;
        border-radius: 10px !important;
        background-image:  url("./image/herz.png") !important;
        background-repeat: no-repeat !important;
        background-color: #5b5b66 !important;
        background-position: 0% center !important;
        background-size: 16px !important;
        color: #e1e1e1 !important;
        margin-top: 0px !important;
        margin-right: 0px !important;
        margin-bottom: 0px !important;
        margin-left: 10px !important;
        padding-top: 0px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;
        padding-left: 10px !important;      
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width: 5px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;
    }
        #updateButton:hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }
/*
    #icons > .apply    {
        visibility: hidden !important;
    }
*/    
    
       
}


/*-------------------------------------------------------------------------------*/

    /*    Versionsanzeige        */
    
    #version.update {
        margin-left: 10px !important;
        font-size: 19px !important;
        color: orchid !important;
        padding-top: 5px !important;
        }

    /*     ohne Unterstrich    */

    #releasenotes,                                              /*     Neue Funktionen und Änderungen    */  
    #submit-feedback,                                         /*     Feedback senden    */ 
    [href='https://www.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-desktop&utm_campaign=about-dialog'],
    [href='about:credits'],                                      /*     globalen Comunity    */  
    #contributeDesc > label:nth-child(1),                      /*     Spenden Sie    */  
    #contributeDesc > label:nth-child(2),                      /*     machen Sie mit!    */  
    [href='about:license'],                                      /*     Information zur Lizensierung    */  
    [href='about:rights'],                                       /*     Endanwenderrechte    */  
    label.bottom-link:nth-child(3)                              /*     Datenschutzbestimmungen    */  
    {
        text-decoration: none !important;
    }
    
    description.text-blurb:nth-child(3) > label:nth-child(1)  {
        text-decoration: none !important;
    }

    /*    Text    */
    
    .text-blurb
    {
        font-size: 15px !important;
        color: #e1e1e1 !important;
        padding-right: 1px !important;
    }

    /*     Neue Funktionen und Änderungen    */
    
    #releasenotes {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 10px !important;
        margin-right: 20px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;
        margin-top: 2px !important;
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;
    }
    #releasenotes:hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     Firefox-Hilfe    */
    
    description.text-blurb:nth-child(3) > label:nth-child(1) {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 10px !important;
        margin-top: 35px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;      
    }
    description.text-blurb:nth-child(3) > label:nth-child(1):hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     Feedback senden    */
    
    #submit-feedback {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 10px !important;
        margin-top: 35px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;      
    }
    #submit-feedback:hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     Mozilla    */
    
    [href='https://www.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-desktop&utm_campaign=about-dialog'] {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 1px !important;
        margin-right: 1px !important;
        margin-top: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 1px !important;     
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;          
    }
    [href='https://www.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-desktop&utm_campaign=about-dialog']:hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     globalen Comunity    */
    
    [href='about:credits'] {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 1px !important;
        margin-right: 1px !important;
        margin-top: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 1px !important;     
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;        
    }
    [href='about:credits']:hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }
/*    Hinter dem Komma einen Zeilenumbruch erzwingen    */

    #detailsBox > description#communityDesc {
        max-width: 570px !important;
    }

    /*     Spenden Sie    */
    
    #contributeDesc > label:nth-child(1) {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 1px !important;
        margin-right: 1px !important;
        margin-top: 2px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;     
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;        
    }
    #contributeDesc > label:nth-child(1):hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     machen Sie mit!    */
    
    #contributeDesc > label:nth-child(2) { 
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 1px !important;
        margin-right: 1px !important;
        margin-top: 2px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;     
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;        
    }
    #contributeDesc > label:nth-child(2):hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     Information zur Lizensierung    */
    
    [href='about:license'] {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        margin-top: 1px !important;
        margin-bottom: 20px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;     
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;             
    }
    [href='about:license']:hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     Endanwenderrechte    */
    
    [href='about:rights'] {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        margin-top: 1px !important;
        margin-bottom: 20px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;     
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;        
    }
    [href='about:rights']:hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }

    /*     Datenschutzbestimmungen    */
    
    label.bottom-link:nth-child(3) {
        appearance: none !important;
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        margin-top: 1px !important;
        margin-bottom: 20px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 2px !important;     
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width: 3px !important;
        background-position: 12px 4px !important;
        border-radius: 8px!important;        
    }
    label.bottom-link:nth-child(3):hover {
        background: #e1e1e1 !important;
        background-position: 12px 4px !important;
        color: #292c2f !important;
    }
/*    Text ganz unten, Logo und Warenzeichen    */
    
    #trademark {
        padding-top: 10px !important;
        text-align: center !important;
        color: #e1e1e1 !important;
        margin-block: 15px !important;
        font-size: 13px !important;    
        font-weight: 700 !important;  
        
    }
    
/*    Den Text "design by me ©" will ich ganz unten rechts inne Ecke.... */    
#bottomBox::after {
  display: flex !important;
  content: "design by me ©" !important;
  font-size: 11px !important;
  margin-left: 850px !important;
  color: #e1e1e1 !important;
/*  border: 2px solid yellow !important;    */
/*  border-radius: 15px !important;    */
  padding-left: 12px !important;
    }    
        
#aboutDialog {
    margin-bottom: 0px !important;
    }

}

Alles anzeigen

Gruß

Mira

Mira_Belle

Habe es gerade mit einem neuen Profil ausprobiert!

Allen Code in der Stilbearbeitung kopiert.

Da gibt es keinen Rahmen, auch nicht, wenn ich die Farbe ändere.

Bin der Meinung, dass es was mit dem Theme zu tun hat.

Gruß

Mira

Nachtrag!

Bin meinem Verdacht weiter nachgegangen.

Habe verschiedene Themes ausprobiert und siehe da,

einige generieren beim aktiven Tab einen Rahmen.

Wie lässt sich das verhindern?

Ich möchte, dass ein Theme lediglich nur das "Hintergrundbild" zur Verfügung stellt.

Gruß

Mira

.DeJaVu

Das Adressleiste.css ist extrem buggy

Code

#1
warning
    4    :    5    Empty rule.
warning
    23    :    5    Line break in selector (forgot a comma?)
warning
    24    :    5    Line break in selector (forgot a comma?)
warning
    44    :    21    Expected 'none | [ inset? && [ <length>{2,4} && [ <hex-color> | <named-color> | rgb( [ [ <number>{3}...
warning
    60    :    21    Expected 'none | [ inset? && [ <length>{2,4} && [ <hex-color> | <named-color> | rgb( [ [ <number>{3}...
warning
    64    :    42    Unknown pseudo :-moz-lwtheme
warning
    64    :    17    Complex selector inside :not().
warning
    65    :    34    Unknown pseudo :-moz-lwtheme
warning
    84    :    12    Unknown pseudo :-moz-lwtheme
warning
    84    :    37    Unknown pseudo :-moz-lwtheme
error
    88    :    6    Expected LBRACE but found '*'.
error
    88    :    7    Expected LBRACE but found '*'.
error
    88    :    8    Expected LBRACE but found '*'.
error
    88    :    9    Expected LBRACE but found '*'.
warning
    89    :    5    Line break in selector (forgot a comma?)
warning
    132    :    25    Complex selector inside :not().

Alles anzeigen

pseudo und complex kannst du ignorieren, das ist Firefox-spezifisch, Stylus warnt nur.

Aber fehlende Kommata, Farbangaben bei "box-shadow: transparent" sind zu beheben, scheint es nicht zu geben.

dito "aboutDialog.css"

Code

#1
warning
    147    :    9    Ungrouped duplicate 'background-position'.
warning
    148    :    9    Ungrouped duplicate 'border-radius'.
warning
    180    :    9    Ungrouped duplicate 'background-position'.
warning
    181    :    9    Ungrouped duplicate 'border-radius'.
#2
error
    313    :    1    Unexpected '}'.

Alles anzeigen

Das Ergebnis hier, sicher?

Du solltest dazuschreiben, dass du die Menüleiste brauchst, sieht trotzdem suboptimal aus. Welches Theme nutzt du? "Dark"?

Ohne die Zeile 19, deine Änderung.

Sören Hentzschel

Zitat von Mira_Belle

Bin meinem Verdacht weiter nachgegangen.
Habe verschiedene Themes ausprobiert und siehe da,
einige generieren beim aktiven Tab einen Rahmen.

Wie lässt sich das verhindern?

Ich möchte, dass ein Theme lediglich nur das "Hintergrundbild" zur Verfügung stellt.

Entweder ein Theme nutzen, welches das nicht macht, oder eben, wie du es eh schon machst, das Design via userChrome.css überschreiben. Sich einfach bestimmte Teile eines Themes auszusuchen geht nicht.

Mira_Belle

Zitat von .DeJaVu

Das Adressleiste.css ist extrem buggy

pseudo und complex kannst du ignorieren, das ist Firefox-spezifisch, Stylus warnt nur.
Aber fehlende Kommata, Farbangaben bei "box-shadow: transparent" sind zu beheben, scheint es nicht zu geben.

Du solltest dazuschreiben, dass du die Menüleiste brauchst, sieht trotzdem suboptimal aus. Welches Theme nutzt du? "Dark"?
Ohne die Zeile 19, deine Änderung.

Alles anzeigen

Die Kommafehler sind behoben.

Der Fehler mit "box-shadow: transparent" habe ich auch korrigiert! box-shadow: 1px 1px 10px rgba(0, 0, 0, 0) !important;

Auch die Fehler in der "aboutDialog.css" sind, bis auf den Letzten beseitigt.

Ich erkenne nicht, was da falsch sein sollte.

Danke für die Hinweise.

Ja, das mit der Menüleiste hätte ich erwähnen sollen, sorry, habs einfach vergessen.

Als Theme kommt bei mir "abstract Orange-and-blue" von Valou zum Einsatz.

Das Ganze schaut dann so aus:

Gruß

Mira

Sören Hentzschel

Zitat von Mira_Belle

Der Fehler mit "box-shadow: transparent" habe ich auch korrigiert! box-shadow: 1px 1px 10px rgba(0, 0, 0, 0) !important;

Ziemlich präzise Angaben für etwas, was du dann eh komplett unsichtbar machst. Vielleicht box-shadow: none !important;?

Zitat von Mira_Belle

Auch die Fehler in der "aboutDialog.css" sind, bis auf den Letzten beseitigt.
Ich erkenne nicht, was da falsch sein sollte.

In der letzten Zeile steht }, was zu keiner öffnenden Klammer gehört. Das @-moz-document url-prefix("chrome://browser/content/aboutDialog.xhtml") { ganz am Anfang hast du schon wesentlich früher wieder geschlossen. Code ordentlich statt willkürlich einrücken hilft bei sowas.

PS: Bei Zeilen mit 0 als Wert darfst du die Einheit, z.B. px, gerne weglassen. Das ist kein Muss, wäre aber guter Code-Stil.

Mira_Belle

Danke Sören.

Mir ist's jetzt auch wieder eingefallen!

Die aboutDialog.csswar, ist mein allererstes Projekt,

und dass da noch Fehler drin steckten, war mir damals bewusst,

deshalb gab es dazu auch Kommentare.

Das Ding funktionierte aber wie gewünscht und so vergaß ich,

dass das noch eine Baustelle ist.

Nun aber sollte der Code sauber sein.

Hab die "falsche" Klammer gefunden und auch die 0px Werte geändert.

Ach ja, das mit den "präzise Angaben", da hätte ich echt auch selber kommen können.

Habe sogar auf MDN Web Docs extra nachgeschlagen

und

wohl Tomaten auf den Augen gehabt.

Da bin ich denn auch auf die Lösung mit den Werten gekommen,

weil ja box-shadow: transparent !important; total falsch war.

OK, nun ist auch dieser Fehler bereinigt und ich blende aus.

box-shadow: none !important;

Möchte mich nochmals ganz lich bei Dir und .DeJaVu

für Eure Hilfe bedanken.

Gruß

Mira

Thomas3

Ich hatte jetzt nach dem Update auch wieder einen farbigen Rahmen, bei mir offensichtlicher da Ich die Tabs mit Marginwerten verschoben habe, dadurch die Linien durch den Tab.

Dieser Rahmen ändert je nach Themes die Farbe. Beim Standardthema Dunkel ist dieser nicht da aber beim Themes Alpenglow und allen anderen bei mir zu sehen.

Das gleiche Problem hatte Ich schon mal vor ca. einem Jahr und habe dann als Hilfsmittel die Bilddatei aus den Themes selektiert und mir nur diese anzeigen lassen.

Irgendwann hatte Ich dann hier ein paar Zeilen gefunden die das Problem behoben hatten. Einige Zeit später hab Ich die CSS Dateien mal aufgeräumt und „unwirksames“ auskommentiert oder gelöscht.

Seltsamer Weise löst jetzt wieder eine der auskommentierten Zeilen das Problem.

Die letzte Zeile: outline: none! important hab Ich wieder aktiviert und die nicht erwünschte Linie ist wieder weg.

/* Tab-Rahmen entfernen *******/

#TabsToolbar
.tabbrowser-tab[visuallyselected="true"],

#TabsToolbar .tabbrowser-tab,

#TabsToolbar .tabbrowser-tab
.tab-background {

background: unset !important;

box-shadow: none !important; /**Rahmen in Tabs***/

outline: none !important

}

Mira_Belle

Thomas3

Danke für den Tipp.

Mit ...

CSS

.tab-background {
  outline: none !important
}

... werden alle Rahmen aller aktiven Tabs von den von mir getesteten Themes ausgeblendet!

Gruß

Mira

Horstmann

Ich hatte das gleiche Problem, ich glaube FF hat mit dem Update 102 eine Outline in die Tabs gemogelt .

Auf Reddit gab's einige Beschwerden zu dem Thema, da hatte ich dann auch die grobe Lösung gepostet , wie Mira sie erwähnt hat .

Soweit scheint's zu funktionieren, bei mir jedenfalls, hängt aber evtl. noch mit anderen Faktoren zusammen, die der einen oder anderen userChrome.css in die Quere kommen könnten .

Aktiver Tab

Ähnliche Themen

Fx 133 > Tableiste unten per CSS-Code, oder per Skript.

Aktiver Tab hat schwarze Umrandung

Mehrere Tabs geöffnet, Hintergrund wird heller

UserChrome.css zum anpassen des Aussehens: Tab mit laufendem Video

Aktiver Tab mit farbigem Rahmen