Buttons unter about:logins

2002Andreas

Zitat von Mira_Belle

Ach ja, und ich soll putzen.

Zitat von Firefox_94.0.1

in dem Code zusätzliche Icons definiert, die ich nicht brauche.

So ist er ohne Icons.

CSS

    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url-prefix(about:logins) {
        
    html {
        background: #ffd700 !important;
    }    
     
    .no-logins.initialized body login-intro{     
        scrollbar-width: none !important;
    }
    
    /* alle Button der originale graue HG weg */
    

    button {
    color: #ffd700 !important;
    }
    button,    
    button:hover {
    --in-content-button-background: none !important;
    --in-content-button-background-hover: none !important;
    --in-content-button-background-active: none !important;
}
     
    
    /* oben der Text "Zugangsdaten" */
    .count {
        color: #0f6acc !important; 
        font-size: 15px !important; 
        font-weight: bold !important;
        padding-right: 20px !important;
    }
    
       /* Einträge in der Liste Abstand von links */
    li[class="login-list-item"],
    li[class="login-list-item selected"]{
        padding-left: 25px !important;
    }
        
    /* erstes Feld linke Seite (bei Name u. Zugangsdaten) */
    div.meta {
        padding-left: 35px !important;
        padding-top: 10px !important;
        margin-top: -1px !important;
        background-color: #fffff0 !important;
        /* border-bottom: 2px solid orange !important; 
        border-top: 2px solid orange !important; */
    }    
    
    /* Hintergrundbox bei Button mit + Zeichen */
    div.listHeader div.create-login-button-container {
        background-color: #9c1818 !important;
        margin: 3px 0 0 0 !important; 
        /* border: 2px solid coral !important; */
        box-shadow: none !important; 
    }
    div.listHeader div.create-login-button-container:hover {
        background-color: lightyellow !important;
        margin: 3px 0 0 0 !important; 
       /*  border: 2px solid blue !important; */
        box-shadow: none !important; 
    }
    
    /* rechts die Box über der blauen Linie */
    .header {
        margin-top: 20px!important;
    }
        
    .header, li {
        border-bottom: none !important;
        box-shadow: none !important;        
    }
        
    /* linke Seite unter den Einträgen Border */
    div.container ol li#new-login-list-item.login-list-item.selected,
    div.container ol section.login-list-section{
        /* border-bottom: 1px solid silver !important;  */
        box-shadow: none !important;
    }
        
    
    /* HG für das obere rechte Feld */
    .initialized body header,
    .login-selected.initialized body header{
        /* border-bottom: 2px solid orange !important; */
        background: #ffd700  !important;
        height: 52px !important;
    }
        
    /* HG für das linke obere Feld */
    div.listHeader{
        background-color: #ffd700  !important;
    }
    
    /* Suchfeld oben */  
    .filter,
    login-filter {
        appearance: none !important; 
        border-radius:20px !important;
        margin-left: 5px  !important;
        margin-top: 2px  !important;
        min-width: 235px !important;
        max-width: 235px !important;
    }
    
    /* HG des Suchfeldes */
    input.filter{
        background:#fffff0 !important;
    }    
        
    body {
        background-color: #ffd700 !important;
        max-width: 1400px !important;
        max-height: 800px !important;
        margin-left: auto /* 350px */ !important;
        margin-right: auto /* 350px */ !important;
        /* border: 5px solid dodgerblue !important; */ 
        margin-top: 30px !important;
    }
    
    /* rechte Seite großes Feld */
    html.official-branding.no-logins.initialized body section login-intro,
    div.container {
        max-height: 728px !important;
    }
        
    .time-created,
    body > login-list:nth-child(2), li, .header, header,
    .meta{
        box-shadow: none !important;
    }
    
    /* rechte Seite großes Feld */
    div.container {
        background: #ffd700  !important;
        border-left: 2px solid silver !important;
    }
    
    /* links oben das erste Feld */
    .meta {
        background:#ffd700  !important;
    }
    .meta:hover {
        background: #ffe680 !important;
    }
    
    /* linke Seite die untere Box */
    div.container ol{
        background: #ffd700  !important;
    }
    
    #login-sort label {
        padding-left: 25px !important;
    }    
    
    .login-list-item.selected {
        background: #fff0b3 !important; 
        border-left: 2px!important;
    }
    .login-list-item.selected:hover {
        background: #ffdb4d !important;        
    }
    
    /* rechts die große Box */
    html.initialized body login-item,
    .login-selected.initialized body login-item {
        margin-left: 30px !important;
    }
    
    /* links die große Box */
    html.initialized body login-list.initialized.create-login-selected,
    .login-selected.initialized body login-list.initialized {
        margin-right: -40px !important;
        min-width: 350px !important;
        max-width: 350px !important;
        border: 0px !important;
    }

    .login-list-item{
   /*  border: 1px solid #B2B2B2 !important; */
    background-color: #ffefdb !important;
    color: #000 !important;
    padding: 1px 5px 5px 15px !important;
    margin: 3px 6px 0 3px !important;
    }
    .login-list-item:hover {
    /* border: 1px solid #B2B2B2 !important; */
    background-color: #f0ffff !important;
    color: #000 !important;
    }

    .login-list-item.selected {
   /*  border: 1px solid #B2B2B2 !important; */
    background-color: #6f4e37 !important;
    color: yellow !important;
    padding: 1px 5px 5px 15px !important;
    margin: 3px 6px 0 3px !important;
    }
    .login-list-item.selected:hover {
    background-color: #f0ffff !important;
    color: #000 !important;
    }

    
    .favicon-wrapper,
    .login-item-favicon-wrapper {
        fill: #e69500 !important;
    }
    
    /* rechts blaue horizontale Linie */
    div.container div.column div.header {
        border-bottom: 2px solid dodgerblue !important;
        margin-right: -200px !important;
    }
    
    /* Popup "Neue Zugangsdaten hinzufügen" Border-Radius bei den drei Boxen */
    div.container div.column form div.detail-row label.detail-cell input{
        border-radius: 20px !important;
    }

    /* Button links oben "Name" */
    #login-sort {
    background: #9c1818 !important;
    padding-left:40px !important;
    padding-right: 5px !important;
    padding-top:  4px!important; 
    padding-bottom: 0px!important; 
    background-position:10px 7px!important;
    font-size:14.0px!important;
   /*  border-style: outset !important;
    border-left-color:  lightblue!important;
    border-top-color:  lightblue!important;
    border-right-color:  dodgerblue!important;
    border-bottom-color:  dodgerblue!important;
    border-width:2px !important; */
    color:yellow !important;
    margin-left: -15px !important;
    max-width: 160px  !important;
    }
    
    #login-sort:hover {
    background: #B2EDFA  !important;
    padding-left:40px!important ;
