Skip to content

Instantly share code, notes, and snippets.

@birkholz
Created July 1, 2018 22:36
Show Gist options
  • Save birkholz/d9ae62dc916ae19c656d3eefd967797a to your computer and use it in GitHub Desktop.
Save birkholz/d9ae62dc916ae19c656d3eefd967797a to your computer and use it in GitHub Desktop.
twitter dark theme inspired by YouTube dark mode
.ProfileHeading-content, .ProfileCanopy-navBar, .RichEditor, .NotificationsHeadingContent, .content-header .header-inner, .content-inner, .module .list-link {
background: #292929;
}
.global-nav .search-input, .RichEditor.is-fakeFocus {
background: #121212;
border: 1px solid #303030;
}
.global-nav .search-input:focus, .RichEditor.is-fakeFocus:focus {
border: 1px solid #1c62b9;
}
.ProfileTweet-action--more .ProfileTweet-actionButton {
padding: 2px;
}
.RichEditor, .TweetBoxAttachments {
border-color: #353535;
}
.TwitterCard .u-block {
align-items: center;
display: flex;
}
.TwitterCard-container > div {
float: left;
width: 25%;
}
.TwitterCard-container > div.SummaryCard-contentContainer {
width: 75%;
}
.TwitterCard[data-theme=night-mode] .TwitterCard-container, .Tombstone, .module .list-link {
border-color: #121212;
}
.TwitterCardsGrid .TwitterCardsGrid-col--12 {
clear: none;
}
.content {
position: relative;
}
.js-stream-tweet .self-thread-tweet-cta .mini-avatar-with-thread:before {
bottom: 24px;
left: -37px;
top: 53px;
}
.js-tweet-text-container {
padding-right: 110px;
}
.permalink-tweet, .permalink-tweet:hover, .PermalinkOverlay-spinnerContainer, .permalink .inline-reply-tweetbox {
background: #353535;
}
.stream-item:not(.no-header-background-module), .global-nav-inner, .home-tweet-box, .LiveVideo-tweetBox, .RetweetDialog-commentBox, .stream-item:not(.no-header-background-module), .permalink .inline-reply-tweetbox-container, .permalink, .ThreadedConversation-showMoreThreads, .Tombstone {
background: #292929;
}
.timeline-tweet-box {
display: none;
}
.tweet-box textarea:focus, .tweet-box input[type=text], .currently-dragging .tweet-form.is-droppable .tweet-drag-help, .tweet-box[contenteditable="true"]:focus, .RichEditor.is-fakeFocus ~ .TweetBoxAttachments {
border-color: #303030;
box-shadow: 0 0 0 1px #353535;
}
.tweet:hover, .stream-item:not(.no-header-background-module):hover {
background-color: #424242;
}
.tweet:not(.permalink-tweet) .AdaptiveMedia-photoContainer > img, .tweet:not(.permalink-tweet) .AdaptiveMedia-video {
height: auto;
width: auto;
}
.tweet:not(.permalink-tweet) .AdaptiveMedia.is-video {
max-height: 70px;
}
.tweet:not(.permalink-tweet) .AdaptiveMediaOuterContainer {
height: auto;
margin-top: 0;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 20%;
}
body {
background: #121212;
color: #E5E5E5;
}
input, textarea, div[contenteditable], .t1-select {
background: #121212;
}
.tweet:not(.permalink-tweet) .ProfileTweet-actionButton.dropdown-toggle {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment