about:logins anpassen

Mira_Belle

Und hier mein zweites Projekt!

Und der Code dazu.

CSS

@-moz-document url("about:logins") {
    
    /*------------------------------*/
    /********** Loginliste **********/
    /*------------------------------*/    

    .meta {
        background-color: #292c2f !important;            /* Hintergrundfarbe links in der Kopfzeile der Loginliste    */
        color: #e1e1e1 !important;                        /* Text links in der Kopfzeile der Loginliste    */
    }
    #login-sort {
        color: #e1e1e1 !important;                        /* Text links (Name (A-Z))in der Loginliste    */
    }    
    .login-list-item.selected {
        background-color: #292c2f !important;            /* Hintergrundfarbe des ausgewählten Feldes in der Loginliste    */
        border-inline-start-color: #0BDCFF !important;    /* Linker Rahmen des ausgewählten Feldes in der Loginliste    */
        color: #e1e1e1 !important;                        /* Textfarbe des ausgewählten Feldes in der Loginliste    */
    }
    .login-list-item {
        background-color: #292c2f !important;            /* Hintergrundfarbe der Loginliste    */
    }    
    .login-list-item:hover {
        background: #484B4D !important;                    /* Hintergrundfarbe der Loginliste    */
    }    
    .login-list-item:not(.selected):hover {
        color: #e1e1e1 !important;                        /* Textfarbe in der Loginliste    */
    }

    .title{
        color: #e1e1e1 !important;                        /* Textfarbe Überschriften (IPs & Urls)    */
    }
    .favicon-wrapper {
        color: #e1e1e1 !important;                        /* Farbe der kleinen "Weltkugeln"    */
    }




.empty-search-message{
    color: #e1e1e1 !important;
    background: #292c2f !important;
}

.empty-search-message span{
    color: #e1e1e1 !important;
}

ol {
    background: #292c2f !important;
}

    /*-----------------------------*/
    /******** Benutzernamen ********/
    /*-----------------------------*/

    .username {
        color: #e1e1e1 !important;                        /* Benutzernamen links in der Loginliste    */
    }

    /*----------------------------*/
    /********** Suchfeld **********/
    /*----------------------------*/

    header {
        background-color: #292c2f !important;            /* Hintergrundfarbe um das Suchfeld    */
    }    

.filter {
        background-color: #e1e1e1 !important;
color: green !important;        
        border: 1px solid red !important;
}        

/*
.filter[type="text"] {
        border: 1px solid red !important;
        color: red !important;
}
*/



.empty-search-message  {    
    background-color: #292c2f !important;            /* Hintergrundfarbe der Mesagebox links    */
}


    /*-------------------------------*/
    /**** Button "..." ****/
    /*-------------------------------*/

    .menu-button {
        background: #5b5b66 !important;                /* Hintergrundfarbe des "..."-Button    */  
        color: #e1e1e1 !important;                    /* Textfarbe des "..."-Button    */
        content: "©" !important;
        font-size: 11px !important;
        margin-left: 1px !important;
        margin-right: 10px !important;
        margin-top: 3px !important;
        margin-bottom: 5px !important;
        padding-top: 3px!important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-bottom: 3px !important;     
        border-color: #0BDCFF !important;
        border-style: outset !important;
        border-width:3px !important;
    border-radius: 8px !important;
    }    
    
    
    .menu-button:hover {    
        background: #e1e1e1 !important;                /* Textfarbe des gehoverten "..."-Button    */
        color: #292c2f !important;                    /* Hintergrundfarbe des gehoverten "..."-Button    */    
    }
    
    
    
    /*-----------------------------*/
    /************ Mitte ************/
    /*-----------------------------*/

    .container {
        background-color: #292c2f !important;         /* Hintergrundfarbe des Mittelfeldes    */
    }    
    .field-label {
        color: #e1e1e1 !important;                    /* Text im Mittelfeld */
    }
    .header {
        border-bottom: 2px solid #e1e1e1 !important;    /* Trennlinie (Seperator) */
        color: #e1e1e1 !important;                        /* Farbe der Wltkugel    */
    }
    input[type="text"]:read-only {
    color: #e1e1e1 !important;                        /* Farbe des "Benutzer"    */    
    }

    .password-display {
        color: #e1e1e1 !important;                    /* Farbe der "Dots"    */    
    }            
    .reveal-password-checkbox {
        color: #e1e1e1 !important;                    /* Farbe des "Auges"    */    
    }    
    /*-------------------------------*/
    /**** Button "Syncronisieren" ****/
    /*-------------------------------*/
    
