公開範囲によって投稿フォームに公開範囲アイコンを大きめに表示するMisskeyカスタムCSS

gistfile1.txt

.post-form textarea{
  background-repeat: no-repeat;
  background-size: auto 60%;
  background-position: bottom 0.5em right 0.5em;
}

.post-form:has(.ti-world) textarea{
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 10C20 4.74 15.92 0.43 10.75 0.04C10.61 0 10.47 -0.01 10.32 0.02C10.21 0.02 10.1 0 9.99 0C9.88 0 9.77 0.01 9.66 0.02C9.52 -0.01 9.37 0 9.23 0.04C4.08 0.43 0 4.74 0 10C0 15.26 4.08 19.57 9.23 19.96C9.32 19.98 9.41 20 9.5 20C9.54 20 9.59 19.99 9.63 19.98C9.75 19.98 9.87 20 9.99 20C10.11 20 10.23 19.99 10.35 19.98C10.39 19.98 10.44 20 10.48 20C10.57 20 10.66 19.99 10.75 19.96C15.91 19.57 19.98 15.25 19.98 10H20ZM8.07 12C7.91 10.67 7.91 9.33 8.07 8H11.93C12.09 9.33 12.09 10.67 11.93 12H8.07ZM11.55 14C11.21 15.34 10.69 16.64 10 17.87C9.31 16.64 8.79 15.34 8.45 14H11.55ZM2 10C2 9.31 2.1 8.64 2.26 8H6.06C5.91 9.33 5.91 10.67 6.06 12H2.26C2.09 11.36 2 10.69 2 10ZM8.45 6C8.79 4.66 9.31 3.36 10 2.13C10.69 3.36 11.21 4.66 11.55 6H8.45ZM13.94 8H17.74C17.91 8.64 18 9.31 18 10C18 10.69 17.9 11.36 17.74 12H13.94C14.09 10.67 14.09 9.33 13.94 8ZM16.92 6H13.61C13.33 4.75 12.91 3.53 12.37 2.36C14.31 2.96 15.93 4.28 16.93 6H16.92ZM7.64 2.36C7.09 3.53 6.68 4.76 6.39 6H3.08C4.08 4.28 5.7 2.96 7.64 2.36ZM3.08 14H6.39C6.67 15.25 7.09 16.47 7.64 17.64C5.7 17.04 4.08 15.72 3.08 14ZM12.36 17.64C12.91 16.47 13.32 15.24 13.6 14H16.91C15.91 15.72 14.29 17.04 12.35 17.64H12.36Z" fill="rgba(128 128 128 / 50%)"/></svg>')
}

.post-form:has(.ti-home) textarea{
background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.29292 0.292893C9.68345 -0.0976311 10.3166 -0.0976311 10.7071 0.292893L19.7071 9.29289C19.9931 9.57889 20.0787 10.009 19.9239 10.3827C19.7691 10.7564 19.4045 11 19 11H18V17C18 17.7957 17.684 18.5587 17.1213 19.1213C16.5587 19.6839 15.7957 20 15 20H5.00003C4.20438 20 3.44132 19.6839 2.87871 19.1213C2.3161 18.5587 2.00003 17.7957 2.00003 17V11H1.00003C0.595567 11 0.230931 10.7564 0.0761497 10.3827C-0.0786313 10.009 0.00692445 9.57889 0.292922 9.29289L9.29292 0.292893ZM3.35094 9.0633C3.73013 9.20542 4.00003 9.57119 4.00003 10V17C4.00003 17.2652 4.10539 17.5196 4.29292 17.7071C4.48046 17.8946 4.73481 18 5.00003 18H6.00003V13C6.00003 12.2043 6.3161 11.4413 6.87871 10.8787C7.44132 10.3161 8.20438 10 9.00003 10H11C11.7957 10 12.5587 10.3161 13.1213 10.8787C13.684 11.4413 14 12.2043 14 13V18H15C15.2652 18 15.5196 17.8946 15.7071 17.7071C15.8947 17.5196 16 17.2652 16 17V10C16 9.57119 16.2699 9.20542 16.6491 9.0633L10 2.41421L3.35094 9.0633ZM12 18V13C12 12.7348 11.8947 12.4804 11.7071 12.2929C11.5196 12.1054 11.2652 12 11 12H9.00003C8.73481 12 8.48046 12.1054 8.29292 12.2929C8.10539 12.4804 8.00003 12.7348 8.00003 13V18H12Z" fill="rgba(128 128 128 / 50%)"/></svg>');
}