/*     border-style: outset !important;
    border-width:2px !important;
    border-left-color:  #bbddff !important;
    border-top-color:  #bbddff !important;
    border-right-color:  #11508d !important;
    border-bottom-color:  #11508d !important; */
    background-position:10px 5px!important;
    }
    
    /* Button bearbeiten */
    .edit-button {
     height: 32px !important;
    background: #9c1818 !important;
    margin-right: 20px !important;
    padding: 0 5px 0 25px !important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:20px !important;
    color:yellow !important; 
    }

    .edit-button:hover {
    appearance:none!important;
    background: #B2EDFA !important;
  /*   border: 1px solid coral !important; */
    padding: 0 5px 0 25px !important;
    }
    /* Text im Button verlagert */
    button.ghost-button span {
    margin-top: -3px !important;
    }

    /* Button "Entfernen" */
    .delete-button {
    appearance:none!important;
    height: 32px !important;
    background: #9c1818 !important;
    padding: 0 5px 0 25px !important;
      font-size:14.0px!important;
/*     border: 1px solid dodgerblue !important;*/
    border-radius:20px !important; 
    color:yellow !important; 
    }
    
    .delete-button:hover {
    appearance:none!important;
    background: #B2EDFA !important;
    /* border: 1px solid coral !important; */
    padding: 0 5px 0 25px !important;
    }    

    /* Button "Kopieren" (Namen) */
    div.detail-row login-command-button.copy-button.copy-username-button {
    appearance:none!important;
    height: 30px !important;
    background: #9c1818  !important;
    padding: 0 5px 0 35px !important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
 /*    border: 1px solid dodgerblue !important;*/
    border-radius:20px!important; 
    color:yellow !important; 
    }

    div.detail-row login-command-button.copy-button.copy-username-button:hover {
    appearance:none!important;
    background: #B2EDFA !important;
    padding: 0 5px 0 35px !important;
   /*  border: 1px solid coral !important; */
    background-size: 18px 18px !important;
    }
    
    /* originale Icons in den Button ausgeblendet */
 /*    .ghost-button > img:nth-child(1) {
    display: none !important;
    } */

    /* Button "Kopieren" (Passwort) */
    div.detail-row login-command-button.copy-button.copy-password-button {
    appearance:none!important;
    height: 30px !important;
    background: #9c1818 !important;
    padding: 0 5px 0 35px !important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
  /*   border: 1px solid dodgerblue !important;*/
    border-radius:20px!important; 
    color:yellow !important; 
    }

    div.detail-row login-command-button.copy-button.copy-password-button:hover {
    appearance:none!important;
    background: #B2EDFA !important;
    padding: 0 5px 0 35px !important;
    /* border: 1px solid coral !important; */
    background-size: 18px 18px !important;
    }
    /* Text im Button verlagert */
    button:nth-child(3) > span:nth-child(1){    
    margin-top: -3px !important;
    }        
        
    /* für Button "Kopieren" die Länge */    
    div.detail-row login-command-button.copy-button.copy-username-button,
    div.detail-row login-command-button.copy-button.copy-password-button {
    min-width: 120px !important;
    }

    
    /* Button "Adresse der Website" */
    .origin-input {
    appearance:none!important;
    background: #F0F0F0 !important;
    padding: 2px 40px 6px 45px !important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
/*     border: 1px solid dodgerblue !important;*/
    border-radius:20px!important; 
    color:black !important; 
    }

    .origin-input:hover {
    appearance:none!important;
    background: #B2EDFA !important;
    padding: 2px 40px 6px 45px !important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
/*     border: 1px solid coral !important; */
    border-radius:20px!important;
    color:yellow !important; 
    }    
    
    .fxaccounts-enable-button {
    appearance:none!important;
    background: #9c1818  !important;
    padding-left:35px!important;
    padding-top:  2px!important; 
    padding-bottom: 4px!important; 
    color:yellow!important;
    font-size:14px!important;
    text-decoration:none!important;
    padding-right:25px!important;
/*     border-left-color:  lightblue!important;
    border-top-color:  lightblue!important;
    border-right-color:  dodgerblue!important;
    border-bottom-color:  dodgerblue!important;
    border-style: outset !important;
    border-width:2px !important;*/
    border-radius:20px!important; 
    }

    .fxaccounts-enable-button:hover {
    appearance:none!important;
    background: #B2EDFA  !important;
/*     border-style: outset !important;
    border-width:2px !important;
    border-left-color:  #bbddff !important;
    border-top-color:  #bbddff !important;
    border-right-color:  #11508d !important;
    border-bottom-color:  #11508d !important; */
    }    

    /* Button "Speichern" im Menü "Neu" */
    .save-changes-button {
    appearance:none!important;
    background: #9c1818 !important;
    padding: 0 25px 0 45px !important;
    background-size: 17px 17px !important;
    font-size:14.0px!important;
/*     border: 1px solid dodgerblue !important;*/
    border-radius:20px!important; 
    color:black !important; 
    }
    
    .save-changes-button:hover {
    appearance:none!important;
    background: #B2EDFA  !important;
    padding: 0 25px 0 45px !important;
   /*  border: 1px solid coral !important; */
    background-size: 17px 17px !important;
    }
        
    /* Button "Abbrechen" im Menü "Neu" */
    .cancel-button {
    appearance:none!important;
    background: #9c1818  !important;
    padding: 0 25px 0 45px !important;
    background-size: 17px 17px !important;
    font-size:14.0px!important;
 /*    border: 1px solid dodgerblue !important;*/
    border-radius:20px!important; 
    color:yellow !important; 
    }
    
    .cancel-button:hover {
    appearance:none!important;
    background: #B2EDFA  !important;
    padding: 0 25px 0 45px !important;
  /*   border: 1px solid coral !important; */
     background-size: 17px 17px !important;
    }        
    
    /* Auge vor Passwort kopieren */
    .reveal-password-checkbox {
        fill: #0070ff !important;
    }
    .reveal-password-checkbox:hover {
        fill: #c32148 !important;
    }
    
    /* Web-Adresse im Menü "Neu" linker Abstand */
    div.container div.column form div.detail-row label.detail-cell input{
    padding-left: 15px !important;
    }
    
    /* Überschrift im Menü "Neu" */
    div.container div.column div.header h2.title span.new-login-title {
    color: #006b3c !important;
    }
    /* das Welt-Icon davor */ 
    div.container div.column div.header img.login-item-favicon {
    fill: brown !important;
    }

    /* Drei-Punkte-Button oben rechts */
    button.menu-button.ghost-button {
        background-color: #9c1818 !important;
       /*  border: 2px solid orange !important;
        border-radius: 0 !important; */
        fill: green !important;        
    }
    button.menu-button.ghost-button:hover {
        background-color: #B2EDFA !important;
        /* border: 2px solid crimson !important; */
        fill: red !important;        
    }
    /* Menü hinter Drei-Punkte-Button */
    ul.menu button.menuitem-button {
        background-color: beige !important;
       /*  border: 1px solid silver !important; */
        margin-top: 2px !important;
    }
    ul.menu button.menuitem-button:hover {
        background-color: #B2EDFA !important;
       /*  border: 1px solid coral !important; */
    }    
    
    .meta-info:first-of-type::before {
        border-top: none  !important;
    }    
    
    /* Popup-Menü hinter Dreipunkte-Button - die Button */
    .menu {
       /*  border: 3px solid dodgerblue !important; */
        padding: 5px !important;
    }

    .menuitem-import-browser {
        width: 100% !important;
        height: 24px !important;
        fill:  green !important;
        color: black!important;
    }
    
    .menuitem-export {
        width: 100% !important;
        height: 24px !important;
        fill:  orange !important;
        color: black !important;
    }
    
    .menuitem-import {
        width: 100% !important;
        height: 24px !important;
        fill:  #cc3300!important;
        color: black !important;
    }
    
    .menuitem-import-file {
        width: 100% !important;
        height: 24px !important;
        fill:  blue !important;
        color: black !important;
    }
    
    .menuitem-remove-all-logins {
        width: 100% !important;
        height: 24px !important;
        fill:  #cc3300!important;
        color: black !important;
        margin-left: -1px !important;
    }
    
    .menuitem-help {
        width: 100% !important;
        height: 24px !important;
        fill: blue!important;
        color: black !important;
    }
    
    .menuitem-preferences {
        width: 100% !important;
        height: 24px !important;
        fill: dodgerblue!important;
        color: blue !important;
        font-weight: 600 !important;
    }    
    
    .menuitem-mobile[data-l10n-id="menu-menuitem-android-app"] {
        width: 100% !important;
        height: 24px !important;
        fill: #33cc33!important;
        color: black!important;
    }

    .menuitem-mobile[data-l10n-id="menu-menuitem-iphone-app"] {
        width: 100% !important;
        height: 24px !important;
        fill: #9900ff!important;
        color: black!important;
    }    
    }

