nerv-project/brol
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Custom CSS for Mastodon for accessibility

Browse source
This commit is contained in:
Kujiu 2023-11-08 17:09:41 +01:00
parent a7e8133a89
commit 4d097a742c
1 changed files with 120 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
mastodon/custom.css Normal file
View file

@ -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;
}