So manch einer weint ja dem Classiv Theme Restorer nach (mir ging es auch so!). Deshalb habe ich ein leicht anpaßbares Retro-Design für die userChrome.css geschrieben. Die Farbwerte und einige Andere sind ziemlich am Anfang in Variablen festgelegt, also braucht man fürs Erste nur dort zu ändern um ein völlig anderes Aussehen zu erreichen. Ich denke das kann jeder, auch mit wenig oder ohne CSS-Erfahrung.
Wer Lust hat, kann es ja mal ausprobieren. Da ich selbst ziemlich vergeßlich bin, habe ich mit Kommentaren nicht gespart, so daß es an sich selbsterklärend ist. Es ist natürlich noch reichlich ausbaufähig.
[attachment=1]firefox-retro-design.png[/attachment]
[attachment=0]firefox-retro-design-2.png[/attachment]
CSS
/* Do not remove the @namespace line -- it's required for correct functioning
* set default namespace to XUL
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Dies ist eine Design-Datei für Firefox ab Version 57
* Dateiname: "userChrome.css" (reine Textdatei) vom 28.01.2018
*
* Sie gehört in den Unterordner "chrome" im Firefox-Profilordner (Hilfe ->
* Informationen zur Fehlerbehebung -> Profilverzeichnis -> Ordner öffnen).
*
* Garantie: keine, nach bestem Wissen und ohne Gewissen ;-)
* Lizenz: darf frei verwendet werden
* Autor: HT-Frogger (Harry)
* Bei Unklarheiten einfach fragen...
*
* Mein Dank geht an die "Macher" von selfhtml.org und camp-firefox.de,
* da vor allem an Sören und an den immer freundlichen und nicht aus der
* Ruhe zu bringenden Andreas.
*/
/**********************************************************
********** Inhalt (Abschnitte) ***************************
**********************************************************/
/* Allgemeine Hinweise
* Besonderheit: Scripte für den Firefox
* Farbzuweisungen etc mit Variablen, Hinweise
* Austauschblöcke mit Farbzuweisungen
* Schriftgröße und Schriftart
* Vollbildmodus
* Reihenfolge der Leisten
* Pauschale Angaben für alle Leisten
* Pauschale Angaben für alle Buttons
* Einige Extra-Buttons
* Menü-Leiste
* Navigations-Leiste
* Lesezeichen-Leiste
* TAB-Leiste
* Suchleiste
* Entwicklerleiste
* Neue Toolbar unten mit Statusleiste (erfordert Scripte)
* Spielwiese zum experimentieren
*/
/**********************************************************
********** Allgemeine Hinweise ***************************
**********************************************************/
/* Kommentare beginnen mit /* und enden mit */
/*
* Diese Datei besteht aus mehreren CSS-Regeln.
*
* Eine CSS-Regel besteht aus einem oder mehreren durch Komma getrennten
* Selektoren oder Gruppen mit mehreren verketteten Selektoren denen
* innerhalb geschweifter Klammern eine oder mehrere CSS-Eigenschaften folgen.
* Siehe: https://wiki.selfhtml.org/wiki/Referenz:CSS
*
* Eine CSS-Eigenschaft besteht aus dem Namen der Eigenschaft, gefolgt von
* einem Doppelpunkt, einem oder mehreren zugewiesenen Werten sowie einem
* abschließenden Semikolon.
* Siehe: https://wiki.selfhtml.org/wiki/Schnell-Index/CSS
*
* Anmerkung zur Reihenfolge der CSS-Regeln:
* Spezifische Regelsätze haben eine höhere "Gewichtung".
* Es gibt 3 "Gewichtungs-Zähler": A (hoch), B (mittel) und C (niedrig).
* Es ist wie eine 3-stellige Zahl (ABC) zu verstehen.
*
* Jeder vorkommende Selektor im Regelsatz erhöht einen der 3 Zähler:
* ID-Selektoeren (#name): Zähler (A)
* Attribut-Selektoren (name[att]): Zähler (B)
* Klassen-Selektoren (name.kla): Zähler (B)
* Pseudoklassen-Selektoren (name:p-kla): Zähler (B)
* Normale Typ-Selektoren (name): Zähler (C)
* Pseudoelement-Selektoren (name::p-ele): Zähler (C)
* Siehe: https://wiki.selfhtml.org/wiki/CSS/Kaskade
*
* Wird, wie hier, mit "!important" festgelegt, daß diese Eigenschaft
* "wichtig" ist, kann sie nachträglich mit normalen CSS-Anweisungen
* (ohne "!important") bei sonst gleicher Gewichtung nicht mehr geändert
* werden, die letzte Eigenschaft mit "!important" ist dann gültig.
*
* Farbangaben mit genormten Namen (z.B. white, red, blue, transparent),
* 3-stellig Hex z.B. #3f0 (je eine Hexziffer für rot, grü, und blau),
* 6-stellig Hex z.B. #32fc00 (je zwei Hexziffern für rot, grü, und blau)
* oder anderen üblichen CSS-Möglichkeiten.
* "linear-gradient(Farbe1, Farbe2)" erzeugt einen vertikalen Farbverlauf.
* Siehe: https://wiki.selfhtml.org/wiki/Grafik/Farbpaletten
*
* Die wichtigsten CSS-Eigenschaften:
* color Schriftfarbe
* background Hintergrund (auch mit Grafiken)
* background-color nur die Hintergrundfarbe
* border Rahmen (Art, Stärke, Farbe
* border-color nur die Rahmenfarbe
* border-radius abgerundete Ecken bis hin zum Kreis
* margin Außenabstand bis zum übergeordneten Element
* padding Innenabstand bis zum innenliegenden Element
* Siehe: https://wiki.selfhtml.org/wiki/Schnell-Index/CSS
*
* Abstände und Eckenradius können in Pixeln oder in Prozent (z.B. 15px oder
* 50% für runde Buttons) oder in anderen CSS-Maßeinheiten angegeben werden.
*
* 4 Angaben beziehen sich meist auf die Seiten oben, rechts, unten und links
* oder die Ecken oben-links, oben-rechts, unten-rechts und unten-links.
*
* Zum Bearbeiten einen Texteditor (ab besten einen mit Syntax-Highlighting)
* verwenden, nicht mit Word oder ähnlichem.
*
* Ganze Blöcke die nicht verwendet werden sollen mit Kommentarzeichen davor
* (Schrägstrich+Stern) und dahinter (Stern+Schrägstrich) "auskommentieren".
*/
/**********************************************************
********** Besonderheit: Scripte für den Firefox *********
**********************************************************/
/* Der neue Firefox ab V57 kann nicht mehr so einfach mit neuen Funktionen
* durch Add-ons verändert werden. Hierfür gibt es jedoch verschiedene Scripte
* auf https://github.com/ardiman/
* oder im Forum: https://www.camp-firefox.de/forum/.
*
* Die Grundlage um Scripte ausführen zu können gibt es hier:
* Quelle: https://github.com/ardiman/userChrome.js/tree/master/_userChrome
* Es sind 4 Dateien, jede Datei aufrufen, als RAW anzeigen und speichern.
*
* Diese Dateien müssen von Hand in folgende Verzeichnisse kopiert werden:
*
* "config.js" in das "Firefox-Installationsverzeichnis/"
* "userChromeJS.js" in das "Firefox-Installationsverzeichnis/"
* "config-prefs.js" in das "Firefox-Installationsverzeichnis/defaults/pref/"
*
* "userChrome.js" in das "Firefox-Profilverzeichnis/chrome/"
*
* Ebenfalls in das "Firefox-Profilverzeichnis/chrome/" gehören
* auch die gewünschten Scripte mit der typischen Endung ".uc.js"
*/
/**********************************************************
********** Farbzuweisungen etc mit Variablen *************
**********************************************************/
/* Meine Abkürzungen in den Variablennamen:
*
* --con = Container für die oberen Leisten
* --fin = Suchleiste
* --dev = Entwicklerleiste
* --sta = neue Statusleiste
* --bar = Leisten
* --but = Tasten
* --inp = Eingabefeld
* --les = Lesezeichen
* --tab = Tabs
* --men = verschiedene Menüs
*
* -hgf = Hintergrundfarbe
* -txt = Textfarbe
* -rah = Rahmenfarbe
*
* -gra = Grafiksymbol
* -tcb = Tab-Close-Button
* -udb = Up-Down-Schaltflächen
* -pop = Pop-Up-Menüs
* -ver = sichere Verbindung (verifiziert)
*
* -hov = hover (bei Mauskontakt)
* -akt = aktiv (gedrückt)
* -sel = selected (ausgewählt)
* -ope = open (geöffnet)
* -dis = disabled (nicht wählbar)
* -opa = opacity (0=durchsichtig, 1=undurchsichtig)
* -rad = Radius (für abgerundete Ecken)
*
* Die Wertezuweisungen der Variablen geschieht in einem besonderen Block,
* es folgen u.U. mehrere Farbzuweisungsblöcke, einer sollte nur aktiv sein!
*
* Der Selektor ":root" spricht alles an,
* der folgende Block "{...}" ist dann aktiv.
*
* Ist der Selektor ":root" auskommentiert (also nicht vorhanden),
* so ist der folgende Block "{...}" nicht aktiv.
*
* Zum Design "Blau metallic" und "Grau dunkel" paßt am besten
* das Standard-Theme "Dunkel" mit heller Schrift, zu "Grau hell"
* paßt das Standard-Theme "Hell" mit dunkler Schrift.
* Nicht benötigte Blöcke kann man auch einfach löschen oder
* eigene Kreationen hinzufügen.
*
* ! Besonderheit zum ausgelagerten Austauschblock mit Farbzuweisungen:
* !
* ! Ich habe mehrere Designs (Farbzuweisungen) in verschiedene CSS-Dateien
* ! ausgelagert. Mit einem Script von EffPeh (leicht von mir verändert)
* ! wird in der Navigationsleiste ein Button zum durchschalten der
* ! verschiedenen Designs angezeigt.
* !
* ! Sonst folgen hier die Blöcke "Farbzuweisungen" wie oben beschrieben.
*/
/**********************************************************
********** Farbzuweisungen: Design Blau metallic *********
**********************************************************/
:root {
/* Leisten-Container: Im Vordergrund das aktuelle Firefox-Symbol
* ganz rechts, 5 Pixel von rechts und von unten.
* Der Hintergrund in dunkelblau mit Wölbungseffekt (linear-gradient),
* der Verlauf geht von oben (#00c) bis nach unten (#007), Schrift weiß
*/
--con-hgf:
url("resource:///chrome/browser/content/branding/icon64.png")
no-repeat right 5px bottom 5px,
linear-gradient(#00c, #007);
--con-rah: #999;
--con-txt: #fff;
/* Vom Leisten-Container abweichender Hintergrund:
* Menüleiste, Navigationsleiste, Lesezeichenleiste und Tableiste,
* sonst none eintragen
*/
--men-bar-hgf: none;
--nav-bar-hgf: none;
--xxxles-bar-hgf: none;
--tab-bar-hgf: none;
/* Bei sicherer Verbindung (grünes Schloß in URL-Bar) Hintergrundfarbe
* sonst none eintragen
*/
--url-ver-hgf: linear-gradient(#578, #444);
/* und einen senkrechten Trennstrich rechts daneben (Stärke, Art und Farbe)
* damit es auffälliger ist, sonst none eintragen
*/
--url-ver-rah: 3px solid #0c0;
/* Die unteren Leisten ohne das Firefoxsymbol,
* Suchleiste und Entwicklerleiste
*/
--fin-bar-hgf: linear-gradient(#00c, #007);
--dev-bar-hgf: linear-gradient(#00c, #007);
/* Aufklappmenüs der Menüs und der Lesezeichen
*/
--men-hgf: #def;
--men-udb-hgf: #bcd;
--men-udb-hov: #3ae;
--men-rah: #888;
/* Tasten in Metallic-Farben mit Wölbungseffekt, Rahmen, Ecken-Raduis
*/
--but-hgf: linear-gradient(#758, #222);
--but-hgf-hov: linear-gradient(#869, #444);
--but-hgf-akt: linear-gradient(#444, #869);
--but-rah: #888 #666 #666 #888;
--but-rah-hov: #aaa #888 #888 #aaa;
--but-rah-akt: #888 #aaa #aaa #888;
--but-rah-gra: #fff;
--but-txt: #fff;
--but-dis-opa: 0.6;
--but-rad: 5px;
/* Eingabefeld mit inversem Wölbungseffekt, Rahmen, Ecken-Raduis
*/
--inp-hgf: linear-gradient(#446, #66a);
--inp-rah: #888 #aaa #aaa #888;
--inp-rad: 5px;
/* Lesezeichenordner in verschiedenen Schriftfarben
* (auch die Ordnersymbolfarben), im Abschnitt Lesezeichen-Leiste
* dafür die Texte anpassen, Ecken-Radius anpassen,
* Hintergrundfarbe und Rahmenfarbe,
* im PopUp-Fenster dunkle Schriftfarbe
*/
--les-hgf: linear-gradient(#578, #222);
--les-hgf-hov: linear-gradient(#689, #444);
--les-hgf-ope: linear-gradient(#444, #689);
--les-rah: #888 #666 #666 #888;
--les-rah-hov: #aaa #888 #888 #aaa;
--les-rah-ope: #888 #aaa #aaa #888;
--les-txt: #fff;
--les-txt-pop: #000;
--les-txt-rt: #f44;
--les-txt-ge: #ff3;
--les-txt-gn: #3f3;
--les-txt-zy: #3ff;
--les-txt-bl: #33f;
--les-txt-ma: #f3f;
--les-rad: 5px;
/* Tabs mit Farben, Rahmen, Ecken-Raduis
*/
--tab-txt: #bbb;
--tab-txt-hov: #ddd;
--tab-txt-sel: #fff;
--tab-hgf: linear-gradient(#768, #222);
--tab-hgf-hov: linear-gradient(#879, #444);
--tab-hgf-sel: #000;
--tab-rah: #666;
--tab-rah-hov: #999;
--tab-rah-sel: #ccc;
--tab-rad: 15px 15px 0 0;
/* Tab-Close-Button
*/
--tcb-txt: #fff;
--tcb-hgf: linear-gradient(#944, #433);
--tcb-hgf-sel: linear-gradient(#a00, #600);
--tcb-hgf-hov: linear-gradient(#b00, #800);
--tcb-rah: #999;
--tcb-rad: 5px;
/* neue Statusleiste, Hintergrundfarbe, Textfarbe,
* Höhe (ca. 24 Pixel bzw ca. 30 Pixel für Buttons),
* Länge (100% oder weniger wenn rechts Platz für Buttons bleiben soll)
*/
--sta-bar-hgf: linear-gradient(#00c, #007);
--sta-txt: #ccc;
--sta-bar-hoe: 20px;
--sta-bar-lae: 100%;
}
/**********************************************************
********** Farbzuweisungen: Design Grau dunkel ***********
**********************************************************/
/* :root */ {
/* Leisten-Container: Im Vordergrund das aktuelle Firefox-Symbol
* ganz rechts, 5 Pixel von rechts und von unten,
* der Hintergrund in dunkelgrau, Schrift weiß
*/
--con-hgf:
url("resource:///chrome/browser/content/branding/icon64.png")
no-repeat right 5px bottom 5px, #333;
--con-rah: #999;
--con-txt: #fff;
/* Vom Leisten-Container abweichender Hintergrund:
* Menüleiste, Navigationsleiste, Lesezeichenleiste und Tableiste,
* sonst none eintragen
*/
--men-bar-hgf: none;
--nav-bar-hgf: none;
--les-bar-hgf: none;
--tab-bar-hgf: none;
/* Bei sicherer Verbindung (grünes Schloß in URL-Bar) Hintergrundfarbe
* sonst none eintragen
*/
--url-ver-hgf: #353;
/* und einen senkrechten Trennstrich rechts daneben (Stärke, Art und Farbe)
* damit es auffälliger ist, sonst none eintragen
*/
--url-ver-rah: 3px solid #0c0;
/* Die unteren Leisten ohne das Firefoxsymbol,
* Suchleiste und Entwicklerleiste
*/
--fin-bar-hgf: #333;
--dev-bar-hgf: #333;
/* Aufklappmenüs der Menüs und der Lesezeichen
*/
--men-hgf: #def;
--men-udb-hgf: #bcd;
--men-udb-hov: #3ae;
--men-rah: #888;
/* Tasten in mittelgrau, Rahmen, Ecken-Raduis
*/
--but-hgf: #555;
--but-hgf-hov: #777;
--but-hgf-akt: #333;
--but-rah: #999;
--but-rah-hov: #ccc;
--but-rah-akt: #999;
--but-rah-gra: #fff;
--but-txt: #fff;
--but-dis-opa: 0.6;
--but-rad: 5px;
/* Eingabefeld in mittelgrau, Rahmen, Ecken-Raduis
*/
--inp-hgf: #555;
--inp-rah: #999;
--inp-rad: 5px;
/* Lesezeichenordner in verschiedenen Schriftfarben
* (auch die Ordnersymbolfarben), im Abschnitt Lesezeichen-Leiste
* dafür die Texte anpassen, Ecken-Radius anpassen,
* Hintergrundfarbe und Rahmenfarbe,
* im PopUp-Fenster dunkle Schriftfarbe
*/
--les-hgf: #555;
--les-hgf-hov: #777;
--les-hgf-ope: #333;
--les-rah: #999;
--les-rah-hov: #ccc;
--les-rah-ope: #999;
--les-txt: #fff;
--les-txt-pop: #000;
--les-txt-rt: #f44;
--les-txt-ge: #ff3;
--les-txt-gn: #3f3;
--les-txt-zy: #3ff;
--les-txt-bl: #33f;
--les-txt-ma: #f3f;
--les-rad: 5px;
/* Tabs mit Farben, Rahmen, Ecken-Raduis
*/
--tab-txt: #bbb;
--tab-txt-hov: #fff;
--tab-txt-sel: #fff;
--tab-hgf: #555;
--tab-hgf-hov: #777;
--tab-hgf-sel: #000;
--tab-rah: #999;
--tab-rah-hov: #ccc;
--tab-rah-sel: #fff;
--tab-rad: 15px 15px 0 0;
/* Tab-Close-Button in rot
*/
--tcb-txt: #fff;
--tcb-hgf: #800;
--tcb-hgf-sel: #800;
--tcb-hgf-hov: #a00;
--tcb-rah: #999;
--tcb-rad: 5px;
/* neue Statusleiste, Hintergrundfarbe, Textfarbe,
* Höhe (ca. 24 Pixel bzw ca. 30 Pixel für Buttons),
* Länge (100% oder weniger wenn rechts Platz für Buttons bleiben soll)
*/
--sta-bar-hgf: #333;
--sta-txt: #ccc;
--sta-bar-hoe: 20px;
--sta-bar-lae: 100%;
}
/**********************************************************
********** Farbzuweisungen: Design Grau hell *************
**********************************************************/
/* :root */ {
/* Leisten-Container: Im Vordergrund das aktuelle Firefox-Symbol
* ganz rechts, 5 Pixel von rechts und von unten,
* der Hintergrund in hellgrau, Schrift schwarz
*/
--con-hgf:
url("resource:///chrome/browser/content/branding/icon64.png")
no-repeat right 5px bottom 5px, #eee;
--con-rah: #999;
--con-txt: #000;
/* Vom Leisten-Container abweichender Hintergrund:
* Menüleiste, Navigationsleiste, Lesezeichenleiste und Tableiste,
* sonst none eintragen
*/
--men-bar-hgf: none;
--nav-bar-hgf: none;
--les-bar-hgf: none;
--tab-bar-hgf: none;
/* Bei sicherer Verbindung (grünes Schloß in URL-Bar) Hintergrundfarbe
* sonst none eintragen
*/
--url-ver-hgf: #cfc;
/* und einen senkrechten Trennstrich rechts daneben (Stärke, Art und Farbe)
* damit es auffälliger ist, sonst none eintragen
*/
--url-ver-rah: 3px solid #0c0;
/* Die unteren Leisten ohne das Firefoxsymbol,
* Suchleiste und Entwicklerleiste
*/
--fin-bar-hgf: #eee;
--dev-bar-hgf: #eee;
/* Aufklappmenüs der Menüs und der Lesezeichen
*/
--men-hgf: #eef;
--men-udb-hgf: #bcd;
--men-udb-hov: #3ae;
--men-rah: #888;
/* Tasten in mittelgrau, Rahmen, Ecken-Raduis
*/
--but-hgf: #ddd;
--but-hgf-hov: #bbb;
--but-hgf-akt: #999;
--but-rah: #666;
--but-rah-hov: #333;
--but-rah-akt: #000;
--but-rah-gra: #000;
--but-txt: #000;
--but-dis-opa: 0.5;
--but-rad: 5px;
/* Eingabefeld in mittelgrau, Rahmen, Ecken-Raduis
*/
--inp-hgf: #ddd;
--inp-rah: #666;
--inp-rad: 5px;
/* Lesezeichenordner in verschiedenen Schriftfarben
* (auch die Ordnersymbolfarben), im Abschnitt Lesezeichen-Leiste
* dafür die Texte anpassen, Ecken-Radius anpassen,
* Hintergrundfarbe und Rahmenfarbe,
* im PopUp-Fenster dunkle Schriftfarbe
*/
--les-hgf: #ddd;
--les-hgf-hov: #bbb;
--les-hgf-ope: #999;
--les-rah: #666;
--les-rah-hov: #333;
--les-rah-ope: #000;
--les-txt: #000;
--les-txt-pop: #000;
--les-txt-rt: #900;
--les-txt-ge: #009;
--les-txt-gn: #090;
--les-txt-zy: #066;
--les-txt-bl: #009;
--les-txt-ma: #606;
--les-rad: 5px;
/* Tabs mit Farben, Rahmen, Ecken-Raduis
*/
--tab-txt: #333;
--tab-txt-hov: #000;
--tab-txt-sel: #fff;
--tab-hgf: #ccc;
--tab-hgf-hov: #aaa;
--tab-hgf-sel: #666;
--tab-rah: #666;
--tab-rah-hov: #333;
--tab-rah-sel: #000;
--tab-rad: 15px 15px 0 0;
/* Tab-Close-Button in rot
*/
--tcb-txt: #000;
--tcb-hgf: #f66;
--tcb-hgf-sel: #f66;
--tcb-hgf-hov: #f33;
--tcb-rah: #999;
--tcb-rad: 5px;
/* neue Statusleiste, Hintergrundfarbe, Textfarbe,
* Höhe (ca. 24 Pixel bzw ca. 30 Pixel für Buttons),
* Länge (100% oder weniger wenn rechts Platz für Buttons bleiben soll)
*/
--sta-bar-hgf: #eee;
--sta-txt: #333;
--sta-bar-hoe: 20px;
--sta-bar-lae: 100%;
}
/**********************************************************
********** Schriftgröße und Schriftart *******************
**********************************************************/
/* Für Sehbehinderte: Die Schrift allgemein etwas größer:
* Den Wert von "font-size:" anpassen, der Standardwert ist etwa 20px.
*
* Dadurch entsteht beim Vollbildmodus vermutlich oben ein störender Rand.
* Dann im nächsten Abschnitt den negativen Wert von "margin-top:"
* entsprechend vergrößern.
*
* Man kann auch eine andere Schriftart verwenden, sie muß aber auf dem
* Rechner installiert sein. Namen mit Leerzeichen in Hochkommata setzen.
* Es können mehrere Schriftarten angegeben werden (als Notnagel falls
* eine nicht installiert ist).
*
* Und dann kann man noch verschiedene Textschatten setzen - wer es mag.
* Das ist sicher nicht überall angebracht, aber evt in einigen Leisten.
* Die 4 Werte sind: X-Versatz Y-Versatz Streuung und Farbe.
*
* Die folgendende CSS-Regel ist durch die Kommentarzeichen davor
* und dahinter unwirksam, bei Verwendung diese bitte entfernen!
*/
/*
#main-window * {
font-size: 30px !important;
font-family: Verdana, Arial, sans-serif !important;
text-shadow: 3px 3px 5px #3ff !important;
}
*/
/**********************************************************
********** Vollbildmodus *********************************
**********************************************************/
/* Damit die Rückkehr aus dem Vollbildmodus mit der Maus klappt:
*
* Der Container für die oberen Leisten wird beim Vollbildmodus nach oben
* aus dem Anzeigebereich hinaus geschoben, bis auf einen schmalen Rand.
* Bei Mauskontakt des letzten Restes wird er wieder ganz angezeigt.
*
* Bei 0 bleibt der Leistencontainer immer voll sichtbar, je größer der
* negative Wert, desto mehr verschwindet aus dem sichtbaren Bereich,
* ein Pixel muß für den Mauskontakt am oberen Rand mindestens sichtbar
* bleiben. Den Wert an die evt veränderte Leistenhöhe anpassen!
*/
#main-window[inFullscreen="true"] #navigator-toolbox {
margin-top: -79px !important; /* diesen Wert anpassen */
}
/* Bei Mauskontakt des noch sichtbaren Pixels die Leisten wieder einblenden
*/
#main-window[inFullscreen="true"] #navigator-toolbox:hover {
margin-top: 0 !important;
}
/* Etwas schnellere Animation beim ein- und ausblenden, normal ist 1.5s
*/
#navigator-toolbox {
transition: 0.5s !important;
}
/**********************************************************
********** Reihenfolge der Leisten ***********************
**********************************************************/
/* Die Reihenfolge der Leisten im Leisten-Container wird durch die
* zugewiesenen Zahlen der "-moz-box-ordinal-group" bestimmt:
* Oben die Menü-Leiste, darunter die Navigations-Leiste danach
* die Lesezeichen-Leiste, unten die TAB-Leiste, so wie man es
* von früher her gewohnt ist.
*
* Oft wird eine andere Vorgehensweise beschrieben.
* Ob es wichtig ist? Ich habe sie jedenfalls einfach von 1 bis 4
* durchnummeriert, das ist übersichtlich und hat bisher geklappt.
*/
#toolbar-menubar {
-moz-box-ordinal-group: 1 !important;
}
#nav-bar {
-moz-box-ordinal-group: 2 !important;
}
#PersonalToolbar {
-moz-box-ordinal-group: 3 !important;
}
#TabsToolbar {
-moz-box-ordinal-group: 4 !important;
}
/**********************************************************
********** Pauschale Angaben für alle Leisten ************
**********************************************************/
/* Gemeinsame Hintergrundfarbe des Containers für alle Leisten im
* Kopfbereich, unten eine dünne Trennlinie zum Datenbereich
*/
#navigator-toolbox {
background: var(--con-hgf) !important;
border-top: 1px solid var(--con-rah) !important;
border-bottom: 1px solid var(--con-rah) !important;
}
/* Der flexible Zwischenraum darf beliebig breit werden
*/
toolbarspring {
max-width: none !important;
}
/**********************************************************
********** Pauschale Angaben für alle Buttons ************
**********************************************************/
/* Damit werden die Hintergründe der Elemente in den Buttons
* durchsichtig damit die gewählte Buttonfarbe wirken kann
*/
/* #bottom-toolbar... ist nur für die Script-Erweiterung */
#bottom-toolbar .toolbarbutton-badge-stack,
#bottom-toolbar .toolbarbutton-text,
#bottom-toolbar .toolbarbutton-icon,
#content findbar .toolbarbutton-badge-stack,
#content findbar .toolbarbutton-text,
#content findbar .toolbarbutton-icon,
#developer-toolbar .toolbarbutton-badge-stack,
#developer-toolbar .toolbarbutton-text,
#developer-toolbar .toolbarbutton-icon,
#navigator-toolbox .toolbarbutton-badge-stack,
#navigator-toolbox .toolbarbutton-text,
#navigator-toolbox .toolbarbutton-icon {
background: none !important;
}
/* Die Hintergrundfarbe und Schriftfarbe angepaßt an die Leistenfarbe,
* die Rahmen-Stärke und -Farbe und den Ecken-Radius (etwas abgerundet),
* die Abstände der Buttons (Außen- und Innenabstände) etwas angepaßt,
* in allen normalen Leisten (#navigator-toolbox),
* auch in der Suchleiste und in der Entwickler-Leiste.
*/
#bottom-toolbar toolbarbutton,
#content findbar toolbarbutton,
#developer-toolbar toolbarbutton,
#navigator-toolbox toolbarbutton {
background: var(--but-hgf) !important;
color: var(--but-txt) !important;
fill: var(--but-txt) !important;
border: 1px solid !important;
border-color: var(--but-rah) !important;
border-radius: var(--but-rad) !important;
margin: 2px !important;
padding-left: 3px !important;
padding-right: 3px !important;
}
/* Die Button-Hintergrundfarbe etwas aufhellen,
* wenn nicht geklickt werden kann (disabled)
* (der Defaultwert ist mir zu durchsichtig)
*/
#bottom-toolbar toolbarbutton[disabled="true"],
#content findbar toolbarbutton[disabled="true"],
#developer-toolbar toolbarbutton[disabled="true"],
#navigator-toolbox toolbarbutton[disabled="true"] {
opacity: var(--but-dis-opa) !important;
}
/* Bei Mauskontakt die Button-Hintergrundfarbe
* und die Rahmenfarbe andere Farbe,
* aber nur wenn geklickt werden kann (nicht disabled)
*/
#bottom-toolbar toolbarbutton:hover:not([disabled="true"]),
#content findbar toolbarbutton:hover:not([disabled="true"]),
#developer-toolbar toolbarbutton:hover:not([disabled="true"]),
#navigator-toolbox toolbarbutton:hover:not([disabled="true"]) {
background: var(--but-hgf-hov) !important;
border-color: var(--but-rah-hov) !important;
}
/* Bei gedrückter Taste andere Farbe (aktive)
*/
#bottom-toolbar toolbarbutton:active:not([disabled="true"]),
#content findbar toolbarbutton:active:not([disabled="true"]),
#developer-toolbar toolbarbutton:active:not([disabled="true"]),
#navigator-toolbox toolbarbutton:active:not([disabled="true"]) {
background: var(--but-hgf-akt) !important;
border-color: var(--but-rah-akt) !important;
}
/**********************************************************
********** Einige Extra-Buttons **************************
**********************************************************/
/* Symbol für den Button um die verschiedenen Designs umzuschalten,
* es wird dann eine andere (die nächste) Design-Datei geladen
* die sofort ohne Neustart wirksam wird
*
* Wenn nicht benötigt - einfach löschen!
*/
#user-farben::after {
color: white !important;
content: "\1f3a8" !important;
font-size: 24px !important;
margin-left: -26px !important;
margin-right: 2px !important;
}
/* Symbol für den Button um die userChrome.css neu zu egistrieren,
* die Grafik im Quelltext gelöscht und hier durch ein Sonderzeichen ersetzt
*
* Wenn nicht benötigt - einfach löschen!
*/
#ucjs-register-userChrome::after {
color: white !important;
content: "\1f4a1" !important;
font-size: 24px !important;
margin-left: -26px !important;
margin-right: 2px !important;
}
/* Symbol für den Button um die Browser Tools direkt zu starten,
* die Grafik im Quelltext gelöscht und hier durch ein Sonderzeichen ersetzt
*
* Wenn nicht benötigt - einfach löschen!
*/
#browser-toolbox-button::after {
color: white !important;
content: "\1f6e0" !important;
font-size: 24px !important;
margin-left: -26px !important;
margin-right: 2px !important;
}
/**********************************************************
********** Menü-Leiste ***********************************
**********************************************************/
/* Vom Container (#navigator-toolbox) abweichender Hintergrund
*/
#toolbar-menubar {
background: var(--men-bar-hgf) !important;
color: var(--con-txt) !important;
}
#toolbar-menubar #main-menubar {
color: var(--con-txt) !important;
}
/* Die Ordner Lesezeichen-Symbolleiste im Menü Lesezeichen ausblenden
* weil die Leszeichensymbolleiste hier immer eingeblendet ist
*/
#toolbar-menubar menu[label="Lesezeichen-Symbolleiste"] {
display: none !important;
}
/* Oben und unten keinen Abstand halten (ist sonst je 1 Pixel)
*/
#navigator-toolbox #toolbar-menubar {
padding-bottom: 0 !important;
padding-top: 0 !important;
}
/* Hintergrundfarbe der Pull-Down-Menüs
*/
#toolbar-menubar .arrowscrollbox-scrollbox {
background: var(--men-hgf) !important;
border: 1px solid !important;
border-color: var(--men-rah) !important;
}
/**********************************************************
********** Navigations-Leiste ****************************
**********************************************************/
/* Innerhalb der Leiste links und rechts 5 Pixel Abstand zum Rand,
* vom Container (#navigator-toolbox) abweichender Hintergrund
*/
#nav-bar {
border: none !important;
background: var(--nav-bar-hgf) !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
/* Zurück-Taste und Vor-Taste: 24 Pixel breiter, 12 Pixel Abstand
* vom Grafik-Element zum linken und rechten Rand des Buttons,
* oben und unten 2 Pixel Abstand (etwas flachere Buttons),
* der Back-Button ist der höchste, die übrigen Buttons passen sich an
*/
#navigator-toolbox #back-button,
#navigator-toolbox #forward-button {
padding-left: 12px !important;
padding-right: 12px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
}
/* Zurück-Taste und Vor-Taste: Rahmen um das Grafik-Element.
* Zusäztlich mögliche Angaben:
* Gleiche Grafik (rund): border-radius: 50% !important;
* Gleiche Breite: width: 32px !important;
* Gleiche Höhe: height: 32px !important;
* Gleiche Innenabstände: padding: 6px !important;
*/
#navigator-toolbox #back-button .toolbarbutton-icon,
#navigator-toolbox #forward-button .toolbarbutton-icon {
border: 1px solid var(--but-rah-gra) !important;
}
/* URL- und Such-Feld: Hintergrundfarbe Rahmen und Eckenradius angepaßt
*/
#nav-bar #urlbar,
#nav-bar #searchbar {
background: var(--inp-hgf) !important;
border: 1px solid !important;
border-color: var(--inp-rah) !important;
border-radius: var(--inp-rad) !important;
color: var(--con-txt) !important;
}
/* Add-on-Buttons Icon-Container:
* Mehr Platz für das Icon, Abstand zum Icon nur 2px (default: 6px)
*/
#nav-bar toolbarbutton.webextension-browser-action .toolbarbutton-badge-stack {
padding: 2px !important;
}
/* Add-on-Buttons Icon:
* Icon etwas größer, Größe 24px x 24px (default: 16px x 16px)
*/
#nav-bar toolbarbutton.webextension-browser-action .toolbarbutton-icon {
height: 24px !important;
width: 24px !important;
}
/* Hintergrund der Schloß-Box bei sicherer Verbindung
*/
#urlbar #identity-box.verifiedIdentity,
#urlbar #identity-box.verifiedDomain {
background: var(--url-ver-hgf) !important;
border-right: var(--url-ver-rah) !important;
}
/* Zoom-Text / Reset, oben kein Abstand (sonst 5px)
* */
#zoom-reset-button .toolbarbutton-text {
padding: 1px !important;
}
/**********************************************************
********** Lesezeichen-Leiste ****************************
**********************************************************/
/* Vom Container (#navigator-toolbox) abweichender Hintergrund
*/
#PersonalToolbar {
background: var(--les-bar-hgf) !important;
}
/* Von den Buttons abweichender Hintergrund / Rahmen / Eckenabrundung
*/
#navigator-toolbox #PersonalToolbar toolbarbutton {
background: var(--les-hgf) !important;
border-color: var(--les-rah) !important;
border-radius: var(--les-rad) !important;
}
/* Bei Mauskontakt die Button-Hintergrundfarbe
* und die Rahmenfarbe andere Farben
*/
#navigator-toolbox #PersonalToolbar toolbarbutton:hover {
background: var(--les-hgf-hov) !important;
border-color: var(--les-rah-hov) !important;
}
/* Geöffnet (ausgeklapptes Popup-Menü), Button-Hintergrundfarbe
* und die Rahmenfarbe andere Farben
*/
#navigator-toolbox #PersonalToolbar toolbarbutton[open="true"] {
background: var(--les-hgf-ope) !important;
border-color: var(--les-rah-ope) !important;
}
/* Textfarbe aller normalen Lesezeichen-Buttons
*/
#PersonalToolbar .bookmark-item .toolbarbutton-text {
color: var(--les-txt) !important;
}
/* Textfarbe der Lesezeichen-Texte in den Popup-Menüs
*/
#PersonalToolbar menupopup .bookmark-item .toolbarbutton-text {
color: var(--les-txt.pop) !important;
}
/* Textfarbe je nach Label-Name (das ist der Name auf dem Button)
* unterschiedlich, je Farbe eine separate CSS-Regel.
* Bei Bedarf mit neuen Abschnitten und anderen Label-Namen und
* anderen Farb-Variablen ergänzen.
*
* Statt des Labelnamens "[label="Name"]" kann man auch die laufende
* Label-Nummer ":nth-of-type(Zahl)" verwenden. Damit kann man auch
* fortlaufende Farbwiederholungen realisieren. ":nth-of-type(3n+1)"
* bedeutet wenn die Label-Nummer / 3 einen Rest von 1 ergibt.
*/
#PersonalToolbar .bookmark-item[label="Firmen"] > .toolbarbutton-text {
color: var(--les-txt-rt) !important;
}
#PersonalToolbar .bookmark-item[label="Lesen"] > .toolbarbutton-text {
color: var(--les-txt-ge) !important;
}
#PersonalToolbar .bookmark-item[label="Privat"] > .toolbarbutton-text {
color: var(--les-txt-gn) !important;
}
#PersonalToolbar .bookmark-item[label="Suchen"] > .toolbarbutton-text,
#PersonalToolbar .bookmark-item[label="Startpage"] > .toolbarbutton-text {
color: var(--les-txt-zy) !important;
}
#PersonalToolbar .bookmark-item[label="Zubehör"] > .toolbarbutton-text {
color: var(--les-txt-ma) !important;
}
/* Auch die Ordnersymbole in gleicher Farbe wie die Schrift,
* zuerst die "normalen" dann die in den Popup-Menüs, dann die besonderen
*/
#PersonalToolbar .bookmark-item {
fill: var(--les-txt) !important;
}
#PersonalToolbar menupopup .bookmark-item {
fill: var(--les-txt-pop) !important;
}
#PersonalToolbar .bookmark-item[label="Firmen"] {
fill: var(--les-txt-rt) !important;
}
#PersonalToolbar .bookmark-item[label="Lesen"] {
fill: var(--les-txt-ge) !important;
}
#PersonalToolbar .bookmark-item[label="Privat"] {
fill: var(--les-txt-gn) !important;
}
#PersonalToolbar .bookmark-item[label="Suchen"] {
fill: var(--les-txt-zy) !important;
}
#PersonalToolbar .bookmark-item[label="Zubehör"] {
fill: var(--les-txt-ma) !important;
}
/* Hintergrundfarbe der Pull-Down-Menüs
*/
#PersonalToolbar .arrowscrollbox-scrollbox {
background: var(--men-hgf) !important;
border: 1px solid !important;
border-color: var(--men-rah) !important;
}
/* Hintergrundfarbe der Up-Down-Schaltflächen in den Pull-Down-Menüs
*/
#PersonalToolbar .autorepeatbutton-up,
#PersonalToolbar .autorepeatbutton-down {
background: var(--men-udb-hgf) !important;
}
#PersonalToolbar .autorepeatbutton-up:hover,
#PersonalToolbar .autorepeatbutton-down:hover {
background: var(--men-udb-hov) !important;
}
/* Lesezeichen Ordner-Symbole ausblenden um Platz zu sparen.
*
* Die folgendende CSS-Regel ist durch die Kommentarzeichen davor
* und dahinter unwirksam, bei Verwendung diese bitte entfernen!
*/
/*
#personal-bookmarks .toolbarbutton-icon {
display: none !important;
}
*/
/* Anderes Ordnersymbol (16 x 16 Pixel) verwenden,
* z.B. KDE -> /usr/share/icons/oxygen/base/16x16/places/folder-blue.png.
* Eine Kopie davon in den Ordner "chrome/icons" legen
* oder den absoluten Pfad zum Icon mit angeben.
*
* Die folgendende CSS-Regel ist durch die Kommentarzeichen davor
* und dahinter unwirksam, bei Verwendung diese bitte entfernen!
*/
/*
treechildren::-moz-tree-image(container),
.bookmark-item[container="true"] {
list-style-image: url('icons/folder-blue.png') !important;
}
*/
/**********************************************************
********** TAB-Leiste ************************************
**********************************************************/
/* Vom Container (#navigator-toolbox) abweichender Hintergrund
*/
#TabsToolbar {
background: var(--tab-bar-hgf) !important;
}
/* TAB normal (inaktiv):
* Hintergrundfarbe, Schriftfarbe,
* Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
* unten kein Rahmen -> Abschlußrahmen vom Container
*/
#TabsToolbar .tabbrowser-tab {
background: var(--tab-hgf) !important;
color: var(--tab-txt) !important;
border: 1px solid !important;
border-bottom: none !important;
border-color: var(--tab-rah) !important;
border-radius: var(--tab-rad) !important;
margin: 3px 1px 1px 2px !important;
padding: 1px 0 !important;
}
/* TAB bei Mauskontakt:
* Hintergrundfarbe, Schriftfarbe, Rahmenfarbe
*/
#TabsToolbar .tabbrowser-tab:hover {
background: var(--tab-hgf-hov) !important;
color: var(--tab-txt-hov) !important;
border-color: var(--tab-rah-hov) !important;
}
/* TAB bei bei angewähltem TAB (aktiv):
* Hintergrundfarbe, Schriftfarbe, Rahmenfarbe,
*/
#TabsToolbar .tabbrowser-tab[selected="true"] {
background: var(--tab-hgf-sel) !important;
color: var(--tab-txt-sel) !important;
border-color: var(--tab-rah-sel) !important;
}
/* Alle anderen Elemente innerhalb der TABs ohne Hintergrund
*/
#TabsToolbar .tabbrowser-tab * {
background: none !important;
border:none!important;
}
/* Tab-Icon etwas größer,
* links weniger, unten etwas mehr Abstand zum TAB-Rand
*/
#TabsToolbar .tab-icon-image {
height: 20px !important;
width: 20px !important;
margin-left: -4px !important;
margin-bottom: 2px !important;
}
/* Tab-Schließen-Button:
* Rechts weniger Abstand zum TAB-Rand, etwas größer,
* Textfarbe (Kreuz), Hintergrundfarbe,
* an den Eckenradius des Buttons angepaßt
*/
#TabsToolbar .tab-close-button {
margin-right: -4px !important;
padding: 0 !important;
color: var(--tcb-txt) !important;
}
/*57er: toolbarbutton.tab-close-button.close-icon image.toolbarbutton-icon
*60er: .tab-close-button.close-icon */
#TabsToolbar .tab-close-button.close-icon {
height: 22px !important;
width: 22px !important;
background: var(--tcb-hgf) !important;
border: 1px solid !important;
border-color: var(--tcb-rah) !important;
border-radius: var(--tcb-rad) !important;
}
/* Tab-Schließen-Button bei angewähltem TAB (aktiv)
*/
#TabsToolbar .tab-close-button.close-icon[selected="true"] {
background: var(--tcb-hgf-sel) !important;
}
/* Tab-Schließen-Button bei Mauskontakt (hover)
*/
#TabsToolbar .tab-close-button.close-icon:hover {
background: var(--tcb-hgf-hov) !important;
}
/* Neuer-Tab-Button nicht anzeigen
*
* Die folgendende CSS-Regel ist durch die Kommentarzeichen davor
* und dahinter unwirksam, bei Verwendung diese bitte entfernen!
*/
/*
#TabsToolbar .tabs-newtab-button {
display: none !important;
}
*/
/**********************************************************
********** Suchleiste (unten) ****************************
**********************************************************/
/* Hintergrundfarbe für die Suchleiste
*/
#content findbar {
background: var(--fin-bar-hgf) !important;
}
/**********************************************************
********** Entwicklerleiste (unten) **********************
**********************************************************/
/* Hintergrundfarbe für die Entwickler-Leiste
*/
#developer-toolbar {
background: var(--dev-bar-hgf) !important;
}
/**********************************************************
********** Neue Toolbar (unten) mit Statusleiste *********
**********************************************************/
/* Die neue Toolbar mit Statusleiste liegt ganz unten, unterhalb des
* Webseitenbereiches und ist mit folgendem Script eingebunden:
* https://github.com/ardiman/userChrome.js/blob/master/revertaddonbarstatusbar/RevertAddonBarStatusBar.uc.js
*
* Die ID ist hier #bottom-toolbar, sie kann je nach Script auch anders
* benannt sein. Bei Unklarheiten fragt bitte im Forum nach:
* https://www.camp-firefox.de/forum/.
*
* Wenn im Script eine andere ID für diese Toolbar angegeben ist, dann muß
* hier im Text überall #bottom-toolbar gegen die im Script angegebene
* ID ausgetauscht werden.
*
* Das Aussehen der Buttons in der Leiste wird mit in den entsprechenden
* Abschnitten für die allgemeinen Buttons geregelt, dort ist
* #bottom-toolbar als zusätzlicher Selektor eingetragen.
*
* Vorbereitung für die ".uc.js"-Scripte:
* https://www.camp-firefox.de/forum/viewtopic.php?f=16&t=122538#p1056442
*
* ! Wenn diese neue Toolbar nicht installiert ist, kann dieser gesamte
* ! Abschnitt sowie alle Zeilen die mit #bottom-toolbar beginnen gelöscht
* ! oder auskommentiert werden. Auch die Variablen im Block der
* ! Farbzuweisungen die mit "--sta-" beginnen, können dann weg.
*/
/* Hintergrundfarbe, Höhe ohne Buttons 24px, mit Buttons besser 36px
* und die Ausrichtung ändern (die Buttons rechts ausrichten)
* oder links einen flexiblen Abstand einfügen (im Anpassen-Menü).
*/
#bottom-toolbar {
background: var(--sta-bar-hgf) !important;
height: var(--sta-bar-hoe) !important;
/* direction:rtl !important; /* Buttons nach rechts ausrichten */
}
/* Position der Statusleiste in der neuen Toolbar (überlagert)
* damit die Schrift etwa mittig ist und die maximale Länge
*/
statuspanel {
background: transparent !important;
border: none !important;
bottom: calc(var(--sta-bar-hoe) / 2 - 13px) !important;
max-width: var(--sta-bar-lae) !important;
}
/* Statusleiste Container für Anzeigefeld
*/
statuspanel .statuspanel-inner {
background: transparent !important;
border: none !important;
}
/* Statusleiste Anzeigefeld Schriftfarbe
*/
statuspanel .statuspanel-label {
background: transparent !important;
border: none !important;
color: var(--sta-txt) !important;
}
/**********************************************************
********** Spielwiese zum experimentieren ****************
**********************************************************/Mein Dank geht an alle die mir bisher geholfen haben, besonders an Sören und an den immer freundlichen und nicht aus der Ruhe zu bringenden Andreas.
PS: Neue Version mit der CSS-Konfiguration der neuen Toolbar mit Statusleiste und Korrekturwertberechnung zur Textausrichtung (für das Script "A-Statusleiste.uc.js"). Wer das nicht braucht kann es rauslöschen und ein paar kleine Anpassungen.
Gruß Harry
