SwickDeck for TweetDeck

additionalinfo.html

Functions: <ul>
<li>Reduces unnecessary spacing around the columns</li>
<li>Fixes the "new tweets" buttons - instead of intrusively overlapping tweet contents, these are now much smaller, stay in the corner, and at worst may overlap half of someone's profile picture.</li>
<li>Introduces customizable sidebar colors (along with style improvements).</li>
</ul>
Settings: <ul>
<li><b>Primary Color</b>: Main sidebar color</li>
<li><b>Secondary Color</b>: Used for highlighting active sidebar items and for the "new tweet" pane.</li>
<li><b>Column Style</b>: If set to "Slightly Wider", adjusts column size and font size so that word wrapping is the same as when viewing a tweet in the web client.</li>
<li><b>Color Adjustments</b>: If set to "Slightly Lighter", further lightens the grays of the default "light" theme.</li>
</ul>
If you liked the userstyle, you can <a href="http://yellowafterlife.itch.io/swickdeck" target="_blank">support my efforts via the itch.io page</a>.

css.css

@-moz-document domain("tweetdeck.twitter.com") {
/*[[columnStyle]]*/
/* 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 {
	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 {
	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 }
/* Sidebar separator */
.with-nav-border-t:before {
	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;
}
/*[[colorAdjustments]]*/
}

description.html

Customizable sidebar colors, optional light theme improvements, and other small adjustments.

Settings.txt

Type: Color
Label: Primary Color
Key: primaryColor
Default: #5398DC

Type: Color
Label: Secondary Color
Key: secondaryColor
Default: #4C82BF

Type: Drop-down
Label: Column Style
Key: columnStyle
Default option: "Normal"
	Label: Normal
	Key: default
	Code: (empty)
	
	Label: Slightly Wider
	Key: slightlyWider
	Code: (see slightlyWider.css)

Type: Drop-down
Label: Color Adjustments
Key: color-scheme
Default option: "None"
	Label: None
	Key: none
	Code: (empty)
	
	Label: Slightly Lighter (light theme only)
	Key: slightlyLighter
	Code: (see slightlyLighter.css)

Primary screenshot: Automatic

slightlyLighter.css

/** 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;
}

slightlyWider.css

.app-columns section {
	width: 368px !important;
	font-size: 14px;
}