About Seiten mit CSS Codes anpassen

Endor

Boersenfeger

Nein.
Der von Deinem Bild ist nicht von mir.
Ich habe nur meinen der zum Teil nicht mehr ging aktualisiert.
Mfg.
Endor

2002Andreas

Zitat von Endor

Der von Deinem Bild ist nicht von mir.

Hallo Endor.

Das ist ja auch eine ganz andere about: Seite in seinem Code

Sören Hentzschel

Also ich sehe sowohl bei Endor als auch bei Boersenfeger about:logins.

2002Andreas

Zitat von Sören Hentzschel

about:logins.

Hallo Sören.

Ja jetzt, weil Endor seinen Beitrag später geändert hat.

Vorher stand dort:

about:logging

Boersenfeger

Endor ? den hatten wir mal extra auf meine Bedürfnisse der Fensterbreite angepasst. Aber um so besser... ich lasse ihn dann so...

2002Andreas

Hallo Boersenfeger ..

hat sich erledigt, Endor hatte seinen Beitrag nachträglich geändert.

Siehe bitte meine Antwort auch in Beitrag Nr. 1824

Sören Hentzschel

Zitat von 2002Andreas

Ja jetzt, weil Endor seinen Beitrag später geändert hat.

Die Änderung ist allerdings schon über 2 1/2 Stunden her. Da hattest du wohl noch einen alten Tab offen.

2002Andreas

Zitat von Sören Hentzschel

Da hattest du wohl noch einen alten Tab offen.

Ich hatte das nur noch so im Kopf, und dann nicht auf die Änderung geachtet.

FuchsFan

Zitat von Boersenfeger

Mir gefällt nämlich meiner/dein Alter besser..

Boersenfeger

Da erkenne ich Bauteile aus meiner Feder. Wenn es dir gefällt, dann müsstest du aber mal Nacharbeit leisten.

Auf die Schnelle ist mir schon mal Folgendes aufgefallen:

Hier funktioniert in Zeile 195 der Selektor nicht mehr. Ersetze mal bitte die Zeilen 195 bis 197 durch diesen Code.

CSS

.text-deemphasized label select#login-sort {
   padding-top: 0 !important;
}

Dann müssten die Selektoren für die Button "Bearbeiten" und "Entfernen" geändert werden.

