From 2a7cb2b07bfcb73e4728ce0b012e4a62530a1e30 Mon Sep 17 00:00:00 2001 From: Valeria Fadeeva Date: Tue, 12 Dec 2023 13:21:53 +0500 Subject: [PATCH] Update --- public/json/index.html | 10 + public/json/index.js | 106 ++++ public/json/mas-tpl.html | 26 + public/json/posts.json | 391 ++++++++++++ public/json/theme.css | 1294 ++++++++++++++++++++++++++++++++++++++ 5 files changed, 1827 insertions(+) create mode 100644 public/json/index.html create mode 100644 public/json/index.js create mode 100644 public/json/mas-tpl.html create mode 100644 public/json/posts.json create mode 100644 public/json/theme.css diff --git a/public/json/index.html b/public/json/index.html new file mode 100644 index 0000000..e5edf0b --- /dev/null +++ b/public/json/index.html @@ -0,0 +1,10 @@ + + + + + + +
+ + + diff --git a/public/json/index.js b/public/json/index.js new file mode 100644 index 0000000..0c1e9f1 --- /dev/null +++ b/public/json/index.js @@ -0,0 +1,106 @@ +let tplUrl = 'mas-tpl.html'; +let response = await fetch(tplUrl); +var tpl = ""; +let log = document.getElementById('log'); +log.innerHTML = ""; + +const controller = new AbortController(); +const signal = controller.signal; + +// Cancel the fetch request in 500ms +setTimeout(() => controller.abort(), 500); + +try { + const response = await fetch(tplUrl, { signal }); + tpl = await response.text(); + +} catch (error) { + // DOMException: The user aborted a request. + console.log('Error: ', error) + log.innerHTML = "

