Last active
July 16, 2020 11:33
-
-
Save cutls/35faafc3d147d79dab0bda836b7eeb07 to your computer and use it in GitHub Desktop.
#InstanceTicker は3割以上圧縮できると思うって話。いやまぁそのうち2割はtext-shadowの廃止なんだけど。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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インスタンス)が独自のカラーを導入していると仮定) | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
参考にしました。
本日から導入します。
ありがとうございました。