水銀流域

0%

Mastodon自定义CSS

发表于

备份用

1

适用于所有实例，配合浏览器插件Stylus使用。
（来源）

例：调整内容栏宽度

1
2
3
4
.columns-area__panels__main {
    padding: 0 10px;
    max-width: 900px;
}

2

用于m.quaoar.xyz
如果有优雅点的写法请告诉我

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.column, .columns-area {
background-color: #FFFFFF90;
}

.columns-area__panels__main {
    padding: 0 10px;
    max-width: 640px;
}

.dropdown-menu, .dropdown-menu__item a, .dropdown-menu__item button {
background: #F1F1F1;
}

.status__content, .status__display-name strong, .detailed-status__display-name strong {
color: #141414;
}
.notification__message {
color: #1A1A1A;
}
.status__display-name, .display-name__account {
color: #666676;
}

.status-card__title, .status-card__content, .status-card__description {
color: #9162E1;
}

.hashtag, .status__content a, .status__content a.unhandled-link, .u-url.status-link:not(.unhandled-link) {
background-image: linear-gradient(92.05deg, RGB(145,98,225) 12.09%, RGB(242,93,176) 42.58%, RGB(236,85,85) 84.96%);
}

.quote-indicator__content+.status__content__read-more-button, .quote-indicator__content .status__content__read-more-button, .quote-indicator__content .status__content__show-translation-button, .quote-indicator__content .status__content__spoiler-link, .reply-indicator__content+.status__content__read-more-button, .reply-indicator__content .status__content__read-more-button, .reply-indicator__content .status__content__show-translation-button, .reply-indicator__content .status__content__spoiler-link, .status__content+.status__content__read-more-button, .status__content .status__content__read-more-button, .status__content .status__content__show-translation-button, .status__content .status__content__spoiler-link {
background: #ECECEC;
}

.quote-indicator__content+.status__content__read-more-button:focus, .quote-indicator__content+.status__content__read-more-button:hover, .quote-indicator__content .status__content__read-more-button:focus, .quote-indicator__content .status__content__read-more-button:hover, .quote-indicator__content .status__content__show-translation-button:focus, .quote-indicator__content .status__content__show-translation-button:hover, .quote-indicator__content .status__content__spoiler-link:focus, .quote-indicator__content .status__content__spoiler-link:hover, .reply-indicator__content+.status__content__read-more-button:focus, .reply-indicator__content+.status__content__read-more-button:hover, .reply-indicator__content .status__content__read-more-button:focus, .reply-indicator__content .status__content__read-more-button:hover, .reply-indicator__content .status__content__show-translation-button:focus, .reply-indicator__content .status__content__show-translation-button:hover, .reply-indicator__content .status__content__spoiler-link:focus, .reply-indicator__content .status__content__spoiler-link:hover, .status__content+.status__content__read-more-button:focus, .status__content+.status__content__read-more-button:hover, .status__content .status__content__read-more-button:focus, .status__content .status__content__read-more-button:hover, .status__content .status__content__show-translation-button:focus, .status__content .status__content__show-translation-button:hover, .status__content .status__content__spoiler-link:focus, .status__content .status__content__spoiler-link:hover {
background: #FFFFFF;
}

::-webkit-scrollbar-thumb {
background-color: #f1f1f2;
}