Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
MastodonのCSS hotfixと個人的なカスタマイズ集
/* CUSTOMS */
/* sizes */
.search__input, .autosuggest-textarea__textarea { font-size: 14px;}
.status__info { font-size: 14px; }
.status__content, .reply-indicator__content { font-size: 14px; }
.status__action-bar { margin-top: 5px; }
/* media */
.media-gallery__item:nth-child(2):last-child .media-gallery__item-thumbnail { background-size: contain; }
.status > .media-gallery { height: 140px !important; }
/* 3 columns */
@media screen and (max-width: 1300px) { .column:nth-child(3) { display: none; } }
/* show abs time on hover */
time:hover span { display: none; }
time:hover:after { content: attr(title); }
/* FIXES */
/* fix centering paginator buttons for ja translation @kktCSS v9.0*/
.onboarding-modal__paginator>div {
min-width: 5em;
text-align: center;
}
/* FIXES for 1.3*/
/* confirmation modal on small screen @tootsuite#2743 */
@media screen and (max-width: 479px) {
.app-holder[data-react-class="Mastodon"] .confirmation-modal {
max-width: 280px;
}
}
/* fix vertical alignment of status actions (reply, boost, fav, etc.) @kktCSS v9.1*/
.app-holder[data-react-class="Mastodon"] .status__action-bar .icon-button > i {
vertical-align: bottom;
}
/* Enable scrolling on notification settings without waiting transition @kktCSS v9.0 tootsuite#604 */
.app-holder[data-react-class="Mastodon"] .column-collapsable > div:nth-child(2) {
overflow: auto !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment