mirror of
https://github.com/chylex/TweetDuck.git
synced 2025-05-04 17:34:07 +02:00
Enable custom CSS in screenshots and move styles from code.js to notification.css
This commit is contained in:
parent
e39e85e4dd
commit
cfbc1b9575
Core/Notification/Screenshot
Resources/Scripts
@ -38,7 +38,7 @@ public FormNotificationScreenshotable(Action callback, FormBrowser owner, Plugin
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected override string GetTweetHTML(TweetNotification tweet){
|
protected override string GetTweetHTML(TweetNotification tweet){
|
||||||
string html = tweet.GenerateHtml("td-screenshot", false);
|
string html = tweet.GenerateHtml("td-screenshot");
|
||||||
|
|
||||||
foreach(InjectedHTML injection in plugins.NotificationInjections){
|
foreach(InjectedHTML injection in plugins.NotificationInjections){
|
||||||
html = injection.Inject(html);
|
html = injection.Inject(html);
|
||||||
|
|||||||
@ -280,10 +280,12 @@
|
|||||||
// Block: Hook into settings object to detect when the settings change, and update html attributes and notification layout.
|
// Block: Hook into settings object to detect when the settings change, and update html attributes and notification layout.
|
||||||
//
|
//
|
||||||
(function(){
|
(function(){
|
||||||
const refreshSettings = function(){
|
const refreshSettings = function(){
|
||||||
let fontSizeName = TD.settings.getFontSize();
|
let fontSizeName = TD.settings.getFontSize();
|
||||||
let themeName = TD.settings.getTheme();
|
let themeName = TD.settings.getTheme();
|
||||||
|
|
||||||
|
let columnBackground = getClassStyleProperty("column", "background-color");
|
||||||
|
|
||||||
let tags = [
|
let tags = [
|
||||||
"<html "+Array.prototype.map.call(document.documentElement.attributes, ele => `${ele.name}="${ele.value}"`).join(" ")+"><head>"
|
"<html "+Array.prototype.map.call(document.documentElement.attributes, ele => `${ele.name}="${ele.value}"`).join(" ")+"><head>"
|
||||||
];
|
];
|
||||||
@ -292,27 +294,7 @@
|
|||||||
tags.push($(this)[0].outerHTML);
|
tags.push($(this)[0].outerHTML);
|
||||||
});
|
});
|
||||||
|
|
||||||
tags.push("<style type='text/css'>");
|
tags.push("<style type='text/css'>body { background: "+columnBackground+" !important }</style>");
|
||||||
tags.push("body { background: "+getClassStyleProperty("column", "background-color")+" !important }"); // set background color
|
|
||||||
tags.push("body::before { content: none !important }"); // remove background gradient
|
|
||||||
tags.push(".column { background: transparent !important }"); // remove background color from columns
|
|
||||||
tags.push("a[data-full-url] { word-break: break-all !important }"); // break long urls
|
|
||||||
tags.push(".media-item, .media-preview { border-radius: 1px !important }"); // square-ify media
|
|
||||||
tags.push(".quoted-tweet { border-radius: 0 !important }"); // square-ify quoted tweets
|
|
||||||
tags.push(".activity-header.has-source-avatar { margin-bottom: 4px !important }"); // tweak distance between avatar and text
|
|
||||||
tags.push(".activity-header .tweet-timestamp { line-height: unset !important }"); // fix timestamp position
|
|
||||||
tags.push(".activity-header .icon-user-filled { vertical-align: sub !important }"); // fix follow icon position
|
|
||||||
|
|
||||||
tags.push("#tduck-show-thread { display: inline-block !important; cursor: pointer }");
|
|
||||||
tags.push(".td-notification-padded .item-img { position: absolute; left: 21px; top: 48px; width: 0 !important }");
|
|
||||||
tags.push(".td-notification-padded .activity-header > .nbfc { margin-left: 46px; line-height: unset !important }");
|
|
||||||
tags.push(".td-notification-padded .activity-header > .nbfc > .avatar { position: absolute; margin-left: -34px; }");
|
|
||||||
|
|
||||||
if (fontSizeName === "smallest"){
|
|
||||||
tags.push(".badge-verified:before { width: 13px !important; height: 13px !important; background-position: -223px -98px !important }"); // fix cut off badge icon
|
|
||||||
}
|
|
||||||
|
|
||||||
tags.push("</style>");
|
|
||||||
|
|
||||||
doc.setAttribute("data-td-font", fontSizeName);
|
doc.setAttribute("data-td-font", fontSizeName);
|
||||||
doc.setAttribute("data-td-theme", themeName);
|
doc.setAttribute("data-td-theme", themeName);
|
||||||
|
|||||||
@ -6,6 +6,18 @@ body.td-notification {
|
|||||||
overflow-y: auto !important;
|
overflow-y: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body::before {
|
||||||
|
content: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***********************/
|
||||||
|
/* Redesign scrollbars */
|
||||||
|
/***********************/
|
||||||
|
|
||||||
.scroll-styled-v::-webkit-scrollbar {
|
.scroll-styled-v::-webkit-scrollbar {
|
||||||
width: 7px !important;
|
width: 7px !important;
|
||||||
}
|
}
|
||||||
@ -18,9 +30,41 @@ body.td-notification {
|
|||||||
border-left: 0 !important;
|
border-left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*************/
|
/********************/
|
||||||
/* Usernames */
|
/* Square-ify stuff */
|
||||||
/*************/
|
/********************/
|
||||||
|
|
||||||
|
.media-item, .media-preview {
|
||||||
|
border-radius: 1px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoted-tweet {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***********************/
|
||||||
|
/* Tweaks for features */
|
||||||
|
/***********************/
|
||||||
|
|
||||||
|
a[data-full-url] {
|
||||||
|
word-break: break-all !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tduck-show-thread {
|
||||||
|
display: inline-block !important;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*******************************************/
|
||||||
|
/* Fix general visual issues or annoyances */
|
||||||
|
/*******************************************/
|
||||||
|
|
||||||
|
html[data-td-font='smallest'] .badge-verified:before {
|
||||||
|
/* fix cut off badge icon */
|
||||||
|
width: 13px !important;
|
||||||
|
height: 13px !important;
|
||||||
|
background-position: -223px -98px !important;
|
||||||
|
}
|
||||||
|
|
||||||
.account-inline .username {
|
.account-inline .username {
|
||||||
vertical-align: 10% !important;
|
vertical-align: 10% !important;
|
||||||
@ -30,6 +74,39 @@ body.td-notification {
|
|||||||
vertical-align: -10% !important;
|
vertical-align: -10% !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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td-notification-padded .item-img {
|
||||||
|
position: absolute;
|
||||||
|
left: 21px;
|
||||||
|
top: 48px;
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td-notification-padded .activity-header > .nbfc {
|
||||||
|
margin-left: 46px;
|
||||||
|
line-height: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td-notification-padded .activity-header > .nbfc > .avatar {
|
||||||
|
position: absolute;
|
||||||
|
margin-left: -34px;
|
||||||
|
}
|
||||||
|
|
||||||
/*********/
|
/*********/
|
||||||
/* Media */
|
/* Media */
|
||||||
/*********/
|
/*********/
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user