Komischer Rahmen um Adressleiste und Downloadfenster

heiko

Hallo Forum

seit Version 89.0 habe ich einen fetten weißen Rahmen um die Adressleiste herum. Das gleiche ist auch beim Downloadfenster, was ich in der Navigationsleiste aufklicke. Alle Border-Werte sind aktuell auf 0px, Rahmen bleibt aber. Setze ich zb auf 2px mit Farbe rot, ist rot da aber dennoch auch der weiße Rahmen.

Kann mir da jemand helfen? Ich wäre sehr dankbar.

LG Heiko

CSS

/* Download-Fenster (Navigationsleiste) */

/* Aussenrahmen */

.panel-arrowcontent {
border-top: 0px solid red !important;
border-left: 0px solid red !important;
border-right: 00px solid red !important;
border-bottom: 0px solid red !important;
}

CSS

/* Adressleiste - Farben, Schriftgröße in px + fett, Rahmen in px */

#urlbar {
background-color: #ffffff !important;
color: #000000 !important;
font-size: 15px !important; 
font-weight: bold !important;
border-top: 0px solid red !important;
border-left: 0px solid red !important;
border-right: 0px solid red !important;
border-bottom: 0px solid red !important;
}

Alles anzeigen

2002Andreas

Zitat von heiko

Kann mir da jemand helfen?

Das ist aber nicht dein kompl. Code.

So sieht das hier mit den beiden obigen aus:

milupo

Wenn du allen Seiten eines Rahmens die gleichen Werte gibst, reicht eine Zeile:

CSS

border: 0 solid red !important;

Beim Wert 0 kannst du die Maßeinheit weglassen, 0 ist gleich 0, egal von was.

heiko

Hi Andreas,

hier mal der Code vom Navigationsbereich und vom gesamten Downloadfenster

CSS

/* Download-Fenster (Navigationsleiste) */

/* Aussenrahmen */

.panel-arrowcontent {
border-top: 0px solid red !important;
border-left: 0px solid red !important;
border-right: 00px solid red !important;
border-bottom: 0px solid red !important;
}


/* Pfeil nach oben - unsichtbar - KEIN EFFEKT */

.panel-arrow[side="top"] {
visibility:hidden}

/* Schriftfarbe Downloadinfos - Farben, Schriftgröße in px, fett, Deckkraft (opacity) */

.downloadDetails.downloadDetails {
color: #ffff00 !important;
background-color: #000066 !important;
font-size: 15px !important;
font-weight: bold !important;
opacity: 1.0 !important;
}

/* keine Downloads in dieser Sitzung - Farben, Schriftgröße in px + fett + Rahmen */

.panel-view-body-unscrollable {
background-color: #000066 !important;
color: #ffff00 !important; 
font-size: 14px !important;
font-weight: bold !important;
border-top: 2px solid #ffff00 !important;
border-left: 2px solid #ffff00 !important;
border-right: 2px solid #ffff00 !important;
border-bottom: 1px solid #ffff00 !important;
}

/* Alle Downloads anzeigen - Farben, Schriftgröße in px + fett + Rahmen */

.downloadsPanelFooterButton{
background-color: #000066 !important;
color: #ffff00 !important; 
font-size: 11px !important;
font-weight: bold !important;
border-top: 1px solid #ffff00 !important;
border-left: 2px solid #ffff00 !important;
border-right: 2px solid #ffff00 !important;
border-bottom: 2px solid #ffff00 !important;
}

/* Download Fortschrittsbalken - füllend - Farbe */
 
progress::-moz-progress-bar {
background-color: #60F205 !important;
}

/* Download Fortschrittsbalken - leer - Farbe */

.downloadProgress {
background-color: red !important;
}

Alles anzeigen

CSS

* Navigationsleiste - Farbe, Symbolfarbe, Rahmen in px */

#nav-bar .toolbarbutton-1 {
fill: #ffff00 !important;
background-color: #000066 !important;
border-top: 0px solid #000000 !important;
border-left: 0px solid #ffffff !important;
border-right: 0px solid #ffffff !important;
border-bottom: 0px solid #000000 !important;
}

