[keine Frage] Besseres Aussehen von FF 58 mittels userChrome.css

Du hast Probleme mit Deinem eMail-Programm, Webbrowser oder Textprogramm? Dein Lieblingsprogramm streikt?
Antworten
RobertDebiannutzer
Beiträge: 264
Registriert: 16.06.2017 09:52:36

[keine Frage] Besseres Aussehen von FF 58 mittels userChrome.css

Beitrag von RobertDebiannutzer » 29.01.2018 22:38:32

Hallo,

ich hatte kürzlich Lust, mal firefox 58 zu testen und habe ihn ins Home-directory installiert.
Bisher habe ich immer das "lighte" Developertheme genutzt und war damit sehr zufrieden. Bei FF 58 sah das bereits mitgelieferte "light theme" aber erstmal nicht so gut aus.
Also habe ich mir ein bisschen was zusammengegoogelt und in die userChrome.css gepackt. Vielleicht kann es ja für den einen oder anderen als Anregung nützlich sein:

Code: Alles auswählen

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* 
 * remove the rounded corners of several buttons like the back-forward-buttons or the 
 * new-tab-button
 */
:root {
  --toolbarbutton-border-radius: 0px !important;
}

/* 
 * Remove the little line on top of each tab. For the flash that indicates, that the tab 
 * has finished loading, consider toolkit.cosmeticAnimations.enabled in about:config
 */
#TabsToolbar .tabbrowser-tab .tab-line {
  display: none !important;
}

/* I want the active tabs in blue, like in the old developer theme! And no borders for the tabs! */ 
.tabbrowser-tab .tab-background {
  border: unset !important;
}

:root:-moz-lwtheme-darktext {
	--toolbox-border-bottom-color: #4c9ed9 !important;
        --tabs-border-color: #4c9ed9 !important;
}

.tab-background[selected="true"]:-moz-lwtheme {
	background: #4c9ed9 !important;
}

/* Of course, the the color of the borders of urlbar and search bar must be the same blue... */
#urlbar[focused=true] {
  border-color: #4c9ed9 !important;
}

.searchbar-textbox[focused=true] {
  border-color: #4c9ed9 !important;
}

/* 
 * Now, the so-called tab-throbber (the little loading indicator in the tabs) needs some help to 
 * look good on the blue background of the tabs.
 * The first possibility is to change the color like this:
 * .tab-throbber::before {
 * filter: hue-rotate(90deg);
 * }
 * But I choose to colorize the throbber with --tab-loading-fill:
 */
:root {
  --tab-loading-fill: #ff0000 !important;
}
/* Switch to an APNG loading indicator when the browser is under schedule pressure. */
.tab-throbber-fallback[progress] {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading-inverted.png") !important;
}
@media (min-resolution: 1.1dppx) {
  .tab-throbber-fallback[progress] {
    list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading-inverted@2x.png") !important;
  }
}

/* 
 * Now we reduce the height of the urlbar, the searchbar and the whole navigation bar like it is shown
 * here: https://github.com/Timvde/UserChrome-Tweaks/blob/master/toolbars/compact-toolbars.css
 * The only thing not needed is changing the padding of the buttons, I think. It works perfectly without.
 */
:root[uidensity=compact] #urlbar,
:root[uidensity=compact] .searchbar-textbox {
  font-size: unset !important;
  min-height: 24px !important;
}

:root[uidensity=compact] #identity-box {
  max-height: 22px;
}
/* Compatibility with auto-hide.css (comment taken from the link above) */
:root[uidensity=compact] #navigator-toolbox {
  --nav-bar-height: 31px !important;
}

Radfahrer
Beiträge: 3530
Registriert: 15.12.2012 20:48:16
Lizenz eigener Beiträge: MIT Lizenz
Wohnort: Zu Hause

Re: [keine Frage] Besseres Aussehen von FF 58 mittels userChrome.css

Beitrag von Radfahrer » 30.01.2018 04:18:31

... wenn du uns jetzt noch zeigen würdest, wie es aussieht... :wink:
Man stelle sich den Tag des jüngsten Gerichts vor...
... und plötzlich finden sich alle Christen, laut grölend und Met aus Totenschädeln saufend, an Odins Tafel wieder...
DIE Gesichter würde ich gerne sehen! :lol:

RobertDebiannutzer
Beiträge: 264
Registriert: 16.06.2017 09:52:36

Re: [keine Frage] Besseres Aussehen von FF 58 mittels userChrome.css

Beitrag von RobertDebiannutzer » 30.01.2018 09:33:55

Klar, kann ich machen.
Vorher noch ein Hinweis: Ich hatte von vornherein in den "Customize" Preferences die sog. Density des Themes auf "Compact" (und nicht auf "Normal" oder "Touch") gesetzt. Der betreffende about:config-Eintrag wäre: browser.uidensity=1.

Nun aber die Bildchen. Ich hoffe es klappt mit abload.de, habe den Dienst früher mal genutzt, weiß nicht, ob er immer noch gut ist... Leider scheint es hier im Forum keine eigene Upload-Funktion zu geben außer der Bildergalerie und dort war ich "nicht berechtigt", ein eigenes Album zu erstellen. :?:
Klick auf die Bilder sollte nur das jeweilige Bild anzeigen, nicht das Bild eingebettet in der Website von abload!

Bild
Habe sogar die Ladeanzeige auffangen können:
Bild
Tab hover:
Bild
Button hover:
Bild

Antworten