MSN Twitter by passcod

/* ==UserStyle==
@name           Twitter: MSN
@namespace      twitter.com
@version        0.1.0
@description    If Twitter looked like XP-era MSN
@author         Félix Saparelli
==/UserStyle== */

@-moz-document url-prefix("https://twitter.com/search") {
:root {
    --twitter-xp-bg: #f9f9f7;
    --twitter-xp-border: #a0a9c6;
    
    --twitter-xp-button-focused: #0b2187;
    --twitter-xp-button-focused-inner: #6573bc;
    
    --twitter-xp-button-bg: #fcffff;
    --twitter-xp-button-lower: #d0d2d1;
    --twitter-xp-button-border: #2f3237;
}

/* ...crimes have been committed. careful not to step in the pixel blood */

@font-face {
    font-family: Roboto;
    src: local("Tahoma");
}

body {
    background-image: linear-gradient(-10deg, white 70%, #3863ff) !important;
    background-attachment: fixed;
}

/* the middle column */
[data-testid="primaryColumn"] {
    background-color: var(--twitter-xp-bg);
    border-color: var(--twitter-xp-border);
}

/* the top/latest etc tabs */
[data-testid="titleContainer"] + div  {
    background-color: var(--twitter-xp-bg);
}

/* the selected tab */
[role="presentation"] > [role="tab"][aria-selected="true"] {
    border-bottom-width: 0;
}

/* the selected tab's label */
[role="presentation"] > [role="tab"][aria-selected="true"] > div {
    background-image: radial-gradient(var(--twitter-xp-button-focused-inner), var(--twitter-xp-button-focused));
    font-size: 12px;
    padding: 2px 7px;
    border-radius: 1em;
    border: 1px solid black;
    color: white;
}

/* the other tabs */
[role="presentation"] > [role="tab"][aria-selected="false"] > div {
    font-size: 12px;
    color: black;
}


/* the div that surrounds the search field itself */
[data-testid="titleContainer"] > div:first-child > div > div  {
    background-color: var(--twitter-xp-bg);
}

/* the actual search input */
input[aria-label="Search query"] {
    background-color: white;
    color: black;
}

/* the search icon next to the search input */
form[aria-label="Search Twitter"] > div > div > div > div:first-child {
    background-color: white;
}

/* the flex wrapper of the search icon + input */
form[aria-label="Search Twitter"] > div > div > div {
    height: 2em;
    border: 1px solid var(--twitter-xp-border)
}

/* the wrapper of the flex wrapper of the search icon + input */
form[aria-label="Search Twitter"] > div > div {
    background: none;
}

/* tweet wrapper */
/* section article[role="article"] */

/* everything in a tweet (horrible perf -- for demo only) */
[data-testid="tweet"] * {
    color: black;
    font-size: 13px;
}

/* a lot of links */
[role="link"], a[role="link"] > div > div > div[aria-label=""] {
    border-radius: 0;
}

/* images and link embeds in tweets */
[data-testid="tweet"] > div:last-child > div:last-child > div:nth-child(2) > div > div > div {
    border-radius: 0;
}

/* specifically the link of an image embed */
[data-testid="tweet"] > div:last-child > div:last-child > div:nth-child(2) > div > div > div a[role="link"] {
    border: 1px solid black;
}

/* the boxes in the sidebar */
[data-testid="sidebarColumn"] > div > div > div > div > div > div {
    background: transparent;
    border-radius: 0;
}

/* crimes */
[data-testid="sidebarColumn"] > div > div > div > div > div > div * {
    color: black;
}

/* the messages floating thingie */
#layers {
    display: none;
}

/* the main twitter logo */
header h1 a[aria-label="Twitter"] > div {
    display: none;
}
header h1 a[aria-label="Twitter"]::before {
    content: 'Microsoft';
    color: white;
    font-family: Roboto;
    font-size: 0.9em;
}
header h1 a[aria-label="Twitter"]::after {
    content: 'Twitter 2003';
    color: white;
    font-family: Roboto;
    font-weight: bold;
    font-size: 2em;
}

/* RHS nav */
nav[aria-label="Primary"] {
    margin-top: 3em;
}

/* RHS nav item icon */
nav[aria-label="Primary"] > a > div > div:first-child {
    display: none;
}

/* RHS nav item text */
nav[aria-label="Primary"] > a > div > div:last-child {
    color: black;
    font-size: 12px
}

/* compose button */
[data-testid="SideNav_NewTweet_Button"] {
    background: linear-gradient(var(--twitter-xp-button-bg), var(--twitter-xp-button-lower));
    border: 1px solid var(--twitter-xp-button-border);
    border-radius: 4px;
    box-shadow: none;
    min-height: 1.6em;
}
[data-testid="SideNav_NewTweet_Button"] span > span {
    color: black;
    font-size: 0px;
}
[data-testid="SideNav_NewTweet_Button"] span > span::before {
    color: black;
    font-size: 12px;
    content: 'Compose New Tweet';
}

/* more menu */
[aria-label="More menu items"] {
    display: none;
}
}