mirror of https://github.com/chylex/TweetDuck.git
512 lines
12 KiB
CSS
512 lines
12 KiB
CSS
/***********************/
|
|
/* Redesign scrollbars */
|
|
/***********************/
|
|
|
|
.scroll-styled-v::-webkit-scrollbar-thumb, .scroll-styled-h::-webkit-scrollbar-thumb, .antiscroll-scrollbar {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.antiscroll-scrollbar-vertical {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.antiscroll-scrollbar-horizontal {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.scroll-styled-v:not(.antiscroll-inner)::-webkit-scrollbar {
|
|
width: 8px !important;
|
|
}
|
|
|
|
.scroll-styled-h:not(.antiscroll-inner)::-webkit-scrollbar {
|
|
height: 8px !important;
|
|
}
|
|
|
|
.app-columns-container::-webkit-scrollbar {
|
|
height: 9px !important;
|
|
}
|
|
|
|
.app-columns-container::-webkit-scrollbar-track {
|
|
border-left: 0 !important;
|
|
}
|
|
|
|
.app-columns-container {
|
|
bottom: 0 !important;
|
|
}
|
|
|
|
/********************/
|
|
/* Square-ify stuff */
|
|
/********************/
|
|
|
|
#tduck .compose-media-bar-remove .icon-close, #tduck .compose-media-grid-remove .icon-close {
|
|
border-radius: 2px !important;
|
|
}
|
|
|
|
button, .btn, .mdl, .mdl-content, .modal-content, .popover, .lst-modal, .tooltip-inner {
|
|
border-radius: 1px !important;
|
|
}
|
|
|
|
.media-item, .media-preview, .media-image, .media-badge, .js-media-sensitive-overlay, .js-media-added .br--4, #tduck .compose-message-recipient img {
|
|
border-radius: 1px !important;
|
|
}
|
|
|
|
.tweet-button, .app-search-fake, .app-search-input, .compose-text-container, .compose-reply-tweet, .compose-message-recipient-input-container, .compose-message-recipient, .compose-media-bar-holder, .compose-media-bar-thumb, .media-grid-container, .js-add-image-description, .js-quote-tweet-holder, .detail-view-inline-text, .mdl-column-rhs {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.dropdown-menu, .list-item-last, .quoted-tweet, .hw-card-container > div, input, textarea, select, .prf-header {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/***********************************/
|
|
/* Revert various design decisions */
|
|
/***********************************/
|
|
|
|
button {
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
.tweet-button:not(:hover) {
|
|
background-color: #2B7BB9 !important;
|
|
border-color: #2B7BB9 !important;
|
|
}
|
|
|
|
#tduck .js-compose-scroller button.full-width {
|
|
padding: 7px 10px !important;
|
|
}
|
|
|
|
#tduck .js-compose-scroller button.full-width > i {
|
|
font-size: 20px !important;
|
|
vertical-align: -5px !important;
|
|
}
|
|
|
|
.js-show-drawer {
|
|
text-align: left;
|
|
}
|
|
|
|
.js-show-drawer .icon-compose {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.js-show-drawer span::before {
|
|
content: "New ";
|
|
}
|
|
|
|
#tduck .app-header .search-input-control input {
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
#tduck .app-header .search-input-perform-search {
|
|
right: 8px !important;
|
|
}
|
|
|
|
.js-account-safeguard-checkbox, .js-account-safeguard-checkbox label {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
#tduck .lst-launcher a {
|
|
border: 1px solid transparent !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
#tduck .lst-launcher a:hover, #tduck .lst-launcher a:focus, #tduck .lst-launcher a:active {
|
|
border-color: #bbddf5 !important;
|
|
}
|
|
|
|
/***********************/
|
|
/* Hide TweetDeck logo */
|
|
/***********************/
|
|
|
|
.app-title {
|
|
display: none;
|
|
}
|
|
|
|
.nav-user-info {
|
|
bottom: 10px !important;
|
|
}
|
|
|
|
.app-navigator {
|
|
bottom: 50px !important;
|
|
}
|
|
|
|
.column-navigator-overflow {
|
|
bottom: 192px !important;
|
|
}
|
|
|
|
/***********************/
|
|
/* Hide Preview button */
|
|
/***********************/
|
|
|
|
.js-gryphon-beta-btn {
|
|
display: none !important;
|
|
}
|
|
|
|
/*************************************/
|
|
/* Tweak collapsed left panel layout */
|
|
/*************************************/
|
|
|
|
.is-condensed .app-header-inner {
|
|
padding-top: 10px !important;
|
|
}
|
|
|
|
.is-condensed .btn-compose {
|
|
padding: 8px !important;
|
|
}
|
|
|
|
.app-header:not(.is-condensed) .nav-user-info {
|
|
padding: 0 5px !important;
|
|
}
|
|
|
|
/****************************************/
|
|
/* Tweak notification layout and design */
|
|
/****************************************/
|
|
|
|
.activity-header.has-source-avatar {
|
|
margin-bottom: 4px !important
|
|
}
|
|
|
|
.activity-header .tweet-timestamp {
|
|
line-height: unset !important;
|
|
}
|
|
|
|
.activity-header .icon-user-filled {
|
|
vertical-align: sub !important;
|
|
margin-right: 4px !important;
|
|
}
|
|
|
|
html[data-td-theme='light'] .stream-item:not(:hover) .js-user-actions-menu {
|
|
color: #000;
|
|
border-color: #000;
|
|
opacity: 0.25;
|
|
}
|
|
|
|
html[data-td-theme='dark'] .stream-item:not(:hover) .js-user-actions-menu {
|
|
color: #fff;
|
|
border-color: #fff;
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.stream-item[data-key^="favorite"] .has-source-avatar .item-img,
|
|
.stream-item[data-key^="retweet"] .has-source-avatar .item-img {
|
|
position: absolute;
|
|
left: 21px;
|
|
top: 48px;
|
|
width: 0 !important;
|
|
}
|
|
|
|
.stream-item[data-key^="favorite"] .has-source-avatar > .nbfc,
|
|
.stream-item[data-key^="retweet"] .has-source-avatar > .nbfc {
|
|
margin-left: 46px;
|
|
line-height: unset !important;
|
|
}
|
|
|
|
.stream-item[data-key^="favorite"] .has-source-avatar > .nbfc > .avatar,
|
|
.stream-item[data-key^="retweet"] .has-source-avatar > .nbfc > .avatar {
|
|
position: absolute;
|
|
margin-left: -34px;
|
|
}
|
|
|
|
.stream-item[data-key^="list_"] .activity-header .item-img {
|
|
position: relative;
|
|
left: 10px;
|
|
top: 2px;
|
|
width: 0 !important;
|
|
}
|
|
|
|
.stream-item[data-key^="list_"] .activity-header > .nbfc {
|
|
margin-left: 46px;
|
|
padding-bottom: 0 !important;
|
|
min-height: 30px !important;
|
|
line-height: unset !important;
|
|
}
|
|
|
|
.stream-item[data-key^="list_"] .activity-header > .nbfc > .avatar {
|
|
position: absolute;
|
|
margin-left: -34px;
|
|
padding-top: 1px;
|
|
}
|
|
|
|
/***********************/
|
|
/* Tweaks for features */
|
|
/***********************/
|
|
|
|
a[data-full-url] {
|
|
/* break long urls */
|
|
word-break: break-all !important;
|
|
}
|
|
|
|
.is-video a:not([href*='youtu']) .icon-bg-dot, .is-gif .icon-bg-dot {
|
|
/* change play icon on mp4s */
|
|
color: #9f51cf !important;
|
|
}
|
|
|
|
.js-typeahead-user-list.is-hidden + .js-typeahead-topic-list {
|
|
/* hide custom search result divider when not needed */
|
|
border-top: none !important;
|
|
}
|
|
|
|
/***************************************/
|
|
/* Replace 'Stay open' with a pin icon */
|
|
/***************************************/
|
|
|
|
#td-compose-drawer-pin {
|
|
margin: 17px 4px 0 0;
|
|
float: right;
|
|
fill: #fff;
|
|
cursor: pointer;
|
|
transition: transform 0.1s ease;
|
|
}
|
|
|
|
.js-docked-compose .compose-remember-state {
|
|
display: none !important;
|
|
}
|
|
|
|
.js-new-composer-opt-in {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.compose-content {
|
|
bottom: 0 !important;
|
|
}
|
|
|
|
/**************************************************************************/
|
|
/* Prevent column icons from being hidden by column title & fix alignment */
|
|
/**************************************************************************/
|
|
|
|
.column-header-title {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.column-heading {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.column-header-links {
|
|
max-width: 100% !important;
|
|
text-align: right;
|
|
}
|
|
|
|
.column[data-td-icon="icon-message"] .column-header-links {
|
|
min-width: 86px;
|
|
}
|
|
|
|
/************************************************************/
|
|
/* Fix modal dialogs breaking when window size is too small */
|
|
/************************************************************/
|
|
|
|
.ovl:before, .overlay:before {
|
|
display: none !important;
|
|
}
|
|
|
|
.ovl, .overlay {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ovl[style="display: block;"] {
|
|
display: flex !important;
|
|
}
|
|
|
|
#tduck .overlay {
|
|
display: flex;
|
|
}
|
|
|
|
/*******************************************/
|
|
/* Fix general visual issues or annoyances */
|
|
/*******************************************/
|
|
|
|
.account-inline .username {
|
|
/* move usernames a bit higher */
|
|
vertical-align: 10% !important;
|
|
}
|
|
|
|
.account-inline .position-rel + .username {
|
|
/* except for follow notifications because consistency eh */
|
|
vertical-align: -10% !important;
|
|
}
|
|
|
|
.column-title {
|
|
/* fix alignment of everything in column headers */
|
|
padding-top: 1px !important;
|
|
}
|
|
|
|
.column-title .attribution {
|
|
/* fix alignment of usernames in column headers */
|
|
margin: 0 0 0 6px !important;
|
|
}
|
|
|
|
.app-navigator .tooltip {
|
|
/* fix tooltips in navigation */
|
|
display: none !important;
|
|
}
|
|
|
|
.column-header-links .icon {
|
|
/* fix tooltips in column headers */
|
|
height: calc(1em + 8px) !important;
|
|
}
|
|
|
|
.column-header-temp:not(.js-column-header) {
|
|
/* fix missing column header padding in Edit List dialog */
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.js-column-options .btn-options-tray {
|
|
/* fix underline on buttons in column options */
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
#tduck .nav-user-info .hide-condensed {
|
|
/* move login account info */
|
|
margin: 0px !important;
|
|
padding-left: 2px !important;
|
|
}
|
|
|
|
html[data-td-font='smallest'] .sprite-verified-mini {
|
|
/* fix cut off badge in timelines */
|
|
width: 13px !important;
|
|
height: 13px !important;
|
|
background-position: -223px -99px !important;
|
|
}
|
|
|
|
html[data-td-font='smallest'] .badge-verified:before {
|
|
/* fix cut off badge in notifications */
|
|
width: 13px !important;
|
|
height: 13px !important;
|
|
background-position: -223px -98px !important;
|
|
}
|
|
|
|
html[data-td-font='smallest'] .tweet-detail-wrapper .badge-verified:before {
|
|
/* fix cut off badge in detail view */
|
|
width: 14px !important;
|
|
height: 14px !important;
|
|
background-position: -223px -97px !important;
|
|
}
|
|
|
|
html[data-td-font='smallest'] .fullname-badged:before, html[data-td-font='small'] .fullname-badged:before {
|
|
/* fix cut off badge in follow chirps and detail view */
|
|
margin-top: -1px !important;
|
|
min-width: 14px !important;
|
|
}
|
|
|
|
html[data-td-font='smallest'] .tweet-detail-wrapper .fullname-badged:before {
|
|
/* fix misaligned badge in detail view */
|
|
margin-top: -2px !important;
|
|
}
|
|
|
|
html[data-td-font='small'] .tweet-detail-wrapper .fullname-badged:before {
|
|
/* fix misaligned badge in detail view */
|
|
margin-top: 0px !important;
|
|
}
|
|
|
|
.keyboard-shortcut-list {
|
|
/* fix keyboard navigation alignment */
|
|
vertical-align: top !important;
|
|
}
|
|
|
|
a:not(.tweet-detail-action) .reply-triangle {
|
|
/* fix invisible reply triangle breaking layout */
|
|
display: none !important;
|
|
}
|
|
|
|
.column-message.is-actionable > span:hover .icon {
|
|
/* add a visual response when hovering individual filter icons; black theme uses a value of 20 */
|
|
filter: saturate(10);
|
|
}
|
|
|
|
.tweet-detail-wrapper .js-media-gif-container {
|
|
/* GIFs in detail view don't trigger the pointer cursor */
|
|
cursor: pointer;
|
|
}
|
|
|
|
.js-add-to-customtimeline-input {
|
|
/* the custom timeline input shadow is behaving super weird when focused */
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
#tduck .js-follow-button .icon-follow {
|
|
/* follow icon is too small which makes it aliased and misaligned */
|
|
font-size: 17px !important;
|
|
}
|
|
|
|
.js-follow-button .following-text, .js-follow-button .unfollow-text {
|
|
/* unfollow button has a border for some reason */
|
|
border-width: 0 !important;
|
|
}
|
|
|
|
#actions-modal .mdl {
|
|
/* fix action dialog (RT, Add to List/Collection) width with small window size */
|
|
max-width: 100%;
|
|
}
|
|
|
|
/***************************************************************/
|
|
/* Fix glaring visual issues that twitter hasn't fixed yet smh */
|
|
/***************************************************************/
|
|
|
|
.js-column-nav-list .attribution {
|
|
/* fix cut off account names */
|
|
line-height: 1.1 !important;
|
|
}
|
|
|
|
#tduck .js-docked-compose .js-drawer-close {
|
|
/* fix close drawer button position */
|
|
margin: 18px 0 0 !important;
|
|
}
|
|
|
|
.compose-reply-tweet-remove {
|
|
/* fix close reply button position; this would make sense if the reply account name became full size, but it still cuts off where the button used to be */
|
|
top: 3px !important;
|
|
right: -2px !important;
|
|
}
|
|
|
|
#account-safeguard-checkbox, #inline-account-safeguard-checkbox {
|
|
/* fix "Ready to Tweet/send" alignment with the checkbox */
|
|
vertical-align: -15% !important;
|
|
}
|
|
|
|
/*******************************************/
|
|
/* Fix one pixel space below column header */
|
|
/*******************************************/
|
|
|
|
.column .column-header {
|
|
height: 49px !important;
|
|
}
|
|
|
|
.column:not(.is-options-open) .column-header {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
/********************************************/
|
|
/* Fix cut off usernames in Messages column */
|
|
/********************************************/
|
|
|
|
.column[data-td-icon="icon-message"].is-shifted-1 .column-title-container {
|
|
height: 100%;
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
#tduck .column[data-td-icon="icon-message"].is-shifted-1 .column-title-items {
|
|
height: 100%;
|
|
margin-left: 4px !important;
|
|
padding-top: 1px;
|
|
}
|
|
|
|
.column[data-td-icon="icon-message"].is-shifted-1 .username {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
/******************************/
|
|
/* Hide unused Settings items */
|
|
/******************************/
|
|
|
|
#show-startup-notifications, #show-startup-notifications + span {
|
|
display: none;
|
|
}
|
|
|
|
#auto-play-gifs, #auto-play-gifs + span {
|
|
display: none;
|
|
}
|