Zeile 285 .action-buttons edit-button {, Zeile 298 .action-buttons edit-button:hover {

und

Zeile 311 .action-buttons delete-button {, Zeile 323 .action-buttons delete-button:hover {.

Außerdem sollten die Werte der Zeilen 259 und 281 übereinstimmen.

Boersenfeger

FuchsFan Vielen Dank, habe alles so geändert!

FuchsFan

Zitat von Boersenfeger

Vielen Dank, habe alles so geändert!

Gerne doch, aber da gibt es ja noch viele weitere Baustellen. Ich bin gerade mal dabei alles ein wenig zu richten, und wenn ich damit fertig bin, dann stelle ich deinen ausgebesserten Code mal hier ein. Kannst dann probieren, oder zumindest Vergleiche anstellen. Bis dann!

Boersenfeger

Da bin ich mal gespannt..

FuchsFan

Zitat von Boersenfeger

Da bin ich mal gespannt..

Kannst du, aber ich habe nur versucht die Fehler auszubessern, ansonsten hat sich nichts geändert. So, dann teste mal bitte.

CSS

    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url-prefix(about:logins) {
        
    .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;
}
    
    .column:before {
        content: "Logins von Boersenfeger";
        margin-top: 15px !important;
        font-size: 25px !important;
        font-weight: bold !important;
        color: red !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;
    }    
    
    /* Hintergrundbox bei Button mit + Zeichen */
    div.listHeader div.create-login-button-container {
        background-color: lightblue !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 */
    header {
        border-bottom: none !important;
        background-color: #fbe8d2 !important;
        height: 52px !important;
    }
        
    /* HG für das linke obere Feld */
    
    login-list.initialized{
        background-color: #fbe8d2 !important;
    }
	
	     
    .empty-search-message {
        background:#fffff0 !important;
        border-bottom: none !important; 
        box-shadow: none !important;
    }
    
    html {
        background: gainsboro !important;
    }
    
    body > h1:nth-child(2) {
        margin-top: 10px !important;
    }
    
        
    /* Suchfeld oben */  
    .filter,
    login-filter {
        appearance: none !important; 
        border-radius:24px !important;
        margin-left: 5px  !important;
        margin-top: 2px  !important;
        min-width: 235px !important;
        max-width: 235px !important;
    }
	
	    div.listHeader div.create-login-button-container button.create-login-button {
        margin-left: 65px  !important;
        margin-top: -153px  !important;
    }    
    
    .menu-button {
        fill: #e69500 !important;
    }
    
    .fxaccounts-extra-text {
        color: #0066cc !important; 
        font-weight: bold !important;
        padding-right: 30px !important;
    }
    
    div.container ol{
        background-color: beige !important;
        
    }
    
    /* HG des Suchfeldes */
    input.filter{
        background:#fffff0 !important;
    }    
        
    body {
        max-width: 1745px !important;
        max-height: 960px !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: auto !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: conic-gradient(at 0% 50% , beige 20%, white 30%, #64BF15 60%) !important;
        border-left: 2px solid silver !important;
    }
    
    /* links oben das erste Feld */
    .meta {
        background: conic-gradient(at 0% 50% , beige 20%, white 30%, #64BF15 60%) !important;
    }
    .meta:hover {
        background: #ffe680 !important;
    }
    
    /* linke Seite die untere Box */
    div.container ol{
        background: conic-gradient(at 0% 50% , beige 20%, white 30%, #64BF15 60%) !important;
    }
    
	
	.text-deemphasized label select#login-sort {
    padding-top: 0px !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;
    }



    li.selected.list-item {
        background-color: #fbd59e !important;
		color: #000 !important;
    }
    li.selected.list-item:hover {
        background-color: #ffe680 !important;
    }
	
	li.list-item {
    border: 1px solid #B2B2B2 !important;
    background-color: #FFFFF0 !important;
    color: blue !important;
	padding: 1px 5px 5px 15px !important;
    margin: 3px 3px 0 3px !important;
}
    li.list-item:hover {
    background-color: #f0ffff !important;
    color: #000 !important;
    }
        
    .login-item-title {
        color: #0066cc !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: 24px !important;
    }

    /* Button links oben "Name" */
    #login-sort {
    background: #F0F0F0 url("..//icons/Bild86.png")no-repeat !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:black !important;
    margin-left: -15px !important;
    max-width: 160px  !important;
    }
    
    #login-sort:hover {
    background: #B2EDFA url("..//icons/Bild86.png")no-repeat !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 7px!important;
    }
    
    /* Button bearbeiten */
	.action-buttons edit-button {
    appearance:none!important;
	height: 32px !important;
    background: url("..//icons/Bild67.png")no-repeat !important;
    margin-right: 20px !important;
    padding: 0 5px 0 25px !important;
    background-position:14px 7px!important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:16px !important;
    color:black !important; 
    }

    .action-buttons edit-button:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild67.png")no-repeat !important;
    border: 1px solid coral !important;
    background-position:14px 7px!important;
    padding: 0 5px 0 25px !important;
    }
    /* Text im Button verlagert */
    button.ghost-button span {
    margin-top: -3px !important;
    }

    /* Button "Entfernen" */
    .action-buttons  delete-button {
    appearance:none!important;
    height: 32px !important;
    background: url("..//icons/Bild8.gif")no-repeat !important;
    padding: 0 5px 0 25px !important;
    background-position:14px 7px!important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:16px !important;
    }
    
    .action-buttons  delete-button:hover {
    appearance:none!important;
    background: #ffcf06 url("..//icons/Bild8.gif")no-repeat !important;
    border: 1px solid coral !important;
    background-position:14px 7px!important;
    padding: 0 5px 0 25px !important;
	} 

    /* Button Bearbeiten und Entfernen einfärben */

	.action-buttons edit-button,
	.action-buttons delete-button {
	border-radius: 5px !important;
	--in-content-button-text-color:  white !important;
	}
	.action-buttons delete-button {
	border-radius: 5px !important;
	--in-content-button-text-color-hover: red !important; 
	}

	.action-buttons edit-button {
	background-color: green !important;
	margin-right: 5px !important;
	}
  
	.action-buttons delete-button {
	background-color: red !important;
	}
	

    /* Button "Kopieren" (Namen) */
	.detail-grid copy-username-button{
    appearance:none!important;
    height: 30px !important;
    background: #F0F0F0 url("..//icons/Bild73.png")no-repeat !important;
    padding: 0 5px 3px 35px !important;
    background-position:15px 6px!important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:16px!important;
    color:black !important; 
    }

    .detail-grid copy-username-button:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild73.png")no-repeat !important;
    padding: 0 5px 3px 35px !important;
    border: 1px solid coral !important;
    background-position:15px 6px!important;
    background-size: 18px 18px !important;
    }
    
    /* originale Icons in den Button ausgeblendet */
    .ghost-button > img:nth-child(1) {
    display: none !important;
    }

    /* Button "Kopieren" (Passwort) */
    .detail-grid copy-password-button {
    appearance:none!important;
    height: 30px !important;
    background: #F0F0F0 url("..//icons/Bild74.png")no-repeat !important;
    padding: 0 5px 3px 35px !important;
    background-position:15px 6px!important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:16px!important;
    color:black !important; 
    }

    .detail-grid copy-password-button:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild74.png")no-repeat !important;
    padding: 0 5px 3px 35px !important;
    border: 1px solid coral !important;
    background-position:15px 6px!important;
    background-size: 18px 18px !important;
    }
	
	        
    /* für Button "Kopieren" die Länge */
    .detail-grid copy-username-button,	
    .detail-grid copy-password-button {
    min-width: 120px !important;
    }

    
    /* Button "Adresse der Website" */
    .origin-input {
    appearance:none!important;
    background: #F0F0F0 url("..//icons/Bild75.png")no-repeat !important;
    padding: 2px 40px 6px 45px !important;
    background-position:15px 5px!important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:16px!important;
    color:black !important; 
    }

    .origin-input:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild75.png")no-repeat !important;
    padding: 2px 40px 6px 45px !important;
    background-position:15px 5px!important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
    border: 1px solid coral !important;
    border-radius:16px!important;
    color:black !important; 
    }    
    
    .fxaccounts-enable-button {
    appearance:none!important;
    background: #F0F0F0 url("..//icons/Bild83.png")no-repeat !important;
    padding-left:35px!important;
    padding-top:  2px!important; 
    padding-bottom: 4px!important; 
    background-position:10px 6px!important;
    color:black!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:16px!important;
    }

    .fxaccounts-enable-button:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild83.png")no-repeat !important;
    background-position:10px 6px!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: #F0F0F0 url("..//icons/Bild87.png")no-repeat !important;
    padding: 0 25px 0 45px !important;
    background-position:15px 6px!important;
    background-size: 17px 17px !important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:16px!important;
    color:black !important; 
    }
    
    .save-changes-button:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild87.png")no-repeat !important;
    padding: 0 25px 0 45px !important;
    border: 1px solid coral !important;
    background-position:15px 6px!important;
    background-size: 17px 17px !important;
    }
        
    /* Button "Abbrechen" im Menü "Neu" */
    .cancel-button {
    appearance:none!important;
    background: #F0F0F0 url("..//icons/Bild88.png")no-repeat !important;
    padding: 0 25px 0 45px !important;
    background-position:15px 6px!important;
    background-size: 17px 17px !important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:16px!important;
    color:black !important; 
    }
    
    .cancel-button:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild88.png")no-repeat !important;
    padding: 0 25px 0 45px !important;
    border: 1px solid coral !important;
    background-position:15px 6px!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: lightblue !important;
        border: 2px solid orange !important;
        border-radius: 0 !important;
        fill: green !important;        
    }
    button.menu-button.ghost-button:hover {
        background-color: greenyellow !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: greenyellow !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

About Seiten mit CSS Codes anpassen

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Addons Manager Nightly