/* Navigationsleiste - Hovereffekt - Farben */

#nav-bar  {
--toolbarbutton-hover-background: #ffff00 !important; }
#nav-bar .toolbarbutton-1:hover {
fill: #000066 !important;
}



/* Adressleiste - Farben, Schriftgröße in px + fett, Rahmen in px */

#urlbar {
background-color: #ffffff !important;
color: #000000 !important;
font-size: 15px !important; 
font-weight: bold !important;
border-top: 0px solid red !important;
border-left: 0px solid red !important;
border-right: 0px solid red !important;
border-bottom: 0px solid red !important;
}

/* Adressleiste - Farben Adresse markieren */

#urlbar .textbox-input::selection {
background-color: #000000 !important;
color: #ffffff !important;  
}



/* Lesezeichen-Symbolleiste - Farben, Schriftgröße in px + fett, Rahmen in px */

#PersonalToolbar
{
background-color: #000066 !important;
color: #ffff00 !important;
font-size: 14px !important; 
font-weight: bold !important;
border-top: 0px solid #000000 !important;
border-left: 0px solid #000000 !important;
border-right: 0px solid #000000 !important;
border-bottom: 0px solid #000000 !important;
}

/* Lesezeichen-Symbolleiste - Hovereffekt - Farben */

#PlacesToolbarItems > toolbarbutton:hover{
background-color: #ffff00 !important;
color: #000066 !important;
}

/* Lesezeichen-Symbolleiste - Ordnersymbol Farbe Umrandung */

.bookmark-item[container="true"] {
fill: zyan !important;
}

Alles anzeigen

2002Andreas

Zitat von heiko

Downloadfenster

CSS

/* Download-Fenster (Navigationsleiste) */

/* Aussenrahmen */

.panel-arrowcontent {
border-top: 0px solid red !important;
border-left: 0px solid red !important;
border-right: 00px solid red !important;
border-bottom: 0px solid red !important;
}


/* Pfeil nach oben - unsichtbar - KEIN EFFEKT */

.panel-arrow[side="top"] {
visibility:hidden}

/* Schriftfarbe Downloadinfos - Farben, Schriftgröße in px, fett, Deckkraft (opacity) */

.downloadDetails.downloadDetails {
color: #ffff00 !important;
background-color: #000066 !important;
font-size: 15px !important;
font-weight: bold !important;
opacity: 1.0 !important;
}

/* keine Downloads in dieser Sitzung - Farben, Schriftgröße in px + fett + Rahmen */

.panel-view-body-unscrollable,#downloadsPanel-mainView{
background-color: #000066 !important;
color: #ffff00 !important; 
font-size: 14px !important;
font-weight: bold !important;
border-top: 2px solid #ffff00 !important;
border-left: 2px solid #ffff00 !important;
border-right: 2px solid #ffff00 !important;
border-bottom: 1px solid #ffff00 !important;
}

/* Alle Downloads anzeigen - Farben, Schriftgröße in px + fett + Rahmen */

.downloadsPanelFooterButton {
background-color: #000066 !important;
color: #ffff00 !important; 
font-size: 11px !important;
font-weight: bold !important;
border-top: 1px solid #ffff00 !important;
border-left: 2px solid #ffff00 !important;
border-right: 2px solid #ffff00 !important;
border-bottom: 2px solid #ffff00 !important;
}

/* Download Fortschrittsbalken - füllend - Farbe */
 
progress::-moz-progress-bar {
background-color: #60F205 !important;
}

/* Download Fortschrittsbalken - leer - Farbe */

.downloadProgress {
background-color: red !important;
}

* Navigationsleiste - Farbe, Symbolfarbe, Rahmen in px */

#nav-bar .toolbarbutton-1 {
fill: #ffff00 !important;
background-color: #000066 !important;
border-top: 0px solid #000000 !important;
border-left: 0px solid #ffffff !important;
border-right: 0px solid #ffffff !important;
border-bottom: 0px solid #000000 !important;
}

/* Navigationsleiste - Hovereffekt - Farben */

