mirror of
https://github.com/chylex/TweetDuck.git
synced 2025-04-14 12:15:48 +02:00
Fix broken CSS in browser and plugins after a TweetDeck update
This commit is contained in:
parent
09abd889e9
commit
3481cc0349
Resources
@ -8,7 +8,7 @@ Edit layout & design
|
||||
chylex
|
||||
|
||||
[version]
|
||||
1.1.6
|
||||
1.1.7
|
||||
|
||||
[website]
|
||||
https://tweetduck.chylex.com
|
||||
|
||||
@ -364,23 +364,23 @@ enabled(){
|
||||
if (this.config.themeColorTweaks){
|
||||
switch(TD.settings.getTheme()){
|
||||
case "dark":
|
||||
this.css.insert(".app-content, .app-columns-container { background-color: #444448 }");
|
||||
this.css.insert(".column-drag-handle { opacity: 0.5 }");
|
||||
this.css.insert(".column-drag-handle:hover { opacity: 1 }");
|
||||
this.css.insert(".scroll-styled-v:not(.scroll-alt)::-webkit-scrollbar-thumb, .scroll-styled-h:not(.scroll-alt)::-webkit-scrollbar-thumb { background-color: #666 }");
|
||||
this.css.insert(".app-content, .app-columns-container { background-color: #444448 !important }");
|
||||
this.css.insert(".column-drag-handle { opacity: 0.5 !important }");
|
||||
this.css.insert(".column-drag-handle:hover { opacity: 1 !important }");
|
||||
this.css.insert(".scroll-styled-v:not(.scroll-alt)::-webkit-scrollbar-thumb, .scroll-styled-h:not(.scroll-alt)::-webkit-scrollbar-thumb { background-color: #666 !important }");
|
||||
notificationScrollbarColor = "666";
|
||||
break;
|
||||
|
||||
case "light":
|
||||
this.css.insert(".scroll-styled-v:not(.scroll-alt)::-webkit-scrollbar-thumb, .scroll-styled-h:not(.scroll-alt)::-webkit-scrollbar-thumb { background-color: #d2d6da }");
|
||||
this.css.insert(".app-columns-container.scroll-styled-h::-webkit-scrollbar-thumb:not(:hover) { background-color: #a5aeb5 }");
|
||||
this.css.insert(".scroll-styled-v:not(.scroll-alt)::-webkit-scrollbar-thumb, .scroll-styled-h:not(.scroll-alt)::-webkit-scrollbar-thumb { background-color: #d2d6da !important }");
|
||||
this.css.insert(".app-columns-container.scroll-styled-h::-webkit-scrollbar-thumb:not(:hover) { background-color: #a5aeb5 !important }");
|
||||
notificationScrollbarColor = "a5aeb5";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.config.showCharacterCount){
|
||||
this.css.insert(".js-character-count.is-hidden { display: inline !important }");
|
||||
this.css.insert("#tduck .js-character-count.is-hidden { display: inline !important }");
|
||||
}
|
||||
|
||||
if (this.config.hideTweetActions){
|
||||
@ -391,8 +391,8 @@ enabled(){
|
||||
}
|
||||
|
||||
if (this.config.moveTweetActionsToRight){
|
||||
this.css.insert(".tweet-actions { float: right !important; width: auto !important }");
|
||||
this.css.insert(".tweet-actions > li:nth-child(4) { margin-right: 2px !important }");
|
||||
this.css.insert("#tduck .tweet-actions { float: right !important; width: auto !important }");
|
||||
this.css.insert("#tduck .tweet-actions > li:nth-child(4) { margin-right: 2px !important }");
|
||||
}
|
||||
|
||||
if (this.config.increaseQuoteTextSize){
|
||||
@ -491,13 +491,13 @@ enabled(){
|
||||
this.icons = document.createElement("style");
|
||||
this.icons.innerHTML = `
|
||||
@font-face {
|
||||
font-family: 'oldfont';
|
||||
font-family: '_of';
|
||||
src: url("https://ton.twimg.com/tweetdeck-web/web/assets/fonts/tweetdeck-regular-webfont.5f4ea87976.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
${iconData.map(entry => `${entry[0]}:before{content:\"\\f0${entry[1]}\";font-family:oldfont!important}`).join("")}
|
||||
${iconData.map(entry => `#tduck ${entry[0]}:before{content:\"\\f0${entry[1]}\";font-family:_of!important}`).join("")}
|
||||
|
||||
.drawer .btn .icon, .app-header .btn .icon { line-height: 1em !important }
|
||||
.column-header .column-type-icon { bottom: 26px !important }
|
||||
@ -552,13 +552,13 @@ ${this.config.increaseQuoteTextSize ? `
|
||||
` : ``}
|
||||
|
||||
${this.config.revertIcons ? `
|
||||
@font-face { font-family: 'oldfont'; src: url(\"https://ton.twimg.com/tweetdeck-web/web/assets/fonts/tweetdeck-regular-webfont.5f4ea87976.woff\") format(\"woff\"); font-weight: normal; font-style: normal }
|
||||
.icon-reply:before{content:"\\f006";font-family:oldfont}
|
||||
.icon-heart-filled:before{content:"\\f055";font-family:oldfont}
|
||||
.icon-retweet-filled:before{content:"\\f008";font-family:oldfont}
|
||||
.icon-list-filled:before{content:"\\f014";font-family:oldfont}
|
||||
.icon-user-filled:before{content:"\\f035";font-family:oldfont}
|
||||
.icon-user-dd:before{content:"\\f01a";font-family:oldfont}
|
||||
@font-face { font-family: '_of'; src: url(\"https://ton.twimg.com/tweetdeck-web/web/assets/fonts/tweetdeck-regular-webfont.5f4ea87976.woff\") format(\"woff\"); font-weight: normal; font-style: normal }
|
||||
#tduck .icon-reply:before{content:"\\f006";font-family:_of!important}
|
||||
#tduck .icon-heart-filled:before{content:"\\f055";font-family:_of!important}
|
||||
#tduck .icon-retweet-filled:before{content:"\\f008";font-family:_of!important}
|
||||
#tduck .icon-list-filled:before{content:"\\f014";font-family:_of!important}
|
||||
#tduck .icon-user-filled:before{content:"\\f035";font-family:_of!important}
|
||||
#tduck .icon-user-dd:before{content:"\\f01a";font-family:_of!important}
|
||||
` : ``}
|
||||
|
||||
${notificationScrollbarColor ? `
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="td-modal-panel js-modal-panel mdl s-tall-fixed is-inverted-dark">
|
||||
<div id="edit-design-panel" class="js-modal-panel mdl s-tall-fixed is-inverted-dark">
|
||||
<header class="js-mdl-header mdl-header js-drag-handle">
|
||||
<h3 class="mdl-header-title js-header-title">TweetDuck - Layout & Design</h3>
|
||||
<a href="#" class="mdl-dismiss js-dismiss link-normal-dark">
|
||||
@ -6,8 +6,8 @@
|
||||
</a>
|
||||
</header>
|
||||
<div class="mdl-inner">
|
||||
<div class="td-modal-content mdl-content js-mdl-content horizontal-flow-container">
|
||||
<div class="td-modal-inner-cols">
|
||||
<div id="edit-design-panel-content" class="mdl-content js-mdl-content horizontal-flow-container">
|
||||
<div id="edit-design-panel-inner-cols">
|
||||
<div class="l-column mdl-column">
|
||||
|
||||
<!-- THEME -->
|
||||
@ -159,60 +159,52 @@
|
||||
|
||||
/* Containers */
|
||||
|
||||
.td-modal-panel {
|
||||
#edit-design-panel {
|
||||
width: 693px;
|
||||
height: 380px;
|
||||
}
|
||||
|
||||
.td-modal-inner-cols {
|
||||
#edit-design-panel-inner-cols {
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.td-modal-inner-cols .l-column {
|
||||
#edit-design-panel-inner-cols .l-column {
|
||||
padding: 15px 9px;
|
||||
box-sizing: border-box;
|
||||
width: 225px;
|
||||
font-size: 0; /* fix custom font size breaking the modal layout */
|
||||
}
|
||||
|
||||
.td-modal-inner-cols .l-column:nth-child(3) {
|
||||
#edit-design-panel-inner-cols .l-column:nth-child(3) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.td-modal-inner-full {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.td-modal-inner-full .txt-center {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Elements */
|
||||
|
||||
.td-modal-content label {
|
||||
#edit-design-panel-content label.txt-uppercase {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.td-modal-content label:first-child {
|
||||
#edit-design-panel-content label.txt-uppercase:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.td-modal-content label.radio {
|
||||
#edit-design-panel-content label.radio {
|
||||
display: inline-block;
|
||||
margin: 0 16px 5px 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.td-modal-content label.checkbox {
|
||||
#edit-design-panel-content label.checkbox {
|
||||
margin: 0 0 5px 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.td-modal-content select + label.checkbox {
|
||||
#edit-design-panel-content select + label.checkbox {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.td-modal-content input.js-theme-checkbox, .td-modal-content input.js-theme-radio {
|
||||
#edit-design-panel-content input.js-theme-checkbox, #edit-design-panel-content input.js-theme-radio {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ Templates
|
||||
chylex
|
||||
|
||||
[version]
|
||||
1.0.2
|
||||
1.0.3
|
||||
|
||||
[website]
|
||||
https://tweetduck.chylex.com
|
||||
|
||||
@ -50,25 +50,25 @@ enabled(){
|
||||
this.css = window.TDPF_createCustomStyle(this);
|
||||
this.css.insert(".manage-templates-btn.active { color: #fff; box-shadow: 0 0 2px 3px #50a5e6; outline: 0; }");
|
||||
|
||||
this.css.insert(".templates-modal-wrap { width: 100%; height: 100%; padding: 49px; position: absolute; z-index: 999; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.5); }");
|
||||
this.css.insert(".templates-modal { width: 100%; height: 100%; background-color: #fff; display: flex; }");
|
||||
this.css.insert(".templates-modal > div { display: flex; flex-direction: column; }");
|
||||
this.css.insert("#templates-modal-wrap { width: 100%; height: 100%; padding: 49px; position: absolute; z-index: 999; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.5); }");
|
||||
this.css.insert("#templates-modal { width: 100%; height: 100%; background-color: #fff; display: flex; }");
|
||||
this.css.insert("#templates-modal > div { display: flex; flex-direction: column; }");
|
||||
|
||||
this.css.insert(".templates-modal-bottom { flex: 0 0 auto; padding: 16px; }");
|
||||
this.css.insert(".template-list .templates-modal-bottom { display: flex; justify-content: space-between; }");
|
||||
this.css.insert(".template-editor .templates-modal-bottom { text-align: right; }");
|
||||
this.css.insert("#template-list .templates-modal-bottom { display: flex; justify-content: space-between; }");
|
||||
this.css.insert("#template-editor .templates-modal-bottom { text-align: right; }");
|
||||
|
||||
this.css.insert(".template-list { height: 100%; flex: 1 1 auto; }");
|
||||
this.css.insert(".template-list ul { list-style-type: none; font-size: 24px; color: #222; flex: 1 1 auto; padding: 12px; overflow-y: auto; }");
|
||||
this.css.insert(".template-list li { display: block; width: 100%; padding: 4px 8px; box-sizing: border-box; }");
|
||||
this.css.insert(".template-list li[data-template] { cursor: pointer; }");
|
||||
this.css.insert(".template-list li[data-template]:hover { background-color: #d8d8d8; }");
|
||||
this.css.insert(".template-list li span { white-space: nowrap; }");
|
||||
this.css.insert(".template-list li .icon { opacity: 0.6; margin-left: 4px; padding: 3px; }");
|
||||
this.css.insert(".template-list li .icon:hover { opacity: 1; }");
|
||||
this.css.insert(".template-list li .template-actions { float: right; }");
|
||||
this.css.insert("#template-list { height: 100%; flex: 1 1 auto; }");
|
||||
this.css.insert("#template-list ul { list-style-type: none; font-size: 24px; color: #222; flex: 1 1 auto; padding: 12px; overflow-y: auto; }");
|
||||
this.css.insert("#template-list li { display: block; width: 100%; padding: 4px 8px; box-sizing: border-box; }");
|
||||
this.css.insert("#template-list li[data-template] { cursor: pointer; }");
|
||||
this.css.insert("#template-list li[data-template]:hover { background-color: #d8d8d8; }");
|
||||
this.css.insert("#template-list li span { white-space: nowrap; }");
|
||||
this.css.insert("#template-list li .icon { opacity: 0.6; margin-left: 4px; padding: 3px; }");
|
||||
this.css.insert("#template-list li .icon:hover { opacity: 1; }");
|
||||
this.css.insert("#template-list li .template-actions { float: right; }");
|
||||
|
||||
this.css.insert(".template-editor { height: 100%; flex: 0 0 auto; width: 25vw; min-width: 150px; max-width: 400px; background-color: #485865; }");
|
||||
this.css.insert("#template-editor { height: 100%; flex: 0 0 auto; width: 25vw; min-width: 150px; max-width: 400px; background-color: #485865; }");
|
||||
this.css.insert(".template-editor-form { flex: 1 1 auto; padding: 12px 16px; font-size: 14px; overflow-y: auto; }");
|
||||
this.css.insert(".template-editor-form .compose-text-title { margin: 24px 0 9px; }");
|
||||
this.css.insert(".template-editor-form .compose-text-title:first-child { margin-top: 0; }");
|
||||
@ -261,9 +261,9 @@ enabled(){
|
||||
$(".manage-templates-btn").addClass("active");
|
||||
|
||||
let html = `
|
||||
<div class="templates-modal-wrap">
|
||||
<div class="templates-modal">
|
||||
<div class="template-list">
|
||||
<div id="templates-modal-wrap">
|
||||
<div id="templates-modal">
|
||||
<div id="template-list">
|
||||
<ul></ul>
|
||||
|
||||
<div class="templates-modal-bottom">
|
||||
@ -272,7 +272,7 @@ enabled(){
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="template-editor invisible">
|
||||
<div id="template-editor" class="invisible">
|
||||
<div class="template-editor-form">
|
||||
<div class="compose-text-title">Template Name</div>
|
||||
<input name="template-name" type="text">
|
||||
@ -320,7 +320,7 @@ enabled(){
|
||||
|
||||
$(".js-app-content").prepend(html);
|
||||
|
||||
let ele = $(".templates-modal-wrap").first();
|
||||
let ele = $("#templates-modal-wrap").first();
|
||||
|
||||
ele.on("click", "li[data-template]", function(e){
|
||||
let template = me.config.templates[$(this).attr("data-template")];
|
||||
@ -332,7 +332,7 @@ enabled(){
|
||||
|
||||
switch($(this).attr("data-action")){
|
||||
case "edit-template":
|
||||
let editor = $(".template-editor");
|
||||
let editor = $("#template-editor");
|
||||
|
||||
if (editor.hasClass("invisible")){
|
||||
toggleEditor();
|
||||
@ -372,7 +372,7 @@ enabled(){
|
||||
break;
|
||||
|
||||
case "editor-confirm":
|
||||
let editor = $(".template-editor");
|
||||
let editor = $("#template-editor");
|
||||
|
||||
if (me.editingTemplate !== null){
|
||||
delete me.config.templates[me.editingTemplate];
|
||||
@ -408,15 +408,15 @@ enabled(){
|
||||
};
|
||||
|
||||
var hideTemplateModal = function(){
|
||||
$(".templates-modal-wrap").remove();
|
||||
$("#templates-modal-wrap").remove();
|
||||
$(".manage-templates-btn").removeClass("active");
|
||||
};
|
||||
|
||||
var toggleEditor = function(){
|
||||
let editor = $(".template-editor");
|
||||
let editor = $("#template-editor");
|
||||
$("[name]", editor).val("");
|
||||
|
||||
if ($("button[data-action='new-template']", ".template-list").add(editor).toggleClass("invisible").hasClass("invisible")){
|
||||
if ($("button[data-action='new-template']", "#template-list").add(editor).toggleClass("invisible").hasClass("invisible")){
|
||||
me.editingTemplate = null;
|
||||
}
|
||||
};
|
||||
@ -435,7 +435,7 @@ enabled(){
|
||||
eles.push("<li>No templates available</li>");
|
||||
}
|
||||
|
||||
$(".template-list").children("ul").html(eles.join(""));
|
||||
$("#template-list").children("ul").html(eles.join(""));
|
||||
|
||||
if (save){
|
||||
this.saveConfig();
|
||||
@ -445,7 +445,7 @@ enabled(){
|
||||
// event handlers
|
||||
|
||||
this.manageTemplatesButtonClickEvent = function(e){
|
||||
if ($(".templates-modal-wrap").length){
|
||||
if ($("#templates-modal-wrap").length){
|
||||
hideTemplateModal();
|
||||
}
|
||||
else{
|
||||
@ -471,7 +471,7 @@ disabled(){
|
||||
this.css.remove();
|
||||
|
||||
$(".manage-templates-btn").remove();
|
||||
$(".templates-modal-wrap").remove();
|
||||
$("#templates-modal-wrap").remove();
|
||||
|
||||
$(document).off("uiDrawerActive", this.drawerToggleEvent);
|
||||
|
||||
|
||||
@ -3,23 +3,23 @@
|
||||
/***********************/
|
||||
|
||||
.scroll-styled-v::-webkit-scrollbar-thumb, .scroll-styled-h::-webkit-scrollbar-thumb, .antiscroll-scrollbar {
|
||||
border-radius: 0;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.antiscroll-scrollbar-vertical {
|
||||
margin-top: 0;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.antiscroll-scrollbar-horizontal {
|
||||
margin-left: 0;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.scroll-styled-v:not(.antiscroll-inner)::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: 8px !important;
|
||||
}
|
||||
|
||||
.scroll-styled-h:not(.antiscroll-inner)::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
height: 8px !important;
|
||||
}
|
||||
|
||||
.app-columns-container::-webkit-scrollbar {
|
||||
@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
.app-columns-container::-webkit-scrollbar-track {
|
||||
border-left: 0;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
.app-columns-container {
|
||||
@ -87,7 +87,7 @@
|
||||
}
|
||||
|
||||
.app-header:not(.is-condensed) .nav-user-info {
|
||||
padding: 0 5px;
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
|
||||
/****************************************/
|
||||
@ -96,11 +96,11 @@
|
||||
|
||||
.activity-header {
|
||||
align-items: center !important;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.activity-header .tweet-timestamp {
|
||||
line-height: unset;
|
||||
line-height: unset !important;
|
||||
}
|
||||
|
||||
.account-bio.padding-t--5 {
|
||||
@ -126,12 +126,12 @@ html[data-td-theme='dark'] .stream-item:not(:hover) .js-user-actions-menu {
|
||||
|
||||
a[data-full-url] {
|
||||
/* break long urls */
|
||||
word-break: break-all;
|
||||
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;
|
||||
color: #9f51cf !important;
|
||||
}
|
||||
|
||||
/***************************************/
|
||||
@ -147,7 +147,7 @@ a[data-full-url] {
|
||||
}
|
||||
|
||||
.js-docked-compose footer {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.compose-content {
|
||||
@ -160,7 +160,7 @@ a[data-full-url] {
|
||||
|
||||
.account-inline .username {
|
||||
/* move usernames a bit higher */
|
||||
vertical-align: 10%;
|
||||
vertical-align: 10% !important;
|
||||
}
|
||||
|
||||
html[data-td-font='smallest'] .sprite-verified-mini {
|
||||
@ -184,7 +184,7 @@ html[data-td-font='smallest'] .badge-verified:before {
|
||||
|
||||
.keyboard-shortcut-list {
|
||||
/* fix keyboard navigation alignment */
|
||||
vertical-align: top;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
.tweet-detail-wrapper .js-media-gif-container {
|
||||
@ -194,7 +194,7 @@ html[data-td-font='smallest'] .badge-verified:before {
|
||||
|
||||
.is-inverted-dark .inline-reply .btn:hover {
|
||||
/* Reply buttons in modals are bork */
|
||||
background-color: transparent;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/***************************************************************/
|
||||
@ -203,10 +203,10 @@ html[data-td-font='smallest'] .badge-verified:before {
|
||||
|
||||
.column-nav-link .attribution {
|
||||
/* fix cut off account names */
|
||||
position: absolute;
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
.js-docked-compose .js-drawer-close {
|
||||
#tduck .js-docked-compose .js-drawer-close {
|
||||
/* fix close drawer button position */
|
||||
margin: 20px 0 0 !important;
|
||||
}
|
||||
@ -219,7 +219,7 @@ html[data-td-font='smallest'] .badge-verified:before {
|
||||
|
||||
#account-safeguard-checkbox, #inline-account-safeguard-checkbox {
|
||||
/* fix "Ready to Tweet/send" alignment with the checkbox */
|
||||
vertical-align: -15%;
|
||||
vertical-align: -15% !important;
|
||||
}
|
||||
|
||||
/************************************************/
|
||||
@ -231,7 +231,7 @@ html[data-td-font='smallest'] .badge-verified:before {
|
||||
}
|
||||
|
||||
.js-column-header .column-header-link {
|
||||
padding: 0;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.js-column-header .column-header-link .icon {
|
||||
@ -250,9 +250,9 @@ html[data-td-font='smallest'] .badge-verified:before {
|
||||
}
|
||||
|
||||
.column:not(.is-options-open) .column-header {
|
||||
border-bottom: none;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.is-options-open .column-type-icon {
|
||||
bottom: 27px;
|
||||
bottom: 27px !important;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user