Userstyle für Twitter

Heute hat Twitter ein neues Stylesheet ausgerollt. Dem Artikel nach geht es darum, das Styling besser auf Zugänglichkeit und auf mobile Devices zu optimieren.

Leider wurde dabei auch etwas gemacht, was ich etwas „Retro“ finde: Runde Ecken überall. Fast schon, als ob der Designer zum ersten mal den Effekt von „border-radius: 50%“ entdeckte und dies nicht nur auf Avataricons, sondern auch auf Textbereiche, Buttons und Eingabefelder ausrollte…

Nun ja: Selbst ist der Netizen. Wozu gibt es Userstyles, wenn nicht für sowas? Mit dem Browser-AddOn Stylish kann man eigene CSS-Angaben zu einer oder mehreren Seiten ergänzen.

Hier ist mein Userstylesheet, mit dem ich die gröbsten Unschönheiten des Twitter-Designupdates bereinige:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("twitter.com") {
    .stream .stream-item-footer {
       margin-top: 15px;     
       opacity: 0.6;
    }
    .stream .stream-item-footer:hover {
        opacity: 1;
        background-color: #f5f8fa;
    }
    .ProfileTweet-actionList {
        margin: 7px;
    }
    .TweetBoxAttachments, .RichEditor, 
    .EdgeButton, .EdgeButton:visited {
          border-radius: 0;
    }
    .EdgeButton--secondary {
        background: rgba(0, 0, 51, 0.8);
        color: white;
    }
    
    .ProfileTweet-action {
        min-width: 60px;
    }
    .QuoteTweet--slim .QuoteTweet-text {
        overflow: visible;
        text-overflow: initial;
        white-space: pre-wrap;
    }
    .QuoteTweet-text {
        max-height: auto;
    }
    .modal-close-fixed {
        background: rgba(0, 0, 51, 0.8) none repeat scroll 0 0;
        border-radius: 50%;
        cursor: pointer;
        height: 33px;
        left: 50%;
        margin-left: 305px;
        padding-left: 0;
        padding-top: 0;
        position: relative;
        text-align: center;
        top: 50px;
        width: 33px;
        z-index: 1111;
    }
}

 

Das CSS macht das folgende:

  • Buttons werden von ihren runden Ecken befreit;
  • Die Eingabebox für neue Tweets wird ebenfalls von ihren runden Ecken befreit;
  • Bei Retweets wird der Beitrag nicht nur gekürzt, sondern vollständig angezeigt;
  • Bei der Anzeige eines Tweets als Modal (dieses CSS-Popup) wird der Schließen-Knopf deutlicher oben rechts vom Modal selbst hinpositioniert anstelle oben-rechts vom Browserfenster;
  • Die Abstände der Buttons wurde etwas verkeinert.