Abhängigkeit der userChrome.css ....

Mira_Belle

Habe ein Problem mit meiner userChrome.css und einem, bzw. einigen Windows Themes.

Genauer, wenn ich z.B. das Theme "Windows 8 RP Themes for Windows 10" von sagorpirbd

oder ein beliebig anderes von ihm, welches mir wieder einen Fensterrahmen beschert, verwende,

werden "meine" definierten Änderungen in der userChrome.css an diversen Popupmenüs ignoriert.

Gibt es eine Möglichkeit diese Änderungen dennoch zu erzwingen?

grisu2099

Ohne deine userChrome.css zu kennen bestimmt nicht..

Dharkness

Hallo Mira_Belle,

ich denke, in den entsprechenden CSS-Einträgen fehlt appearance: none !important;.

Mira_Belle

Zitat von grisu2099

Ohne deine userChrome.css zu kennen bestimmt nicht..

Sorry, war ja eine ganz allgemeine Frage.

CSS

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

/* ----------------------------------------------------------------------------*/
/***** Abstände der Einträge in den Menüs und Lesezeichen wieder schmaler ******/
/* ----------------------------------------------------------------------------*/

    menupopup > menuitem,
    menupopup > menu {     
        padding-block: 2px !important;
        padding-inline-start: 15px !important;
    }

    /* Rundungen/Ecken der Menüs */
    
    menupopup {
        --panel-border-radius: 7px !important;
}

    /* Schatte & Rahmen um die Menüs */
    
    menupopup {
        -moz-window-shadow: none !important;                    /* Schatten */
        --panel-border-color: tranzparent !important;            /* Rahmen */
  }

/*---------------------------------------------------*/
/********* Anpassungen des "Hamburgermenüs" **********/
/*---------------------------------------------------*/

    :root {
        --arrowpanel-menuitem-padding: 0px 8px !important;            /* Zeilenabstand */
    }
    
/*    #appMenu-multiView .subviewbutton {        
/*        padding-top: 2px !important;                                /* Zeilenabstand */
/*    }*/
    
    #appMenu-protonMainView {                                        /* Menüreite */
        width: 320px !important;            
    }    
    /* Farbe des ersten Separators */
    
    .PanelUI-subView toolbarseparator.proton-zap {
        border-image: none !important;
        background: #5b5b66 !important;                                /* Helles Mausgrau */
    }

    /* Farbe all der anderen Separatoren */

    #widget-overflow-mainView > toolbarseparator, 
    #widget-overflow-mainView > .panel-subview-body > toolbarseparator,
                                .PanelUI-subView toolbarseparator, 
    #permission-popup-mainView > toolbarseparator,
    #protections-popup-multiView toolbarseparator, 
    #identity-popup-mainView > toolbarseparator,
    #identity-popup-securityView > toolbarseparator, 
    #editBookmarkPanel toolbarseparator,
                                .cui-widget-panelview menuseparator, 
                                .cui-widget-panel toolbarseparator,
                                .PanelUI-subView > toolbarseparator {
        background: #5b5b66 !important;                                /* Helles Mausgrau */
    }

    /* Farbe der Schrift & Hintergrund */
    
    panelview,
    #appMenu-popup  .panel-subview-body {
        color: #e1e1e1  !important;                                 /* Hellgrau */
        background: #292c2f  !important;                               /* Dunkles Grau */
    } 
    
    :is(menupopup, panel)[type="arrow"] {
        --panel-background: #292c2f  !important;                    /* Dunkles Grau */
    }
    
/* -----------------------------------------*/
/************* Tabs anpassen ****************/
/* -----------------------------------------*/

    :root {
        --tab-border-radius: 4px !important                            /* Rundung der Ecken */
     }
    :root {
        --inline-tab-padding: 8px !important                        /* Abstand von Links */
    }

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

    .tab-background[selected="true"] {                                                                                            
        background:rgba(255, 148, 0, 0.4) !important;                /* Orange */                                        
        box-shadow: inset  0px 0px 5px 0px #ff9400 !important;        /* Orange */                        
    }                                                                                            

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

    .tab-background:not([selected]):not([multiselected]) {
        background:rgba(225, 225, 225, 0.2) !important;                /* Hellgrau */
        box-shadow: inset 0px 0px 5px 0px #e1e1e1 !important;        /* Hellgrau */
    }

/*---------------------------------------------------*/
/************** Tab schließen X hover  ***************/
/*---------------------------------------------------*/

    .tab-content > .tab-close-button:hover {
        background:rgba(255, 0, 0, 0.4) !important;                    /* Rot */
/*      background: #E81123 !important;                            */    /* Kirschrot */
/*        box-shadow: inset 0px 0px 4px 0px #ff0000 !important;    */    /* Hellrot */
    }

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

/*----------------------------------------------------*/
/* Anpassungen der Navigations- und Lesezeichenleiste */
/*----------------------------------------------------*/

    /* Navigationsleiste Farbe */

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

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

