für die Menüs nicht mehr so
Der funktioniert auch in der ESR Version 140 nicht so wie du schreibst:
durch Klick auf Datei, Bearbeiten
Dafür musst du dann noch einen weiteren Code haben.
Das war tatsächlich die Lösung. Habe dort jetzt auch die geänderten Bezeichnungen angepasst und jetzt läuft alles wieder wie es soll.
Leider funktioniert mein Code für die Menüs nicht mehr so, wie er soll.
#textbox-contextmenu,
moz-input-box.urlbar-input-box > menupopup,
#tabContextMenu,
#tabContextMenu [_moz-menuactive] > menupopup,
#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
--panel-text-color: #fff !important;
--menu-disabled-color: lightgrey !important;
--panel-background-color: #000080 !important;
--panel-border-color: #000080 !important;
#textbox-contextmenu,
moz-input-box.urlbar-input-box > menupopup,
#tabContextMenu,
#tabContextMenu [_moz-menuactive] > menupopup,
#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
--panel-text-color: #fff !important;
--menu-disabled-color: lightgrey !important;
--panel-background-color: #000080 !important;
--panel-border-color: #000080 !important;
--panel-border-radius: 5px !important;
}
#textbox-contextmenu [_moz-menuactive],
moz-input-box.urlbar-input-box > menupopup [_moz-menuactive],
#tabContextMenu [_moz-menuactive],
#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
color: #fff !important;
background-color: #2b2c86 !important;
}
}
#textbox-contextmenu [_moz-menuactive],
moz-input-box.urlbar-input-box > menupopup [_moz-menuactive],
#tabContextMenu [_moz-menuactive],
#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
color: #fff !important;
background-color: #2b2c86 !important;
}Jetzt ist es so, dass der Code sich nicht mehr auf die Menüs auswirkt, die sich durch Klick auf Datei, Bearbeiten, Ansicht, usw. öffnen. Auch sollte der Hintergrund bei :hover einen - ich meine 15px - Radius aufweisen, was es auch nicht mehr tut...
Wenn du tatsächlich das gleiche Problem hast, sollte die Lösung ja funktionieren, die hier bereits steht …
--panel-background → --panel-background-color
--panel-text → --panel-text-color
Danke, hat schonmal geholfen. Bei mir funktionier es jedoch trotzdem nicht mehr in der ganz oberen Menüleiste (dort wo sich die Punkte Datei, Bearbeiten, Ansicht, Chronik, ... befinden). Hier findet der Code auf die dortigen Menüs der genannten Punkte keine Anwendung mehr.
Ich habe dasselbe Problem. Auch mein Code für die besagten Menüs funktioniert seit dem neuestem Update auf V.152.0 nicht mehr.
/* 3.1 Kontextmenü*/
#textbox-contextmenu,
moz-input-box.urlbar-input-box > menupopup,
#tabContextMenu,
#tabContextMenu [_moz-menuactive] > menupopup,
#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
--panel-color: #fff !important;
--menu-disabled-color: lightgrey !important;
--panel-background: #000080 !important;
--panel-border-color: #000080 !important;
--panel-border-radius: 5px !important;
}
#textbox-contextmenu [_moz-menuactive],
moz-input-box.urlbar-input-box > menupopup [_moz-menuactive],
#tabContextMenu [_moz-menuactive],
#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
color: #fff !important;
background-color: #2b2c86 !important;
}auf einem Tab
Lange Version:
CSS#tabContextMenu, #tabContextMenu [_moz-menuactive] > menupopup, #placesContext, #placesContext [_moz-menuactive] > menupopup, #toolbar-context-menu, #toolbar-context-menu [_moz-menuactive] > menupopup, #contentAreaContextMenu, #contentAreaContextMenu [_moz-menuactive] > menupopup { --panel-color: #fff !important; --menu-disabled-color: lightgrey !important; --panel-background: #000080 !important; --panel-border-color: #000080 !important; --panel-border-radius: 5px !important; } #tabContextMenu [_moz-menuactive], #placesContext [_moz-menuactive], #toolbar-context-menu [_moz-menuactive], #contentAreaContextMenu [_moz-menuactive], #contentAreaContextMenu :is(menu,menuitem):hover { color: red !important; background-color: lightblue !important; }Kurze Version:
CSS#tabContextMenu, #placesContext, #toolbar-context-menu, #contentAreaContextMenu { &, menupopup, & [_moz-menuactive], :is(menu, menuitem):hover { --panel-color: #fff !important; --menu-disabled-color: lightgrey !important; --panel-background: #000080 !important; --panel-border-color: #000080 !important; --panel-border-radius: 5px !important; color: red !important; background-color: lightblue !important; } }Edit:
Wenn du das überall so haben möchtest, dann kannst du auch das mal testen:
CSSmenupopup { --panel-color: #fff !important; --menu-disabled-color: lightgrey !important; --panel-background: #000080 !important; --panel-border-color: #000080 !important; --panel-border-radius: 5px !important; } :is(menu,menuitem):hover { color: red !important; background-color: lightblue !important; }
Mir sind noch zwei Stellen aufgefallen:
- das Kontextmenü bei rechtsklich in die URL-Leiste sowie das im Suchfeld, welches man mit Strg + F öffnet.
Deinen Code für überall habe ich getestet, jedoch habe ich damit wieder das ursprüngliche Problem, dass sich das auch auf Menüs auf Webseiten auswirkt.
Wie findest du eig. die adressierung der Menüs an der genauen Stelle, um ausschl. diese anzusprechen? Mit den Browser-Werkzeugen finde ich überall nur das allgemeine "arrowscrollbox.menupopup-arrowscrollbox".
Die Langform alleine passt nun für alles
Freut mich
Ich habe gerade festgestellt, dass doch noch nicht alles passt:
Wenn ich das Kontextmenü öffne, wenn der Mauszeiger auf einem Tab (egal ob aktiv oder nicht) liegt, öffnet sich noch das normale Menü ohne Änderungen...
Dasselbe wenn ich auf Höhe
Teste bitte:
CSS#placesContext, #placesContext [_moz-menuactive] > menupopup, #toolbar-context-menu, #toolbar-context-menu [_moz-menuactive] > menupopup, #contentAreaContextMenu, #contentAreaContextMenu [_moz-menuactive] > menupopup { --panel-color: #fff !important; --menu-disabled-color: lightgrey !important; --panel-background: #000080 !important; --panel-border-color: #000080 !important; --panel-border-radius: 5px !important; } #placesContext [_moz-menuactive], #toolbar-context-menu [_moz-menuactive], #contentAreaContextMenu [_moz-menuactive], #contentAreaContextMenu :is(menu,menuitem):hover { color: red !important; background-color: lightblue !important; }Edit:
Ich habe mal etwas gebastelt hier, diese Kurzform sollte auch ausreichen:
CSS#placesContext, #toolbar-context-menu, #contentAreaContextMenu { &, menupopup, & [_moz-menuactive], :is(menu, menuitem):hover { --panel-color: #fff !important; --menu-disabled-color: lightgrey !important; --panel-background: #000080 !important; --panel-border-color: #000080 !important; --panel-border-radius: 5px !important; color: red !important; background-color: lightblue !important; } }
Die Langform alleine passt nun für alles 
Hast du meine Version aus #3 getestet? Da sollte das nicht auftreten...
Ja, die wirkt sich jedoch vollständig auch auf besagte Menüs auf Webseiten aus, was ich eig. nicht möchte.
mit einem rechtsklick
Teste bitte wieder:
CSS#contentAreaContextMenu { --menuitem-hover-background-color: #2B2C86 !important; --panel-color: #fff !important; --menu-color: #fff !important; --menu-disabled-color: lightgrey !important; --panel-background: #000080 !important; --panel-border-color: #000080 !important; --panel-border-radius: 5px !important; } #contentAreaContextMenu :is(menu,menuitem):hover { color: red !important; background-color: lightblue !important; }
Danke, auch der Code funktioniert wie gewünscht. Nur:
wenn ich im Kontextmenü einen Punkt wähle, hinter welchem sich ein zweites Menü öffnet (Bsp. "Einen KI-Chatbot fragen" findet der Code auf dieses Menü keine Anwendung. Dasselbe wenn ich auf Höhe der Tableiste das Kontextmenü öffne, wird auch dieses "klassisch" ohne die o.g. Anpassungen angezeigt.
Dropdown menüs in Menüleiste
Meinst du das so, also nur in der Menüleiste?
Wenn ja, dann teste bitte, Farben wenn dann anpassen:
CSS/*3. Farbe Rechtsklickmenü + Dropdown menüs in Menüleiste*/ #toolbar-menubar menupopup { --menuitem-hover-background-color: #2B2C86 !important; --panel-color: #fff !important; --menu-color: #fff !important; --menu-disabled-color: lightgrey !important; --panel-background: #000080 !important; --panel-border-color: #000080 !important; --panel-border-radius: 5px !important; } #toolbar-menubar menupopup :is(menu,menuitem):hover { color: red !important; background-color: lightblue !important; }
Hier bleiben die unerwünschten Auswirkungen weg. Gibt es auch noch einen solchen Code für das Kontextmenü, welches sich mit einem rechtsklick im Browserfenster öffnet?
Hallo,
vielleicht zeigst du erst einmal deinen aktuellen Code und beschreibst anhand dessen und idealerweise sogar eines Screenshots, was für dich nicht passt. Mit der Beschreibung „sieht nur noch zum teil so aus, wie er soll” (sic!) kann man nichts anfangen.
Hier der Code:
@-moz-document url(about:addons){
/*Hintergrund gesamte Seite*/
body {
cursor: default;
background-color: #ffd700 !important;
}
.main-search {
background: #ffd700 !important;
display: flex;
justify-content: flex-end;
align-items: center;
padding-inline-start: 28px;
padding-top: 20px;
padding-bottom: 30px;
max-width: var(--section-width);
}
.main-heading {
background: #ffd700 !important;
display: flex;
margin-inline-start: var(--main-margin-start);
padding-bottom: 16px;
max-width: var(--section-width);
}
.sticky-container {
background: #ffd700 !important;
width: 100%;
position: sticky;
top: 0;
z-index: var(--z-index-sticky-container);
}
/*Suchfeld*/
#input {
&[type="search"] {
--input-background-icon: url(chrome://global/skin/icons/search-textbox.svg);
padding-inline-end: var(--space-xxsmall);
background-color: lightblue;
background-color: #00016e !important;
color: #afbde1 !important;
}
}
/* search-addons > search-textbox {
margin: 0;
width: 20em;
min-height: 32px;
background-color: #00016e !important;
color: #afbde1 !important;
}
*/
/*Block nach recht verschieben*/
.main-search {
margin-left: 650px !important;
}
/*Überschriften*/
h1 {
margin: 0 0 8px;
font-size: 1.46em;
font-weight: 300;
line-height: 1.3em;
color: red !important;
background-color: #00016e !important;
border-radius: 15px !important;
text-align: center !important;
font-weight: bold !important;
width: 350px !important;
}
/*Sidebar*/
.navigation {
overflow-x: hidden;
overflow-y: auto;
position: relative;
background-color: #ffd700 !important;
}
#categories > .category[selected], #categories > .category.selected { /* --> aktuelle Seite */
color: #afbde1 !important;
}
#categories > .category {
background-color: #9c1818 !important;
color: #ffd700 !important;
border-color: #9c1818 !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}
.sidebar-footer-link {
background-color: #9c1818 !important;
color: #ffd700 !important;
border-color: #9c1818 !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}
#categories > .category:hover {
background-color: #ffd700 !important;
color: #9c1818 !important;
border-color: #9c1818 !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}
.sidebar-footer-link:hover {
background-color: #ffd700 !important;
color: #9c1818 !important;
border-color: #9c1818 !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}
/*Buttons / Verlinkungen*/
.page-options-menu > .more-options-button {
background-image: url("chrome://global/skin/icons/settings.svg");
width: 32px;
height: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
}
.page-options-menu > .more-options-button:hover {
background-image: url("chrome://global/skin/icons/settings.svg");
width: 32px;
height: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border-color: #9c1818 !important;
}
button {
font-weight: 600;
color: #ffd700 !important;
background-color: #9c1818 !important;
}
button:hover {
font-weight: 600;
color: #9c1818 !important;
background-color: #ffd700 !important;
border-color: #9c1818 !important;
}
/*Einzelne Erweiterungen*/
.addon.card {
box-shadow: var(--card-shadow);
background-color: #f0e68c !important;
color: #00016e !important;
}
.addon.card:hover {
box-shadow: #afbde1 !important;
background-color: #f0e68c !important;
}
/*aktiviert_deaktiviert Schalter*/
.toggle-button:hover {
background: #9c1818 !important;
border-color: transparent;
border: none !important;
}
.toggle-button {
background: #9c1818 !important;
border-color: transparent;
border: none !important;
}
/*Add-on Optionen Drop-down*/
panel-list {
font: menu;
background-color: #9c1818 !important;
color: #ffd700 !important;
}
addon-options > panel-list > panel-item:hover,
plugin-options > panel-list > panel-item:hover {
fill: #9c1818 !important;
--in-content-button-background-hover: #ffd700 !important;
--in-content-button-text-color-hover: #9c1818 !important;
}
/*Detailansicht*/
input[type="radio"]:checked, .radio-check[selected] {
-moz-context-properties: fill;
fill: #ffd700 !important;
color: var(--in-content-primary-button-text-color);
background-color: #9c1818 !important;
background-image: url("chrome://global/skin/icons/radio.svg");
border-color: var(--in-content-primary-button-border-color);
color-adjust: exact;
}
button.ghost-button:not(.semi-transparent):enabled {
background-color: #9c1818 !important;
color: #ffd700 !important;
border-radius: 30px !important;
border-color: #9c1818 !important;
}
button.ghost-button:not(.semi-transparent):enabled:hover {
background-color: #ffd700 !important;
color: #9c1818 !important;
border-radius: 30px !important;
border-color: #ffd700 !important;
}Dieses Symbol hinter dem Suchfeld sollte einen Radius von 5px haben und die Lupe im innern am besten in #ffd700 gehalten sein. Bei :hover sollte der Rahmen in #9c1818 sein.
Hallo,
irgendwas funktioniert bei mir nicht mehr richtig. Der Button neben dem Suchfeld (mit dem Lupen-Symbol) sieht nur noch zum teil so aus, wie er soll.
Hat jemand den Code parat, um Farbe des Symbols, Radius und Farbe des Buttons festzulegen?
Ich nutze aktuell folgenden Code:
/*3. Farbe Rechtsklickmenü + Dropdown menüs in Menüleiste*/
arrowscrollbox.menupopup-arrowscrollbox {
--menuitem-hover-background-color: #2B2C86 !important;
--panel-color: #fff !important;
--menu-color: #fff !important;
--menu-disabled-color: lightgrey !important;
--panel-background: #000080 !important;
--panel-border-color: #000080 !important;
--panel-border-radius: 5px !important;
}Mein Problem ist nun, dass sich dieser auch (teilweise) auf drop down Menüs auf Webseiten auswirkt, wenn diese auch als arrowscrollbox.menupopup-arrowscrollbox definiert sind. Kann der Code so angepasst werden, dass sich dieser nur noch auf die gewünschten Menüs auswirkt?
diesen Rahmen entfernen.
Teste bitte:
CSS.urlbar-background { box-shadow: none !important; } .urlbar { --toolbar-field-focus-border-color: transparent !important; }
Danke, das ist die Lösung für mein Problem.
Ich habe genau das umgekehrte Problem zu reni . Und zwar möchte ich diesen Rahmen entfernen. Da ich die Adressleiste in der Größe eingekürzt habe, stört dieser. Mein Code:
::selection {
background: red !important;
}
#nav-bar{
background: #00016e !important; /*original_color: light grey(#F0F0F0)*/ /*aktuell: dunkelblau*/
}
.urlbar[breakout] {
& > .urlbar-input-container {
width: 100%;
height: 100%;
background-color: #00016e !important;
border-color: #00016e !important;
color: #fff !important;
}
}
[breakout][breakout-extend] > .urlbar-background {
@media (prefers-reduced-motion: no-preference) {
[breakout-extend-animate] > & {
animation-duration: 150ms;
background-color: #00016e !important;
border: none !important;
}
}
}
.urlbarView-title {
white-space: nowrap;
line-height: 1.4;
color: #fff !important;
}
.urlbarView-title-separator {
&::before {
content: "\2014";
margin: 0 0.4em;
opacity: 0.6;
color: #fff !important;
}
}
.searchmode-switcher:hover {
background-color: #8888b3 !important;
color: #fff !important;
}
.searchmode-switcher:active {
background-color: #8888b3 !important;
color: #fff !important;
}
/*Länge der Leiste*/
.urlbar[breakout] {
& > .urlbar-input-container {
width: 100%;
height: 100%;
width: 1000px !important;
margin-left: 60px !important;
}
}
.urlbar-background {
display: block;
position: absolute;
inset: 0;
background-color: #00016e !important;
}
.urlbar-background:focus {
display: block;
position: absolute;
inset: 0;
background-color: #00016e !important;
border-color: none !important;
}
.urlbar-background:active{
display: block;
position: absolute;
inset: 0;
background-color: #00016e !important;
border-color: none !important;
}Danke für den Code. Damit werden sie zwar wieder weiß, jedoch habe ich dann immer noch das Problem, dass sich die Farbe bei :hover nicht wie vorgesehen verhält. Die Schaltflächen solllen im Normalzustand zwar alle weiß sein, bei :hover sollen sie jedoch die Farbe auf schwarz ändern, da man sie sonst aufgrund der definierten (und noch funktionierenden) Hintergrundfarben dann nicht mehr erkennt.
Am besten immer den ganzen aktuellen Code einstellen.
Mein Verdacht wäre, das du den Code von Speravir and deinen alten angehängt hast, dann würden vermutlich deine Hover Codes damit überschrieben. An meinem Mac sind diese Buttons anders angelegt, kann ich also nicht testen.
Kannst mal testen, eine Variante von Speravir's Code:
CSS#main-window .titlebar-buttonbox .titlebar-button:not(:hover) { color: #fff !important; }Oder gesamt evtl. sowas:
CSS/* Icon Farben ändern */ #main-window .titlebar-buttonbox .titlebar-button { color: #fff !important; } /* Mouse-over Farbe ändern */ #main-window .titlebar-buttonbox .titlebar-button:hover { border-radius: 5px !important; color: black !important; } /***** links *****/ #main-window .titlebar-min:hover{ background:#66FF66!important; /*Farbe: hellgrün*/ } /***** mitte *****/ #main-window .titlebar-max:hover { background:#FFFF00!important; /*Farbe: gelb*/ } #main-window .titlebar-restore:hover { background-color:#FFFF00!important; /*Farbe: gelb*/ } /***** rechts *****/ #main-window .titlebar-close:hover { background:#FF0000!important; /*Farbe: rot*/ }
Ich bin leider erst jetzt dazu gekommen, den Code zu testen. Mit der zweiten Alternative passt es wieder.
Alles anzeigenDoch seit dem neuesten Update funktionieren nur noch die :hover background Einstellungen. Die Symbole selbst bleiben schwarz, obwohl sie als weiß definiert wurden.
Füge auch dort ein !important hinzu. Übrigens kannst du den Code verkürzen, denn alle 3 Schalter besitzen die Klasse titlebar-button. Ich selbst hab noch aus der höheren Ebene titlebar-buttonbox davor gesetzt, um die Spezifität zu erhöhen, benötige aber trotzdem jetzt die Verstärkung. Alles in allem:
CSS/* 3 Buttons oben rechts Farbe ändern*/ /***** links *****/ #main-window .titlebar-buttonbox .titlebar-button { color: #fff !important; }Sollte irdendwann mal weitere Titlebar-Buttons dazukommen, dann müsste man unter Umständen wieder auf die einzelnen Klassenbezeichner zugreifen.
Wie du sieht, hier sind sie weiß.
Du benutzt doch ein dunkles Thema, wenn ich nicht irre, dann sind die Knöpfe schon vom Betriebssystem aus weiß. Das ist ja das Neue in Windows, dass sie jetzt nativ übernommen werden (zum Glück aber auch per CSS überregelt werden können).
Edit: Ich merke gerade, dass das wohl nur teilweise zutrifft. Ich habe bei mir selbst auf die beschriebene Weise die Farbe der Knöpfe beeinflussen können. Das scheint aber nicht für jedes Theme zu funktionieren (ich hab hier einige installiert, die ich gelegentlich für Testprofile nutze.)
Danke für den Code. Damit werden sie zwar wieder weiß, jedoch habe ich dann immer noch das Problem, dass sich die Farbe bei :hover nicht wie vorgesehen verhält. Die Schaltflächen solllen im Normalzustand zwar alle weiß sein, bei :hover sollen sie jedoch die Farbe auf schwarz ändern, da man sie sonst aufgrund der definierten (und noch funktionierenden) Hintergrundfarben dann nicht mehr erkennt.
Bisher nutze ich für die genannten Symbole folgenden Code:
/********************* 3 BUTTONS RECHTS OBEN ********************************************/
/*Mouse-over Farbe ändern*/
/***** links *****/
#main-window .titlebar-min:hover{
background:#66FF66!important; /*Farbe: hellgrün*/
border-radius: 5px !important;
color: black !important;
}
/***** mitte *****/
#main-window .titlebar-max:hover{
background:#FFFF00!important; /*Farbe: gelb*/
border-radius: 5px !important;
color: black !important;
}
toolbarbutton.titlebar-restore:hover {
background-color:#FFFF00!important; /*Farbe: gelb*/
border-radius: 5px !important;
color: black !important;
}
/***** rechts *****/
#main-window .titlebar-close:hover{
background:#FF0000!important; /*Farbe: rot*/
border-radius: 5px !important;
color: black !important;
}
/* 3 Buttons oben rechts Farbe ändern*/
/***** links *****/
#main-window .titlebar-min{
color: #fff;
}
/***** mitte *****/
#main-window .titlebar-max{
color: #fff;
}
toolbarbutton.titlebar-restore {
color: #fff;
}
/***** rechts *****/
#main-window .titlebar-close{
color: #fff;
}Doch seit dem neuesten Update funktionieren nur noch die :hover background Einstellungen. Die Symbole selbst bleiben schwarz, obwohl sie als weiß definiert wurden.
Ich kann dir frühestens am Wochenende ein Beispiel anbieten.
Brauchst du nicht. So wie ich es in #15 geschildert hatte, funktioniert es wieder.
Ich habe jetzt eine Lösung für mich gefunden:
Ich schreibe den Code jetzt vollständig neu und zwar ohne Attribute in den Klammern. Da kann ich zwar nicht so genau adressieren, jedoch besser als der Ist-Zustand und Zukunftssicherer...
