Und wie sieht es aus, wenn du mehrere geschlossene Tabs hast, bzw. mehrere geöffnete?
Nach der Anpassung keine Probleme mehr. Aber wie schon erwähnt, diese waren nur in der Beta erforderlich, wieso auch immer.
Und wie sieht es aus, wenn du mehrere geschlossene Tabs hast, bzw. mehrere geöffnete?
Nach der Anpassung keine Probleme mehr. Aber wie schon erwähnt, diese waren nur in der Beta erforderlich, wieso auch immer.
Ich hatte das gleiche Problem und musste ein wenig testen, spiele mal ein wenig damit ↓.
Danke, Ralf, das hat geholfen.
Hast du die Seite per Code verbreitert?
Sei gegrüßt, Andreas!
Sehr komisch ist, dass es nur in de Beta-Version so ist, in Nightly nicht.
Wir lassen es erst einmal so, denn sofern der erste Tab geöffnet und wieder geschlossen wird, dann ist die Scrollbar wieder weg.
Danke, für Deinen Einsatz.
Käse, dann war meine Arbeit ja für die Füß'
Wenn es Dich tröstet, Du hast es doch auch hin bekommen.
Ansonsten, war gern geschehen
Ist das nicht wunderbar, wenn wieder Zufriedenheit herrscht.
Wenn Du möchtest, dann probiere mal diesen Code.
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(about:logins) {
html {
background: black !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;
}
.column:before {
content: "Design by FuchsFan ... 07.2023";
margin-top: 15px !important;
font-size: 12px !important;
font-weight: 600 !important;
color: grey !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: 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 */
.initialized body header,
.login-selected.initialized body header{
border-bottom: 2px solid orange !important;
background: #fbe8d2 !important;
height: 52px !important;
}
/* HG für das linke obere Feld */
div.listHeader{
background-color: #fbe8d2 !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;
}
/* HG des Suchfeldes */
input.filter{
background:#fffff0 !important;
}
body {
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: conic-gradient(at 0% 30%, silver 10%, #fcfcfc 32%, lightgrey 45% ) !important;
border-left: 2px solid silver !important;
}
/* links oben das erste Feld */
.meta {
background: conic-gradient(at 50% 0%, silver 10%, #fcfcfc 32%, lightgrey 45% ) !important;
}
.meta:hover {
background: #ffe680 !important;
}
/* linke Seite die untere Box */
div.container ol{
background: conic-gradient(at 0% 30%, silver 10%, #fcfcfc 32%, lightgrey 45% ) !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: #FFF !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;
}
/* .login-list-item {
background-color: #FFFFF0 !important;
}
.login-list-item:hover {
background-color: #ffe680 !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 5px!important;
}
/* Button bearbeiten */
.edit-button {
appearance:none!important;
height: 32px !important;
background: #F0F0F0 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;
}
.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" */
.delete-button {
appearance:none!important;
height: 32px !important;
background: #F0F0F0 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;
color:black !important;
}
.delete-button:hover {
appearance:none!important;
background: #B2EDFA url("..//icons/Bild8.gif")no-repeat !important;
border: 1px solid coral !important;
background-position:14px 7px!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: #F0F0F0 url("..//icons/Bild73.png")no-repeat !important;
padding: 0 5px 0 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;
}
div.detail-row login-command-button.copy-button.copy-username-button:hover {
appearance:none!important;
background: #B2EDFA url("..//icons/Bild73.png")no-repeat !important;
padding: 0 5px 0 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) */
div.detail-row login-command-button.copy-button.copy-password-button {
appearance:none!important;
height: 30px !important;
background: #F0F0F0 url("..//icons/Bild74.png")no-repeat !important;
padding: 0 5px 0 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;
}
div.detail-row login-command-button.copy-button.copy-password-button:hover {
appearance:none!important;
background: #B2EDFA url("..//icons/Bild74.png")no-repeat !important;
padding: 0 5px 0 35px !important;
border: 1px solid coral !important;
background-position:15px 6px!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 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
Ich habe diesbezüglich aber noch nichts geändert.
Irrtum meinerseits, in einem weiteren Nightly wie bisher.
Ich werde demnächst noch experimentieren
Danke, es ist vollbracht!
Teste einmal diesen Code
Danke, das werde ich auch noch testen.
Das ↓ ist derzeit meine Variante.
Sehr schön, Ralf, jetzt funktioniert alles. Ich danke Dir!
Ich habe das so ↓ gelöst.
Ich danke Dir, die Umrandung wird angezeigt, kommt aber der Hintergrund dazu, dann funktioniert es nicht mehr.
Ich benutze für hover diesen Code in der userChrome.css
Wenn ich diesen Code so einsetze, dann werden alle Button gleichzeitig angesprochen, auch der aktive (oben), was ich ja vermeiden möchte.
das geht nur in der userChromeShadow.css.
Dafür bedanke ich mich ganz herzlich, soweit war ich noch nicht.
Aber es geht mir hauptsächlich um den gerade aktiven Button, um dort hintergrund, usw. zu ändern. Dazu finde ich nicht den passenden Selektor.
In Nightly gibt es neu about:firefoxview-next.
Mir will es dort nicht gelingen in der Sidebar (links) den aktiven Button anzusprechen. Bitte helfen!
Das ist für die Button der z.Z. eingesetzte Code:
/* Firefox View */
@-moz-document url("about:firefoxview-next") {
:root {
--in-content-button-background-hover: none !important;
--in-content-button-background-active: none !important;
--in-content-button-text-color-hover: none !important;
--in-content-button-text-color-active: none !important;
--in-content-button-background: none !important;
}
fxview-category-navigation fxview-category-button.category {
background-color: white !important;
border: 1px solid grey !important;
border-radius: 0 !important;
}
fxview-category-navigation fxview-category-button.category:hover {
background-color: lightblue !important;
border: 1px solid grey !important;
border-radius: 0 !important;
}
}
Alles anzeigen
Die Frage hat (mal wieder, für mich) selbst mit about-Seiten wenig zu tun. Aber um zu verstehen, was so ein Button macht, sollte man wenigstens die Grundlagen zu Serviceworkern gelesen haben.
Danke, das werde ich mal studieren.
Aber nach einem kurzen Überblick ist für mich eigentlich schon klar, viel zu kompliziert.
Der Button hat nur dann eine Funktion, wenn der Service Worker der jeweiligen Website für Desktop-Benachrichtigungen genutzt wird.
Danke, Sören, für die Erklärung. Ich kann jetzt schon sagen, dass dieses für mich wohl ausfällt.
Unter about:debugging gibt es bei Aktivierung von "Dieser Firefox" die Rubrik "Service-Worker". Bediene ich dort den Button "Starten", so erscheint im folgenden Menü ein Button "Push". Bei Anklicken ist nicht zu erkennen was da passiert, es passiert eigentlich gar nichts. Oder?
Ich brauche Nachhilfe, was hat es mit diesem Button für eine Bedeutung?
Im aktuellen Nightly gab es wieder Änderungen der Selektoren unter about:logins bei den Button auf der linken Seite.
Im Code von hier RE: About Seiten mit CSS Codes anpassen betrifft das die Zeilen 183 bis 188.
Der Teil sieht dann hier jetzt so aus:
li.selected.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;
}
li.selected.list-item:hover {
border: 1px solid #B2B2B2 !important;
background-color: #f0ffff !important;
color: #000 !important;
}
li.list-item {
border: 1px solid #B2B2B2 !important;
background-color: #6f4e37 !important;
color: #FFF !important;
padding: 1px 5px 5px 15px !important;
margin: 3px 6px 0 3px !important;
}
li.list-item:hover {
background-color: #f0ffff !important;
color: #000 !important;
}
Alles anzeigen
Danach sieht das entsprechende Menü wie folgt aus:
Ich bedanke mich, nun habe ich Deine Hinweise umgesetzt, und es ist dann auch hier so zu erkennen.
Ich werde demnächst noch experimentieren, ob es in der Zwischenzeit brauchbare Workarounds gibt. Ansonsten betrachte ich das Problem aber nicht als allzu kritisch, da es nur den Eintrag im Extras-Menü betrifft, der für den Bookmarks Organizer nicht wichtig ist. Ich habe ja gleich mehrere Wege implementiert, die Oberfläche zu öffnen.
Danke, Sören, dann kennen wir die Ursache. Wenn Deine Experimente Erfolg bringen sollten, so wäre es begrüßenswert.
Nun habe ich noch eine Frage zu diesem Button.
Bin ich richtig in der Annahme, ich muss den Button aktivieren, erst dann wird das aus der Zeile darüber passieren?