.fxaccounts-extra-text {
    color: #e1e1e1 !important;                        /* Farbe des Textes vor dem Syncronisieren-Button    */
        padding-right: 20px !important;    
    }
    .fxaccounts-enable-button {
        background: #5b5b66 !important;                /* Hintergrundfarbe des Syncronisieren-Button    */  
        color: #e1e1e1 !important;                    /* Textfarbe des Syncronisieren-Button    */
        margin-left: 1px !important;
        margin-right: 10px !important;
        margin-top: 3px !important;
        margin-bottom: 5px !important;
        padding-top: 3px!important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 3px !important;     
        border-color: #0BDCFF !important;
        border-style: outset !important;
        border-width:3px !important;
    border-radius: 8px !important;
    }
    .fxaccounts-enable-button:hover {
        background: #e1e1e1 !important;                /* Textfarbe des gehoverten Syncronisieren-Button    */
        color: #292c2f !important;                    /* Hintergrundfarbe des gehoverten Syncronisieren-Button    */    
    }

    /*---------------------------*/
    /**** Button "Bearbeiten" ****/
    /*---------------------------*/
    
    .edit-button {
        background: #5b5b66 !important;                /* Hintergrundfarbe des Bearbeiten-Button    */
        color: #e1e1e1 !important;                    /* Textfarbe des Bearbeiten-Button    */    
        margin-left: 1px !important;
        margin-right: 10px !important;
        margin-top: 3px !important;
        margin-bottom: 5px !important;
        padding-top: 3px!important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 3px !important;     
        border-color: #0BDCFF !important;
        border-style: outset !important;
        border-width:3px !important;
    border-radius: 8px !important;    
    
/*    fill: blue !important;    */                        /* Farbe des Bearbeiten-Icon    */    

}
    .edit-button:hover {
        background: #e1e1e1 !important;                /* Textfarbe des gehoverten Syncronisieren-Button    */
        color: #292c2f !important;                    /* Hintergrundfarbe des gehoverten Bearbeiten-Button    */
    }

    /*--------------------------*/
    /**** Button "Entfernen" ****/
    /*--------------------------*/
    
    .delete-button {
        background: #5b5b66 !important;                /* Hintergrundfarbe des Entfernen-Button    */         
        color: #e1e1e1 !important;                    /* Textfarbe des Entfernen-Button    */            
        margin-left: 1px !important;
        margin-right: 10px !important;
        margin-top: 3px !important;
        margin-bottom: 5px !important;
        padding-top: 3px!important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 3px !important;     
        border-color: #0BDCFF !important;
        border-style: outset !important;
        border-width:3px !important;
    border-radius: 8px !important;

/*    fill: blue !important;    */                        /* Farbe des Entfernen-Button    */

}
    .delete-button:hover {
        background: #e1e1e1 !important;                /* Textfarbe des gehoverten Entfernen-Button    */
        color: #292c2f !important;                    /* Hintergrundfarbe des gehoverten Entfernen-Button    */
    }

    /*---------------------------------------*/
    /**** Button "Kopieren Benutzernamen" ****/
    /*---------------------------------------*/
    
    .copy-username-button {
        background: #5b5b66 !important;                /* Hintergrundfarbe des Kopieren-Button    */         
        color: #e1e1e1 !important;                    /* Textfarbe des Kopieren-Button    */            
        margin-left: 1px !important;
        margin-right: 10px !important;
        margin-top: 3px !important;
        margin-bottom: 5px !important;
        padding-top: 3px!important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 3px !important;     
        border-color: #0BDCFF !important;
        border-style: outset !important;
        border-width:3px !important;
        border-radius: 8px !important;        
    }
    .copy-username-button:hover {
        background: #e1e1e1 !important;                /* Textfarbe des gehoverten Kopieren-Button    */
        color: #292c2f !important;                    /* Hintergrundfarbe des gehoverten Kopieren-Button    */
    }        

    /*----------------------------------*/
    /**** Button "Kopieren Passwort" ****/
    /*----------------------------------*/
    
    .copy-password-button {
        background: #5b5b66 !important;                /* Hintergrundfarbe des Kopieren-Button    */         
        color: #e1e1e1 !important;                    /* Textfarbe des Kopieren-Button    */            
        margin-left: 1px !important;
        margin-right: 10px !important;
        margin-top: 3px !important;
        margin-bottom: 5px !important;
        padding-top: 3px!important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 3px !important;     
        border-color: #0BDCFF !important;
        border-style: outset !important;
        border-width:3px !important;
        border-radius: 8px !important;        
    }        

    .copy-password-button:hover {
        background: #e1e1e1 !important;                /* Textfarbe des gehoverten Kopieren-Button    */
        color: #292c2f !important;                    /* Hintergrundfarbe des gehoverten Kopieren-Button    */
    }

    /*----------------------------------*/
    /******** Meta-Informationen ********/
    /*----------------------------------*/
    
    .meta-info {
        color: #e1e1e1 !important;                    /* Textfarbe der Metainfos    */
    }

    /*-----------------------------------*/
    /** Button "Zugansdaten hinzufügen" **/
    /*-----------------------------------*/

    .create-login-button {
        background: #5b5b66 !important;                /* Hintergrundfarbe des Zugansdaten hinzufügen-Button*/         
        color: #e1e1e1 !important;                    /* Textfarbe des Zugansdaten hinzufügen-Button*/            
        margin-left: 50px !important;
        margin-right: 50px !important;
        margin-top: 3px !important;
        margin-bottom: 5px !important;
        padding-top: 3px!important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        padding-bottom: 3px !important;     
        border-color: #0BDCFF !important;
        border-style: outset !important;
        border-width:3px !important;
        border-radius: 8px !important;        
    }        
    .create-login-button:hover {
        background: #e1e1e1 !important;                /* Textfarbe des gehoverten Zugansdaten hinzufügen-Button    */
        color: #292c2f !important;                    /* Hintergrundfarbe des gehoverten Zugansdaten hinzufügen-Button*/
    }                
    .create-login-button-container {
        background-color: #292c2f !important;        /* Hintergrundfarbe um den Button    */
    }
    .create-login-button-container:hover {
        background: #292c2f !important;                /* Hintergrundfarbe um den gehoverten Button    */
    }

    /*------------------------------*/
    /*** Button zur Url, bzw Page ***/
    /*------------------------------*/

    .origin-input{
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 1px !important;
        margin-right: 10px !important;
        margin-top: 3px !important;
        margin-bottom: 5px !important;
        padding-top: 3px!important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 3px !important;     
        border-color: #0BDCFF !important;
        border-style: outset !important;
        border-width:3px !important;
        border-radius:8px!important;
    }
    .origin-input:hover{
        background: #e1e1e1 !important;
        color: #292c2f !important;   
    }
    a:hover {
        text-decoration: none !important;        /* Links nicht unterstichen    */
    }
 
}

