Mastodonの個人的なカスタマイズCSS集

mastodon-custom.css

/* CUSTOMS */

/* account media gallery */
.account-gallery__item {
  width: 25%;
  min-width: 120px;
}

/* enlarge custom emoji */
/* note: :only-child won't count text nodes */
p > .emojione[alt^=":"]:only-child {
  width: 2.5em; height: 2.5em; margin: 0;
}

/* enlarge all custom emoji on hover */
/*p > .emojione[alt^=":"] {
  transition: width .2s .1s ease, height .2s .1s ease;
}
p > .emojione[alt^=":"]:hover {
  width: 10em; height: 10em;
  transition-duration: .4s;
}*/

/* more reduce animation */
.compose-form > div:first-child { opacity: 1 !important; }
.modal-root { transition: opacity .2s }

/* kkt .status{margin-bottom} fix */
.status__prepend { margin-top: 8px; padding-top: 0; }

/* sizes */
.search__input, .autosuggest-textarea__textarea { font-size: 13px !important; }
.status__info { font-size: 13px; }
.status__content, .reply-indicator__content { font-size: 13px; line-height: 1.5; }
.detailed-status .status__content { font-size: 16px; line-height: 1.4; }
.status__action-bar { margin-top: 5px; }

/* remove bounce animation */
.account__header__avatar { border-radius: 100% !important; transition: .5s border-radius;}
.account__header__avatar:hover { border-radius: 8% !important; transition: .5s border-radius; }

/* limit too long posts */
.status__content--with-action {
    max-height: 30em;
    overflow-y: auto;
}
.muted .status__content--with-action {
    max-height: 3.8em;
}

/* collapse fav/reblog notifications */
.notification { position: relative }
.notification .status__action-bar,
.notification .account__avatar-overlay-base,
.notification .status__relative-time,
.notification:not(.notification-follow) .display-name { display: none }
.notification .status__avatar { width: 16px; height: 16px; }
.notification .account__avatar-overlay-overlay {
    background-size: contain;
    right: -12px;
    width: 16px;
    height: 16px;
}
.notification .status {
    position: initial;
    min-height: 0;
    padding: 4px 24px 12px 68px;
}


/* == media == */
/* show in `contain` size, only for single attachment */
.media-gallery__item:nth-child(2):last-child .media-gallery__item-thumbnail { background-size: contain; }
.media-gallery__item:nth-child(2):last-child .media-gallery__item-thumbnail img { object-fit: contain; }
.video-player.inline video { object-fit: contain; }
/* increase height */
.status > .media-gallery { height: 140px !important; /*transition: height .2s;*/ }
/*.media-gallery:hover { height: 200px !important; transition: height .2s ease-in .3s;}*/

/* media-modal */
.media-modal canvas,
.media-modal img,
.media-modal video {
    max-width: 80vw;
    max-height: 90vh;
}


/* 3 columns */
/* useless with pin feature */
/*@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); }*/

/* don custom */

.account-gallery__item a[style*="blur"] {
  filter: blur(2px) !important;
}
.account-gallery__item a:hover {
  filter: none !important;
}

/* show first character of domain on mentions */
/*
[...Array(26).keys()].map(i => String.fromCharCode(97 + i)).map(c => `a.mention[title*="@${c}"]:after { content: "@${c}…" }`).join("\r\n")
*/
a.mention[title*="@a"]:after { content: "@a…" }
a.mention[title*="@b"]:after { content: "@b…" }
a.mention[title*="@c"]:after { content: "@c…" }
a.mention[title*="@d"]:after { content: "@d…" }
a.mention[title*="@e"]:after { content: "@e…" }
a.mention[title*="@f"]:after { content: "@f…" }
a.mention[title*="@g"]:after { content: "@g…" }
a.mention[title*="@h"]:after { content: "@h…" }
a.mention[title*="@i"]:after { content: "@i…" }
a.mention[title*="@j"]:after { content: "@j…" }
a.mention[title*="@k"]:after { content: "@k…" }
a.mention[title*="@l"]:after { content: "@l…" }
a.mention[title*="@m"]:after { content: "@m…" }
a.mention[title*="@n"]:after { content: "@n…" }
a.mention[title*="@o"]:after { content: "@o…" }
a.mention[title*="@p"]:after { content: "@p…" }
a.mention[title*="@q"]:after { content: "@q…" }
a.mention[title*="@r"]:after { content: "@r…" }
a.mention[title*="@s"]:after { content: "@s…" }
a.mention[title*="@t"]:after { content: "@t…" }
a.mention[title*="@u"]:after { content: "@u…" }
a.mention[title*="@v"]:after { content: "@v…" }
a.mention[title*="@w"]:after { content: "@w…" }
a.mention[title*="@x"]:after { content: "@x…" }
a.mention[title*="@y"]:after { content: "@y…" }
a.mention[title*="@z"]:after { content: "@z…" }
/*
a.mention:hover span {
    display: none
}
a.mention:hover:after {
    content: attr(title)
}
a.mention:hover:after {
    text-decoration: underline
}
*/

/* collapse pinned status */

article[data-id^="f-"] .status__wrapper:not(:focus) .status {
    padding-top: 0;
    min-height: 0;
    max-height: 0.5em;
    overflow: hidden;
}
article[data-id^="f-"] .status__wrapper:not(:focus) .status__avatar,
article[data-id^="f-"] .status__wrapper:not(:focus) .display-name {
    display: none
}

/* inspired by https://pawoo.net/users/pacochi/updates/7776651 */

.status-unlisted:after {
    display: block;
    position: absolute;
    width: 14px; height: 14px;
    right: 10px; bottom: 8px;
    font: 14px/1 FontAwesome;
    content: "\F13E"; /* fa-unlock-alt */
    opacity: 0.3;
}