Primary color
Secondary color
Slightly Wider
Slightly Lighter
Show dark theme
Use Firefox format

/* Hide column numbers and drag handles: */ .column-number, .column-drag-handle { display: none; } /* Set columns to have tiny spacing between them: */ .app-columns { padding: 1px 0 1px 1px !important; } .column { margin-right: 1px !important; } /* Sidebar (left) primary color: */ .app-header-inner, .app-header-inner .column-nav-item, .app-header-inner .btn-compose.js-show-drawer, .app-search-input, .app-search-fake, .app-header-inner .app-navigator, .drawer .btn-on-blue, .drawer .js-send-button, .drawer .js-send-button:hover, .inline-reply .js-send-button, .inline-reply .js-send-button:hover { background: /*[[primaryColor]]*/; } /* Sidebar secondary color: */ .attach-compose-buttons .tweet-button, .compose, .inline-reply, .app-header-inner .column-nav-item:hover, .app-header-inner .app-nav-link:hover, .app-header-inner .app-nav-tab:hover, .column-nav-flyout .column-nav-item, .app-search-fake:hover, .app-header-inner .btn-compose.js-show-drawer:hover{ background: /*[[secondaryColor]]*/; } /* Add gentle shadows outside "flyouts"*/ .column-nav-flyout .column-nav-item { box-shadow: /* Shadow on the all sides except for the left one */ 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(0, 0, 0, 0.1), 1px 0 0 rgba(0, 0, 0, 0.1); } /* Hide shadows on "compose tweet" and "search" buttons: */ .app-header-inner .btn-compose, .app-search-input, .app-search-fake, .drawer .js-send-button { box-shadow: none; } /* Fix "accounts" button having mysterious padding on the left side: */ .app-header-inner .app-nav-tab { padding-left: 10px; margin-left: 0; } /* Display button interactions via opacity: */ .drawer .btn-on-blue:not(:hover), .drawer .js-send-button:not(:hover) { opacity: .8; } .drawer .js-send-button.is-disabled { opacity: .5; } /* Round "tweet" and "search" buttons in the condensed sidebar: */ .app-header-inner.is-condensed .btn-compose.js-show-drawer, .app-search-fake { border-radius: 21px; } /* Fix search field placeholder color in expanded sidebar: */ .app-search .search-input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5); } .app-search .search-input:-moz-placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1 } .app-search .search-input::-moz-placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1 } .app-search .search-input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); } /* Fix search icon in expanded sidebar */ .search-input:not(.is-focused) + .search-input-perform-search { color: rgba(255, 255, 255, 0.5); } /* That small "new things in this column" icon in sidebar */ .column-nav-updates { color: rgba(255, 255, 255, 0.3); } /* Sidebar item colors: */ .app-header-inner .column-nav-item, .app-header-inner .column-nav-link, .app-header-inner .column-nav-link:after, .app-search-input, .app-search-fake, .app-header-inner .app-nav-link, .app-header-inner .app-nav-tab, .column-nav-flyout .column-nav-item, .drawer .compose-text-title, .drawer .js-send-button.is-disabled { color: rgba(255, 255, 255, 0.5); } /* Sidebar item mouseover colors: */ .app-header-inner .column-nav-link:hover, .app-search-input, .app-search-fake:hover, .app-header-inner .app-nav-link:hover, .app-header-inner .app-nav-tab:hover, .drawer .js-send-button:not(.is-disabled) { color: rgba(255, 255, 255, 0.9); } /* Context (such as related handle) labels*/ .app-header-inner .txt-mute, .column-nav-flyout .txt-mute { color: rgba(255, 255, 255, 0.7); } /* Fix expanded sidebar item heights: */ .app-header-inner .js-column-title { height: 42px } /* Separators */ .with-nav-border-t:before, .compose-header { border-color: rgba(255, 255, 255, 0.5); } /* Currently this border would stick from under the tab header by 1px */ .with-column-divider-bottom { border-bottom: none; } /* Why were those scrollbars rounded anyway? */ .scroll-styled-h::-webkit-scrollbar-thumb, .scroll-styled-v::-webkit-scrollbar-thumb { border-radius: 0px; } /** "more tweets" button tweaks: */ .more-tweets-btn-container { text-align: left; } .more-tweets-btn { width: 56px; height: 18px; margin-left: 6px; padding: 2px; border-radius: 0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } .more-tweets-btn-container--visible .more-tweets-btn, .more-tweets-btn-container--mouse-release .more-tweets-btn, .more-tweets-btn-container--loading .more-tweets-btn { top: 2px; } .js-more-tweets-btn-text { /* a trick to just have it display the number at all times */ word-spacing: 1em; } /*[[columnStyle]]*/ /*[[colorAdjustments]]*/ /** Slightly wider: */ .app-columns section { width: 368px !important; font-size: 14px; } /** Slightly lighter: */ /* Background color doubles for border color between columns */ .app-columns-container { background: #e9e9e9; } /* Column header and reply section background: */ .scroll-conversation, .column-header { background: #f7f7f7; } /* Things that have light borders: */ .is-options-open .column-settings-link, .column-header, .tweet-detail-reply .stream-item, .tweet-detail-wrapper, .detail-view-inline, .scroll-styled-h::-webkit-scrollbar-thumb, .scroll-styled-v::-webkit-scrollbar-thumb { border-color: #e9e9e9; } /* Scrollbars for Chrome: */ .scroll-styled-h::-webkit-scrollbar-track, .scroll-styled-v::-webkit-scrollbar-track { background: #ffffff; } .scroll-styled-h::-webkit-scrollbar-thumb, .scroll-styled-v::-webkit-scrollbar-thumb { background: #f3f3f3; border-width: 1px; border-style: solid; border-right: none; }