- Firefox-Version
- 157.0
- Betriebssystem
- Windows 11
In Nova wurde bekanntlich der Radius :hover auf 360° eingestellt. Da mir dies zu rund ist, habe ich versucht, diesen bei den einzelnen Elementen wie gewohnt mit der Funktion "background-radius" zu ändern. Jedoch greift diese hier offenbar nicht mehr.
Beispielhaft hier mein Code für die Suchleiste (noch nicht ganz fertig):
CSS
/********************* Navigationsleite mit Adressleiste ********************************************/
::selection {
background: red !important;
}
#nav-bar{
background: #00016e !important;
}
/*Buttons*/
#identity-icon-label {
padding-inline-start: 4px;
margin: 0;
background-color: #2b286 !important;
color: #fff !important;
}
.urlbar-icon.urlbar-go-button {
color: #fff !important;
}
.urlbar-icon.urlbar-go-button:hover {
background-color: #2b2c86 !important;
color: red !important;
border-radius: 8px !important;
}
#taskbar-tabs-button.urlbar-page-action {
color: #fff !important;
}
#taskbar-tabs-button.urlbar-page-action:hover {
background-color: #2b2c86 !important;
color: red !important;
border-radius: 8px !important;
}
#star-button-box.urlbar-page-action :hover {
background-color: #2b2c86 !important;
color: red !important;
border-radius: 8px !important;
}
/*Symbole*/
image#trust-icon {
color: red !important;
}
/*Schriftfarbe Suchfeld*/
#urlbar-input {
mask-repeat: no-repeat;
unicode-bidi: plaintext;
text-align: match-parent;
color: #fff !important;
}
/*Suchmaschienen Switcher*/
.button-background {
&.labelled {
gap: var(--space-small);
background-color: red !important;
}
}
.searchmode-switcher-panel-list {
.searchmode-switcher-panel > & {
padding: var(--panel-subview-body-padding);
background-color: #00016e !important;
color: #fff !important;
border: none !important;
}
}
/*Suchvorschläge*/
.urlbarView-background {
.urlbar > .urlbarView > & {
inset-block: calc(-1 * var(--urlbarView-margin-block) - var(--urlbar-joint-background-overlap)) calc(-1 * var(--urlbarView-joint-background-outset-block));
border-start-start-radius: 0;
border-start-end-radius: 0;
clip-path: inset( var(--urlbar-joint-background-overlap) calc(-1 * var(--urlbar-joint-background-shadow-margin)) calc(-1 * var(--urlbar-joint-background-shadow-margin)) );
background-color: #00016e !important;
color: #fff !important;
}
}
span.urlbarView-title.urlbarView-overflowable {
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;
}
/*Rahmen bei klick entfernen*/
.urlbar-background {
box-shadow: none !important;
}
.urlbar {
--toolbar-field-focus-border-color: transparent !important;
}
Alles anzeigen
Hier geht es mir um alles mit :hover beim Punkt /*Buttons*/ trotz der Einstellung von 8px wird immer noch der runder Kreis angezeigt. Wie kann ich in Zukunft den Radius für die einzelnen Elemente festlegen?