#nav-bar  {
--toolbarbutton-hover-background: #ffff00 !important; }
#nav-bar .toolbarbutton-1:hover {
fill: #000066 !important;
}



/* Adressleiste - Farben, Schriftgröße in px + fett, Rahmen in px */

#urlbar {
background-color: #ffffff !important;
color: #000000 !important;
font-size: 15px !important; 
font-weight: bold !important;
border-top: 0px solid red !important;
border-left: 0px solid red !important;
border-right: 0px solid red !important;
border-bottom: 0px solid red !important;
}

/* Adressleiste - Farben Adresse markieren */

#urlbar .textbox-input::selection {
background-color: #000000 !important;
color: #ffffff !important;  
}



/* Lesezeichen-Symbolleiste - Farben, Schriftgröße in px + fett, Rahmen in px */

#PersonalToolbar
{
background-color: #000066 !important;
color: #ffff00 !important;
font-size: 14px !important; 
font-weight: bold !important;
border-top: 0px solid #000000 !important;
border-left: 0px solid #000000 !important;
border-right: 0px solid #000000 !important;
border-bottom: 0px solid #000000 !important;
}

/* Lesezeichen-Symbolleiste - Hovereffekt - Farben */

#PlacesToolbarItems > toolbarbutton:hover{
background-color: #ffff00 !important;
color: #000066 !important;
}

/* Lesezeichen-Symbolleiste - Ordnersymbol Farbe Umrandung */

.bookmark-item[container="true"] {
fill: zyan !important;
}

Alles anzeigen

heiko

Vielen Dank Andreas

Das Downloadfenster passt perfekt.

Was noch nicht klappt, ist die Hintergrundfarbe der Adressleiste.

Normal sollte die jetzt testweise schwarz sein, sie bleibt aber weiß.

Die color Farbe rot funkioniert aber.

Kommt da bei #urlbar vielleicht noch etwas hin?

Hier nochmal der aktuelle Code

CSS

/* Adressleiste - Farben, Schriftgröße in px + fett, Rahmen in px */

#urlbar {
background-color: #000000 !important;
color: red !important;
font-size: 15px !important; 
font-weight: bold !important;
border-top: 0px solid red !important;
border-left: 0px solid red !important;
border-right: 0px solid red !important;
border-bottom: 0px solid red !important;
}

Alles anzeigen

2002Andreas

Zitat von heiko

Normal sollte die jetzt testweise schwarz sein

Meinst du das so?

Wenn ja, dann teste bitte:

CSS

#urlbar-input {
background-color: #000000 !important;
color: red !important;
font-size: 15px !important; 
font-weight: bold !important;
border-top: 0px solid red !important;
border-left: 0px solid red !important;
border-right: 0px solid red !important;
border-bottom: 0px solid red !important;
}

Frage dazu.

Rahmen mit 0px werden nicht angezeigt...wozu also die Einträge

heiko

Mein eigentliches Ziel ist ein 1-2px Rahmen in rot um die Adressleiste herum.

Und um zu testen, dass der Rahmen erstmal ganz weg ist, stehen die Werte aktuell auf 0.

Leider hat der urlbar-input nichts geändert. Ich habe jetzt mal 5px red eingetragen...ein rot taucht auch nicht auf.

Es bleibt einfach weiß.

Ich habe in einen anderen Beitrag gelesen, dass die weißen Rahmen nicht vom Firefox, sondern von Windows oder am Theme von Firefox liegen könnte.

Danke für deine Mühe

2002Andreas

Zitat von heiko

rot um die Adressleiste herum.

Meinst du so?

Oder so?

CSS

 #urlbar-input-container {
background-color: #000000 !important;
color: red !important;
font-size: 15px !important; 
font-weight: bold !important;
border-top: 2px solid red !important;
border-left: 2px solid red !important;
border-right: 2px solid red !important;
border-bottom: 2px solid red !important;
}

heiko

Es geht voran

