mirror of
https://gitlab.com/idotj/mastodon-embed-timeline.git
synced 2025-05-24 08:52:46 +00:00
Feature/format toot text
This commit is contained in:
i.j
parent
69b0c42824
commit
4af22a241d
@ -1,3 +1,10 @@
|
||||
v3.7.0 - 10/07/2023
|
||||
- Add Markdown to HTML feature
|
||||
- Add option to change Markdown symbol ">" into a blockquote HTML tag
|
||||
- Add button to show spoiler or sensitive images
|
||||
- Improve performance
|
||||
- Refactoring using template strings
|
||||
|
||||
v3.5.1 - 08/05/2023
|
||||
- Add feature, hide unlisted toots
|
||||
- Add message if no toots are shown due to filters applied
|
||||
|
||||
29
README.md
29
README.md
@ -65,26 +65,29 @@ If you prefer to show a timeline with a specific hashtag then change the `timeli
|
||||
Also you have some parameters to customize your embed timeline:
|
||||
|
||||
```javascript
|
||||
// Preferred color theme 'light' or 'dark' (default: auto)
|
||||
default_theme: "auto";
|
||||
// Preferred color theme: 'light', 'dark' or 'auto'. Default: auto
|
||||
default_theme: "auto",
|
||||
|
||||
// Maximum amount of toots to get (default: 20)
|
||||
toots_limit: "20";
|
||||
// Maximum amount of toots to get. Default: 20
|
||||
toots_limit: "20",
|
||||
|
||||
// Hide unlisted toots (default: don't hide)
|
||||
hide_unlisted: false;
|
||||
// Hide unlisted toots. Default: don't hide
|
||||
hide_unlisted: false,
|
||||
|
||||
// Hide boosted toots (default: don't hide)
|
||||
hide_reblog: false;
|
||||
// Hide boosted toots. Default: don't hide
|
||||
hide_reblog: false,
|
||||
|
||||
// Hide replies toots (default: don't hide)
|
||||
hide_replies: false;
|
||||
// Hide replies toots. Default: don't hide
|
||||
hide_replies: false,
|
||||
|
||||
// Limit the text content to a maximum number of lines (default: unlimited)
|
||||
text_max_lines: "0";
|
||||
// Converts Markdown symbol ">" at the beginning of a paragraph into a blockquote HTML tag (default: don't apply)
|
||||
markdown_blockquote: true,
|
||||
|
||||
// Limit the text content to a maximum number of lines. Default: 0 (unlimited)
|
||||
text_max_lines: "0",
|
||||
|
||||
// Customize the text of the link pointing to the Mastodon page (appears after the last toot)
|
||||
btn_see_more: "See more posts at Mastodon";
|
||||
link_see_more: "See more posts at Mastodon",
|
||||
```
|
||||
|
||||
### Tip
|
||||
|
||||
@ -9,11 +9,6 @@
|
||||
<meta name="description" content="Mastodon embed timeline" />
|
||||
<link rel="stylesheet" href="mastodon-timeline.css" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/* Mastodon embed feed timeline v3.5.1 */
|
||||
/* Mastodon embed feed timeline v3.7.0 */
|
||||
/* More info at: */
|
||||
/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
|
||||
|
||||
@ -157,6 +157,12 @@ html[data-theme="dark"] {
|
||||
content: "...";
|
||||
}
|
||||
|
||||
.toot-text blockquote {
|
||||
border-left: 4px solid var(--line-gray-color);
|
||||
margin-left: 0;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.mt-error {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
@ -211,6 +217,18 @@ html[data-theme="dark"] {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.toot-media > .spoiler-link {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
:not(.toot-media-spoiler) > .spoiler-link {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.toot-media-spoiler > img {
|
||||
filter: blur(2rem);
|
||||
}
|
||||
@ -225,7 +243,7 @@ html[data-theme="dark"] {
|
||||
|
||||
.img-ratio14_7 {
|
||||
position: relative;
|
||||
padding-top: 48.95%; /* 14:7 */
|
||||
padding-top: 56.95%;
|
||||
width: 100%;
|
||||
}
|
||||
.img-ratio14_7 > img {
|
||||
|
||||
@ -1,47 +1,50 @@
|
||||
// Mastodon embed feed timeline v3.5.1
|
||||
// Mastodon embed feed timeline v3.7.0
|
||||
// More info at:
|
||||
// https://gitlab.com/idotj/mastodon-embed-feed-timeline
|
||||
|
||||
// Timeline settings
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
let mapi = new MastodonApi({
|
||||
// Id of the <div> containing the timeline.
|
||||
// Id of the <div> containing the timeline
|
||||
container_body_id: "mt-body",
|
||||
|
||||
// Preferred color theme: 'light', 'dark' or 'auto' (default: auto).
|
||||
// Preferred color theme: 'light', 'dark' or 'auto'. Default: auto
|
||||
default_theme: "auto",
|
||||
|
||||
// Your Mastodon instance.
|
||||
// Your Mastodon instance
|
||||
instance_url: "https://mastodon.online",
|
||||
|
||||
// Choose type of toots to show in the timeline: 'local', 'profile', 'hashtag' (default: local).
|
||||
// Choose type of toots to show in the timeline: 'local', 'profile', 'hashtag'. Default: local
|
||||
timeline_type: "local",
|
||||
|
||||
// Your user ID on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline.
|
||||
// Your user ID on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline
|
||||
user_id: "",
|
||||
|
||||
// Your user name on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline.
|
||||
// Your user name on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline
|
||||
profile_name: "",
|
||||
|
||||
// The name of the hashtag. Leave empty if you didn't choose 'hashtag' as type of timeline.
|
||||
// The name of the hashtag. Leave empty if you didn't choose 'hashtag' as type of timeline
|
||||
hashtag_name: "",
|
||||
|
||||
// Maximum amount of toots to get (default: 20).
|
||||
// Maximum amount of toots to get. Default: 20
|
||||
toots_limit: "20",
|
||||
|
||||
// Hide unlisted toots (default: don't hide).
|
||||
// Hide unlisted toots. Default: don't hide
|
||||
hide_unlisted: false,
|
||||
|
||||
// Hide boosted toots (default: don't hide).
|
||||
// Hide boosted toots. Default: don't hide
|
||||
hide_reblog: false,
|
||||
|
||||
// Hide replies toots (default: don't hide).
|
||||
// Hide replies toots. Default: don't hide
|
||||
hide_replies: false,
|
||||
|
||||
// Limit the text content to a maximum number of lines (default: unlimited).
|
||||
// Converts Markdown symbol ">" at the beginning of a paragraph into a blockquote HTML tag (default: don't apply)
|
||||
markdown_blockquote: false,
|
||||
|
||||
// Limit the text content to a maximum number of lines. Default: 0 (unlimited)
|
||||
text_max_lines: "0",
|
||||
|
||||
// Customize the text of the link pointing to the Mastodon page (appears after the last toot).
|
||||
// Customize the text of the link pointing to the Mastodon page (appears after the last toot)
|
||||
link_see_more: "See more posts at Mastodon",
|
||||
});
|
||||
});
|
||||
@ -63,6 +66,10 @@ let MastodonApi = function (params_) {
|
||||
typeof params_.hide_reblog !== "undefined" ? params_.hide_reblog : false;
|
||||
this.HIDE_REPLIES =
|
||||
typeof params_.hide_replies !== "undefined" ? params_.hide_replies : false;
|
||||
this.MARKDOWN_BLOCKQUOTE =
|
||||
typeof params_.markdown_blockquote !== "undefined"
|
||||
? params_.markdown_blockquote
|
||||
: false;
|
||||
this.TEXT_MAX_LINES = params_.text_max_lines || "0";
|
||||
this.LINK_SEE_MORE = params_.link_see_more;
|
||||
|
||||
@ -84,8 +91,8 @@ MastodonApi.prototype.applyTheme = function () {
|
||||
if (this.DEFAULT_THEME === "auto") {
|
||||
let systemTheme = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
systemTheme.matches ? setTheme("dark") : setTheme("light");
|
||||
systemTheme.addEventListener("change", (event) => {
|
||||
event.matches ? setTheme("dark") : setTheme("light");
|
||||
systemTheme.addEventListener("change", (e) => {
|
||||
e.matches ? setTheme("dark") : setTheme("light");
|
||||
});
|
||||
} else {
|
||||
setTheme(this.DEFAULT_THEME);
|
||||
@ -99,24 +106,11 @@ MastodonApi.prototype.getToots = function () {
|
||||
|
||||
// Get request
|
||||
if (this.TIMELINE_TYPE === "profile") {
|
||||
requestURL =
|
||||
this.INSTANCE_URL +
|
||||
"/api/v1/accounts/" +
|
||||
this.USER_ID +
|
||||
"/statuses?limit=" +
|
||||
this.TOOTS_LIMIT;
|
||||
requestURL = `${this.INSTANCE_URL}/api/v1/accounts/${this.USER_ID}/statuses?limit=${this.TOOTS_LIMIT}`;
|
||||
} else if (this.TIMELINE_TYPE === "hashtag") {
|
||||
requestURL =
|
||||
this.INSTANCE_URL +
|
||||
"/api/v1/timelines/tag/" +
|
||||
this.HASHTAG_NAME +
|
||||
"?limit=" +
|
||||
this.TOOTS_LIMIT;
|
||||
requestURL = `${this.INSTANCE_URL}/api/v1/timelines/tag/${this.HASHTAG_NAME}?limit=${this.TOOTS_LIMIT}`;
|
||||
} else if (this.TIMELINE_TYPE === "local") {
|
||||
requestURL =
|
||||
this.INSTANCE_URL +
|
||||
"/api/v1/timelines/public?local=true&limit=" +
|
||||
this.TOOTS_LIMIT;
|
||||
requestURL = `${this.INSTANCE_URL}/api/v1/timelines/public?local=true&limit=${this.TOOTS_LIMIT}`;
|
||||
}
|
||||
|
||||
fetch(requestURL, {
|
||||
@ -132,7 +126,7 @@ MastodonApi.prototype.getToots = function () {
|
||||
}
|
||||
})
|
||||
.then((jsonData) => {
|
||||
// console.log('jsonData: ', jsonData);
|
||||
// console.log("jsonData: ", jsonData);
|
||||
|
||||
// Empty the <div> container
|
||||
this.mtBodyContainer.innerHTML = "";
|
||||
@ -151,6 +145,7 @@ MastodonApi.prototype.getToots = function () {
|
||||
) {
|
||||
// Nothing here (Don't append toots)
|
||||
} else {
|
||||
// Format and append toots
|
||||
appendToot.call(mapi, jsonData[i], i);
|
||||
}
|
||||
}
|
||||
@ -164,56 +159,27 @@ MastodonApi.prototype.getToots = function () {
|
||||
jsonData.length +
|
||||
' toots from the server but due to the "hide filters" applied, no toot is shown</div></div>';
|
||||
} else {
|
||||
// Add target="_blank" to all #hashtags and @mentions
|
||||
let linksToBlank = document.querySelectorAll(
|
||||
"#mt-body .hashtag, .u-url.mention"
|
||||
);
|
||||
for (let j = 0; j < linksToBlank.length; j++) {
|
||||
linksToBlank[j].target = "_blank";
|
||||
linksToBlank[j].hasAttribute("rel", "tag")
|
||||
? linksToBlank[j].setAttribute(
|
||||
"rel",
|
||||
"tag nofollow noopener noreferrer"
|
||||
)
|
||||
: linksToBlank[j].setAttribute(
|
||||
"rel",
|
||||
"nofollow noopener noreferrer"
|
||||
);
|
||||
}
|
||||
|
||||
// Insert link after last toot to visit Mastodon page
|
||||
if (mapi.LINK_SEE_MORE) {
|
||||
let linkHtml = "";
|
||||
let linkSeeMorePath = "";
|
||||
if (this.TIMELINE_TYPE === "profile") {
|
||||
linkHtml =
|
||||
linkSeeMorePath = mapi.PROFILE_NAME;
|
||||
} else if (this.TIMELINE_TYPE === "hashtag") {
|
||||
linkSeeMorePath = "tags/" + this.HASHTAG_NAME;
|
||||
} else if (this.TIMELINE_TYPE === "local") {
|
||||
linkSeeMorePath = "public/local";
|
||||
}
|
||||
let linkSeeMore =
|
||||
'<div class="mt-footer"><a href="' +
|
||||
mapi.INSTANCE_URL +
|
||||
"/" +
|
||||
mapi.PROFILE_NAME +
|
||||
linkSeeMorePath +
|
||||
'" class="btn" target="_blank" rel="nofollow noopener noreferrer">' +
|
||||
mapi.LINK_SEE_MORE +
|
||||
"</a></div>";
|
||||
} else if (this.TIMELINE_TYPE === "hashtag") {
|
||||
linkHtml =
|
||||
'<div class="mt-footer"><a href="' +
|
||||
mapi.INSTANCE_URL +
|
||||
"/tags/" +
|
||||
this.HASHTAG_NAME +
|
||||
'" class="btn" target="_blank" rel="nofollow noopener noreferrer">' +
|
||||
mapi.LINK_SEE_MORE +
|
||||
"</a></div>";
|
||||
} else if (this.TIMELINE_TYPE === "local") {
|
||||
linkHtml =
|
||||
'<div class="mt-footer"><a href="' +
|
||||
mapi.INSTANCE_URL +
|
||||
"/public/local" +
|
||||
'" class="btn" target="_blank" rel="nofollow noopener noreferrer">' +
|
||||
mapi.LINK_SEE_MORE +
|
||||
"</a></div>";
|
||||
}
|
||||
this.mtBodyContainer.parentNode.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
linkHtml
|
||||
linkSeeMore
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -314,27 +280,25 @@ MastodonApi.prototype.getToots = function () {
|
||||
status_.spoiler_text +
|
||||
' <button type="button" class="spoiler-link" aria-expanded="false">Show more</button>' +
|
||||
'<div class="spoiler-text">' +
|
||||
status_.content +
|
||||
this.formatTootText(status_.content) +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
} else if (status_.reblog && status_.reblog.content !== "") {
|
||||
content =
|
||||
'<div class="toot-text ' +
|
||||
" " +
|
||||
text_css +
|
||||
'">' +
|
||||
"<div>" +
|
||||
status_.reblog.content +
|
||||
this.formatTootText(status_.reblog.content) +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
} else {
|
||||
content =
|
||||
'<div class="toot-text ' +
|
||||
" " +
|
||||
text_css +
|
||||
'">' +
|
||||
"<div>" +
|
||||
status_.content +
|
||||
this.formatTootText(status_.content) +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
}
|
||||
@ -400,37 +364,37 @@ MastodonApi.prototype.getToots = function () {
|
||||
};
|
||||
|
||||
// Toot interactions
|
||||
this.mtBodyContainer.addEventListener("click", function (event) {
|
||||
this.mtBodyContainer.addEventListener("click", function (e) {
|
||||
// Check if clicked in a toot
|
||||
if (
|
||||
event.target.localName == "article" ||
|
||||
event.target.offsetParent.localName == "article" ||
|
||||
event.target.localName == "img"
|
||||
e.target.localName == "article" ||
|
||||
e.target.offsetParent.localName == "article" ||
|
||||
e.target.localName == "img"
|
||||
) {
|
||||
openTootURL(event);
|
||||
openTootURL(e);
|
||||
}
|
||||
// Check if clicked in Show More/Less button
|
||||
if (
|
||||
event.target.localName == "button" &&
|
||||
event.target.className == "spoiler-link"
|
||||
e.target.localName == "button" &&
|
||||
e.target.className == "spoiler-link"
|
||||
) {
|
||||
toogleSpoiler(event);
|
||||
toogleSpoiler(e);
|
||||
}
|
||||
});
|
||||
this.mtBodyContainer.addEventListener("keydown", function (event) {
|
||||
this.mtBodyContainer.addEventListener("keydown", function (e) {
|
||||
// Check if Enter key pressed with focus in an article
|
||||
if (event.code === "Enter" && event.target.localName == "article") {
|
||||
openTootURL(event);
|
||||
if (event.code === "Enter" && e.target.localName == "article") {
|
||||
openTootURL(e);
|
||||
}
|
||||
});
|
||||
|
||||
// Open Toot in a new page avoiding any other natural link
|
||||
openTootURL = function (event_) {
|
||||
let urlToot = event_.target.closest(".mt-toot").dataset.location;
|
||||
let openTootURL = function (e) {
|
||||
let urlToot = e.target.closest(".mt-toot").dataset.location;
|
||||
if (
|
||||
event_.target.localName !== "a" &&
|
||||
event_.target.localName !== "span" &&
|
||||
event_.target.localName !== "button" &&
|
||||
e.target.localName !== "a" &&
|
||||
e.target.localName !== "span" &&
|
||||
e.target.localName !== "button" &&
|
||||
urlToot
|
||||
) {
|
||||
window.open(urlToot, "_blank");
|
||||
@ -438,29 +402,79 @@ MastodonApi.prototype.getToots = function () {
|
||||
};
|
||||
|
||||
// Spoiler button
|
||||
toogleSpoiler = function (event_) {
|
||||
let spoilerText = event_.target.nextSibling;
|
||||
let spoilerBtnText = event_.target.textContent;
|
||||
let toogleSpoiler = function (e) {
|
||||
let spoilerText = e.target.nextSibling;
|
||||
let spoilerBtnText = e.target.textContent;
|
||||
spoilerText.classList.toggle("spoiler-text");
|
||||
if (spoilerBtnText == "Show more") {
|
||||
spoilerBtnText = "Show less";
|
||||
event_.target.setAttribute("aria-expanded", "true");
|
||||
e.target.setAttribute("aria-expanded", "true");
|
||||
} else {
|
||||
spoilerBtnText = "Show more";
|
||||
event_.target.setAttribute("aria-expanded", "false");
|
||||
e.target.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// Handle text changes made to Toots
|
||||
MastodonApi.prototype.formatTootText = function (c) {
|
||||
let content = c;
|
||||
|
||||
// Format hashtags and mentions
|
||||
content = this.addTarget2hashtagMention(content);
|
||||
|
||||
// Convert markdown styles into HTML
|
||||
if (this.MARKDOWN_BLOCKQUOTE) {
|
||||
content = this.replaceHTMLtag(
|
||||
content,
|
||||
"<p>>",
|
||||
"</p>",
|
||||
"<blockquote><p>",
|
||||
"</blockquote></p>"
|
||||
);
|
||||
}
|
||||
|
||||
return content;
|
||||
};
|
||||
|
||||
// Add target="_blank" to all #hashtags and @mentions
|
||||
MastodonApi.prototype.addTarget2hashtagMention = function (c) {
|
||||
let content = c.replaceAll('rel="tag"', 'rel="tag" target="_blank"');
|
||||
content = content.replaceAll(
|
||||
'class="u-url mention"',
|
||||
'class="u-url mention" target="_blank"'
|
||||
);
|
||||
return content;
|
||||
};
|
||||
|
||||
// Find all start/end <tags> and replace them by another start/end <tags>
|
||||
MastodonApi.prototype.replaceHTMLtag = function (
|
||||
c,
|
||||
initialTagOpen,
|
||||
initialTagClose,
|
||||
replacedTagOpen,
|
||||
replacedTagClose
|
||||
) {
|
||||
if (c.includes(initialTagOpen)) {
|
||||
const regex = new RegExp(initialTagOpen + "(.*?)" + initialTagClose, "gi");
|
||||
return c.replace(regex, replacedTagOpen + "$1" + replacedTagClose);
|
||||
} else {
|
||||
return c;
|
||||
}
|
||||
};
|
||||
|
||||
// Place media
|
||||
MastodonApi.prototype.replaceMedias = function (media_, spoiler_) {
|
||||
let spoiler = spoiler_ || false;
|
||||
MastodonApi.prototype.replaceMedias = function (m, s) {
|
||||
let spoiler = s || false;
|
||||
let pic =
|
||||
'<div class="toot-media ' +
|
||||
(spoiler ? "toot-media-spoiler" : "") +
|
||||
' img-ratio14_7 loading-spinner">' +
|
||||
(spoiler
|
||||
? '<button class="spoiler-link" onclick="this.parentNode.classList.remove(\'toot-media-spoiler\')">Show content</button>'
|
||||
: "") +
|
||||
'<img onload="removeSpinner(this)" onerror="removeSpinner(this)" src="' +
|
||||
media_.preview_url +
|
||||
m.preview_url +
|
||||
'" alt="" loading="lazy" />' +
|
||||
"</div>";
|
||||
|
||||
@ -468,7 +482,7 @@ MastodonApi.prototype.replaceMedias = function (media_, spoiler_) {
|
||||
};
|
||||
|
||||
// Format date
|
||||
MastodonApi.prototype.formatDate = function (date_) {
|
||||
MastodonApi.prototype.formatDate = function (d) {
|
||||
const monthNames = [
|
||||
"Jan",
|
||||
"Feb",
|
||||
@ -484,7 +498,7 @@ MastodonApi.prototype.formatDate = function (date_) {
|
||||
"Dec",
|
||||
];
|
||||
|
||||
let date = new Date(date_);
|
||||
let date = new Date(d);
|
||||
|
||||
let displayDate =
|
||||
monthNames[date.getMonth()] +
|
||||
@ -497,10 +511,10 @@ MastodonApi.prototype.formatDate = function (date_) {
|
||||
};
|
||||
|
||||
// Loading spinner
|
||||
removeSpinner = function (element) {
|
||||
removeSpinner = function (e) {
|
||||
const spinnerCSS = "loading-spinner";
|
||||
// Find closest parent container (1st, 2nd or 3rd level)
|
||||
let spinnerContainer = element.closest("." + spinnerCSS);
|
||||
let spinnerContainer = e.closest("." + spinnerCSS);
|
||||
if (spinnerContainer) {
|
||||
spinnerContainer.classList.remove(spinnerCSS);
|
||||
}
|
||||
|
||||
2
src/mastodon-timeline.min.css
vendored
2
src/mastodon-timeline.min.css
vendored
@ -1 +1 @@
|
||||
:root{--text-max-lines:none}:root,html[data-theme=light]{--bg-color:#fff;--bg-hover-color:#d9e1e8;--line-gray-color:#c0cdd9;--content-text:#000;--link-color:#3a3bff;--error-text-color:#8b0000}html[data-theme=dark]{--bg-color:#282c37;--bg-hover-color:#313543;--line-gray-color:#393f4f;--content-text:#fff;--link-color:#8c8dff;--error-text-color:#fe6c6c}.mt-timeline{height:100%;overflow-y:auto;position:relative;background:var(--bg-color);scrollbar-color:var(--bg-hover-color) rgba(0,0,0,.1)}.mt-timeline a,.mt-timeline a:active,.mt-timeline a:link{text-decoration:none;color:var(--link-color)}.mt-timeline a:hover{text-decoration:underline}.mt-timeline::-webkit-scrollbar{width:.75rem;height:.75rem}.mt-timeline::-webkit-scrollbar-corner{background:0 0}.mt-timeline::-webkit-scrollbar-thumb{border:0 var(--content-text);border-radius:2rem;background:var(--bg-hover-color)}.mt-timeline::-webkit-scrollbar-track{border:0 var(--content-text);border-radius:0;background:rgba(0,0,0,.1)}.mt-body{padding:1rem 1.5rem;white-space:pre-wrap;word-wrap:break-word}.mt-body .invisible{font-size:0;line-height:0;display:inline-block;width:0;height:0;position:absolute}.mt-toot{margin:.25rem;padding:1rem .5rem 2rem 4rem;position:relative;min-height:3.75rem;background-color:transparent;border-bottom:1px solid var(--line-gray-color)}.mt-toot:focus,.mt-toot:hover{cursor:pointer;background-color:var(--bg-hover-color)}.mt-toot p:last-child{margin-bottom:0}.mt-avatar{position:absolute;top:1rem;left:5px;width:3rem;height:3rem;background-color:transparent;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:var(--bg-color);border-radius:5px}.mt-avatar-boosted{width:2.5rem;height:2.5rem}.mt-avatar-booster{width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem}.mt-user{display:table;font-weight:600}.mt-user>a{color:var(--content-text)!important}.toot-text{margin-bottom:.25rem;color:var(--content-text)}.toot-text .spoiler-link{display:inline-block;border-radius:2px;background-color:var(--bg-hover-color);border:0;color:var(--content-text);font-weight:700;font-size:.7rem;padding:0 .35rem;text-transform:uppercase;line-height:1.25rem;cursor:pointer;vertical-align:top}.toot-text .spoiler-text{display:none}.toot-text.truncate{display:-webkit-box;overflow:hidden;-webkit-line-clamp:var(--text-max-lines);-webkit-box-orient:vertical}.toot-text:not(.truncate) .ellipsis::after{content:"..."}.mt-error{position:absolute;display:flex;flex-direction:column;height:calc(100% - 3.5rem);width:calc(100% - 4.5rem);justify-content:center;align-items:center;color:var(--error-text-color);padding:.75rem;text-align:center}.mt-error-icon{font-size:2rem}.mt-error-message{padding:1rem 0}.toot-poll{margin-bottom:.25rem;color:var(--content-text)}.toot-poll ul{list-style:none;padding:0;margin:0}.toot-poll ul li{font-size:.9rem;margin-bottom:.5rem}.toot-poll ul li:not(:last-child){margin-bottom:.25rem}.toot-poll ul li:before{content:"◯";padding-right:.5rem}.toot-media{overflow:hidden;margin-bottom:.25rem}.toot-media-preview{position:relative;margin-top:.25rem;height:auto;text-align:center;width:100%}.toot-media-spoiler>img{filter:blur(2rem)}.toot-media-preview a{display:block;position:absolute;top:0;right:0;bottom:0;left:0}.img-ratio14_7{position:relative;padding-top:48.95%;width:100%}.img-ratio14_7>img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.toot-date{font-size:.75rem}.mt-body>.loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.loading-spinner{height:100%;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-color:transparent;background-size:min(2.5rem,calc(100% - .5rem))}.mt-footer{margin:1rem auto 2rem auto;padding:0 2rem;text-align:center}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
|
||||
:root{--text-max-lines:none}:root,html[data-theme=light]{--bg-color:#fff;--bg-hover-color:#d9e1e8;--line-gray-color:#c0cdd9;--content-text:#000;--link-color:#3a3bff;--error-text-color:#8b0000}html[data-theme=dark]{--bg-color:#282c37;--bg-hover-color:#313543;--line-gray-color:#393f4f;--content-text:#fff;--link-color:#8c8dff;--error-text-color:#fe6c6c}.mt-timeline{height:100%;overflow-y:auto;position:relative;background:var(--bg-color);scrollbar-color:var(--bg-hover-color) rgba(0,0,0,.1)}.mt-timeline a,.mt-timeline a:active,.mt-timeline a:link{text-decoration:none;color:var(--link-color)}.mt-timeline a:hover{text-decoration:underline}.mt-timeline::-webkit-scrollbar{width:.75rem;height:.75rem}.mt-timeline::-webkit-scrollbar-corner{background:0 0}.mt-timeline::-webkit-scrollbar-thumb{border:0 var(--content-text);border-radius:2rem;background:var(--bg-hover-color)}.mt-timeline::-webkit-scrollbar-track{border:0 var(--content-text);border-radius:0;background:rgba(0,0,0,.1)}.mt-body{padding:1rem 1.5rem;white-space:pre-wrap;word-wrap:break-word}.mt-body .invisible{font-size:0;line-height:0;display:inline-block;width:0;height:0;position:absolute}.mt-toot{margin:.25rem;padding:1rem .5rem 2rem 4rem;position:relative;min-height:3.75rem;background-color:transparent;border-bottom:1px solid var(--line-gray-color)}.mt-toot:focus,.mt-toot:hover{cursor:pointer;background-color:var(--bg-hover-color)}.mt-toot p:last-child{margin-bottom:0}.mt-avatar{position:absolute;top:1rem;left:5px;width:3rem;height:3rem;background-color:transparent;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:var(--bg-color);border-radius:5px}.mt-avatar-boosted{width:2.5rem;height:2.5rem}.mt-avatar-booster{width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem}.mt-user{display:table;font-weight:600}.mt-user>a{color:var(--content-text)!important}.toot-text{margin-bottom:.25rem;color:var(--content-text)}.toot-text .spoiler-link{display:inline-block;border-radius:2px;background-color:var(--bg-hover-color);border:0;color:var(--content-text);font-weight:700;font-size:.7rem;padding:0 .35rem;text-transform:uppercase;line-height:1.25rem;cursor:pointer;vertical-align:top}.toot-text .spoiler-text{display:none}.toot-text.truncate{display:-webkit-box;overflow:hidden;-webkit-line-clamp:var(--text-max-lines);-webkit-box-orient:vertical}.toot-text:not(.truncate) .ellipsis::after{content:"..."}.toot-text blockquote{border-left:4px solid var(--line-gray-color);margin-left:0;padding-left:8px}.mt-error{position:absolute;display:flex;flex-direction:column;height:calc(100% - 3.5rem);width:calc(100% - 4.5rem);justify-content:center;align-items:center;color:var(--error-text-color);padding:.75rem;text-align:center}.mt-error-icon{font-size:2rem}.mt-error-message{padding:1rem 0}.toot-poll{margin-bottom:.25rem;color:var(--content-text)}.toot-poll ul{list-style:none;padding:0;margin:0}.toot-poll ul li{font-size:.9rem;margin-bottom:.5rem}.toot-poll ul li:not(:last-child){margin-bottom:.25rem}.toot-poll ul li:before{content:"◯";padding-right:.5rem}.toot-media{overflow:hidden;margin-bottom:.25rem}.toot-media-preview{position:relative;margin-top:.25rem;height:auto;text-align:center;width:100%}.toot-media>.spoiler-link{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%);cursor:pointer}:not(.toot-media-spoiler)>.spoiler-link{visibility:hidden}.toot-media-spoiler>img{filter:blur(2rem)}.toot-media-preview a{display:block;position:absolute;top:0;right:0;bottom:0;left:0}.img-ratio14_7{position:relative;padding-top:56.95%;width:100%}.img-ratio14_7>img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.toot-date{font-size:.75rem}.mt-body>.loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.loading-spinner{height:100%;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-color:transparent;background-size:min(2.5rem,calc(100% - .5rem))}.mt-footer{margin:1rem auto 2rem auto;padding:0 2rem;text-align:center}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
|
||||
2
src/mastodon-timeline.min.js
vendored
2
src/mastodon-timeline.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user