From 4d097a742ce9b43f18bb07af50bae8a49b5ca084 Mon Sep 17 00:00:00 2001 From: Kujiu Date: Wed, 8 Nov 2023 17:09:41 +0100 Subject: [PATCH] Custom CSS for Mastodon for accessibility --- mastodon/custom.css | 120 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 mastodon/custom.css diff --git a/mastodon/custom.css b/mastodon/custom.css new file mode 100644 index 0000000..98883fd --- /dev/null +++ b/mastodon/custom.css @@ -0,0 +1,120 @@ +.ui__header { + height: 2em !important; +} +.columns-area__panels__main .tabs-bar__wrapper +{ + top: 2em !important; +} +.account__avatar { + width: 1.9em !important; + height: 1.9em !important; +} + +.column-header__buttons, +.column-header > .column-header__back-button, +.column-header > button, +.column-back-button { + height: 2em !important; + padding: 0 0 0 0 !important; +} + +.ui__header__links a.button { + font-size: 0.8em !important; + line-height: 1em !important; + padding: 0.3em 1em !important; +} + +a.status-link, a.status__display-name, button.status__content__translate-button, +a.status__relative-time, +a.status__relative-time time, +a.notification__display-name, +button.status__content__read-more-button, +a.detailed-status__display-name, +a.detailed-status__display-name strong.display-name__html, +a.detailed-status__datetime, +a.u-url.mention, +a.mention.hashtag, +.hashtag-bar a, +a.reply-indicator__display-name, +a.reply-indicator__display-name span, +.reply-indicator__content a span, +a.detailed-status__link span, +a.detailed-status__link i, +.hashtag-bar .link-button, +a.navigation-bar__profile-edit, +.navigation-bar a +{ + text-decoration: underline !important; + text-decoration-skip-ink:auto; +} +a.status-link:hover, a.status__display-name:hover, a.status__display-name:hover strong.display-name__html, a.status__display-name strong.display-name__html:hover, a.detailed-status__display-name:hover, a.detailed-status__display-name:hover strong.display-name__html, a.detailed-status__display-name strong.display-name__html:hover, button.status__content__translate-button:hover, +a.status__relative-time:hover, +a.status__relative-time:hover time, +a.notification__display-name:hover, +button.status__content__read-more-button:hover, +a.detailed-status__datetime:hover, +a.u-url.mention:hover, +a.mention.hashtag:hover, +.hashtag-bar a:hover, +a.reply-indicator__display-name:hover, +a.reply-indicator__display-name:hover span, +.reply-indicator__content a:hover span, +a.detailed-status__link:hover span, +a.detailed-status__link:hover i, +.hashtag-bar .link-button:hover, +a.navigation-bar__profile-edit:hover, +.navigation-bar a:hover +{ + color: #fcb140 !important; +} + +a.status-link, +a.status__display-name, +a.status__display-name strong.display-name__html, +a.detailed-status__display-name, +a.detailed-status__display-name strong.display-name__html, +a.status__relative-time, +a.status__relative-time time, +a.notification__display-name, +a.detailed-status__datetime, +a.u-url.mention, +a.mention.hashtag, +.hashtag-bar a, +a.reply-indicator__display-name, +a.reply-indicator__display-name span, +.reply-indicator__content a span, +a.detailed-status__link span, +a.detailed-status__link i, +a.navigation-bar__profile-edit, +.navigation-bar a +{ + color: #8c8dff !important; +} + +.reply-indicator__content { + color: inherit !important; +} + +.reply-indicator { + background-color: #282c37; +} + +button.icon-button, +button.text-icon-button { + outline-width: 0.1rem; + outline-style: solid; + margin: 0.15rem; +} + +/* indicate media without a description +initial code by Paul (https://linernotes.club/@balrogboogie), expanded upon by FiXato (https://contact.fixato.org) +related discussions: https://dragonscave.space/@Mayana/106443499687608116. +Feel free to reuse it; it's public domain (https://linernotes.club/@balrogboogie/106681622019395866) */ +.media-gallery__item-thumbnail img:not([alt]), +.audio-player__canvas:not([title]), +.video-player video:not([title]), +.media-gallery__gifv video:not([title]) +{ + border: .5em dashed rgba(255, 0, 0, 0.5); + box-sizing: border-box; +} \ No newline at end of file