/*---------------------------------------------------*/
/********** Anpassungen in der Adressleiste **********/
/*---------------------------------------------------*/

    /* Lesezeichen-Stern ungesetzt */

    #star-button:not([starred="true"]) {
        fill: rgb(80,160,225) !important;           /* Hellblau */    
    }
    
    /* Lesezeichen-Stern gesetzt */
  
    #star-button[starred="true"] {
/*        fill: rgb(225,225,225) !important;            /* Hellgrau */
        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: none !important;
        --toolbar-field-focus-border-color: transparent !important;
    }
    
    #search-container {
        --toolbar-field-focus-border-color: transparent !important;
    }
    
    #searchbar {
        box-shadow: none !important;
        --toolbar-field-focus-border-color: transparent !important;
    }

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

    /* Markierter Text  */    
    
    ::selection {
        color: #ffffff !important;
        background: #ff8000 !important;
    }
    
    /* Schriftfarbe im Adress- und Suchfeld */
    
    #urlbar-input, #urlbar-scheme, .searchbar-textbox {
/*        color: gray !important;            */        
        color: #e6e6e6 !important;                            /* Sehr helles Grau */
    }
    
    /* Symbolfarbe im Adress- und Suchfeld */
    
    #urlbar:-moz-lwtheme, #searchbar:-moz-lwtheme {
/*        color: rgb(80,160,225) !important;        */        
        color: #e1e1e1 !important;                            /* Hellgrau */
    }
    
/*----------------------------------*/
/********** Line entfernen **********/
/*----------------------------------*/

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

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

/*---------------------------------------------------*/
/********** Anpassungen an der Adressleiste **********/
/*---------------------------------------------------*/
    
    :root {
        --arrowpanel-border-color: transparent !important;                        /* Schatten um Adress- & Suchfeld */
    }                    

/* Farbe Hintergrund des Adressfelds */



/*
#urlbar-input-container:hover:not([disabled]) 
{ 
    background: rgba(255,255,255,0.1) !important;
}
*/

/* Farbe Hintergrund & Schrift im Suchfeld */

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

/* Farbe der Felder (transparent) */

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

.urlbarView {
    background-color: #292c2f !important;
}
/*
#urlbar[open] > #urlbar-background {
    box-shadow: 0px 0px 0px 0px rgba(255, 0, 0, 0.9) !important;
}
*/
/*
#urlbar-background{
  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;                            /* Hellgrau */
/*        background-color: rgba(225, 225, 225, 0.15) !important;            /* Hellgrau, transparent */
        color: #e1e1e1 !important;                                        /* Hellgrau */
    }
    
    /* Schatten um Suchfeld */

    #PopupSearchAutoComplete {
        border-color: red !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 */
/*        background-color: #292c2f !important;        */        /* Farbe Hintergrund */
    }

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

:root[lwtheme-image]:-moz-lwtheme-brighttext {
/*    text-shadow: 1px 1px 1px red;*/
    text-shadow: none !important;
}

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

Alles anzeigen

Boersenfeger

In Zeile 23 ist ein Tippfehler tranzparent ändern in transparent

.DeJaVu

Die Fehlerliste ist noch länger laut Stylus

Code

 Probleme: 8
Code 1

warning
    160    :    5    Line break in selector (forgot a comma?)
warning
    161    :    5    Line break in selector (forgot a comma?)
warning
    194    :    17    Complex selector inside :not().
warning
    304    :    25    Complex selector inside :not().
error
    347    :    2    Expected LBRACE but found '/'.
error
    347    :    2    Unexpected '/'.
Code 2

error
    1    :    2    Expected LBRACE but found '/'.
error
    1    :    2    Unexpected '/'.

Alles anzeigen

Mit Kontrolle in Stylus wär das nicht passiert.

Mira_Belle

Zitat von .DeJaVu

Die Fehlerliste ist noch länger laut Stylus

Mit Kontrolle in Stylus wär das nicht passiert.

Habe die Kommafehler korrigiert.

Danke für den Tip.

Nur mit den Fehlern kann ich so gar nichts anfangen.

Was bedeutet das?

warning	203	:	14	Complex selector inside :not().
warning	278	:	22	Complex selector inside :not().

Die anderen Fehler sind durch das Kopieren passiert,

da waren persönliche Anmerkungen und ich habe unsauber kopiert

und jeweils das " */ " versehendlich mit kopiert.

Dharkness

Hallo Mira_Belle,

ich denke, das z.B. der * Eintrag so ** aussehen sollte.

*

CSS

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

**

CSS

.browser-toolbar:not([class="titlebar-color"]) {
    color: rgba(225, 225, 225, 0.9) !important;
}

milupo

Du hast in den Zeilen 349 und 365 übriggebliebene Kommentarabshlusszeichen */.

Zitat von Mira_Belle

Nur mit den Fehlern kann ich so gar nichts anfangen.

Mir scheint, dass Stylus keine komplexen Selektoren innerhalb von :not() kennt. Dabei ist es schon seit einigen Firefox-Versionen möglich :not() mehrere, durch Komma getrennte Selektoren mitzugeben. In Zeile 100 ist es noch so, wie es früher mal nicht anders ging - es musste für jeden Selektor eine eigene :not()-Funktion angegeben werden.

Mira_Belle

Verstehe ich nicht!