.post-form:has(.ti-lock) textarea{
background-image: url('data:image/svg+xml,<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 2C7.20435 2 6.44129 2.31607 5.87868 2.87868C5.31607 3.44129 5 4.20435 5 5V8H11V5C11 4.20435 10.6839 3.44129 10.1213 2.87868C9.55871 2.31607 8.79565 2 8 2ZM13 8V5C13 3.67392 12.4732 2.40215 11.5355 1.46447C10.5979 0.526784 9.32608 0 8 0C6.67392 0 5.40215 0.526784 4.46447 1.46447C3.52678 2.40215 3 3.67392 3 5V8C2.20435 8 1.44129 8.31607 0.87868 8.87868C0.31607 9.44129 0 10.2044 0 11V17C0 17.7957 0.31607 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H13C13.7957 20 14.5587 19.6839 15.1213 19.1213C15.6839 18.5587 16 17.7957 16 17V11C16 10.2043 15.6839 9.44129 15.1213 8.87868C14.5587 8.31607 13.7957 8 13 8ZM3 10C2.73478 10 2.48043 10.1054 2.29289 10.2929C2.10536 10.4804 2 10.7348 2 11V17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H13C13.2652 18 13.5196 17.8946 13.7071 17.7071C13.8946 17.5196 14 17.2652 14 17V11C14 10.7348 13.8946 10.4804 13.7071 10.2929C13.5196 10.1054 13.2652 10 13 10H3ZM6.58579 12.5858C6.96086 12.2107 7.46957 12 8 12C8.53043 12 9.03914 12.2107 9.41421 12.5858C9.78929 12.9609 10 13.4696 10 14C10 14.5304 9.78929 15.0391 9.41421 15.4142C9.03914 15.7893 8.53043 16 8 16C7.46957 16 6.96086 15.7893 6.58579 15.4142C6.21071 15.0391 6 14.5304 6 14C6 13.4696 6.21071 12.9609 6.58579 12.5858Z" fill="rgba(128 128 128 / 50%)"/></svg>');
}

.post-form:has(.ti-mail) textarea{
background-image: url('data:image/svg+xml,<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 2C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.21971 2.36608 2.15904 2.44944 2.11226 2.53966L10 7.79815L17.8877 2.53965C17.841 2.44944 17.7803 2.36608 17.7071 2.29289C17.5196 2.10536 17.2652 2 17 2H3ZM18 4.86852L10.5547 9.83205C10.2188 10.056 9.7812 10.056 9.4453 9.83205L2 4.86852V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14H17C17.2652 14 17.5196 13.8946 17.7071 13.7071C17.8946 13.5196 18 13.2652 18 13V4.86852ZM0.87868 0.87868C1.44129 0.31607 2.20435 0 3 0H17C17.7957 0 18.5587 0.31607 19.1213 0.87868C19.6839 1.44129 20 2.20435 20 3V13C20 13.7957 19.6839 14.5587 19.1213 15.1213C18.5587 15.6839 17.7957 16 17 16H3C2.20435 16 1.44129 15.6839 0.87868 15.1213C0.31607 14.5587 0 13.7956 0 13V3C0 2.20435 0.31607 1.44129 0.87868 0.87868Z" fill="rgba(128 128 128 / 50%)"/></svg>');
}