Tweetdeck userstyles (Firefox, may work with Chrome with tweaks)

00-screenshot.md

Now available at:

• https://userstyles.org/styles/145312/tweetdeck-floating-compose
• https://userstyles.org/styles/145313/tweetdeck-quoted-tweets
• https://userstyles.org/styles/145315/tweetdeck-sidebar-simplification
• https://userstyles.org/styles/145316/tweetdeck-space-optimisation

Use with: Stylus, Stylish, Stylish for Chrome.

floating-compose.css

/**
 * Makes the blue sidebar "new tweet" panel (called the "compose drawer" in the code)
 * float over tweets instead of pushing them to the side. Includes a nice little shadow
 * to indicate this naturally.
 */

.app-content.is-open .drawer[data-drawer=compose] {
 	box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.2);
  left: 0;
	z-index: 999;
}

.app-content.is-open {
  transform: none !important;
	margin-right: 0 !important;
}

quoted-tweets.css

/**
 * Display the quoted tweets in the timelines.
 */

.quoted-tweet {
    display: block !important;
}

sidebar-simplification.css

/**
 * Removes the column icons (but not the unread indicators!), the user avatar,
 * the tweetdeck icon, and some other things from the left control panel.
 */

.app-header {
    --slate: #272B35;
    background: var(--slate);
}
.column-navigator {
    visibility: hidden;
}
.app-navigator {
    background: var(--slate);
    bottom: 0;
}
.app-header .nav-user-info,
.app-header .app-title {
    display: none;
}

space-optimisation.css

/**
 * The big one! Various space optimisation tweaks.
 *
 * - Hide scrollbars without breaking scrolling.
 * - Precisely configure column width. (It can go much smaller than smallest built-in setting!)
 * - Adjust tweet actions and below-tweet compose box to account for small columns.
 * - Reorganises the tweet so text now wraps around and under the avatar and take less space.
 * - Enables hyphenation so tweets take less space.
 * - Hide the column header so tweets have more space:
 *   - On column hover, a little floating tab slides down from the top of that column.
 *   - Hovering over *that* then slides down the full column header (with the settings etc).
 * - Various additional tweaks to make the above work beautifully!
 */

body {
    /** You can change the font! **/
    font-family: "Noto Sans", sans-serif;
}
p.tweet-text,
p.js-tweet-text {
    /** Size and style of tweet text in columns. **/
    font-size: 12px;
    line-height: 1.25;
    -moz-hyphens: auto;
}
p.txt-large.js-tweet-text {
    /** Size and font of tweet when expanded. **/
    font-family: "Liberation Serif", serif !important;
    font-size: 17px !important;
}
.column {
    /** Column width. Customise this! **/
    width: 196px !important;
}
.column-scroller {
  /** Trick that hides the scrollbars. Adjust for your screen/system! **/
  width: 106%;
}
.column-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0px;
    transition: height 100ms;
    z-index: 100;
    overflow: hidden;
}
.column:hover .column-header {
    height: 12px;
    box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid lightgray;
}
.column-header:hover {
    height: 50px !important;
}
.tweet-action .icon {
    --size: 18px;
    font-size: var(--size) !important;
    height: var(--size) !important;
    line-height: var(--size) !important;
    width: var(--size) !important;
}
i.icon-conversation.icon {
    display: none !important;
}
.avatar {
    --size: 36px;
    height: var(--size) !important;
    width: var(--size) !important;
    margin-left: 2px !important;
}
.tweet-content,
.tweet-img {
    margin-left: -46px !important;
}
.item-img {
    width: 36px !important;
}
.tweet {
    padding-left: 0px !important;
}
.tweet .tweet-text {
    text-indent: 46px;
    min-height: 1em;
}
.tweet .tweet-header {
    height: 27px;
    padding-left: 46px;
}
.tweet .tweet-header .tweet-img {
    left: 0;
}
.tweet-body > .nbfc {
    padding-left: 46px;
    margin-top: -1.3em;
    min-height: 1em;
}
.tweet-context {
    margin-left: -20px;
}
.tweet .quoted-tweet .tweet-header {
    padding-left: 0px;
}
.inline-reply .pull-left.neg-margin-lm {
    float: left;
    margin-top: -2.5em;
    margin-left: 5.4em !important;
}
.inline-reply .compose-account {
    float: right;
    margin-top: -0.4em !important;
    margin-right: 0 !important;
}
.activity-header.has-source-avatar {
    align-items: center;
}
.activity-header.has-source-avatar > .tweet-timestamp {
    position: relative;
    top: -1em;
}
.activity-header.has-source-avatar i.icon {
    position: absolute;
    left: 56px;
    top: 30px;
}
.activity-header.has-source-avatar + .tweet {
    margin-top: 1em;
}
.activity-header.has-source-avatar + .tweet .tweet-header {
    padding-left: 0;
}
.activity-header.has-source-avatar + .tweet .tweet-text {
    text-indent: 0;
}
article.stream-item .account-summary-text {
    width: 100%;
}
[rel="viewDetails"] {
    display: none;
}
.thread {
    opacity: 0.4;
    background-color: #ADC3D2;
}