Alles anzeigen

Wie unschwer zu erkennen bin ich nicht fertig.

Das liegt daran, dass ich mal wieder nicht weiter komme und die richtigen "Zeiger" finde.

Deshalb erbitte ich mir Hilfe.

Da wäre das Suchfeld!

Im "aktiven" Zustand ist der Ramen blau! Dazu habe ich den Eintrag nicht gefunden.

Im "passiven" Zustand ist der Ramen rot und auch nur 1px "dick".

Da zu hat dieser Code beigetragen.

CSS

.filter {
        border: 1px solid red !important;
}

Ich habe es mit .filter:active versucht, mit .filter:hover:active,

hat nichts genutzt.

Auch möchte ich die Hintergrundfarbe und die Textfarbe ändern,

und zwar in beiden Zuständen unterschiedlich!

Die andere Baustelle ist der Button ganz oben rechts!

Da wird der Text, das sind nur drei Punkte, einfach nicht dargestellt!

Warum?

Dann kam mir eine ganz verwegene Idee!

Kann man diesen nicht vorhandenen Text nicht durch das "Hamburgermenüsymbol" ersetzen?

UND jeweils einmal hell und gehovert dunkel einfügen?

Gruß

Mira

Sören Hentzschel

Zitat von Mira_Belle

Ich habe es mit .filter:active versucht, mit .filter:hover:active,
hat nichts genutzt.