Alles anzeigen

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Mira_Belle

Ach ja, und ich soll putzen.

Zitat von Firefox_94.0.1

in dem Code zusätzliche Icons definiert, die ich nicht brauche.

So ist er ohne Icons.

CSS

    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url-prefix(about:logins) {
        
    html {
        background: #ffd700 !important;
    }    
     
    .no-logins.initialized body login-intro{     
        scrollbar-width: none !important;
    }
    
    /* alle Button der originale graue HG weg */
    

    button {
    color: #ffd700 !important;
    }
    button,    
    button:hover {
    --in-content-button-background: none !important;
    --in-content-button-background-hover: none !important;
    --in-content-button-background-active: none !important;
}
     
    
    /* oben der Text "Zugangsdaten" */
    .count {
        color: #0f6acc !important; 
        font-size: 15px !important; 
        font-weight: bold !important;
        padding-right: 20px !important;
    }
    
       /* Einträge in der Liste Abstand von links */
    li[class="login-list-item"],
    li[class="login-list-item selected"]{
        padding-left: 25px !important;
    }
        
    /* erstes Feld linke Seite (bei Name u. Zugangsdaten) */
    div.meta {
        padding-left: 35px !important;
        padding-top: 10px !important;
        margin-top: -1px !important;
        background-color: #fffff0 !important;
        /* border-bottom: 2px solid orange !important; 
        border-top: 2px solid orange !important; */
    }    
    
    /* Hintergrundbox bei Button mit + Zeichen */
    div.listHeader div.create-login-button-container {
        background-color: #9c1818 !important;
        margin: 3px 0 0 0 !important; 
        /* border: 2px solid coral !important; */
        box-shadow: none !important; 
    }
    div.listHeader div.create-login-button-container:hover {
        background-color: lightyellow !important;
        margin: 3px 0 0 0 !important; 
       /*  border: 2px solid blue !important; */
        box-shadow: none !important; 
    }
    
    /* rechts die Box über der blauen Linie */
    .header {
        margin-top: 20px!important;
    }
        
    .header, li {
        border-bottom: none !important;
        box-shadow: none !important;        
    }
        
    /* linke Seite unter den Einträgen Border */
    div.container ol li#new-login-list-item.login-list-item.selected,
    div.container ol section.login-list-section{
        /* border-bottom: 1px solid silver !important;  */
        box-shadow: none !important;
    }
        
    
    /* HG für das obere rechte Feld */
    .initialized body header,
    .login-selected.initialized body header{
        /* border-bottom: 2px solid orange !important; */
        background: #ffd700  !important;
        height: 52px !important;
    }
        
    /* HG für das linke obere Feld */
    div.listHeader{
        background-color: #ffd700  !important;
    }
    
    /* Suchfeld oben */  
    .filter,
    login-filter {
        appearance: none !important; 
        border-radius:20px !important;
        margin-left: 5px  !important;
        margin-top: 2px  !important;
        min-width: 235px !important;
        max-width: 235px !important;
    }
    
    /* HG des Suchfeldes */
    input.filter{
        background:#fffff0 !important;
    }    
        
    body {
        background-color: #ffd700 !important;
        max-width: 1400px !important;
        max-height: 800px !important;
        margin-left: auto /* 350px */ !important;
        margin-right: auto /* 350px */ !important;
        /* border: 5px solid dodgerblue !important; */ 
        margin-top: 30px !important;
    }
    
    /* rechte Seite großes Feld */
    html.official-branding.no-logins.initialized body section login-intro,
    div.container {
        max-height: 728px !important;
    }
        
    .time-created,
    body > login-list:nth-child(2), li, .header, header,
    .meta{
        box-shadow: none !important;
    }
    
    /* rechte Seite großes Feld */
    div.container {
        background: #ffd700  !important;
        border-left: 2px solid silver !important;
    }
    
    /* links oben das erste Feld */
    .meta {
        background:#ffd700  !important;
    }
    .meta:hover {
        background: #ffe680 !important;
    }
    
    /* linke Seite die untere Box */
    div.container ol{
        background: #ffd700  !important;
    }
    
    #login-sort label {
        padding-left: 25px !important;
    }    
    
    .login-list-item.selected {
        background: #fff0b3 !important; 
        border-left: 2px!important;
    }
    .login-list-item.selected:hover {
        background: #ffdb4d !important;        
    }
    
    /* rechts die große Box */
    html.initialized body login-item,
    .login-selected.initialized body login-item {
        margin-left: 30px !important;
    }
    
    /* links die große Box */
    html.initialized body login-list.initialized.create-login-selected,
    .login-selected.initialized body login-list.initialized {
        margin-right: -40px !important;
        min-width: 350px !important;
        max-width: 350px !important;
        border: 0px !important;
    }

    .login-list-item{
   /*  border: 1px solid #B2B2B2 !important; */
    background-color: #ffefdb !important;
    color: #000 !important;
    padding: 1px 5px 5px 15px !important;
    margin: 3px 6px 0 3px !important;
    }
    .login-list-item:hover {
    /* border: 1px solid #B2B2B2 !important; */
    background-color: #f0ffff !important;
    color: #000 !important;
    }

    .login-list-item.selected {
   /*  border: 1px solid #B2B2B2 !important; */
    background-color: #6f4e37 !important;
    color: yellow !important;
    padding: 1px 5px 5px 15px !important;
    margin: 3px 6px 0 3px !important;
    }
    .login-list-item.selected:hover {
    background-color: #f0ffff !important;
    color: #000 !important;
    }

    
    .favicon-wrapper,
    .login-item-favicon-wrapper {
        fill: #e69500 !important;
    }
    
    /* rechts blaue horizontale Linie */
    div.container div.column div.header {
        border-bottom: 2px solid dodgerblue !important;
        margin-right: -200px !important;
    }
    
    /* Popup "Neue Zugangsdaten hinzufügen" Border-Radius bei den drei Boxen */
    div.container div.column form div.detail-row label.detail-cell input{
        border-radius: 20px !important;
    }

    /* Button links oben "Name" */
    #login-sort {
    background: #9c1818 !important;
    padding-left:40px !important;
    padding-right: 5px !important;
    padding-top:  4px!important; 
    padding-bottom: 0px!important; 
    background-position:10px 7px!important;
    font-size:14.0px!important;
   /*  border-style: outset !important;
    border-left-color:  lightblue!important;
    border-top-color:  lightblue!important;
    border-right-color:  dodgerblue!important;
    border-bottom-color:  dodgerblue!important;
    border-width:2px !important; */
    color:yellow !important;
    margin-left: -15px !important;
    max-width: 160px  !important;
    }
    
    #login-sort:hover {
    background: #B2EDFA  !important;
    padding-left:40px!important ;
