Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
#InstanceTicker は3割以上圧縮できると思うって話。いやまぁそのうち2割はtext-shadowの廃止なんだけど。
@charset 'utf-8';
/* ここはいつも通り */
.getting-started__footer:after {
color: #fff !important;
padding-left: 18px !important;
font-size: 12px !important;
width: 240px !important;
height: 64px !important;
background: url('https://res.cloudinary.com/miy/005.png?071522'), linear-gradient(90deg, #059, transparent) !important;
background-repeat: no-repeat, no-repeat !important;
content: '#InstanceTicker(Type-0) \AVer.202007152124 \Ahttps://miy.pw';
display: block !important;
white-space: pre !important;
text-overflow: ellipsis !important;
text-shadow: #223 1px 1px, #223 -1px -1px, #223 -1px 1px, #223 1px -1px, #223 0 1px, #223 0 -1px, #223 -1px 0, #223 1px 0 !important;
margin: 16px 0 16px 0 !important;
}
.compose-form:after {
color: #fff !important;
padding-left: 18px !important;
font-size: 12px !important;
width: 240px !important;
height: 16px !important;
background: url('https://res.cloudinary.com/miy/001.png?071522'), linear-gradient(90deg, #059, transparent) !important;
background-repeat: no-repeat, no-repeat !important;
content: '#InstanceTicker(Type-0) Ver.202007152124 ';
display: block !important;
white-space: pre !important;
text-overflow: ellipsis !important;
text-shadow: #223 1px 1px, #223 -1px -1px, #223 -1px 1px, #223 1px -1px, #223 0 1px, #223 0 -1px, #223 -1px 0, #223 1px 0 !important;
margin: 16px 0 16px 0 !important;
}
/*
ここまでいつも通り
ここから共通部分だけ先に指定する。同じのを何百、何千と書くのはよくない
*/
.status .display-name::after {
font-size: 12px !important;
height: 16px !important;
display: block !important;
white-space: pre !important;
text-overflow: ellipsis !important;
padding-left: 16px !important;
font-weight: bolder !important;
background-repeat: no-repeat, no-repeat !important;
}
.status__display-name.muted::after,
.notification__display-name::after {
font-size: 12px !important;
height: 16px !important;
display: inline !important;
white-space: pre !important;
text-overflow: ellipsis !important;
padding: 0 16px 0 16px !important;
margin: 0 !important;
background-repeat: no-repeat, no-repeat !important;
font-weight: bolder !important;
opacity: 0.4 !important;
}
/*
先に変数でデータを指定する。これをやると、Mastodonのいつものアイコンで#26aを指定するいつものやつが、
全部ここに書けてしまうので圧縮できる。
命名規則は、これは.は次の字を大文字に、ハイフンはアンダーバーに変更にしてるけどなんでもいい
*/
:root {
--mastodonBaseColor: linear-gradient(90deg, #26a 84%, transparent);
--mastodonBaseColorTransparent: linear-gradient(90deg, #26a 84%, transparent);
--white: #fff;
--cutlsComColor: #000;
--cutlsComBaseColor: linear-gradient(90deg, #e0e0e0, transparent);
--cutlsComBaseColorTransparent: linear-gradient(90deg, #e0e0e0 84%, transparent);
--cutlsComBg: url('https://res.cloudinary.com/miy/t_t/81052?071522');
--mstdnJpBg: url('https://res.cloudinary.com/miy/i1?071522');
}
/*各インスタンスで違うやつだけを指定していく。text-shadowは要るのか?になったので外した。*/
/*cutls.com START*/
.status a[href^='https://cutls.com/'] .display-name::after
{
color: var(--cutlsComColor) !important;
background: var(--cutlsComBg), var(--cutlsComBaseColor) !important;
background-repeat: no-repeat, no-repeat !important;
content: 'cutls.com' !important;
}
.status__display-name[href^='https://cutls.com/'].muted::after, .notification__display-name[href^='https://cutls.com/']::after
{
color: var(--cutlsComColor) !important;
background: var(--cutlsComBg), var(--cutlsComBaseColorTransparent) !important;
background-repeat: no-repeat, no-repeat !important;
content: 'cutls.com' !important;
}
/*cutls.com END 1インスタンス700B程度で収まる */
.status a[href^='https://mstdn.jp/'] .display-name::after
{
color: var(--white) !important;
background: var(--mstdnJpBg), var(--mastodonBaseColor) !important;
background-repeat: no-repeat, no-repeat !important;
content: 'mstdn.jp' !important;
}
.status__display-name[href^='https://mstdn.jp/'].muted::after, .notification__display-name[href^='https://mstdn.jp/']::after
{
color: var(--white) !important;
background: var(--mstdnJpBg), var(--mastodonBaseColorTransparent) !important;
background-repeat: no-repeat, no-repeat !important;
content: 'mstdn.jp' !important;
}
/*
約1000インスタンスあるが、1200KBくらいあったものが恐らく、
800KBくらいにまで減ると思う(全体の1割(100インスタンス)が独自のカラーを導入していると仮定)
*/
@weepjp

This comment has been minimized.

Copy link

@weepjp weepjp commented Jul 16, 2020

参考にしました。
本日から導入します。
ありがとうございました。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.