.filter:focus

2002Andreas

Zitat von Mira_Belle

der Button ganz oben rechts!

Statt:

CSS

.menu-button {
        background: #5b5b66 !important;                /* Hintergrundfarbe des "..."-Button    */

Neu:

CSS

.menu-button {
        background-color: #5b5b66 !important;                /* Hintergrundfarbe des "..."-Button    */

Durch das background-color wird nur der Hg grau, und nicht auch die 3 Punkte.

Und bei hover muss das dann so aussehen:

CSS

    .menu-button:hover {    
        background-color: #e1e1e1 !important;                /* Textfarbe des gehoverten "..."-Button    */
        fill: #292c2f !important;            /* Hintergrundfarbe des gehoverten "..."-Button    */   
    }

Mira_Belle

Der neue Code für das Suchfeld schaut jetzt so aus:

CSS

.filter {
        background-color: #5b5b66 !important;        
        color: #e1e1e1 !important;
        border-color: #e1e1e1 !important;
        border-width:1px !important;
/*        border-style: outset !important;    */
        border-radius: 8px !important;
}        


.filter:focus {
        background-color: #e1e1e1 !important;
        color: #5b5b66 !important;
        border-color: #0BDCFF !important;
        border-width:3px !important;
        border-style: outset !important;
        border-radius: 8px !important;
}

Alles anzeigen

Ich find's klasse.

Danke Sören.

Und der Code für den Button so:

CSS

    .menu-button {
        background-color: #5b5b66 !important;                /* Hintergrundfarbe des "..."-Button    */  
        color: #e1e1e1 !important;                    /* Textfarbe des "..."-Button    */
        margin-left: 1px !important;
        margin-right: 10px !important;
        margin-top: 3px !important;
        margin-bottom: 5px !important;
        padding-top: 3px!important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-bottom: 3px !important;     
        border-color: #0BDCFF !important;
        border-style: outset !important;
        border-width:3px !important;
    border-radius: 8px !important;
    }    
    
    
    .menu-button:hover {    
        background-color: #e1e1e1 !important;                /* Textfarbe des gehoverten "..."-Button    */
        color: #292c2f !important;                    /* Hintergrundfarbe des gehoverten "..."-Button    */    
    }

Alles anzeigen

Danke Andreas.

Gruß

Mira

Mal schauen, was ich als Nächstes anstelle.

2002Andreas

Zitat von Mira_Belle

Ich find's klasse.

Du hast dir dabei auch viel Mühe gegeben

Mira_Belle

Zitat von 2002Andreas

Du hast dir dabei auch viel Mühe gegeben

Danke.

Ich hoffe, dass auch andere User mit dem Code was anfangen können,

und ich hab' "Blut" geleckt.

Gruß

Mira

Apropos Mühe, ich habe auch das Design z.T, in den anderen Codes angepasst.

Es ist ja noch nicht ganz stimmig.

Die "Einstellungen" werden alles von mir abverlangen.

2002Andreas

Zitat von Mira_Belle

und ich hab' "Blut" geleckt.

Mein Reden schon seit Jahren...das macht süchtig

Als ich noch jung war...damals noch mit Stylish

Mira_Belle

Ich habe da noch ein Problem!

Der aktive Rahmen den ich mit diesem Code generieren,

CSS

    .filter:focus {
/*      background-color: #e1e1e1 !important;   */
        background-color: #a1a1a1 !important;
        color: #5b5b66 !important;
        border-color: #0BDCFF !important;
        border-width:3px !important;
        border-style: outset !important;
        border-radius: 8px !important;
    }

Wird durch einen Blauen überdeckt!

Das ist der vom FF.

Wie bekomme ich DEN den weg?

Gruß

Mira

2002Andreas

Zitat von Mira_Belle

Wird durch einen Blauen überdeckt!

Meinst du das so bei focus?

Wenn ja, dann teste bitte mal:

CSS

.filter:focus {
    --in-content-focus-outline-color: #0BDCFF !important;
}
    
        .filter:focus {
/*      background-color: #e1e1e1 !important;   */
        background-color: #a1a1a1 !important;
        color: #5b5b66 !important;
        border-color: #0BDCFF !important;
        border-width:3px !important;
        border-style: outset !important;
        border-radius: 8px !important;
    }

Alles anzeigen

Mira_Belle

Zitat von 2002Andreas
Meinst du das so bei focus?

Wenn ja, dann teste bitte mal:
CSS
.filter:focus {
    --in-content-focus-outline-color: #0BDCFF !important;
}

Ja.

Der Code war's!

Danke.

CSS

    .filter:focus {
        --in-content-focus-outline-color: transparent !important;
        background-color: #e1e1e1 !important;
        color: #000000 !important;
        border-color: #0BDCFF !important;
        border-width:3px !important;
        border-style: outset !important;
        border-radius: 8px !important;
    }

So ist es so, wie ich es gerne hätte.

Gruß

Mira

2002Andreas

Zitat von Mira_Belle

So ist es so, wie ich es gerne hätte.

Na dann, freut mich wenn du zufrieden bist

Sören Hentzschel · Bildschirmfoto 2022-01-22 um 16.21.32.png

Zitat von Mira_Belle

Wird durch einen Blauen überdeckt!
Das ist der vom FF.
Wie bekomme ich DEN den weg?

Du kannst dir bestehendes CSS auch über die Entwicklerwerkzeuge von Firefox ansehen, auch das CSS für :focus. Klicke dazu auf die Schaltfläche :hov.

Mira_Belle

Zitat von Sören Hentzschel

Du kannst dir bestehendes CSS auch über die Entwicklerwerkzeuge von Firefox ansehen, auch das CSS für :focus. Klicke dazu auf die Schaltfläche :hov.

Danke Sören,

dass muss ich mir merken,

und damit mal etwas herumspielen, damit ich damit auch lerne umzugehen.

Gruß

Mira

Boersenfeger

BTW: Du solltest vielleicht aus dem Bild deine Mailadresse entfernen, wenn diese real ist...

Mira_Belle

Zitat von Boersenfeger

BTW: Du solltest vielleicht aus dem Bild deine Mailadresse entfernen, wenn diese real ist...

Danke, aber was kann passieren, wenn nicht?

Spam? Es gibt da zwei vorgeschaltete unterschiedliche Filter.

Und wenn es einfach zu blöd wird, wird dieses Postfach einfach nicht mehr genutzt.

Ist eh nur ein fast toter Briefkasten.

Gruß

Mira

PS: habe aber vorsichtshalber dennoch die Grafik mal rausgenommen.

Boersenfeger

Nun gut, deine Entscheidung!

Wenn diese Mailadresse deine Hauptadresse ist mit der du vielleicht auch bei Banken oder anderen Shops angemeldet bist, wäre ein Schritt zum Identitätsklau getan.. BTW: Niemand muss Hinweisen folgen, eine Diskussion darüber braucht man aber auch nicht führen!

Mira_Belle

Zitat von Boersenfeger

Nun gut, deine Entscheidung!
Wenn diese Mailadresse deine Hauptadresse ist mit der du vielleicht auch bei Banken oder anderen Shops angemeldet bist, wäre ein Schritt zum Identitätsklau getan.. BTW: Niemand muss Hinweisen folgen, eine Diskussion darüber braucht man aber auch nicht führen!

Habe doch die Grafik rausgenommen.

Und die Frage ist, war erst gemeint!

Gruß

Mira

Boersenfeger

OK, hatte nicht nachgesehen und das PS kam wohl, als ich schon getippt hatte. Alles gut