/*     border-style: outset !important;
    border-width:2px !important;
    border-left-color:  #bbddff !important;
    border-top-color:  #bbddff !important;
    border-right-color:  #11508d !important;
    border-bottom-color:  #11508d !important; */
    background-position:10px 5px!important;
    }
    
    /* Button bearbeiten */
    .edit-button {
     height: 32px !important;
    background: #9c1818 !important;
    margin-right: 20px !important;
    padding: 0 5px 0 25px !important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:20px !important;
    color:yellow !important; 
    }

    .edit-button:hover {
    appearance:none!important;
    background: #B2EDFA !important;
  /*   border: 1px solid coral !important; */
    padding: 0 5px 0 25px !important;
    }
    /* Text im Button verlagert */
    button.ghost-button span {
    margin-top: -3px !important;
    }

    /* Button "Entfernen" */
    .delete-button {
    appearance:none!important;
    height: 32px !important;
    background: #9c1818 !important;
    padding: 0 5px 0 25px !important;
      font-size:14.0px!important;
/*     border: 1px solid dodgerblue !important;*/
    border-radius:20px !important; 
    color:yellow !important; 
    }
    
    .delete-button:hover {
    appearance:none!important;
    background: #B2EDFA !important;
    /* border: 1px solid coral !important; */
    padding: 0 5px 0 25px !important;
    }    

    /* Button "Kopieren" (Namen) */
    div.detail-row login-command-button.copy-button.copy-username-button {
    appearance:none!important;
    height: 30px !important;
    background: #9c1818  !important;
    padding: 0 5px 0 35px !important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
 /*    border: 1px solid dodgerblue !important;*/
    border-radius:20px!important; 
    color:yellow !important; 
    }

    div.detail-row login-command-button.copy-button.copy-username-button:hover {
    appearance:none!important;
    background: #B2EDFA !important;
    padding: 0 5px 0 35px !important;
   /*  border: 1px solid coral !important; */
    background-size: 18px 18px !important;
    }
    
    /* originale Icons in den Button ausgeblendet */
 /*    .ghost-button > img:nth-child(1) {
    display: none !important;
    } */

    /* Button "Kopieren" (Passwort) */
    div.detail-row login-command-button.copy-button.copy-password-button {
    appearance:none!important;
    height: 30px !important;
    background: #9c1818 !important;
    padding: 0 5px 0 35px !important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
  /*   border: 1px solid dodgerblue !important;*/
    border-radius:20px!important; 
    color:yellow !important; 
    }

    div.detail-row login-command-button.copy-button.copy-password-button:hover {
    appearance:none!important;
    background: #B2EDFA !important;
    padding: 0 5px 0 35px !important;
    /* border: 1px solid coral !important; */
    background-size: 18px 18px !important;
    }
    /* Text im Button verlagert */
    button:nth-child(3) > span:nth-child(1){    
    margin-top: -3px !important;
    }        
        
    /* für Button "Kopieren" die Länge */    
    div.detail-row login-command-button.copy-button.copy-username-button,
    div.detail-row login-command-button.copy-button.copy-password-button {
    min-width: 120px !important;
    }

    
    /* Button "Adresse der Website" */
    .origin-input {
    appearance:none!important;
    background: #F0F0F0 !important;
    padding: 2px 40px 6px 45px !important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
/*     border: 1px solid dodgerblue !important;*/
    border-radius:20px!important; 
    color:black !important; 
    }

    .origin-input:hover {
    appearance:none!important;
    background: #B2EDFA !important;
    padding: 2px 40px 6px 45px !important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
/*     border: 1px solid coral !important; */
    border-radius:20px!important;
    color:yellow !important; 
    }    
    
    .fxaccounts-enable-button {
    appearance:none!important;
    background: #9c1818  !important;
    padding-left:35px!important;
    padding-top:  2px!important; 
    padding-bottom: 4px!important; 
    color:yellow!important;
    font-size:14px!important;
    text-decoration:none!important;
    padding-right:25px!important;
/*     border-left-color:  lightblue!important;
    border-top-color:  lightblue!important;
    border-right-color:  dodgerblue!important;
    border-bottom-color:  dodgerblue!important;
    border-style: outset !important;
    border-width:2px !important;*/
    border-radius:20px!important; 
    }

    .fxaccounts-enable-button:hover {
    appearance:none!important;
    background: #B2EDFA  !important;
/*     border-style: outset !important;
    border-width:2px !important;
    border-left-color:  #bbddff !important;
    border-top-color:  #bbddff !important;
    border-right-color:  #11508d !important;
    border-bottom-color:  #11508d !important; */
    }    

    /* Button "Speichern" im Menü "Neu" */
    .save-changes-button {
    appearance:none!important;
    background: #9c1818 !important;
    padding: 0 25px 0 45px !important;
    background-size: 17px 17px !important;
    font-size:14.0px!important;
/*     border: 1px solid dodgerblue !important;*/
    border-radius:20px!important; 
    color:black !important; 
    }
    
    .save-changes-button:hover {
    appearance:none!important;
    background: #B2EDFA  !important;
    padding: 0 25px 0 45px !important;
   /*  border: 1px solid coral !important; */
    background-size: 17px 17px !important;
    }
        
    /* Button "Abbrechen" im Menü "Neu" */
    .cancel-button {
    appearance:none!important;
    background: #9c1818  !important;
    padding: 0 25px 0 45px !important;
    background-size: 17px 17px !important;
    font-size:14.0px!important;
 /*    border: 1px solid dodgerblue !important;*/
    border-radius:20px!important; 
    color:yellow !important; 
    }
    
    .cancel-button:hover {
    appearance:none!important;
    background: #B2EDFA  !important;
    padding: 0 25px 0 45px !important;
  /*   border: 1px solid coral !important; */
     background-size: 17px 17px !important;
    }        
    
    /* Auge vor Passwort kopieren */
    .reveal-password-checkbox {
        fill: #0070ff !important;
    }
    .reveal-password-checkbox:hover {
        fill: #c32148 !important;
    }
    
    /* Web-Adresse im Menü "Neu" linker Abstand */
    div.container div.column form div.detail-row label.detail-cell input{
    padding-left: 15px !important;
    }
    
    /* Überschrift im Menü "Neu" */
    div.container div.column div.header h2.title span.new-login-title {
    color: #006b3c !important;
    }
    /* das Welt-Icon davor */ 
    div.container div.column div.header img.login-item-favicon {
    fill: brown !important;
    }

    /* Drei-Punkte-Button oben rechts */
    button.menu-button.ghost-button {
        background-color: #9c1818 !important;
       /*  border: 2px solid orange !important;
        border-radius: 0 !important; */
        fill: green !important;        
    }
    button.menu-button.ghost-button:hover {
        background-color: #B2EDFA !important;
        /* border: 2px solid crimson !important; */
        fill: red !important;        
    }
    /* Menü hinter Drei-Punkte-Button */
    ul.menu button.menuitem-button {
        background-color: beige !important;
       /*  border: 1px solid silver !important; */
        margin-top: 2px !important;
    }
    ul.menu button.menuitem-button:hover {
        background-color: #B2EDFA !important;
       /*  border: 1px solid coral !important; */
    }    
    
    .meta-info:first-of-type::before {
        border-top: none  !important;
    }    
    
    /* Popup-Menü hinter Dreipunkte-Button - die Button */
    .menu {
       /*  border: 3px solid dodgerblue !important; */
        padding: 5px !important;
    }

    .menuitem-import-browser {
        width: 100% !important;
        height: 24px !important;
        fill:  green !important;
        color: black!important;
    }
    
    .menuitem-export {
        width: 100% !important;
        height: 24px !important;
        fill:  orange !important;
        color: black !important;
    }
    
    .menuitem-import {
        width: 100% !important;
        height: 24px !important;
        fill:  #cc3300!important;
        color: black !important;
    }
    
    .menuitem-import-file {
        width: 100% !important;
        height: 24px !important;
        fill:  blue !important;
        color: black !important;
    }
    
    .menuitem-remove-all-logins {
        width: 100% !important;
        height: 24px !important;
        fill:  #cc3300!important;
        color: black !important;
        margin-left: -1px !important;
    }
    
    .menuitem-help {
        width: 100% !important;
        height: 24px !important;
        fill: blue!important;
        color: black !important;
    }
    
    .menuitem-preferences {
        width: 100% !important;
        height: 24px !important;
        fill: dodgerblue!important;
        color: blue !important;
        font-weight: 600 !important;
    }    
    
    .menuitem-mobile[data-l10n-id="menu-menuitem-android-app"] {
        width: 100% !important;
        height: 24px !important;
        fill: #33cc33!important;
        color: black!important;
    }

    .menuitem-mobile[data-l10n-id="menu-menuitem-iphone-app"] {
        width: 100% !important;
        height: 24px !important;
        fill: #9900ff!important;
        color: black!important;
    }    
    }