1) Ой всё сломалось :(

"; +} + +if (!tpl) { + log.innerHTML = "

2) Ой всё сломалось :(

"; +} +// else { +// log.innerHTML = tpl; +// } + +async function fetchData() { + var log = document.getElementById('log'); + + var server_address = `techhub.social`; + + const response = await fetch('posts.json'); + + // const response = await fetch(`https://${server_address}/api/v1/accounts/111518136987654656/statuses`); + + const data = await response.json(); + + data.forEach(obj => { + let post_tpl = tpl; + var media_link = ""; + Object.entries(obj).forEach(([key, value]) => { + if (key == "id") { + post_tpl = post_tpl.replace(/{post_id}/g, `${value}`); + } + + if (key == "account") { + post_tpl = post_tpl.replace(/{id}/g, `${value.id}`); + post_tpl = post_tpl.replace(/{name}/g, `${value.display_name}`); + post_tpl = post_tpl.replace(/{server_address}/g, `${server_address}`); + post_tpl = post_tpl.replace(/{account_name}/g, `@${value.username}@${server_address}`); + // post_tpl = post_tpl.replace('{avatar}', `${value.username}'s Avatar`); + post_tpl = post_tpl.replace(/{avatar}/g, `${value.avatar}`); + post_tpl = post_tpl.replace(/{profile_link}/g, `${value.url}`); + } + + if (key == "content") { + post_tpl = post_tpl.replace('{content}', `${value}`); + } + + if (key == "media_attachments") { + value.forEach(obj1 => { + Object.entries(obj1).forEach(([k, v]) => { + if (k == "preview_url") { + media_link += ``; + } + + }); + }); + + post_tpl = post_tpl.replace('{media_attachments}', `${media_link}`); + } + + if (key == "created_at") { + post_tpl = post_tpl.replace(/{created_at}/g, `${value}`); + } + + if (key == "edited_at") { + post_tpl = post_tpl.replace(/{edited_at}/g, `${value}`); + } + + if (key == "favorites_count") { + post_tpl = post_tpl.replace(/{favorites_count}/g, `${value}`); + } + + if (key == "replies_count") { + post_tpl = post_tpl.replace(/{replies_count}/g, `${value}`); + } + + if (key == "reblogs_count") { + post_tpl = post_tpl.replace(/{reblogs_count}/g, `${value}`); + } + + // log.innerHTML = log.innerHTML + `${key} ${value}` + '
'; + }); + log.innerHTML += `${post_tpl}
`; + }); +} + +async function openInNewTab(url) { + window.open(url, '_blank').focus(); +} + +fetchData(); diff --git a/public/json/mas-tpl.html b/public/json/mas-tpl.html new file mode 100644 index 0000000..f5b2ccf --- /dev/null +++ b/public/json/mas-tpl.html @@ -0,0 +1,26 @@ +
+
+
+
+
+ * + +
+ +
+ {name} + +
+
+
+ {content} +
+
+
+ {media_attachments} +
+
#Linux#MelawyLinux#ArchLinux
+
+
+
+
diff --git a/public/json/posts.json b/public/json/posts.json new file mode 100644 index 0000000..f36b9a7 --- /dev/null +++ b/public/json/posts.json @@ -0,0 +1,391 @@ +[ + { + "id": "111538833346981161", + "created_at": "2023-12-07T11:12:10.319Z", + "in_reply_to_id": null, + "in_reply_to_account_id": null, + "sensitive": false, + "spoiler_text": "", + "visibility": "public", + "language": "ru", + "uri": "https://techhub.social/users/Melawy/statuses/111538833346981161", + "url": "https://techhub.social/@Melawy/111538833346981161", + "replies_count": 0, + "reblogs_count": 0, + "favourites_count": 0, + "edited_at": null, + "content": "", + "reblog": null, + "application": { + "name": "Web", + "website": null + }, + "account": { + "id": "111518136987654656", + "username": "Melawy", + "acct": "Melawy", + "display_name": "Melawy", + "locked": false, + "bot": false, + "discoverable": true, + "group": false, + "created_at": "2023-12-03T00:00:00.000Z", + "note": "

Founder and developer: Melawy Linux
Software Developer: Rust, Python, JavaScript, SQL.
Linux, KVM, Docker, Git

", + "url": "https://techhub.social/@Melawy", + "uri": "https://techhub.social/users/Melawy", + "avatar": "https://files.techhub.social/accounts/avatars/111/518/136/987/654/656/original/1ec75ce936565914.png", + "avatar_static": "https://files.techhub.social/accounts/avatars/111/518/136/987/654/656/original/1ec75ce936565914.png", + "header": "https://files.techhub.social/accounts/headers/111/518/136/987/654/656/original/a93374adfeeb0662.png", + "header_static": "https://files.techhub.social/accounts/headers/111/518/136/987/654/656/original/a93374adfeeb0662.png", + "followers_count": 0, + "following_count": 0, + "statuses_count": 3, + "last_status_at": "2023-12-07", + "noindex": false, + "emojis": [], + "roles": [], + "fields": [ + { + "name": "Сайт", + "value": "https://melawy.ru", + "verified_at": "2023-12-03T19:52:31.690+00:00" + } + ] + }, + "media_attachments": [ + { + "id": "111538832683581688", + "type": "image", + "url": "https://files.techhub.social/media_attachments/files/111/538/832/683/581/688/original/a87af6712ebac943.png", + "preview_url": "https://files.techhub.social/media_attachments/files/111/538/832/683/581/688/small/a87af6712ebac943.png", + "remote_url": null, + "preview_remote_url": null, + "text_url": null, + "meta": { + "original": { + "width": 1920, + "height": 1080, + "size": "1920x1080", + "aspect": 1.7777777777777777 + }, + "small": { + "width": 640, + "height": 360, + "size": "640x360", + "aspect": 1.7777777777777777 + } + }, + "description": null, + "blurhash": "UQ8}x;xbVXI:V@ofW=V@HqWAkXn$T0aei^o#" + }, + { + "id": "111538833143434254", + "type": "image", + "url": "https://files.techhub.social/media_attachments/files/111/538/833/143/434/254/original/31007d4fbffbe64d.png", + "preview_url": "https://files.techhub.social/media_attachments/files/111/538/833/143/434/254/small/31007d4fbffbe64d.png", + "remote_url": null, + "preview_remote_url": null, + "text_url": null, + "meta": { + "original": { + "width": 1920, + "height": 1080, + "size": "1920x1080", + "aspect": 1.7777777777777777 + }, + "small": { + "width": 640, + "height": 360, + "size": "640x360", + "aspect": 1.7777777777777777 + } + }, + "description": null, + "blurhash": "UD7UoAnOt:NZM_bbaKnjHqkWQ+f5OsnOb^og" + } + ], + "mentions": [], + "tags": [], + "emojis": [], + "card": null, + "poll": null + }, + { + "id": "111538831710206486", + "created_at": "2023-12-07T11:11:45.344Z", + "in_reply_to_id": null, + "in_reply_to_account_id": null, + "sensitive": false, + "spoiler_text": "", + "visibility": "public", + "language": "ru", + "uri": "https://techhub.social/users/Melawy/statuses/111538831710206486", + "url": "https://techhub.social/@Melawy/111538831710206486", + "replies_count": 0, + "reblogs_count": 0, + "favourites_count": 0, + "edited_at": null, + "content": "", + "reblog": null, + "application": { + "name": "Web", + "website": null + }, + "account": { + "id": "111518136987654656", + "username": "Melawy", + "acct": "Melawy", + "display_name": "Melawy", + "locked": false, + "bot": false, + "discoverable": true, + "group": false, + "created_at": "2023-12-03T00:00:00.000Z", + "note": "

Founder and developer: Melawy Linux
Software Developer: Rust, Python, JavaScript, SQL.
Linux, KVM, Docker, Git

", + "url": "https://techhub.social/@Melawy", + "uri": "https://techhub.social/users/Melawy", + "avatar": "https://files.techhub.social/accounts/avatars/111/518/136/987/654/656/original/1ec75ce936565914.png", + "avatar_static": "https://files.techhub.social/accounts/avatars/111/518/136/987/654/656/original/1ec75ce936565914.png", + "header": "https://files.techhub.social/accounts/headers/111/518/136/987/654/656/original/a93374adfeeb0662.png", + "header_static": "https://files.techhub.social/accounts/headers/111/518/136/987/654/656/original/a93374adfeeb0662.png", + "followers_count": 0, + "following_count": 0, + "statuses_count": 3, + "last_status_at": "2023-12-07", + "noindex": false, + "emojis": [], + "roles": [], + "fields": [ + { + "name": "Сайт", + "value": "https://melawy.ru", + "verified_at": "2023-12-03T19:52:31.690+00:00" + } + ] + }, + "media_attachments": [ + { + "id": "111538828810423496", + "type": "image", + "url": "https://files.techhub.social/media_attachments/files/111/538/828/810/423/496/original/49b1cde37f081e4a.png", + "preview_url": "https://files.techhub.social/media_attachments/files/111/538/828/810/423/496/small/49b1cde37f081e4a.png", + "remote_url": null, + "preview_remote_url": null, + "text_url": null, + "meta": { + "original": { + "width": 1920, + "height": 1080, + "size": "1920x1080", + "aspect": 1.7777777777777777 + }, + "small": { + "width": 640, + "height": 360, + "size": "640x360", + "aspect": 1.7777777777777777 + } + }, + "description": null, + "blurhash": "UW98Y|s9VsJ7V?ozbIV@L}X9bbn$TKaJe-o#" + }, + { + "id": "111538829908799325", + "type": "image", + "url": "https://files.techhub.social/media_attachments/files/111/538/829/908/799/325/original/e8167b00d422e93c.png", + "preview_url": "https://files.techhub.social/media_attachments/files/111/538/829/908/799/325/small/e8167b00d422e93c.png", + "remote_url": null, + "preview_remote_url": null, + "text_url": null, + "meta": { + "original": { + "width": 1920, + "height": 1080, + "size": "1920x1080", + "aspect": 1.7777777777777777 + }, + "small": { + "width": 640, + "height": 360, + "size": "640x360", + "aspect": 1.7777777777777777 + } + }, + "description": null, + "blurhash": "UI8}fLxvVrE1V=o#X9VsHqRObat7PBaJi^o~" + }, + { + "id": "111538830509113563", + "type": "image", + "url": "https://files.techhub.social/media_attachments/files/111/538/830/509/113/563/original/5d3cc1d1855046cf.png", + "preview_url": "https://files.techhub.social/media_attachments/files/111/538/830/509/113/563/small/5d3cc1d1855046cf.png", + "remote_url": null, + "preview_remote_url": null, + "text_url": null, + "meta": { + "original": { + "width": 1920, + "height": 1080, + "size": "1920x1080", + "aspect": 1.7777777777777777 + }, + "small": { + "width": 640, + "height": 360, + "size": "640x360", + "aspect": 1.7777777777777777 + } + }, + "description": null, + "blurhash": "UF8}Gc%OXB9XX8oJWXV?DNROaItRNEg3jYt8" + }, + { + "id": "111538831262228419", + "type": "image", + "url": "https://files.techhub.social/media_attachments/files/111/538/831/262/228/419/original/cd416011a585b7a3.png", + "preview_url": "https://files.techhub.social/media_attachments/files/111/538/831/262/228/419/small/cd416011a585b7a3.png", + "remote_url": null, + "preview_remote_url": null, + "text_url": null, + "meta": { + "original": { + "width": 1920, + "height": 1080, + "size": "1920x1080", + "aspect": 1.7777777777777777 + }, + "small": { + "width": 640, + "height": 360, + "size": "640x360", + "aspect": 1.7777777777777777 + } + }, + "description": null, + "blurhash": "UM72p:Q+Z~XnROo#bcadL}pJbvi^TeivaJo#" + } + ], + "mentions": [], + "tags": [], + "emojis": [], + "card": null, + "poll": null + }, + { + "id": "111518300393041393", + "created_at": "2023-12-03T20:10:22.306Z", + "in_reply_to_id": null, + "in_reply_to_account_id": null, + "sensitive": false, + "spoiler_text": "", + "visibility": "public", + "language": "ru", + "uri": "https://techhub.social/users/Melawy/statuses/111518300393041393", + "url": "https://techhub.social/@Melawy/111518300393041393", + "replies_count": 0, + "reblogs_count": 0, + "favourites_count": 0, + "edited_at": "2023-12-06T22:56:01.225Z", + "content": "

Melawy Linux - дистрибутив операционной системы Linux, основанный на пакетной базе Arch Linux, установщике Calamares, с индивидуально разработанным оформлением под загрузчик rEFInd, экран загрузки Plymouth, менеджер входа в систему SDDM, рабочий стол KDE Plasma.

Продукт является открытым программным обеспечением со свободной лицензией.

Проект нацелен на сегмент ПК и ноутбуков.

Приглашаем энтузиастов для совместной разработки, тестирования программ и оформления.

Проект начался в апреле 2022 года и спустя более 1,5 лет разработки дистрибутив увидел свет.

Скачать -> https://melawy.ru

Установка на виртуальную машину -> https://www.youtube.com/watch?v=waCnwyxdSS0

#Linux #MelawyLinux #ArchLinux

", + "reblog": null, + "application": { + "name": "Web", + "website": null + }, + "account": { + "id": "111518136987654656", + "username": "Melawy", + "acct": "Melawy", + "display_name": "Melawy", + "locked": false, + "bot": false, + "discoverable": true, + "group": false, + "created_at": "2023-12-03T00:00:00.000Z", + "note": "

Founder and developer: Melawy Linux
Software Developer: Rust, Python, JavaScript, SQL.
Linux, KVM, Docker, Git

", + "url": "https://techhub.social/@Melawy", + "uri": "https://techhub.social/users/Melawy", + "avatar": "https://files.techhub.social/accounts/avatars/111/518/136/987/654/656/original/1ec75ce936565914.png", + "avatar_static": "https://files.techhub.social/accounts/avatars/111/518/136/987/654/656/original/1ec75ce936565914.png", + "header": "https://files.techhub.social/accounts/headers/111/518/136/987/654/656/original/a93374adfeeb0662.png", + "header_static": "https://files.techhub.social/accounts/headers/111/518/136/987/654/656/original/a93374adfeeb0662.png", + "followers_count": 0, + "following_count": 0, + "statuses_count": 3, + "last_status_at": "2023-12-07", + "noindex": false, + "emojis": [], + "roles": [], + "fields": [ + { + "name": "Сайт", + "value": "https://melawy.ru", + "verified_at": "2023-12-03T19:52:31.690+00:00" + } + ] + }, + "media_attachments": [ + { + "id": "111535938147168430", + "type": "image", + "url": "https://files.techhub.social/media_attachments/files/111/535/938/147/168/430/original/c02c9ef9b944fca3.png", + "preview_url": "https://files.techhub.social/media_attachments/files/111/535/938/147/168/430/small/c02c9ef9b944fca3.png", + "remote_url": null, + "preview_remote_url": null, + "text_url": null, + "meta": { + "original": { + "width": 1920, + "height": 1080, + "size": "1920x1080", + "aspect": 1.7777777777777777 + }, + "small": { + "width": 640, + "height": 360, + "size": "640x360", + "aspect": 1.7777777777777777 + } + }, + "description": null, + "blurhash": "UGC$[z4n01?II;R%Rj%gIUxaxuR*%Ma}IUxa" + } + ], + "mentions": [], + "tags": [ + { + "name": "linux", + "url": "https://techhub.social/tags/linux" + }, + { + "name": "melawylinux", + "url": "https://techhub.social/tags/melawylinux" + }, + { + "name": "archlinux", + "url": "https://techhub.social/tags/archlinux" + } + ], + "emojis": [], + "card": { + "url": "https://melawy.ru", + "title": "Melawy Linux", + "description": "Melawy Linux - Arch Linux based distro", + "language": "ru", + "type": "link", + "author_name": "", + "author_url": "", + "provider_name": "Melawy Linux", + "provider_url": "", + "html": "", + "width": 512, + "height": 512, + "image": "https://files.techhub.social/cache/preview_cards/images/015/283/057/original/ca9748708815ce66.png", + "image_description": "", + "embed_url": "", + "blurhash": "UfL3M_wJ.mX8kDs9n%Shy?W;^+a{NZShj]wJ", + "published_at": null + }, + "poll": null + } +] diff --git a/public/json/theme.css b/public/json/theme.css new file mode 100644 index 0000000..48fe2fb --- /dev/null +++ b/public/json/theme.css @@ -0,0 +1,1294 @@ +Adapted from: https://userstyles.org/styles/153362/mfc-mastodon-flat-css + +/*------------------------------------------------------------------------------ +* MISC TWEAKS +* +* Miscellaneous tweaks that are more like extensions of the theme, +* rather than subsets or features. These could ostensibly be their +* own user-styles, and are only bundled in here for convenience. +* Or, they are not supported in all browsers. They may be removed +* without significantly affecting or compromising the theme. +* +* They are at the top of the style sheet for easy editing. +------------------------------------------------------------------------------*/ + +/* custom font */ +body, +.landing-page #mastodon-timeline, +.landing-page li, +.landing-page p +{ + font-family: sans-serif +} + +/* visible focus indicator */ +.focusable:focus +{border: 2px solid var(--accent) !important;} + +/* webkit scrollbars */ +::-webkit-scrollbar-track {background: rgba(0,0,0,0.4)} +::-webkit-scrollbar-thumb {background: rgba(255,255,255,0.4)} + +/* recolor scrollbars in firefox */ +html {scrollbar-color: var(--bgHead) #222;} + +/*------------------------------------------------------------------------------ +* DEFINE COLOR PALETTE +* +* Choose the CSS Variables that will be applied to recolor elements. +* The current format is to use hex codes, e.g. #00FF00. +* +* A future refactor to use rgb() instead may allow transparency mods +* via using these variables with rgba(). Hex codes currently do not +* work with rgba(), so no transparency mods are included except for +* those defined in absolute terms (i.e., non-variable colors). +* +* Foreground Colors: +* --bg: | Background for foreground elements. +* --text: | A color that stands out against bg. +* --textBold: | A color that stands out strongly against bg. +* --textMuted: | A color that stands out slightly against bg. +* +* Background Colors: +* --bgPage: | Background for non-foreground elements. +* --textPage: | A color that stands out against bgPage. +* --textPageBold: | A color that stands out strongly against bgPage. +* --textPageMuted: | A color that stands out slightly against bgPage. +* +* Highlights Colors: +* --bgHead: | Background for column headers. +* --textHead: | A color that stands out (strongly) against bgHead. +* --accent: | An accent color for links and buttons. +* --accentText: | A color that stands out (strongly) against accent. +* +* Palette advisories for choosing colors: +* - Consider using an off-white or off-black for text tones, +* but not necessary as long as there is sufficient contrast. +* - Bold colors are highly recommended to be strong colors, +* like pure white or pure black. +* - Muted colors can be off-grey or any mid-tone with slight contrast. +* - It might be best to base the background palette on a slightly +* darker or lighter version of the foreground palette, but +* this is no longer strictly necessary; you may use mixed palettes. +* It is now possible to use a dark bgPage and light bg, or vice-versa. +------------------------------------------------------------------------------*/ + +:root { +--bg: #282c37; +--text: #d0d8e0; +--textBold: #fff; +--textMuted: #6c737b; + +--bgPage: #282c37; +--textPage: var(--text); +--textPageBold: var(--textBold); +--textPageMuted: var(--textMuted); + +--bgHead: #151515; +--textHead: var(--textBold); +--accent: #8c8dff; +--accentText: var(--textBold); +} + +/* My changes */ + +.drawer__header, .search__input { + background-color: var(--bgHead) !important; +} + +.compose-form, .navigation-bar { + padding-left: 0; + padding-right: 0 +} + +.compose-form .autosuggest-textarea__textarea, +.compose-form .spoiler-input__input, +.compose-form__uploads-wrapper, +.compose-form__sensitive-button, +.upload-progress { + background-color: #191919; +} + +.autosuggest-textarea__textarea { + color: var(--text) !important; +} + +.compose-form__buttons-wrapper { + background-color: #101010 !important; +} + +.emoji-button { + filter: brightness(0.4) +} + +.emoji-button:hover { + filter: brightness(0.7) +} + +.status__content__spoiler-link { + background-color: var(--bgHead) !important; +} + +.status__content__spoiler-link:hover { + background-color: var(--accent) !important; +} + +.sidebar { + background-color: var(--bg); +} + +/* Remove profile borders */ + +.account__header__bio .account__header__fields { + border-top: none; +} + +.account__header__bar { + border-bottom: none; +} + +/*------------------------------------------------------------------------------ +* FOREGROUND COLOR PALETTE ===================================================== +*------------------------------------------------------------------------------/ + +/*---------------------- +base background and text +----------------------*/ + +/* status columns */ + .column>.scrollable, + .status, + .status__content, + .detailed-status, + .detailed-status__action-bar, + .focusable:focus .detailed-status, + .focusable:focus .detailed-status__action-bar, + .setting-text, + .setting-text:active, + .setting-text:focus, + /*.status-direct .status__content .status__content__spoiler-link,*/ + .column-link, + .getting-started a.column-link, +/* search */ + /*.search__input, + .search__input:focus,*/ + .search-results .account, + .trends__item, + .trends__item__name a, + .trends__item__current, +/* compose form */ + .reply-indicator__content, /* in reply to */ + /* + .compose-form .spoiler-input__input, + .compose-form .autosuggest-textarea__textarea, + .compose-form .compose-form__modifiers, + .compose-form .compose-form__buttons-wrapper, */ +/* settings page */ + .simple_form textarea, + .simple_form textarea:active, + .simple_form textarea:focus, + .simple_form input[type=email], + .simple_form input[type=email]:active, + .simple_form input[type=email]:focus, + .simple_form input[type=number], + .simple_form input[type=number]:active, + .simple_form input[type=number]:focus, + .simple_form input[type=password], + .simple_form input[type=password]:active, + .simple_form input[type=password]:focus, + .simple_form input[type=text], + .simple_form input[type=text]:active, + .simple_form input[type=text]:focus, + .table td, + .table th, + .table.inline-table>tbody>tr:nth-child(odd)>td, + .table.inline-table>tbody>tr:nth-child(odd)>th, + .table>tbody>tr:nth-child(odd)>td, + .table>tbody>tr:nth-child(odd)>th, + .column-inline-form label, +/* modals */ + .actions-modal, + .boost-modal, + .confirmation-modal, + .mute-modal, + .report-modal, + .report-modal__statuses .status__content, + .report-modal__statuses .status__content p, + .report-modal__comment .setting-toggle__label, + .list-editor, + .list-editor .drawer__inner.backdrop, + .account__moved-note, +/* profile cards */ + .card__bar, + .card>a:active .card__bar, + .card>a:focus .card__bar, + .card>a:hover .card__bar, +/* public pages */ + .activity-stream .entry, + .landing-page #mastodon-timeline, + .landing-page #mastodon-timeline p, + .landing-page__forms, + .landing-page__information, + .landing-page li, + .landing-page p, + .landing-page .features-list .features-list__row .text, + .landing-page .features-list .features-list__row .visual .fa, + .landing-page__short-description h1, + .landing-page .separator-or span, + .box-widget, + .contact-widget, + .landing-page__information.contact-widget, + .rich-formatting li, + .rich-formatting p, + .public-layout .public-account-bio .account__header__content, + .public-layout .public-account-bio .roles, + .public-layout .public-account-bio__extra, + .public-layout .public-account-header__bar::before, + .account__header__fields dt, + .account__header__fields dd, + .hero-widget__text, + .load-more, + .button.button-secondary +{ + background: var(--bg); + color: var(--text) +} + +/*-------------------- +override for bold text +--------------------*/ + +/* primary elements */ + .account__display-name strong, + .status__display-name strong, + .detailed-status__display-name strong, + .card__bar .display-name strong, + .account__action-bar__tab strong, /* profile counters */ +/* public pages */ + .landing-page h3, + .landing-page h4, + .landing-page em, + .landing-page h5, + .landing-page h6, + .rich-formatting h3, + .rich-formatting h4, + .public-layout .public-account-header__tabs__tabs .counter .counter-number, + .account__header__fields dt +{ + color: var(--textBold) +} + +/*--------------------- +override for muted text +---------------------*/ + +/* secondary elements */ + .display-name__account, + .account .account__display-name, + .card__bar .display-name span, + .detailed-status__meta, + .status__relative-time, + .status__action-bar__counter__label, + .status__prepend, + .status__prepend .status__display-name strong, + .attachment-list.compact .fa, + .icon-button, + .icon-button.disabled, + .icon-button.active:hover, + .account__action-bar__tab>span, + .compose-form .icon-button.inverted, + .compose-form .text-icon-button, + .compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter, + .upload-progress, + .search__icon .fa, + .search__icon .fa-times-circle, + .trends__item__name, + .notification__message, + .account__moved-note__message, + .muted .status__content a, + .muted .status__content p, + .muted .status__display-name strong, + .attachment-list__list a, + a.table-action-link, + .table a.table-action-link, + button.table-action-link, + .status__wrapper--filtered, +/* public pages */ + .landing-page__short-description h1 small, + .landing-page__short-description h1 small span, + .simple_form p.hint.subtle-hint, + .public-layout .public-account-bio .roles, + .public-layout .public-account-bio__extra, + .public-layout .public-account-header__tabs__tabs .counter, + .load-more, + .account__disclaimer, + .hashtag-bar +{ + color: var(--textMuted) +} + +.hashtag-bar span, .hashtag-bar span a, .hashtag-bar a +{ + color: inherit; +} + +/*------------------------------------------------------------------------------ +* BACKGROUND COLOR PALETTE ===================================================== +*------------------------------------------------------------------------------/ + +/*---------------------- +base background and text +----------------------*/ + +/* background and drawer */ + .ui, + /*.drawer__tab,*/ + .tabs-bar, + .search-results__section h5, + .account__section-headline, + .account__section-headline button, + .notification__filter-bar, + .notification__filter-bar button, +/* DMs */ + .status.status-direct, + .focusable:focus .status.status-direct, + .status-direct .status__content, + .notification-favourite .status.status-direct, +/* column preferences */ + .column-settings__section, + .column-header__collapsible, + .column-header__collapsible-inner, + .column-header__button.active, + .setting-meta__label, + .setting-toggle__label, + .column-subheading, + .content-wrapper, + .media-spoiler, + .video-player__spoiler, + .video-player__spoiler.active:active, + .video-player__spoiler.active:focus, + .react-toggle-track, +/* in reply to */ +.reply-indicator, + .reply-indicator__display-name, + .reply-indicator__content, + .reply-indicator__cancel .icon-button.inverted, + /*.reply-indicator__content .status__content__spoiler-link,*/ +/* cw show more */ + .status__content .status__content__spoiler-link, + .compose__action-bar .icon-button, +/* settings page */ + .admin-wrapper .sidebar-wrapper, + .admin-wrapper .sidebar ul a, + .admin-wrapper .sidebar ul a.selected, + .admin-wrapper .sidebar ul ul a, + .admin-wrapper .content h2, + .admin-wrapper .content h6, + .simple_form .input.with_label .label_input>label, + .simple_form .input.with_label.boolean .label_input>label, + .simple_form .input.with_block_label>label, + .simple_form .check_boxes .checkbox label, + .simple_form .input.radio_buttons .radio label, + .label_input, + .input input, +/* modals */ + .boost-modal__action-bar, + .confirmation-modal__action-bar, + .mute-modal__action-bar, + .confirmation-modal__action-bar .confirmation-modal__cancel-button, + .confirmation-modal__action-bar .mute-modal__cancel-button, + .mute-modal__action-bar .confirmation-modal__cancel-button, + .mute-modal__action-bar .mute-modal__cancel-button, + .error-column, + .regeneration-indicator, + .empty-column-indicator, + .report-modal__comment .setting-text, +/* opengraph previews */ + .status-card__content, + .status-card__description, + .status-card__image, + .button:disabled, +/* public pages */ + body, + body.lighter, + .button.button-alternative, + .button.button-alternative-2, + .landing-page__call-to-action, + .public-layout .header .nav-button, + .nothing-here +{ + background: var(--bgPage); + color: var(--textPage) +} + +/*-------------------- +override for bold text +--------------------*/ + +/* strong elements */ + .navigation-bar strong, + .status-card__title, + .status-direct .display-name strong, + .reply-indicator__display-name strong, + .admin-wrapper .content>p strong, + .simple_form strong, + .regeneration-indicator__label strong, + .account__section-headline a.active, +/* public pages */ + .information-board__section, + .information-board__section span:last-child, + .endorsements-widget .display-name__html, + .endorsements-widget h4, + .pagination .page, + .pagination .gap, + .pagination .newer, + .pagination .older, + .pagination a +{ + color: var(--textPageBold) +} + +/*--------------------- +override for muted text +---------------------*/ + +/* de-emphasized elements */ + .navigation-bar, + .getting-started, + .getting-started p, + .column-subheading, + .account__section-headline a, + .status-direct .icon-button, + .status-direct .display-name, + .status-direct .status__relative-time, + .status-direct .status__action-bar__counter__label, + .status-direct.muted .status__content p, + .status-direct.muted .status__content a, + .status-direct.muted .display-name strong, + .notification-favourite .status.status-direct .icon-button.disabled, + .simple_form p.hint, + .simple_form span.hint, + .admin-wrapper .content .muted-hint, + .admin-wrapper .content>p, + .status-card__host, + .button:disabled, + .loading-indicator, +/* public pages */ + .endorsements-widget .display-name__account, + .public-layout .footer h4, + .public-layout .footer ul a, + .public-layout .footer ul li, + .public-layout .footer .grid .column-2 h4 a, + .public-layout .header .nav-button, +/* log in, sign up, forgot passwd */ + .form-footer a, + .lighter .simple_form p.hint.subtle-hint +{ + color: var(--textPageMuted) +} + +.status__info { + align-items: center; + cursor: pointer; + display: flex; + font-size: 15px; + gap: 10px; + justify-content: space-between; + padding-bottom: 10px; +} + +.status__relative-time { + color: #606984; + display: block; + flex: 0 0 auto; + font-size: 15px; + height: 40px; + line-height: 22px; + order: 2; +} + +.status__info .status__display-name { + align-items: center; + display: flex; + font-size: 15px; + gap: 10px; + line-height: 22px; + max-width: 100%; + overflow: hidden; +} + +.reply-indicator__content a.unhandled-link, .status__content a.unhandled-link { + color: var(--accent); +} + +.reply-indicator__content p, .status__content p { + white-space: pre-wrap; +} + +.reply-indicator__content, .status__content { + word-wrap: break-word; + color: #fff; + font-size: 15px; + font-weight: 400; + line-height: 22px; +} + +.status__content--with-action { + cursor: pointer; +} + +.status { + cursor: auto; +} + +a.unhandled-link { + color: var(--accent); +} + +/*------------------------------------------------------------------------------ +* HIGHLIGHTS COLOR PALETTE ===================================================== +*------------------------------------------------------------------------------/ + +/*------------------ +headers and warnings +------------------*/ + +/* columns view */ + .column-header, + .column-header__button, + .column-header__back-button, + .column-header__button:hover, + .column-header__back-button:hover, + .column-back-button, + .column-header>.column-header__back-button, + .column-header.active .column-header__icon, + .search-results__header, + .keyboard-shortcuts kbd, + .compose-form__warning, + .compose-form .compose-form__warning, + .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track, + .report-modal__target, + .media-modal__close.icon-button, +/* settings pages */ + .list-editor h4, + .admin-wrapper .content h4, + .admin-wrapper .sidebar ul ul a.selected, + .flash-message, + .flash-message.notice, + .column-inline-form, + .column-inline-form .icon-button, + .simple_form .warning, + .table-form .warning, + .pagination .current, + .account-role +{ + background: var(--bgHead); + color: var(--textHead) +} + +/*-------------- +accented buttons +--------------*/ + +/* primary buttons */ + .button, + .button:active, + .button:focus, + .button:hover, + .icon-button.overlayed:hover, + .floating-action-button, + .simple_form button, + .simple_form button:active, + .simple_form button:focus, + .simple_form button:hover, + .simple_form .button, + .simple_form .button:active, + .simple_form .button:focus, + .simple_form .button:hover, + .simple_form .block-button, + .simple_form .block-button:active, + .simple_form .block-button:focus, + .simple_form .block-button:hover, + .button.button-alternative:hover, + .button.button-alternative-2:hover, + .column-link:hover, + .getting-started a.column-link:hover, + .column-header__button:hover, + .column-header__button.active:hover, + .column-header__back-button:hover, + .column-back-button:hover, + .drawer__header a:hover, + .react-toggle--checked .react-toggle-track, + .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track, + .privacy-dropdown.active .privacy-dropdown__value.active, + .privacy-dropdown__option:hover, + .privacy-dropdown__option.active, + .privacy-dropdown__option.active:hover, + .admin-wrapper .sidebar ul a:hover, + .admin-wrapper .sidebar ul ul a.selected:hover, + .reply-indicator__content .status__content__spoiler-link:hover, + .status__content .status__content__spoiler-link:hover, + .load-more:hover, +/* modals */ + .confirmation-modal__action-bar .confirmation-modal__cancel-button:active, + .confirmation-modal__action-bar .confirmation-modal__cancel-button:focus, + .confirmation-modal__action-bar .confirmation-modal__cancel-button:hover, + .confirmation-modal__action-bar .mute-modal__cancel-button:active, + .confirmation-modal__action-bar .mute-modal__cancel-button:focus, + .confirmation-modal__action-bar .mute-modal__cancel-button:hover, + .mute-modal__action-bar .confirmation-modal__cancel-button:active, + .mute-modal__action-bar .confirmation-modal__cancel-button:focus, + .mute-modal__action-bar .confirmation-modal__cancel-button:hover, + .mute-modal__action-bar .mute-modal__cancel-button:active, + .mute-modal__action-bar .mute-modal__cancel-button:focus, + .mute-modal__action-bar .mute-modal__cancel-button:hover, + .upload-progress__tracker, +/* public pages */ + .public-layout .header .nav-button:hover, + .button.button-secondary:hover, +/* settings pages */ + .pagination .page.current:hover, +/* video player ui */ + .video-player__seek__buffer, + .video-player__seek__progress, + .video-player__volume__current, + .video-player__volume__handle +{ + background: var(--accent); + color: var(--accentText); +} + +/*------------ +accented links +------------*/ + +/* status links */ + .status__content a, + .status__content a:not(.mention), + .getting-started a, + .getting-started p a, + .reply-indicator__content a, + .reply-indicator__content a:not(.mention), + .reply-indicator__cancel .icon-button.inverted:hover, + .status__content__read-more-button, + .icon-button.active, + .icon-button:focus, + .icon-button:hover, + .search__icon .fa:hover, + .notification-follow .account .icon-button:hover, + .notification__message .fa, + .notification__display-name:hover, + .admin-wrapper .content .muted-hint a, + .table a, + a.table-action-link:hover, + button.table-action-link:hover, + .media-spoiler:active, + .media-spoiler:focus, + .media-spoiler:hover, + .video-player__spoiler.active:hover, + .column-header__setting-btn:hover, + .column-inline-form .icon-button:hover, +/* post options */ + .compose-form .text-icon-button:hover, + .text-icon-button.active, + .drawer__inner .icon-button:hover, + .icon-button.inverted.active.disabled, + .navigation-bar__profile-edit:hover, + .navigation-bar__profile-account:hover, + .account__action-bar-dropdown .icon-button:hover, + .account__section-headline a:hover, + .compose-form .compose-form__warning a, +/* modals */ + .list-editor .account .icon-button:hover, + .list-editor .account .icon-button:active, + .list-editor .account .icon-button:focus, + .report-modal__statuses .status__content a + .media-modal__close.icon-button:hover, + .media-modal__close.icon-button:focus, +/* public pages */ + .landing-page__short-description p a, + .landing-page #mastodon-timeline p a, + .simple_form p.hint.subtle-hint a, + .contact-widget__mail a, + .public-layout .footer ul a:hover, + .public-layout .footer .grid .column-2 h4 a:hover, + .public-layout .public-account-bio .account__header__fields a, + .form-footer a:hover, +/* settings pages */ + .pagination a:hover, + .pagination .newer:hover, + .pagination .older:hover, +/* mobile elements */ + .tabs-bar__link.active +{ + color: var(--accent) +} + +/*------------------------------------------------------------------------------ +* FIXES +* +* Due to the extensive level of recolors, some elements will need slight fixes. +* This section contains any overrides that are mostly necessary to beautify or +* otherwise make elements look like they belong in the new palette. +*------------------------------------------------------------------------------/ + +@media screen and (max-width: 600px) { + .public-layout .public-account-header__bar + {background: var(--bg)} + .public-layout .public-account-header__tabs__name h1, + .public-layout .public-account-header__extra__links a strong + {color: var(--textBold)} + .public-layout .public-account-header__extra__links a, + .public-layout .public-account-header__tabs__name h1 small + {color: var(--textMuted)} +} + +@media screen and (max-width: 415px) { + .public-layout .card-grid>div .card__bar + {background: var(--bg)} + .public-layout .card-grid>div .card__bar:active, + .public-layout .card-grid>div .card__bar:focus, + .public-layout .card-grid>div .card__bar:hover + {background: var(--bgPage)} +} + +/* transparent drawer / gs columns */ +.getting-started, + .getting-started__wrapper, +/*.drawer__header,*/ +.flex-spacer, +.focusable:focus, +.drawer__inner.darker +{background: none} + +/* make search results look better*/ +.search__icon .fa.active {opacity: 1} +.drawer__inner {height: auto;} + +/* triangle tab popout (from toots/replies/media) */ +.account__section-headline a.active:after, + .account__section-headline a.active:before, + .community-timeline__section-headline a.active:after, + .community-timeline__section-headline a.active:before, + .public-timeline__section-headline a.active:after, + .public-timeline__section-headline a.active:before +{ + border-color: transparent transparent var(--bg) +} + +/* color trending taglines with accent color */ +.trends__item__sparkline path {stroke: var(--accent) !important} + +/* hover feedback for buttons //todo: make this look better */ +.button:hover, + .block-button:hover, + .simple_form button:hover, + .compose-form__publish button:hover +{text-decoration: underline} + +/* fixes for 70ch maxwidths */ +.landing-page__footer p {margin: 0 auto} + +/* remove black artefacts from settings menu */ +.admin-wrapper .sidebar ul, + .admin-wrapper .sidebar ul a, + .admin-wrapper .sidebar ul a.selected, + .admin-wrapper .sidebar ul ul +{border-radius: 0} + +/* make tables in settings look consistent //todo:cleanup */ +.admin-wrapper .content h4 {padding: 8px; font-weight: 700; font-size: 16px} +.table thead th, .table thead td {font-family: "Arial Black"} +.table td:first-child, .table>tbody>tr:nth-child(odd)>td:first-child +{background: rgba(0,0,0,0.5); color: #ddd} +.column-inline-form label input {padding: 6px} + +/*--------------- +public page fixes +---------------*/ + +/* colorize logo */ +.landing-page__logo img { + filter: sepia(100%) hue-rotate(160deg) saturate(400%) brightness(40%); + mix-blend-mode: normal +} + +/* add shadow to help with visibility on light bg */ +.brand img {filter: drop-shadow(1px 1px 1px black)} + +/* footer logo recolor */ +.public-layout .footer .brand svg path {fill: var(--textPageMuted)} +.public-layout .footer .brand:hover svg path {fill: var(--accent)} + +/* cleanup stray background elements */ +.endorsements-widget .account, +.public-layout .header, +.public-layout .public-account-header__bar .avatar img, +.simple_form .input-with-append .append::after, +.public-layout .header .brand:active, +.public-layout .header .brand:focus, +.public-layout .header .brand:hover +{background: none} + +/* flatten toots view */ +.activity-stream, + .activity-stream .entry:first-child .status, + .activity-stream .entry:first-child .detailed-status, + .activity-stream .entry:first-child .load-more, + .activity-stream .entry:last-child .status, + .activity-stream .entry:last-child .detailed-status, + .activity-stream .entry:last-child .load-more, +.public-layout .header, +.nothing-here +{box-shadow: none; border-radius: 0px} + +/* toots, following, followers */ +.public-layout .public-account-header__tabs__tabs .counter::after +{border-bottom: 4px solid var(--textMuted)} +.public-layout .public-account-header__tabs__tabs .counter.active::after, +.public-layout .public-account-header__tabs__tabs .counter:hover::after +{border-bottom: 4px solid var(--accent)} + +/* make profile field keys bold */ +.account__header__fields dt {font-weight: 700} + +/* improve avatar and profile-card look */ +.card__bar .avatar img {background: none} +.card__img {background: rgba(0,0,0,0.5)} + +/*--------------- +deal with borders +---------------*/ + +/* remove most borders */ +.status-card, +.setting-text, +.flash-message.notice, +.account__moved-note, +.account__header__fields dl, + .account__header .account__header__fields dl, +.account__section-headline, +.notification__filter-bar, +.search-results__section h5, +.public-layout .public-account-header__bar .avatar img, + .public-layout .public-account-header__tabs__tabs .counter +{border: none} + +/* recolor some other borders */ +.account, +.status, + .status__wrapper--filtered, +.load-gap, +.loading-indicator__figure, +.button.button-secondary, +.account__header__fields, + .account__header__fields dl:last-child, +.account__action-bar, + .account__action-bar__tab, +.account__disclaimer, +.admin-wrapper .content h4 +{border-color: var(--textPageMuted) !important} + +/* active tabs */ +.account__action-bar__tab {border-bottom: 0px solid transparent} +.account__action-bar__tab.active, +.tabs-bar__link.active +{border-bottom-color: var(--accent) !important} + +/* fix detailed status borders */ +.detailed-status__action-bar +{border-color: transparent transparent var(--bgPage) transparent !important} + +/* domain blocks and report modal */ +.domain, +.report-modal__container, + .report-modal__comment, + .report-modal__comment:active, + .report-modal__comment:focus, + .report-modal__comment .setting-text, + .status-check-box +{border-color: var(--bgPage)} +.domain .domain__domain-name {background: transparent} + +/*------------------------------------------------------------------------------ +* ADDITIONS AND MODS +* +* Tweaks and redesigns that improve the look of the overall style. +* These may be enabled or disabled, but are recommended to enable. +* They may also be extensions, but not "miscellaneous" enough. +*------------------------------------------------------------------------------/ + +/* +* Add a line break between display name and account handle: +* - this allows user/display names to expand more. +*/ +.display-name__html {display: block;} + +/* +* Always show full name and handle: +* - this removes the `...` and allows text to overflow past the column. +* - this can look worse, but it can also prevent having to mouse over +* to see the full name or handle. +*/ + + +/* +* Rounded avatars: +* - adjust the border radius around all avatar elements. +* - default override is 50% (i.e. turn squares into circles), +* but you can set it to whatever you want. +*/ +.card .avatar img, .activity-stream .status.light .status__avatar img, .account__avatar, .account__avatar img, .account__avatar-overlay-base, .account__avatar-overlay-overlay +{ + border-radius: 50%; + width: 46px; + height: 46px; +} + +.u-photo { + width: 46px; + height: 46px; +} + +.logo, .logo--icon { + width: 46px; + height: 46px; +} + +/* +* Fade out faved/boosted toots in notifications: +* - for "x favourited your toot" / "x boosted your toot", +* - make the faved/boosted toot half-transparent. +*/ +.status.muted {opacity: 0.5} + +/* +* Collapse fave/boost notifications +* - limits display to just a few lines (~3), so you can at least identify it +* - hides the display name, because you already know you posted it +* - tighter margins, remove space between CW and content +* - hides the buttons, but you can expand a status to interact with it +*/ + +.notification-favourite .status, +.notification-reblog .status { + max-height: 4em; + overflow: hidden; +} +.notification-favourite .display-name, +.notification-reblog .display-name { + display: none; +} +.notification-favourite .status__content, +.notification-reblog .status__content { + margin-top: -4px; +} +.notification-favourite .status__content p, +.notification-reblog .status__content p { + margin-bottom: 0px; +} +.notification-favourite .status__action-bar, +.notification-reblog .status__action-bar { + display: none; +} + +/* +* Release elephant friend from their confines: +* - elephant friend will now hang out in the corner of your browser, +* instead of being trapped in the drawer. +*/ +.drawer__inner, .drawer__inner__mastodon { + background: none; z-index: 0 +} +.drawer__inner__mastodon > img { + position: fixed; + bottom: 0; + left: 0; + height: 180px; + z-index: -1 +} +.compose-form {z-index: 1} +.drawer__inner {height: 100%} /* firefox bug highlights drawer text on click */ + +/* +* Make "getting started" column height consistent with all other columns: +* - puts the footer back at the bottom of the page, instead of floating. +*/ +.getting-started { + height: 100%; + display: flex; + flex-flow: column; + justify-content: space-between +} + +/* +* Remove the checker-board background from the media modal: +* - this makes transparent images actually transparent +*/ +.media-modal canvas, +.media-modal img +{background: none} + +/* +* Fix glowing elements when there are new toots to be fetched +* - this is technically a fix, but it hasn't been fully fixed. +* //todo: try to find a way to make this look good against bgHead +*/ +.column-header.active .column-header__icon { + text-shadow: 0 0 10px var(--accent); +} +.column-header.active { + box-shadow: 0 0 0; +} +.column-header__wrapper.active:before { + background: radial-gradient(ellipse, var(--accent) 0, rgba(0,0,0,0) 60%); +} + +/* +* Fix highlights on unread DM conversations +* - new conversations view in 2.6.0 +* - 2.6.0 adds highlight, :not(.read) has its own bg +* - instead, let's add a dot next to the timestamp +*/ +.status.status-direct:not(.read) {background: var(--bgPage);} +.column[aria-label="Direct messages"] .status.status-direct:not(.read) .status__relative-time:before +{ + content: "⏺ "; + font-size: 1em; + color: var(--accent); +} + +/* ------------------------------------------------------------ +various tweaks related to making account view look a bit better +-------------------------------------------------------------*/ + +/* profile field keys //todo */ +.account__header .account__header__fields dd, +.public-account-bio .account__header__fields dd +{background: var(--bg); color: var(--text)} + +/* profile field values //todo */ +.account__header .account__header__fields dt, +.public-account-bio .account__header__fields dt +{background: var(--bg); color: var(--text)} + +/* verified links */ +.account__header .account__header__fields dd.verified +{background: var(--bg)} + +/* bold profile field keys */ +.account__header .account__header__fields dt +{font-weight: 700} + +/* view profile - shadow overlay style */ +.account__header {background: var(--bgHead)} +.account__header>div {background: rgba(0,0,0,0.5)} +.account__header .account__header__display-name {color: #fff} +.account__header .account__header__content {color: #eee} +.account__header .account__header__content a, +.account__header__fields a +{color: var(--accent)} + +/* padded background around @handle */ +.account__header .account__header__username { + display: inline-block; + padding: 7px 7px 8px 7px; + border-radius: 8px; + margin-bottom: 0px; + background: rgba(0,0,0,0.6); + color: #ccc; +} + +/* adjust margins to account for padding */ +.account__header__content p {margin-bottom: 16px;} + +/* floating follow/edit profile button */ +.account--action-button {background: rgba(255,255,255,0.5); padding: 0.5em; border-radius: 50%;} +.account--action-button .icon-button, .account--action-button .icon-button.active {color: #fff} +.account--action-button:hover {background: var(--accent)} +.account--action-button:hover .icon-button {color: var(--accentText)} + +/* account page tab underline */ +.card .counter.active:after {border-bottom: 4px solid var(--accent)} + +/* make footer logo visible against light bg */ +.footer .powered-by a { + filter: drop-shadow( + 0px 0px 2px rgba(0,0,0,0.6) + ) +} + +/* +Hide buttons that can't be clicked +- columns on /about and tag pages have buttons that don't work. +- so, this snippet hides those nonworking buttons to save space +- and to avoid confusion. +- unboostable buttons are made transparent on hover instead. +*/ +.status__action-bar .icon-button.disabled:hover, +.notification-favourite .status.status-direct .icon-button.disabled:hover +{ + color: transparent !important +} +#mastodon-timeline .status__action-bar {display: none} + +/*----------------------- +material design overrides +-----------------------*/ + +/* turn statuses into cards */ +.drawer__inner.darker {filter: drop-shadow(0 0 2px black); background: transparent} +.status { + box-shadow: 0px 0px 2px black; + background: var(--bg); + margin: 8px; + border-radius: 2px; + border: 0 +} +.status__wrapper--filtered {border: none} +.detailed-status__wrapper {margin: 8px;} /*might look weird in older versions pre-2.6?*/ + +/* recolors */ +.column>.scrollable, +.landing-page #mastodon-timeline, +.activity-stream .entry + {background: none !important} +.account-timeline__header, +.account + {background: var(--bg)} +.notification .account, +.load-more + {background: var(--bgPage)} +.status__prepend, +.notification__message, +.status__prepend .status__display-name strong, +.keyboard-shortcuts + {color: var(--textPage) !important} +.notification-follow .display-name__html + {color: var(--textPageBold)} +.notification-follow .display-name__account, +.notification-follow .account .icon-button, +.status__wrapper--filtered, +.load-more + {color: var(--textPageMuted)} + +/* triangle tab indicator */ +.account__section-headline a.active:after, +.account__section-headline a.active:before, +.community-timeline__section-headline a.active:after, +.community-timeline__section-headline a.active:before, +.public-timeline__section-headline a.active:after, +.public-timeline__section-headline a.active:before, +.notification__filter-bar button.active::before, +.notification__filter-bar button.active::after +{ + border-color: transparent transparent var(--bgHead) +} + +/* fix rounding on end toots in stream */ +.activity-stream .entry:first-child .status, +.activity-stream .entry:last-child .status +{border-radius: 2px} + +/* remove borders from account view */ +.account, .account__header__fields, .account__header__fields dl:last-child, .account__action-bar, .account__action-bar__tab, .account__disclaimer +{border: none} + +/*------------------------------------------------------------------------------ +* RECOLOR STATUS ACTIONS +* +* This tweak gets its own section because it's pretty messy and long. +* +* Replies, follows, faves, dropdown menu, and share can easily be themed, +* but I can't figure out how to make them look good against the palette. +* Manual color selection may be required, if these colors don't fit well. +* +* Recoloring boosts is another nightmare altogether, because of improper +* SVG embedding in the background-image rather than directly in HTML. +* This leads to two options: +* +* 1) attempt to use filter() to manually add sepia tones and hue-shift +* - complicated and imprecise adjustments of filter() +* - cannot use CSS variables in url()s (as in background-image) +* + however, it does preserve the SVG boosting animation +* +* 2) replace the background-image with a mask-image +* + less complicated; override background-image with color +* + can apply CSS variable colors from palette easily +* - requires extremely long rule to add mask-image +* - breaks boosting animation +* +* I have chosen option 2. +------------------------------------------------------------------------------*/ + + /* add shadow on hover and active states */ +.status__action-bar .icon-button:hover, + .status__action-bar .icon-button:active, + .status__action-bar .icon-button.active, +.detailed-status__action-bar .icon-button:hover, + .detailed-status__action-bar .icon-button:active, + .detailed-status__action-bar .icon-button.active +{filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.6))} + +/* replies and follows */ +.status__action-bar-button.icon-button:nth-child(1):hover, +.status__action-bar-button.icon-button:nth-child(1):active, +.status__action-bar-button.icon-button:nth-child(1).active, +.status__action-bar-button.icon-button:nth-child(1):focus, +.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:hover, +.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:active, +.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button.active, +.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:focus, +.notification__message .fa.fa-user-plus, +.account .icon-button:active, +.account .icon-button.active, +.account .icon-button:focus, +.account .icon-button:hover +{color: #0bf;} + +/* favourites */ +.status__action-bar-button.icon-button:nth-child(3):hover, +.status__action-bar-button.icon-button:nth-child(3):active, +.status__action-bar-button.icon-button:nth-child(3).active, +.status__action-bar-button.icon-button:nth-child(3):focus, +.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button:hover, +.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button:active, +.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button.active, +.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button:focus, +.notification__favourite-icon-wrapper .star-icon +{color: #f90;} + +/* menu */ +.status__action-bar-dropdown .icon-button:hover, +.status__action-bar-dropdown .icon-button:active, +.status__action-bar-dropdown .icon-button.active, +.status__action-bar-dropdown .icon-button.focus, +.detailed-status__action-bar-dropdown .icon-button:hover, +.detailed-status__action-bar-dropdown .icon-button:active, +.detailed-status__action-bar-dropdown .icon-button.active, +.detailed-status__action-bar-dropdown .icon-button:focus +{color: #90f;} + +/* share */ +.icon-button:hover .fa-share-alt +{color: #f09;} + +/* boosts */ +.notification__message .fa.fa-retweet, +.icon-button:hover .fa-retweet +{color: #0d9;} + +/* fully recolor boosts (while breaking animation) */ +button.icon-button:hover i.fa-retweet, +button.icon-button.active i.fa-retweet +{background: #0d9 !important;} + +.no-reduce-motion button.icon-button i.fa-retweet, + button.icon-button i.fa-retweet, + button.icon-button:hover i.fa-retweet, + button.icon-button.active i.fa-retweet +{ +background: var(--textMuted); +mask: url("data:image/svg+xml;utf8,"); +-webkit-mask-image: url("data:image/svg+xml;utf8,"); +}