Add hashtag timeline support
This commit is contained in:
idotj
parent
19c4a6c4a8
commit
34ebc56e46
@ -1,5 +1,6 @@
|
|||||||
v3.4.0 - 12/04/2023
|
v3.4.2 - 22/04/2023
|
||||||
- Add support for hashtag timeline
|
- Add support for hashtag timeline
|
||||||
|
- Fix query url when showing local instance toots
|
||||||
|
|
||||||
v3.3.1 - 01/03/2023
|
v3.3.1 - 01/03/2023
|
||||||
- Apply scroll-bar styles to timeline container
|
- Apply scroll-bar styles to timeline container
|
||||||
@ -67,4 +68,4 @@ v1.5.1 - 17/05/2021
|
|||||||
|
|
||||||
v1.0.0 - 06/04/2021
|
v1.0.0 - 06/04/2021
|
||||||
- First commit
|
- First commit
|
||||||
|
- Project forked from: https://github.com/AzetJP/mastodon-timeline-widget
|
||||||
|
|||||||
53
README.md
53
README.md
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
Embed a mastodon feed timeline in your page, only with a css and js file.
|
Embed a mastodon feed timeline in your page, only with a CSS and JS file.
|
||||||
|
|
||||||
Working version running at:
|
Working version running at:
|
||||||
<https://www.idotj.com>
|
<https://www.idotj.com>
|
||||||
@ -15,17 +15,18 @@ Source code running at:
|
|||||||
Just copy both files (*mastodon-timeline.css* and *mastodon-timeline.js* from /src folder) in your project folder.
|
Just copy both files (*mastodon-timeline.css* and *mastodon-timeline.js* from /src folder) in your project folder.
|
||||||
|
|
||||||
Now call each one in your page using the `<link>` and `<script>` tag:
|
Now call each one in your page using the `<link>` and `<script>` tag:
|
||||||
```
|
|
||||||
|
```html
|
||||||
<link rel="stylesheet" href="mastodon-timeline.css">
|
<link rel="stylesheet" href="mastodon-timeline.css">
|
||||||
```
|
```
|
||||||
|
|
||||||
```
|
```html
|
||||||
<script src='mastodon-timeline.js'></script>
|
<script src='mastodon-timeline.js'></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
Then copy the following html structure:
|
Then copy the following html structure:
|
||||||
|
|
||||||
```
|
```html
|
||||||
<div class="mt-timeline">
|
<div class="mt-timeline">
|
||||||
<div id="mt-body" class="mt-body" role="feed">
|
<div id="mt-body" class="mt-body" role="feed">
|
||||||
<div class="loading-spinner"></div>
|
<div class="loading-spinner"></div>
|
||||||
@ -36,27 +37,31 @@ Then copy the following html structure:
|
|||||||
Great, you have a Mastodon timeline running in your page.
|
Great, you have a Mastodon timeline running in your page.
|
||||||
|
|
||||||
The next step will be to setup the timeline.
|
The next step will be to setup the timeline.
|
||||||
Edit the the JS file *mastodon-timeline.js* and at the beginning replace the following values:
|
Edit the the JS file *mastodon-timeline.js* and at the beginning find these two lines:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
instance_url: 'Your Mastodon instance',
|
||||||
|
timeline_type: 'local',
|
||||||
```
|
```
|
||||||
instance_uri: 'Your Mastodon instance',
|
|
||||||
|
Enter your Mastodon instance URL (not including the last `/` symbol) and reload the page. You should see toots from your local instance in your timeline.
|
||||||
|
|
||||||
|
If you want to show a profile timeline then change the `timeline_type` to `profile` and set the following values:
|
||||||
|
|
||||||
|
```javascript
|
||||||
user_id: 'Your user ID on Mastodon instance',
|
user_id: 'Your user ID on Mastodon instance',
|
||||||
profile_name: 'Your user name on Mastodon instance',
|
profile_name: 'Your user name on Mastodon instance',
|
||||||
```
|
```
|
||||||
Leave `user_id` and `profile_name` empty if you just want to show your instance local timeline.
|
|
||||||
|
|
||||||
If you don't know your user_id, you have two ways to get it:
|
If you prefer to show a timeline with a specific hashtag then change the `timeline_type` to `hashtag` and enter the name of the hashtag (not including the `#` symbol):
|
||||||
|
|
||||||
- Right click on your avatar image and inspect the element. You will see in your html code a line like this one:
|
|
||||||
`<img src="https://files.xxxxxxxx.xx/accounts/avatars/000/180/745/original/xxxxxxxxxx.png" alt="xxxx">`
|
|
||||||
Check the `src=""` url, your user id is between `/accounts/avatars/` and `/original/`. So removing the slashs `/` you will get your user id, like in the example: `000180745`
|
|
||||||
|
|
||||||
|
|
||||||
- Other option, just copy your @profile_name and @instance_uri here:
|
|
||||||
<a href="https://prouser123.me/mastodon-userid-lookup/" target="_blank" rel="noopener">https://prouser123.me/mastodon-userid-lookup/</a>
|
|
||||||
|
|
||||||
Here you have some parameters to customize your embed timeline:
|
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
hashtag_name: 'YourHashtag',
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Also you have some parameters to customize your embed timeline:
|
||||||
|
|
||||||
|
```javascript
|
||||||
// Preferred color theme 'light' or 'dark' (default: auto)
|
// Preferred color theme 'light' or 'dark' (default: auto)
|
||||||
default_theme: 'auto'
|
default_theme: 'auto'
|
||||||
|
|
||||||
@ -77,7 +82,17 @@ Here you have some parameters to customize your embed timeline:
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
*Project forked from: https://github.com/AzetJP/mastodon-timeline-widget
|
### Tip
|
||||||
|
|
||||||
|
If you don't know your `user_id`, you have two ways to get it:
|
||||||
|
|
||||||
|
- Right click on your avatar image and inspect the element.
|
||||||
|
You will see in your html code a line like this one:
|
||||||
|
`<img src="https://files.xxxxxxxx.xx/accounts/avatars/000/180/745/original/xxxxxxxxxx.png" alt="xxxx">`
|
||||||
|
Check the `src=""` url, your user id is between `/accounts/avatars/` and `/original/`. So removing the slashs `/` you will get your user id, like in the example: `000180745`
|
||||||
|
|
||||||
|
- Other option, just copy your profile name and instance uri here:
|
||||||
|
<a href="https://prouser123.me/mastodon-userid-lookup/" target="_blank" rel="noopener">https://prouser123.me/mastodon-userid-lookup/</a>
|
||||||
|
|
||||||
## 🚀 Improve me
|
## 🚀 Improve me
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
/* Mastodon embed feed timeline v3.3.1 */
|
/* Mastodon embed feed timeline v3.4.2 */
|
||||||
/* More info at: */
|
/* More info at: */
|
||||||
/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
|
/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
|
||||||
|
|
||||||
|
|||||||
@ -1,41 +1,44 @@
|
|||||||
// Mastodon embed feed timeline v3.3.1
|
// Mastodon embed feed timeline v3.4.2
|
||||||
// More info at:
|
// More info at:
|
||||||
// https://gitlab.com/idotj/mastodon-embed-feed-timeline
|
// https://gitlab.com/idotj/mastodon-embed-feed-timeline
|
||||||
|
|
||||||
// Timeline settings
|
// Timeline settings
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
let mapi = new MastodonApi({
|
let mapi = new MastodonApi({
|
||||||
// Id of the <div> containing the timeline
|
// Id of the <div> containing the timeline.
|
||||||
container_body_id: 'mt-body',
|
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',
|
default_theme: 'auto',
|
||||||
|
|
||||||
// Your Mastodon instance
|
// Your Mastodon instance.
|
||||||
instance_uri: 'https://mastodon.online',
|
instance_url: 'https://mastodon.online',
|
||||||
|
|
||||||
// Your user ID on Mastodon instance. Leave empty if you prefer to show local instance toots
|
// Choose type of toots to show in the timeline: 'local', 'profile', 'hashtag' (default: local).
|
||||||
user_id: '000180745',
|
timeline_type: 'local',
|
||||||
|
|
||||||
// Your user name on Mastodon instance
|
// Your user ID on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline.
|
||||||
profile_name: '@idotj',
|
user_id: '',
|
||||||
|
|
||||||
// Show toots from a hashtag instead of user timeline.
|
// Your user name on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline.
|
||||||
hashtag: 'introduction',
|
profile_name: '',
|
||||||
|
|
||||||
// Maximum amount of toots to get (default: 20)
|
// 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).
|
||||||
toots_limit: '20',
|
toots_limit: '20',
|
||||||
|
|
||||||
// Hide boosted toots (default: don't hide)
|
// Hide boosted toots (default: don't hide).
|
||||||
hide_reblog: false,
|
hide_reblog: false,
|
||||||
|
|
||||||
// Hide replies toots (default: don't hide)
|
// Hide replies toots (default: don't hide).
|
||||||
hide_replies: false,
|
hide_replies: false,
|
||||||
|
|
||||||
// Limit the text content to a maximum number of lines (default: unlimited)
|
// Limit the text content to a maximum number of lines (default: unlimited).
|
||||||
text_max_lines: '0',
|
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'
|
link_see_more: 'See more posts at Mastodon'
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -43,10 +46,11 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
let MastodonApi = function (params_) {
|
let MastodonApi = function (params_) {
|
||||||
// Endpoint access settings / default values
|
// Endpoint access settings / default values
|
||||||
this.DEFAULT_THEME = params_.default_theme || 'auto';
|
this.DEFAULT_THEME = params_.default_theme || 'auto';
|
||||||
this.INSTANCE_URI = params_.instance_uri;
|
this.INSTANCE_URL = params_.instance_url;
|
||||||
this.USER_ID = params_.user_id || '';
|
this.USER_ID = params_.user_id || '';
|
||||||
this.PROFILE_NAME = this.USER_ID ? params_.profile_name : '';
|
this.PROFILE_NAME = this.USER_ID ? params_.profile_name : '';
|
||||||
this.HASHTAG = params_.hashtag || '';
|
this.TIMELINE_TYPE = params_.timeline_type || 'local';
|
||||||
|
this.HASHTAG_NAME = params_.hashtag_name || '';
|
||||||
this.TOOTS_LIMIT = params_.toots_limit || '20';
|
this.TOOTS_LIMIT = params_.toots_limit || '20';
|
||||||
this.HIDE_REBLOG = typeof params_.hide_reblog !== 'undefined' ? params_.hide_reblog : false;
|
this.HIDE_REBLOG = typeof params_.hide_reblog !== 'undefined' ? params_.hide_reblog : false;
|
||||||
this.HIDE_REPLIES = typeof params_.hide_replies !== 'undefined' ? params_.hide_replies : false;
|
this.HIDE_REPLIES = typeof params_.hide_replies !== 'undefined' ? params_.hide_replies : false;
|
||||||
@ -84,13 +88,13 @@ MastodonApi.prototype.getToots = function () {
|
|||||||
let mapi = this;
|
let mapi = this;
|
||||||
let requestURL = '';
|
let requestURL = '';
|
||||||
|
|
||||||
// Get request (user toots or local timeline toots)
|
// Get request
|
||||||
if (this.HASHTAG) {
|
if (this.TIMELINE_TYPE === 'profile') {
|
||||||
requestURL = this.INSTANCE_URI + '/api/v1/timelines/tag/' + this.HASHTAG + '?limit=' + this.TOOTS_LIMIT;
|
requestURL = this.INSTANCE_URL + '/api/v1/accounts/' + this.USER_ID + '/statuses?limit=' + this.TOOTS_LIMIT;
|
||||||
} else if (this.USER_ID) {
|
} else if (this.TIMELINE_TYPE === 'hashtag') {
|
||||||
requestURL = this.INSTANCE_URI + '/api/v1/accounts/' + this.USER_ID + '/statuses?limit=' + this.TOOTS_LIMIT;
|
requestURL = this.INSTANCE_URL + '/api/v1/timelines/tag/' + this.HASHTAG_NAME + '?limit=' + this.TOOTS_LIMIT;
|
||||||
} else {
|
} else if (this.TIMELINE_TYPE === 'local') {
|
||||||
requestURL = this.INSTANCE_URI + '/api/v1/timelines/public?limit=' + this.TOOTS_LIMIT;
|
requestURL = this.INSTANCE_URL + '/api/v1/timelines/public?local=true&limit=' + this.TOOTS_LIMIT;
|
||||||
}
|
}
|
||||||
|
|
||||||
fetch(requestURL, {
|
fetch(requestURL, {
|
||||||
@ -135,12 +139,12 @@ MastodonApi.prototype.getToots = function () {
|
|||||||
// Insert link after last toot to visit Mastodon page
|
// Insert link after last toot to visit Mastodon page
|
||||||
if (mapi.LINK_SEE_MORE) {
|
if (mapi.LINK_SEE_MORE) {
|
||||||
let linkHtml = '';
|
let linkHtml = '';
|
||||||
if (this.HASHTAG) {
|
if (this.TIMELINE_TYPE === 'profile') {
|
||||||
linkHtml = '<div class="mt-footer"><a href="' + mapi.INSTANCE_URI + '/tags/' + this.HASHTAG + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
|
linkHtml = '<div class="mt-footer"><a href="' + mapi.INSTANCE_URL + '/' + mapi.PROFILE_NAME + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
|
||||||
} else if (this.USER_ID) {
|
} else if (this.TIMELINE_TYPE === 'hashtag') {
|
||||||
linkHtml = '<div class="mt-footer"><a href="' + mapi.INSTANCE_URI + '/' + mapi.PROFILE_NAME + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
|
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 {
|
} else if (this.TIMELINE_TYPE === 'local') {
|
||||||
linkHtml = '<div class="mt-footer"><a href="' + mapi.INSTANCE_URI + '/public/local' + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
|
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);
|
this.mtBodyContainer.parentNode.insertAdjacentHTML('beforeend', linkHtml);
|
||||||
}
|
}
|
||||||
|
|||||||
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,0.1)}.mt-timeline a:link,.mt-timeline a:active,.mt-timeline a{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:transparent}.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,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:hover,.mt-toot:focus{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}.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,%3Csvgxmlns: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='00128128'%3E%3Cg%3E%3Cpathd='M64128A646400118.3419.16L21.1622a606001052.8-17.17l.62-3.95A646400164128z'fill='%23404040'/%3E%3CanimateTransformattributeName='transform'type='rotate'from='06464'to='3606464'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:"..."}.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}.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}
|
||||||
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