Alles anzeigen

Danke, aber warum ist es dir nicht möglich, mir einfach die neuen Bezeichnungen für die Buttons zu nennen? Wäre doch einfacher?

2002Andreas

Zitat von Firefox_94.0.1

mir einfach die neuen Bezeichnungen für die Buttons zu nennen?

Weil das alleine schon nicht mehr ausreicht für deinen alten Code.

Zitat von Firefox_94.0.1

mit den Browserwerkzeugen gefunden. Das funktioniert aber genau so wenig, wie das alte

2002Andreas

Zitat von Firefox_94.0.1

Wäre doch einfacher?

Teste bitte mal deinen alten (angepassten) Code.

CSS

/* 02. about:logins */


@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(about:logins) {


/* Hintergrund */


.container {
overflow: auto;
padding: 40px;
box-sizing: border-box;
height: 100%;
background-color: #ffd700 !important;
color: #00016e !important;
}


header {
display: flex;
align-items: center;
background-color: #ffd700 !important;
border-bottom: 1px solid #ffd700 !important;
padding-block: 9px;
padding-inline-start: 16px;
padding-inline-end: 23px;
}


.header {
display: flex;
align-items: center;
border-bottom: 1px solid #ffd700 !important;
margin-bottom: 40px;
}


.meta {
display: flex;
align-items: center;
padding: 9px 16px;
border-bottom: 1px solid #ffd700 !important;
background-color: #ffd700 !important;
color: #00016e !important;
font-size: 0.8em;
}


.meta-info {
font-size: 13px !important;
color: #00016e !important;
margin-block: 0 8px;
}


.fxaccounts-extra-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
color: #00016e !important;
text-align: end;
}


.detail-cell:dir(ltr) input:not([type="checkbox"]) {
margin-left: 0;
border-radius: 5px !important;
}




/*Suchfeld*/


.filter[type="text"] {
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.4;
/* background-image: url("chrome://global/skin/icons/search-glass.svg"); */
background-position: 8px center;
background-repeat: no-repeat;
background-size: 16px;
text-align: match-parent;
width: 100%;
margin: 0;
box-sizing: border-box;
padding-block: 6px;
background-color: #00016e !important;
color: #afbde1 !important;
font-size: 17px !important;
}


/* Überschiften */


.login-item-title {
white-space: nowrap;
font-weight: 800 !important;
color: #00016e !important;
background-color: #ffd !important;
text-align: center !important;
border-radius: 15px !important;
margin-right: 80px !important;
display: block !important;
}


.field-label {
display: block;
font-size: smaller;
color: #ffd700 !important;
margin-bottom: 8px;
background-color: #00016e !important;
width: 150px !important;
text-align: center !important;
font-size: 15px !important;
border-radius: 15px !important;
}




/*Buttons*/

 /* alle Button der originale graue HG weg */
    button {
    --in-content-button-background: none !important;
    --in-content-button-background-hover: none !important;
    --in-content-button-background-active: none !important;
}