Stylus meckert doch wegen:

CSS

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

und

CSS

    .urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, .urlbarView-row-inner[selected] {
         background-color: #484a4d  !important;                            /* Hellgrau */
/*        background-color: rgba(225, 225, 225, 0.15) !important;            /* Hellgrau, transparent */
        color: #e1e1e1 !important;                                        /* Hellgrau */
    }

warning 196 : 17 Complex selector inside :not().
warning 306 : 25 Complex selector inside :not().

milupo

Zitat von Mira_Belle

Verstehe ich nicht!
Stylus meckert doch wegen:

Ich habe doch geschrieben: Stylus kennt offensichtlich keine komplexen Selektoren - da ist es doch klar, dass die Erweiterung das beanstandet. Aber in Firefox ist das erlaubt. Also ist wohl der Test mit Stylus auch nicht so optimal.

Mira_Belle

Zitat von milupo

Du hast in den Zeilen 349 und 365 übriggebliebene Kommentarabshlusszeichen */.

Ah!

Diese Fehler hatte ich entdeckt und korrigiert.

Den :not() Fehler kann ich also ignorieren.

Fein, dann ist meine userChrome.css ja jetzt Fehlerbereinigt.

Danke.

Nur, kopfkratz, ist mein ursächliches Problem noch nicht zur Sprache gekommen.

Gruß

Mira

Dharkness

Ups,

mal wieder falsch geguckt, so wie ich das sehe, sollte der obere Eintrag so * aussehen und der untere so **..

*

CSS

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

**

CSS

.urlbarView-row:not([type="tip"]):not([type="dynamic"])[selected] > .urlbarView-row-inner, .urlbarView-row-inner[selected] {
     background-color: #484a4d  !important;                            /* Hellgrau */
    /* background-color: rgba(225, 225, 225, 0.15) !important; */      /* Hellgrau, transparent */
    color: #e1e1e1 !important;                                         /* Hellgrau */
}

milupo

Zitat von Mira_Belle

Nur, kopfkratz, ist mein ursächliches Problem noch nicht zur Sprache gekommen.

Wird sicherlich noch. Aber die Fehler in der userChrome.css mussten erst einmal beseitigt werden, sie könnten ja wirklich die Ursache für dein ursächliches Problem sein.

Dharkness

Zitat von milupo

Stylus kennt offensichtlich keine komplexen Selektoren - da ist es doch klar, dass die Erweiterung das beanstandet. Aber in Firefox ist das erlaubt. Also ist wohl der Test mit Stylus auch nicht so optimal.

Ah ok, das wusste ich noch nicht, dann kann ich das in Zukunft als komplexe Selektoren einbauen, Dankeschön für die Info.

milupo

Zitat von Dharkness

Ups,
mal wieder falsch geguckt, so wie ich das sehe, sollte der obere Eintrag so * aussehen und der untere so **..

Es ist aber überhaupt nicht nötig, wieder in zwei :not() aufzutrennen.

Siehe noch hier unter Syntax:

Zitat

The :not() pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a pseudo-element.

milupo

Und hier noch ein Link. not() mit einem komplexen Selektor ist seit Firefox 84 möglich.

Beitrag

RE: Anpassungen wegen Proton

2002Andreas Mal noch zu Zeile 102: Seit Fx 84 ist es möglich, komplexes :not zu verwenden, das heißt, :not kann mehrere Parameter haben. Man muss dann nicht mehr mehrere :not hintereinander schreiben. Es müsste in Zeile 102 auch :not(#bookmarks-menu-button, #alltabs-button, .bookmark-item) funktionieren.

https://developer.mozilla.org/en-US/docs/Moz…fox/Releases/84

milupo

12. April 2021 um 19:28

.DeJaVu

Jetzt noch Mal. milupo hat natürlich recht, allerdings sind die Einträge von Stylus jetzt nicht wegen "kenn ich nicht", sondern Warnungen, dass "Complex selector inside :not()" also not() mehr als einen Eintrag beinhaltet. In dem Sinne "Kein Fehler", habe ich falsch ausgelegt, sorry.

milupo

Es kann natürlich einen Unterschied machen, dass Stylus nur Webseiten verändern kann. Ich weiß nicht genau; ich habe es zwar mal installiert, nutze es aber nicht. So auf den ersten Blick würde ich auch erst einmal sagen CSS ist CSS, aber es könnte schon Unterschiede geben. Vielleicht kennt Stylus aber die neue Möglichkeit wirklich (noch) nicht.

.DeJaVu

Kennen schon, sonst würde da nicht "warning" stehen, aber es kann das Konstrukt vermutlich nicht ausreichend analysieren. Was es jedenfalls nicht erkennt, war das oben angegebene "tranzparent" als Farbe. Aber das würde mich auch nicht wundern, weil man sowas ja auch im root definieren kann, nur das wird dann auch nicht geprüft, solche Dinge bzw Zusammenhänge kennt es gar nicht, da ist Benutzer gefragt.

Abhängigkeit der userChrome.css ....

RE: Anpassungen wegen Proton

Ähnliche Themen

2 kleine fehler, die an der userChrome liegen