UTzone.de - Firefox userContent.css

UTzone.de (https://www.utzone.de/forum/index.php)

- Software - Ecke (https://www.utzone.de/forum/forumdisplay.php?f=47)

- - Firefox userContent.css (https://www.utzone.de/forum/showthread.php?t=4229)

Firefox userContent.css

Mit userContent.css im Verzeichnis Profile.default/chrome/ kann man einfach das aussehen von Webseiten ändern im Prinzip das was man früher mit Stylish gemacht hat.

Das Profilverzeichnis findet man in Firefox einfach in dem man in der Browserzeile about:support eingibt.

z.B. Dunkles Thema für Twitch mit Irc like Chat (ohne Badges, Emotes).

Code:

/* Twitch V2017090701 */

@-moz-document domain("twitch.tv") {

    /* dunkler Hintergrund */

    *:not(div), .player, .player-alert, .pl-pinned-panel, .cn-bar, .button, .balloon, .tipsy, .visible, .card a:hover, .sticky-message, .notification-center, .conversations-list, .conversations-list-container, .conversations-wrapper, .chat-menu, .chatters-view, .chat-rules, div.ui-slider-range, div.ui-slider-handle {

        background-color: #1c1c1c !important;

    }

    /* durchsichtiger Hintergrund */

    div {

        background-color: initial !important;

    }

    /* heller Vordergrund ausser für Chat Namen */

    *:not(span) { color: #888 !important; }

    span:not(.from) {

        color: #888 !important;

    }

    /* Link Farben */

    a:link, a:visited, a:hover, a:active { color: #6986B2 !important; }

    /* Menue und Chat schliessen Knoepfe */

    #right_close, #left_close {

        color: #1c1c1c !important;

        background-color: #888 !important;

        fill: #888 !important;

    }

    /* Hintergrund Twitch Lila*/

    .viewall * {

        background-color: #6441a4 !important;

    }

    /* Rahmen Farben ändern */

    * { border-color: #2c2541 !important; }



    /* Iframes nich anzeigen */

    iframe { display: none; }



    /* Chat Badges und Emoticons ausblenden */

    .badges img, img.emoticon { display: none !important; }

    .badges a:not([href])::before { color: green; content: '@' }

    .badges a[href*="subscriber"]::before { color: yellow; content: '+' }

}

z.B. Facebook Anmelden Overlay ausblenden für nicht Facebook Nutzer

Code:

/* Facebook */

@-moz-document domain("facebook.com") {

    /* Anmelden Overlay ausblenden */

    #u_0_20, ._5hn6 { display: none !important; }

}

Seit dem letzten Update funzt das Dark Theme für Youtube nicht mehr. Bei dem ganzen Weiß krieg ich ja Augenkrebs.
Mal schauen, ob das dort auch funzt

EDIT:// Das funzt nun in Youtube selbst. Oben rechts auf sein eigenes Icon gehen, dann auf "Dunkles Design" gehen, zum aktivieren. Fertig

Zitat:

Zitat von Razorkill (Beitrag 43199)

Mir tut der Darkmode auch in den Augen weh, viel zu dunkel und dazu noch viel zu helle Schrift. Ich hätte gerne einfach das weiße aber wie früher das einfach ein Hellgrau war.

Aber ich habe davon eigentlich nur begrenzt Ahnung und außerdem bräuchte ich es auch für den FF.

Abseits der Design-Entscheidung von Youtube finde ich das Youtube jetzt einen viel langsameren Seitenaufbau hat. Videos laden so wie früher, oft sogar so dass das Video schon läuft und ich noch nicht einmal den Titel oder sonstige UI sehen kann.

Das mit dem Seitenaufbau kann ich nicht beurteilen. Mit meinem DSL2000 hab ich nie einen schnellen Aufbau und das Puffern an allen Enden und Ecken ist normal. Genauso , wie Videos in der geringstenAuflösung gezeigt werden, um vielleicht mal flüssig zu laufen.

Langsamer Seitenaufbau kann ich bestätigen, allerdings hab ich noch allerhand Plugin-Kram geladen, kann sein das da noch etwas inkompatibel ist.

Zur Erklärung userContent.css ändert ausschliesslich das Layout einer Seite. Sie wird also mit allem drum und dran geladen und nur die Art wie der Browser Sie anzeigt wird verändert.

Zum langsamen Laden das liegt meist an veralteten oder schlechten Addons.
Ich habe nur das absolut notwendigste an Addons am laufen.

Code:

uBlock Origin, uMatrix, HTTPS Everywhere, PassSec+

Im zweifelsfalle mal Firefox wie folgt starten. Um zu testen ob es z.B. an Addons liegt.

Code:

firefox --safe-mode

Youtube:
quick und dirty, funktioniert ev nicht auf allen yt seiten korrekt.

Code:

/* Youtube V2017090701 */

@-moz-document url("https://www.youtube.com/"), regexp("https://www\\.youtube\\.com/(feed|playlist|channel|watch).*") {

    body, ytd-watch, ytd-app, ytd-browse, .ytd-browse, ytd-active-account-header-renderer, ytd-account-settings, .dropdown-content, #header, #page-manager, #guide-renderer, #search-form, #container, .ytp-popup, .ytd-c4-tabbed-header-renderer:not(.banner-visible-area) {

        color: #888 !important;

        background-color: #1c1c1c !important;

        border-color: #2c2541 !important;

    }

    * {

        color: #888 !important;

    }

    a:link, a:visited, a:hover, a:active { color: #6986B2 !important; }

    yt-icon { fill: #888 !important; }

}

Twitch:
Habe bei dem Beispiel im ersten Thread den Kontrast etwas reduziert.

YT hat bei mir ne sehr geringe Laderzeit (Chrome).
Bzgl. YT, viele wandern auf twitch und vidme.

Schön wäre, dass jeppos StyleAddonauch im Chrome funzt.

Aber Yt hat nen eigenen Dark Modus

Klar, wäre eine andere Schriftfarbe auch nett

chrome hatte mal eine custom.css womit das auch ging. bin mir nicht sicher aber ich glaube die wurde rausgepatcht.

wollte nur zeigen das mann nicht für alles aufgeblasene addons bracht die eh meist in der masse mehr probleme schaffen als sie lösen.

Twitter:

Code:

/* Twitter V2017090601 */

@-moz-document url(https://twitter.com/), regexp("https://twitter\\.com/(?!i/video).*") {

    * {

        color: #888 !important;

        background-color: #1c1c1c !important;

        border-color: #2c2541 !important;

    }

    .AppContainer, .search-icon, .AdaptiveMediaOuterContainer div {

        background-color: initial !important;

    }

    a:link, a:visited, a:hover, a:active { color: #6986B2 !important; }

}