[data-l10n-id="login-item-edit-button"] {
padding-left: 10px;
padding-right: 10px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


[data-l10n-id="login-item-edit-button"]:hover {
padding-left: 10px;
padding-right: 10px;
border:1px solid #9c1818 !important;
background: #ffd700 !important;
color: #9c1818 !important;
border-radius: 20px !important;
}


[data-l10n-id="about-logins-login-item-remove-button"] {
padding-left: 10px;
padding-right: 10px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


[data-l10n-id="about-logins-login-item-remove-button"]:hover {
padding-left: 10px;
padding-right: 10px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}

[data-l10n-id="login-item-copy-password-button-text"]{
padding-left: 10px;
padding-right: 10px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}

[data-l10n-id="login-item-copy-password-button-text"]:hover {
padding-left: 10px;
padding-right: 10px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}

[data-l10n-id="login-item-copy-username-button-text"] {
padding-left: 10px;
padding-right: 10px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


[data-l10n-id="login-item-copy-username-button-text"]:hover {
padding-left: 10px;
padding-right: 10px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}




.create-login-button {
padding-inline-start: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


.create-login-button:hover {
padding-inline-start: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


#login-sort {
padding-left: 10px;
padding-right: 10px;
color: #ffd700 !important;
background-color: #9c1818 !important;
border-radius: 20px !important;
}


#login-sort:hover:not([disabled]) {
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
text-align: center !important;
}


[data-l10n-id="fxaccounts-sign-in-sync-button"] {
padding-left: 10px;
padding-right: 10px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


[data-l10n-id="fxaccounts-sign-in-sync-button"]:hover {
padding-left: 10px;
padding-right: 10px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


/* Symbole */


.login-item-favicon {
margin-inline-end: 12px;
height: 24px;
width: 24px;
flex-shrink: 0;
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.75;
color: #9c1818 !important;
}


.menu-button {
/* background-image: url("chrome://global/skin/icons/more.svg");
background-repeat: no-repeat;
background-position: center;
-moz-context-properties: fill;
fill: currentColor;
width: 30px;
min-width: 30px;
margin-inline: 0; */
background-color: #9c1818 !important;
fill: #ffd700 !important;
}


.menu-button:hover {
/* background-image: url("chrome://global/skin/icons/more.svg");
background-repeat: no-repeat;
background-position: center;
-moz-context-properties: fill;
fill: currentColor;
width: 30px;
min-width: 30px;
margin-inline: 0; */
background-color: #ffd700 !important;
fill: #9c1818 !important;
}




/* linke Menüleiste*/


.login-list-item {
background-color: #9c1818 !important;
border:1px solid #9c1818 !important;
color: #ffd700 !important;
font-size: 15px !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}


.login-list-item:hover {
background-color: #ffd700 !important;
border:1px solid #9c1818 !important;
color: #9c1818 !important;
font-size: 15px !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}


.login-list-item.selected {
background-color: #9c1818 !important;
color: #afbde1 !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}


.login-list-item.selected:hover {
background-color: #ffd700 !important;
color: #9c1818 !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
border:1px solid #9c1818 !important;
}


.username {
font-size: 0.85em;
color: #ffd !important;
}


.login-selected .initialized {
background-color: #ffd700 !important;
}




/* Zugangsdaten hinzufügen*/

.login-list-section {
background-color: #ffd700 !important;
}


.create-login-button-container {
background-color: #ffd700 !important;
}

button:nth-child(3) > img:nth-child(1) {
margin-left: -20px !important;
}

.detail-cell:dir(ltr) input:not([type="checkbox"]) {
margin-left: 0;
background-color: #ffd !important;
border: none !important;
color: #00016e !important;
}


.save-changes-button {
padding-inline-start: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


.save-changes-button:hover {
padding-inline-start: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


.cancel-button {
padding-inline-start: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


.cancel-button:hover {
padding-inline-start: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


.arrow-box {
background-color: #00016e !important;
color: #ffd700 !important;
}


/*drop-down*/


.menu {
position: absolute;
top: 30px;
inset-inline-end: 0;
margin: 0;
padding: 5px 0;
background-color: #00016e !important;
color: #ffd700 !important;
border: none !important;
border-radius: 4px;
box-shadow: var(--shadow-30);
min-width: max-content;
list-style-type: none;
display: flex;
flex-direction: column;
z-index: 1;
font: menu;
}


.menuitem-button {
color: #ffd700 !important;
}


.menuitem-button:hover {
background-color: #ffd700 !important;
color: #9c1818 !important;
}

}

Alles anzeigen

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Wäre doch einfacher?

Teste bitte mal deinen alten (angepassten) Code.

CSS

/* 02. about:logins */


@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(about:logins) {


/* Hintergrund */


.container {
overflow: auto;
padding: 40px;
box-sizing: border-box;
height: 100%;
background-color: #ffd700 !important;
color: #00016e !important;
}


header {
display: flex;
align-items: center;
background-color: #ffd700 !important;
border-bottom: 1px solid #ffd700 !important;
padding-block: 9px;
padding-inline-start: 16px;
padding-inline-end: 23px;
}


.header {
display: flex;
align-items: center;
border-bottom: 1px solid #ffd700 !important;
margin-bottom: 40px;
}


.meta {
display: flex;
align-items: center;
padding: 9px 16px;
border-bottom: 1px solid #ffd700 !important;
background-color: #ffd700 !important;
color: #00016e !important;
font-size: 0.8em;
}


.meta-info {
font-size: 13px !important;
color: #00016e !important;
margin-block: 0 8px;
}


.fxaccounts-extra-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
color: #00016e !important;
text-align: end;
}


.detail-cell:dir(ltr) input:not([type="checkbox"]) {
margin-left: 0;
border-radius: 5px !important;
}




/*Suchfeld*/


.filter[type="text"] {
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.4;
/* background-image: url("chrome://global/skin/icons/search-glass.svg"); */
background-position: 8px center;
background-repeat: no-repeat;
background-size: 16px;
text-align: match-parent;
width: 100%;
margin: 0;
box-sizing: border-box;
padding-block: 6px;
background-color: #00016e !important;
color: #afbde1 !important;
font-size: 17px !important;
}


/* Überschiften */


.login-item-title {
white-space: nowrap;
font-weight: 800 !important;
color: #00016e !important;
background-color: #ffd !important;
text-align: center !important;
border-radius: 15px !important;
margin-right: 80px !important;
display: block !important;
}


.field-label {
display: block;
font-size: smaller;
color: #ffd700 !important;
margin-bottom: 8px;
background-color: #00016e !important;
width: 150px !important;
text-align: center !important;
font-size: 15px !important;
border-radius: 15px !important;
}




/*Buttons*/

 /* alle Button der originale graue HG weg */
    button {
    --in-content-button-background: none !important;
    --in-content-button-background-hover: none !important;
    --in-content-button-background-active: none !important;
}



[data-l10n-id="login-item-edit-button"] {
padding-left: 10px;
padding-right: 10px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


[data-l10n-id="login-item-edit-button"]:hover {
padding-left: 10px;
padding-right: 10px;
border:1px solid #9c1818 !important;
background: #ffd700 !important;
color: #9c1818 !important;
border-radius: 20px !important;
}


[data-l10n-id="about-logins-login-item-remove-button"] {
padding-left: 10px;
padding-right: 10px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


[data-l10n-id="about-logins-login-item-remove-button"]:hover {
padding-left: 10px;
padding-right: 10px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}

[data-l10n-id="login-item-copy-password-button-text"]{
padding-left: 10px;
padding-right: 10px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}

[data-l10n-id="login-item-copy-password-button-text"]:hover {
padding-left: 10px;
padding-right: 10px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}

[data-l10n-id="login-item-copy-username-button-text"] {
padding-left: 10px;
padding-right: 10px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


[data-l10n-id="login-item-copy-username-button-text"]:hover {
padding-left: 10px;
padding-right: 10px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}




.create-login-button {
padding-inline-start: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


.create-login-button:hover {
padding-inline-start: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


#login-sort {
padding-left: 10px;
padding-right: 10px;
color: #ffd700 !important;
background-color: #9c1818 !important;
border-radius: 20px !important;
}


#login-sort:hover:not([disabled]) {
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
text-align: center !important;
}


[data-l10n-id="fxaccounts-sign-in-sync-button"] {
padding-left: 10px;
padding-right: 10px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


[data-l10n-id="fxaccounts-sign-in-sync-button"]:hover {
padding-left: 10px;
padding-right: 10px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


/* Symbole */


.login-item-favicon {
margin-inline-end: 12px;
height: 24px;
width: 24px;
flex-shrink: 0;
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.75;
color: #9c1818 !important;
}


.menu-button {
/* background-image: url("chrome://global/skin/icons/more.svg");
background-repeat: no-repeat;
background-position: center;
-moz-context-properties: fill;
fill: currentColor;
width: 30px;
min-width: 30px;
margin-inline: 0; */
background-color: #9c1818 !important;
fill: #ffd700 !important;
}


.menu-button:hover {
/* background-image: url("chrome://global/skin/icons/more.svg");
background-repeat: no-repeat;
background-position: center;
-moz-context-properties: fill;
fill: currentColor;
width: 30px;
min-width: 30px;
margin-inline: 0; */
background-color: #ffd700 !important;
fill: #9c1818 !important;
}




/* linke Menüleiste*/


.login-list-item {
background-color: #9c1818 !important;
border:1px solid #9c1818 !important;
color: #ffd700 !important;
font-size: 15px !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}


.login-list-item:hover {
background-color: #ffd700 !important;
border:1px solid #9c1818 !important;
color: #9c1818 !important;
font-size: 15px !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}


.login-list-item.selected {
background-color: #9c1818 !important;
color: #afbde1 !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}


.login-list-item.selected:hover {
background-color: #ffd700 !important;
color: #9c1818 !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
border:1px solid #9c1818 !important;
}


.username {
font-size: 0.85em;
color: #ffd !important;
}


.login-selected .initialized {
background-color: #ffd700 !important;
}




/* Zugangsdaten hinzufügen*/

.login-list-section {
background-color: #ffd700 !important;
}


.create-login-button-container {
background-color: #ffd700 !important;
}

button:nth-child(3) > img:nth-child(1) {
margin-left: -20px !important;
}

.detail-cell:dir(ltr) input:not([type="checkbox"]) {
margin-left: 0;
background-color: #ffd !important;
border: none !important;
color: #00016e !important;
}


.save-changes-button {
padding-inline-start: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


.save-changes-button:hover {
padding-inline-start: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


.cancel-button {
padding-inline-start: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


.cancel-button:hover {
padding-inline-start: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border:1px solid #9c1818 !important;
border-radius: 20px !important;
}


.arrow-box {
background-color: #00016e !important;
color: #ffd700 !important;
}


/*drop-down*/


.menu {
position: absolute;
top: 30px;
inset-inline-end: 0;
margin: 0;
padding: 5px 0;
background-color: #00016e !important;
color: #ffd700 !important;
border: none !important;
border-radius: 4px;
box-shadow: var(--shadow-30);
min-width: max-content;
list-style-type: none;
display: flex;
flex-direction: column;
z-index: 1;
font: menu;
}


.menuitem-button {
color: #ffd700 !important;
}


.menuitem-button:hover {
background-color: #ffd700 !important;
color: #9c1818 !important;
}

}

Alles anzeigen

Danke dafür. Jetzt muss ich nur noch die Größe wieder ändern und dann passt es.

2002Andreas

Zitat von Firefox_94.0.1

nur noch die Größe wieder ändern und dann passt es.

Ok, das schaffst du dann ja alleine.

Ansonsten, war gern geschehen

Mira_Belle

Käse, dann war meine Arbeit ja für die Füß'

Falls es doch helfen sollte, hier das CSS.

CSS

@-moz-document url-prefix(about:logins) {
        
    html {
        background: #ffd700 !important;
    }    
     
    .no-logins.initialized body login-intro{     
        scrollbar-width: none !important;
    }
    
    /* alle Button der originale graue HG weg */
    
    button,    
    button:hover {
    --in-content-button-background: none !important;
    --in-content-button-background-hover: none !important;
    --in-content-button-background-active: none !important;
    }
     
    button {
        color: #ffd700 !important;
    }
        button:hover {
            color: #9c1818 !important;
    }

    /* oben der Text "Zugangsdaten" */
    .count {
        color: #0f6acc !important; 
        font-size: 15px !important; 
        font-weight: bold !important;
        padding-right: 25px !important;
    }
    
       /* Einträge in der Liste Abstand von links */
    li[class="login-list-item"],
    li[class="login-list-item selected"]{
        padding-left: 25px !important;
    }
        
    
    /* Hintergrundbox bei Button mit + Zeichen */
    div.listHeader div.create-login-button-container {
        background-color: #9c1818 !important;
        border-color: #9c1818 !important;
        margin-top: 3px !important;
        padding-right: 8px !important;
        border-radius:20px!important;
        max-width: 35px !important;
        max-height: 35px !important;
    }
    div.listHeader div.create-login-button-container:hover {
        background-color: #ffd700 !important;
        border-color: #ffd700 !important;
    }
    
    .detail-cell:dir(ltr) input:not([type="checkbox"]) {
        margin-left: 0;
        background-color: #ffd !important;
        border: none !important;
        color: #00016e !important;
        }

    /* rechts die Box über der blauen Linie */
    .header {
        margin-top: 20px!important;
    }
        
    .header, li {
        border-bottom: none !important;
        box-shadow: none !important;        
    }
        
    /* linke Seite unter den Einträgen Border */
    div.container ol li#new-login-list-item.login-list-item.selected,
    div.container ol section.login-list-section{
        /* border-bottom: 1px solid silver !important;  */
        box-shadow: none !important;
    }

    /* HG für das obere rechte Feld */
    .initialized body header,
    .login-selected.initialized body header{
        /* border-bottom: 2px solid orange !important; */
        background: #ffd700  !important;
        height: 52px !important;
    }
        
    /* HG für das linke obere Feld */
    div.listHeader{
        background-color: #ffd700  !important;
    }
    
    /* Suchfeld oben */  
    .filter,
    login-filter {
        appearance: none !important; 
        border-radius:20px !important;
        margin-left: 5px  !important;
        margin-top: 2px  !important;
        min-width: 235px !important;
        max-width: 235px !important;
    }
    
    /* HG des Suchfeldes */
    input.filter {
        background: #00016e !important;
        color: #e1e1e1 !important;
    }

    .time-created,
    body > login-list:nth-child(2), li, .header, header,
    .meta{
        box-shadow: none !important;
    }

    /* links oben das erste Feld */
    .meta {
        background:#ffd700  !important;
    }
    .meta:hover {
        background: #ffd700 !important;
    }
    
    /* linke Seite die untere Box */
    div.container ol{
        background: #ffd700  !important;
    }
    
    #login-sort label {
        padding-left: 25px !important;
    } 
    
    .login-item-title {
        white-space: nowrap;
        font-weight: 800 !important;
        color: #00016e !important;
        background-color: #ffd !important;
        text-align: center !important;
        border-radius: 15px !important;
        margin-right: 80px !important;
        display: block !important;
    }


    .list-item.selected {
        background-color: #9c1818 !important;
        border-inline-start-color: #ffd700 !important;
        color: #ffd700 !important;
        border-radius:35px!important
    }
    .list-item:hover {
        background: #9c181848 !important;
        border-radius:35px!important
    }
    .list-item:not(.selected):hover {
        color: #ffd700 !important;
    }

    /* rechts die große Box */
    html.initialized body login-item,
    .login-selected.initialized body login-item {
        margin-left: 30px !important;
    }
    

    .favicon-wrapper,
    .login-item-favicon-wrapper {
        fill: #e69500 !important;
    }
    
    /* rechts blaue horizontale Linie */
    div.container div.column div.header {
        border-bottom: 2px solid #ffd700 !important; /* gleiche Farbe wie Hintergrund */
        margin-right: -200px !important;
    }
    
    /* Popup "Neue Zugangsdaten hinzufügen" Border-Radius bei den drei Boxen */
    div.container div.column form div.detail-row label.detail-cell input{
        border-radius: 20px !important;
    }

    /* Button links oben "Name" */
    #login-sort {
    background: #9c1818 !important;
    border-color: #9c1818 !important;
    padding-left:40px !important;
    font-size:14.0px!important;
    color:#ffd700 !important;
    }
    
    #login-sort:hover {
    background: #ffd700  !important;
    border-color: #ffd700 !important;
    color:#9c1818 !important;
    }
    
    /* Button bearbeiten */
    .edit-button {
        appearance:none!important;
        height: 32px !important;
        background: #9c1818 !important;
        color: #e1e1e1 !important;
        margin-right: 20px !important;
        border-radius:20px !important;
    }

    .edit-button:hover {
        appearance:none!important;
        background: #ffd700 !important;
        color: #9c1818 !important;
    }

    /* Text im Button verlagert */
    button.ghost-button span {
    margin-top: -3px !important;
    }

    /* Button "Entfernen" */
    .delete-button {
        appearance:none!important;
        height: 32px !important;
        background: #9c1818 !important;
        color: #e1e1e1 !important;
        margin-right: 20px !important;
        border-radius:20px !important; 
    }
    
    .delete-button:hover {
        appearance:none!important;
        background: #ffd700 !important;
        color: #9c1818 !important;
    }    

    /* Button "Kopieren" (Namen) */
    div.detail-row login-command-button.copy-button.copy-username-button {
        appearance:none!important;
        height: 30px !important;
        background: #9c1818  !important;
        text-align: center !important;
        color: lime !important;
        border-radius:20px!important; 
    }

    div.detail-row login-command-button.copy-button.copy-username-button:hover {
        appearance:none!important;
        background: #ffd700 !important;
    }
    
    /* Button "Kopieren" (Passwort) */
    div.detail-row login-command-button.copy-button.copy-password-button {
        appearance:none!important;
        height: 30px !important;
        background: #9c1818 !important;
        text-align: center !important;
        color: lime !important;
        border-radius:20px!important; 
    }

    div.detail-row login-command-button.copy-button.copy-password-button:hover {
        appearance:none!important;
        background: #ffd700 !important;
    }
       
    /* Text im Button verlagert */
    button:nth-child(3) > span:nth-child(1){    
        margin-top: -3px !important;
        }         

    /* Texte im Feld mit Umrandung */
    .field-label {
        color: #ffd700 !important;
        background-color: #00016e !important;
        width: 150px !important;
        text-align: center !important;
        font-size: 15px !important;
        border-radius: 15px !important;
    }

    .fxaccounts-enable-button {
        appearance:none!important;
        background: #9c1818  !important;
        padding-left:35px!important;
        padding-top:  2px!important; 
        padding-bottom: 4px!important; 
        color: #ffd700!important;
        font-size:14px!important;
        text-decoration:none!important;
        padding-right:25px!important;
        border-radius:20px!important; 
    }

    .fxaccounts-enable-button:hover {
        appearance:none!important;
        background: #ffd700  !important;
        color:#9c1818!important;
    }    

    /* Button "Speichern" im Menü "Neu" */
    .save-changes-button {
        appearance:none!important;
        background: #9c1818 !important;
        border-radius:20px!important; 
    }
    
    .save-changes-button:hover {
        appearance:none!important;
        background: #ffd700  !important;
    }
        
    /* Button "Abbrechen" im Menü "Neu" */
    .cancel-button {
        appearance:none!important;
        background: #9c1818  !important;
        border-radius:20px!important; 
    }
    
    .cancel-button:hover {
        appearance:none!important;
        background: #ffd700  !important;
    }        
    
    /* Auge vor Passwort kopieren */
    .reveal-password-checkbox {
        fill: #00016e !important;
    }
    .reveal-password-checkbox:hover {
        fill: #9c1818 !important;
    }
    
    /* Web-Adresse im Menü "Neu" linker Abstand */
    div.container div.column form div.detail-row label.detail-cell input{
    padding-left: 15px !important;
    }
    
    /* Überschrift im Menü "Neu" */
    div.container div.column div.header h2.title span.new-login-title {
    color: #00016e !important;
    }
    /* das Welt-Icon davor */ 
    div.container div.column div.header img.login-item-favicon {
    fill: #9c1818 !important;
    }

    /* Drei-Punkte-Button oben rechts */
    button.menu-button.ghost-button {
        background-color: #9c1818 !important;
       /*  border: 2px solid orange !important;
        border-radius: 0 !important; */
        fill: #ffd700 !important;        
    }
    button.menu-button.ghost-button:hover {
        background-color: #ffd700 !important;
        /* border: 2px solid crimson !important; */
        fill: #9c1818 !important;        
    }
    /* Menü hinter Drei-Punkte-Button */
    ul.menu button.menuitem-button {
        background-color: beige !important;
       /*  border: 1px solid silver !important; */
        margin-top: 2px !important;
    }
    ul.menu button.menuitem-button:hover {
        background-color: #B2EDFA !important;
       /*  border: 1px solid coral !important; */
    }    
    
    .meta-info:first-of-type::before {
        border-top: none  !important;
    }    
    
    /* Popup-Menü hinter Dreipunkte-Button - die Button */
    .menu {
       /*  border: 3px solid dodgerblue !important; */
        padding: 5px !important;
    }

    .menuitem-import-browser {
        width: 100% !important;
        height: 24px !important;
        fill:  green !important;
        color: black!important;
    }
    
    .menuitem-export {
        width: 100% !important;
        height: 24px !important;
        fill:  orange !important;
        color: black !important;
    }
    
    .menuitem-import {
        width: 100% !important;
        height: 24px !important;
        fill:  #cc3300!important;
        color: black !important;
    }
    
    .menuitem-import-file {
        width: 100% !important;
        height: 24px !important;
        fill:  blue !important;
        color: black !important;
    }
    
    .menuitem-remove-all-logins {
        width: 100% !important;
        height: 24px !important;
        fill:  #cc3300!important;
        color: black !important;
        margin-left: -1px !important;
    }
    
    .menuitem-help {
        width: 100% !important;
        height: 24px !important;
        fill: blue!important;
        color: black !important;
    }
    
    .menuitem-preferences {
        width: 100% !important;
        height: 24px !important;
        fill: dodgerblue!important;
        color: blue !important;
        font-weight: 600 !important;
    }    
    
    .menuitem-mobile[data-l10n-id="menu-menuitem-android-app"] {
        width: 100% !important;
        height: 24px !important;
        fill: #33cc33!important;
        color: black!important;
    }

    .menuitem-mobile[data-l10n-id="menu-menuitem-iphone-app"] {
        width: 100% !important;
        height: 24px !important;
        fill: #9900ff!important;
        color: black!important;
    }    
}

Alles anzeigen

Den Nick "Firefox_94.0.1" muss ich mir merken.

Nicht für 5ct Geduld.

FuchsFan

Zitat von 2002Andreas

Ansonsten, war gern geschehen

Ist das nicht wunderbar, wenn wieder Zufriedenheit herrscht.

2002Andreas

Zitat von FuchsFan

wenn wieder Zufriedenheit herrscht.

So sollte es ja auch sein

FuchsFan

Zitat von Mira_Belle

Käse, dann war meine Arbeit ja für die Füß'

Wenn es Dich tröstet, Du hast es doch auch hin bekommen.

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von FuchsFan

wenn wieder Zufriedenheit herrscht.

So sollte es ja auch sein

Noch eine kurze Frage (war bisher noch gar nicht im Skript): Kann man diese "Kreise" auf dem Zeitstrahl auch einfärben?

Mira_Belle

Zitat von Firefox_94.0.1

Noch eine kurze Frage (war bisher noch gar nicht im Skript): Kann man diese "Kreise" auf dem Zeitstrahl auch einfärben?

Ja.

CSS

    /*----------------------------------*/
    /************* Timeline *************/
    /*----------------------------------*/
    .timeline > .line {  
        background-color: #e1e1e1 !important;
    }
    .timeline > .point {
        stroke: #ff9600 !important;         /* Farbe des Rings */
        stroke-width: 30px !important;           /* Größe der Punkte */
    }
    .timeline > svg {
        fill: #ff9600 !important;               /* Farbe des Punktes */
    }
    div.date {
        color: #e1e1e1 !important;              /* Farbe des Datums */
    }
    div.action {
        color: #e1e1e1 !important;              /* Farbe des Komentars */
    }

Alles anzeigen

Firefox_94.0.1

Zitat von Mira_Belle

Zitat von Firefox_94.0.1

Noch eine kurze Frage (war bisher noch gar nicht im Skript): Kann man diese "Kreise" auf dem Zeitstrahl auch einfärben?

Ja.

CSS

    /*----------------------------------*/
    /************* Timeline *************/
    /*----------------------------------*/
    .timeline > .line {  
        background-color: #e1e1e1 !important;
    }
    .timeline > .point {
        stroke: #ff9600 !important;         /* Farbe des Rings */
        stroke-width: 30px !important;           /* Größe der Punkte */
    }
    .timeline > svg {
        fill: #ff9600 !important;               /* Farbe des Punktes */
    }
    div.date {
        color: #e1e1e1 !important;              /* Farbe des Datums */
    }
    div.action {
        color: #e1e1e1 !important;              /* Farbe des Komentars */
    }

Alles anzeigen

Danke, aber die Punkte bleiben weiß. Dann wird das wohl einfach nicht gehen.

Mitleser

Zitat von Firefox_94.0.1

Danke, aber die Punkte bleiben weiß. Dann wird das wohl einfach nicht gehen.

Doch, geht!

CSS

 .timeline > .line {  
        background-color: #e1e1e1 !important;
    }
    .timeline > .point {
        stroke: #f60 !important;               /* Farbe des Rings */
        stroke-width: 30px !important;          /* Größe der Punkte */
    }
    .timeline > svg {
        fill: #f60 !important;               /* Farbe des Punktes */
    }
    div.date {
        color: #f60 !important;              /* Farbe des Datums */
    }
    div.action {
        color: #f60 !important;              /* Farbe des Komentars */
    }

Alles anzeigen

Dharkness

Zitat von Firefox_94.0.1

Danke, aber die Punkte bleiben weiß. Dann wird das wohl einfach nicht gehen.

Füge es mal nicht in die Datei ein über die Du about:logins anpasst, sondern in die userContent.css, nur da funktioniert es hier, sehr merkwürdig das.

Mira_Belle

Zitat von Dharkness

Füge es mal nicht in die Datei ein über die Du about:logins anpasst, sondern in die userContent.css, nur da funktioniert es hier, sehr merkwürdig das.

Ich habe für about:logins eine eigene CSS-Datei, diese ist wiederum per userContent.css eingebunden.

Ich denke, so sollte es ja auch sein.

2002Andreas

Zitat von Dharkness

Füge es mal nicht in die Datei ein über die Du about:logins anpasst

Kein Problem hier:

Dharkness

Zitat von 2002Andreas

Kein Problem hier:

Hm, das ist ja mal wieder sehr interessant, dann muss ich mich mal auf Fehlersuche begeben.

2002Andreas

Zitat von Dharkness

dann muss ich mich mal auf Fehlersuche begeben.

Evtl. die Reihenfolge im Code mal ändern

Dharkness

Zitat von 2002Andreas

Evtl. die Reihenfolge im Code mal ändern

Nein, es ist mal wieder dieser * kranke Eintrag, auskommentiert, Fx neu gestartet und alles ist gut.

*

@namespace url(http://www.w3.org/1999/xhtml);

Firefox_94.0.1 27. September 2023 um 19:33