Jetzt ist auch ein roter Rahmen da, aber der schummelt immer wieder ganz außen diesen hässlichen weißen Rahmen drumrum. Ich hatte diesen Rahmen auch beim Kontext drumrum und habe das dann zufällig durch einen Schnipselcode wegbekommen. Da hat das hier geholfen. Ich weiss das es 2 paar Schuhe sind, aber vielleicht ist da noch ein Ansatzpunkt.

CSS

.arrowscrollbox {
  display: none !important;
}

.menupopup-arrowscrollbox,
menupopup > menuitem , menupopup > menu {
  appearance: none !important;
  background-color: #000066 !important;
  color: #ffff00 !important;   
}

.menupopup-arrowscrollbox {
  border: 1px solid #ffff00 !important;
}

Alles anzeigen

milupo

Zitat von 2002Andreas

Rahmen mit 0px werden nicht angezeigt...wozu also die Einträge

Ach, eben. Bei mir hat es jetzt auch Klick gemacht. Damit ein Rahmen angezeigt wird, sollte die Stärke mindestens 1px betragen.

.DeJaVu

"0" ist richtiger als "0px" laut MDN. Lass(t) das px weg.

(gilt auch bei 00px)

Sören Hentzschel

Naja, nicht wirklich "richtiger", nur überflüssig, weil es egal ist, in welcher Einheit man nichts angibt. Würde es jetzt um eine CSS-Minimierung im Sinne der Performance-Steigerung gehen, dann würde man tatsächlich darauf achten, alle überflüssigen Zeichen zu vermeiden. Aber das passiert hier ja nicht, ansonsten wären da noch einige andere Stellen, an denen man einsparen könnte. Darum ist es hier dann auch wirklich nur eine Stilfrage.

heiko

Ok, am Ende führt ja 0 oder 0px hier zum gleichen Ergebnis. Natürlich habe ich auch 0 probiert, aber der weiße Rahmen um die Adressleiste ist immer noch wie oben in Beitrag 1.

2002Andreas, wäre denn bei dir auch ein weißer Rahmen, wenn du die Navigationsleiste mit blau füllen würdest?

2002Andreas

Zitat von heiko

wenn du die Navigationsleiste mit blau füllen würdest?

Am besten du gibst mal deinen kompl. Code, dann kann man das evtl. einfacher prüfen.

CSS

#nav-bar {
  background: blue !important;
}

 #urlbar-input-container {
background-color: #000000 !important;
color: red !important;
font-size: 15px !important; 
font-weight: bold !important;
border-top: 2px solid red !important;
border-left: 2px solid red !important;
border-right: 2px solid red !important;
border-bottom: 2px solid red !important;
}

Alles anzeigen

heiko

Andreas, du bist einfach klasse.

Es funktioniert jetzt.

Ich habe mir deinen letzten Code jetzt nochmal genau angesehen und siehe da, du sprichst nur "#nav-bar" an und ich hatte da immer "#nav-bar .toolbarbutton-1 {". Das #nav-bar hab ich jetzt davor gesetzt und siehe da, perfekt.

Herzlichen Dank. Du bist echt klasse. Mega Job, Respekt

heiko

Vielleicht noch eine Feinheit zum krönenden Abschluss

Ich würde gern beim markieren der Adresse die Farben noch festlegen. Also wenn man einmal reinklickt, die Schriftfarbe ändern und den Hintergrund der Schriftfarbe. Sicher ein klacks für dich

2002Andreas

Zitat von heiko

Also wenn man einmal reinklickt, die Schriftfarbe ändern und den Hintergrund der Schriftfarbe.

Teste bitte mal:

CSS

 #urlbar-input::selection {
  color:white !important;
  background: red !important;
}

heiko

Perfekte Arbeit. Mega.

Herzlichen Dank für deine Arbeit.

Beste Grüße Heiko

2002Andreas

Zitat von heiko

Herzlichen Dank für deine Arbeit.

Freut mich wenn ich dir damit helfen konnte, war gern geschehen

Komischer Rahmen um Adressleiste und Downloadfenster

Ähnliche Themen

Fx 117 > Tableiste unten per CSS-Code, nicht per Skript!

Border um Urlbar setzten bei Klick

Alle Trennlinien sind plötzlich weiß und dick