2023-07-11 01:55:08 +09:00
/ * TangerineUI 🍊 for Mastodon
2023-08-09 00:12:58 +09:00
version : 1 . 8 . 10
2023-07-10 20:39:55 +09:00
2023-07-13 08:14:11 +09:00
A Tangerine redesign for Mastodon ' s Web UI .
https : / / github . com / nileane / TangerineUI-for-Mastodon /
2023-07-15 08:06:28 +09:00
2023-07-10 19:09:13 +09:00
by @ nileane @ nileane . fr
2023-07-15 08:06:28 +09:00
2023-08-02 19:42:14 +09:00
Last Mastodon compatibility check : v4 . 1 . 6 stable ✅
2023-07-10 19:09:13 +09:00
* /
2023-07-11 21:07:14 +09:00
/* 🎨 Colors */
2023-07-10 19:09:13 +09:00
: root {
2023-07-13 04:50:44 +09:00
--color-bg : # f5f2ef ;
2023-07-12 00:18:18 +09:00
--color-fg : # 2a2d37 ;
2023-07-13 04:50:44 +09:00
--color-fg-muted : # 948c84 ;
--color-secondary-bg : # f2eae4 ;
--color-secondary-separator : # ede3db ;
2023-07-10 19:09:13 +09:00
--color-content-bg : # ffffff ;
2023-07-12 00:18:18 +09:00
--color-content-fg : # 444a5a ;
--color-content-fg-bold : # 000000 ;
--color-content-fg-muted : # 8b92a7 ;
2023-07-13 04:50:44 +09:00
--color-content-secondary-bg : # f9f6f4 ;
--color-content-secondary-separator : rgba ( 237 , 227 , 219 , 0 . 4 ) ;
2023-07-10 19:09:13 +09:00
--color-content-bg-focus : # fffcfa ;
2023-07-13 04:50:44 +09:00
--color-accent : # f76902 ;
--color-accent-focus : # ff9447 ;
2023-07-30 04:59:25 +09:00
--color-accent-lines : rgba ( 247 , 105 , 2 , 0 . 12 ) ;
2023-07-13 04:50:44 +09:00
--color-accent-bg : # f6e5dd ;
2023-07-10 19:09:13 +09:00
--color-accent-fg : # ffffff ;
2023-07-30 03:19:43 +09:00
--color-lines : # e1dde4 ;
2023-07-12 19:00:21 +09:00
2023-07-11 21:07:14 +09:00
}
@ media ( prefers-color-scheme : dark ) {
: root {
2023-07-26 06:00:49 +09:00
--color-bg : # 030303 ;
2023-07-12 00:18:18 +09:00
--color-fg : # e0d6d1 ;
--color-fg-muted : # 6e635e ;
2023-07-25 09:17:42 +09:00
--color-secondary-bg : # 282015 ;
2023-07-15 07:22:49 +09:00
--color-secondary-separator : # 25201c ;
2023-07-15 08:06:28 +09:00
2023-07-25 09:17:42 +09:00
--color-content-bg : # 1a1a1a ;
2023-07-12 00:18:18 +09:00
--color-content-fg : # f2f2f2 ;
--color-content-fg-bold : # ffffff ;
--color-content-fg-muted : # 737373 ;
2023-07-15 07:22:49 +09:00
--color-content-secondary-bg : # 292623 ;
2023-07-11 21:07:14 +09:00
--color-content-secondary-separator : rgba ( 77 , 73 , 70 , 0 . 4 ) ;
2023-07-25 09:17:42 +09:00
--color-content-bg-focus : # 222222 ;
2023-07-15 08:06:28 +09:00
2023-07-12 00:18:18 +09:00
--color-accent : # e68933 ;
--color-accent-focus : # ffa047 ;
2023-07-30 04:59:25 +09:00
--color-accent-lines : rgb ( 230 , 137 , 51 , 0 . 12 ) ;
2023-07-11 21:07:14 +09:00
--color-accent-bg : # 3c2a1f ;
--color-accent-fg : # ffffff ;
2023-07-12 19:00:21 +09:00
2023-07-26 06:00:49 +09:00
--color-lines : # 343434 ;
2023-07-11 21:07:14 +09:00
}
}
: root {
2023-07-13 04:50:44 +09:00
--logo : url ( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' class='mastodon-logo' viewBox='0 0 216.414 232.01'%3E%3Cdefs xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient xmlns='http://www.w3.org/2000/svg' id='a' x2='0%25' y2='100%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%23f76a02'/%3E%3Cstop offset='100%25' stop-color='%23f76a02'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns='http://www.w3.org/2000/svg' fill='url(%23a)' d='M211.807 139.088c-3.18 16.366-28.492 34.277-57.562 37.748-15.159 1.809-30.084 3.471-45.999 2.741-26.027-1.192-46.565-6.212-46.565-6.212 0 2.534.156 4.946.469 7.202 3.384 25.687 25.47 27.225 46.391 27.943 21.116.723 39.919-5.206 39.919-5.206l.867 19.09s-14.77 7.931-41.08 9.39c-14.51.797-32.525-.365-53.507-5.919C9.232 213.82 1.406 165.311.209 116.091c-.365-14.613-.14-28.393-.14-39.918 0-50.33 32.976-65.083 32.976-65.083C49.672 3.454 78.204.242 107.865 0h.729c29.66.242 58.21 3.454 74.837 11.09 0 0 32.975 14.752 32.975 65.082 0 0 .414 37.134-4.599 62.916'/%3E%3Cpath fill='%23fff' d='M177.51 80.077v60.941h-24.144v-59.15c0-12.469-5.246-18.797-15.74-18.797-11.602 0-17.417 7.507-17.417 22.352V117.8H96.207V85.423c0-14.845-5.816-22.352-17.418-22.352-10.494 0-15.74 6.328-15.74 18.797v59.15H38.905V80.077c0-12.455 3.171-22.352 9.541-29.675 6.569-7.322 15.171-11.076 25.85-11.076 12.355 0 21.711 4.748 27.898 14.247l6.013 10.082 6.015-10.082c6.185-9.498 15.542-14.247 27.898-14.247 10.677 0 19.28 3.753 25.85 11.076 6.369 7.322 9.54 17.22 9.54 29.675'/%3E%3C/svg%3E" ) ;
2023-07-10 19:09:13 +09:00
--icon-follow-hashtag : url ( 'data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23282C37" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7H214.7l.5-8.3c.7-9.8 1.4-11.5 8.2-18.5 8.6-9 7-8.7 41.4-9l30.2-.3V259h-9.5c-9.4 0-9.5 0-9.1-2.3.3-1.2 1.5-10.8 2.6-21.2 1.2-10.5 3-26.5 4.1-35.7 1-9.2 1.9-17.2 1.9-17.8 0-.7 12.3-1 38.5-1 23.5 0 40.3-.4 43.4-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%23282C37" d="M317.2 207c-1.8 1.1-4.1 3.4-5.2 5.2-1.9 3.1-2 5.1-2 38V285h-34.7c-33 0-35 .1-38.1 2-6.7 4.1-7.2 6-7.2 30s.5 25.9 7.2 30c3.1 1.9 5.1 2 38.1 2H310v34.7c0 33 .1 35 2 38.1 4.1 6.7 6 7.2 30 7.2s25.9-.5 30-7.2c1.9-3.1 2-5.1 2-38.1V349h34.8c32.9 0 34.9-.1 38-2 6.7-4.1 7.2-6 7.2-30s-.5-25.9-7.2-30c-3.1-1.9-5.1-2-38-2H374v-34.8c0-32.9-.1-34.9-2-38-4.1-6.7-6-7.2-30-7.2-19.7 0-21.8.2-24.8 2z"/%3E%3Cpath fill="%23282C37" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E' ) ;
--icon-unfollow-hashtag : url ( 'data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%2300ba7c" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7h38.8c21.3 0 38.8.4 38.8.9 0 1-2.3 21.5-5 45.1-5.9 52.1-6.4 57.6-5 62.4 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 5-3 8.7-6.7 10.1-10.1 1.2-2.9 1.1-3.1-10.8-15.1-6.7-6.7-12.6-13.2-13.2-14.4-1.5-2.9-1.4-25.8 0-28.6.6-1.2 9.2-10.3 19-20.3 24-24.2 24-20.9.3-44.4-9.6-9.6-18.2-18.7-19-20.2-2-3.8-2-25.8 0-29.6 1.7-3.2 34.2-35.5 37.3-37.1 1.2-.6 4.2-1.1 6.6-1.1 5.2 0 4.6 1.5 6.8-17.3l1.1-9.7h38.4c23.4 0 40.2-.4 43.3-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%2300ba7c" d="M277.5 223.2c-3.1 1.7-28.5 27-30.1 30-1.7 3.2-1.9 12-.3 15.1.6 1.2 11.7 12.9 24.7 25.9l23.7 23.8-23.7 23.7c-13 13.1-24.1 24.8-24.7 26-1.6 3.1-1.4 11.9.3 15.1 1.7 3.2 27.2 28.5 30.3 30.1 2.8 1.4 11.8 1.4 14.6 0 1.2-.6 12.9-11.7 26-24.7l23.7-23.7 23.8 23.7c13 13 24.7 24.1 25.9 24.7 2.8 1.4 11.8 1.4 14.6 0 3.1-1.6 28.6-26.9 30.3-30.1 1.7-3.2 1.9-12 .3-15.1-.6-1.2-11.7-12.9-24.7-26L388.5 318l23.7-23.8c13-13 24.1-24.7 24.7-25.9 1.6-3.1 1.4-11.9-.3-15.1-1.7-3.2-27.2-28.5-30.3-30.1-2.8-1.4-11.8-1.4-14.6 0-1.2.6-12.9 11.7-25.9 24.7L342 271.5l-23.7-23.7c-13.1-13-24.8-24.1-26-24.7-2.8-1.4-12.2-1.4-14.8.1z"/%3E%3C/svg%3E' ) ;
2023-08-07 00:29:53 +09:00
--icon-boost : url ( "data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23282C37; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg%3E%3Cpath d='M21.502,2.561c-1.212,-1.213 -3.11,-1.53 -5.346,-0.89c-2.031,0.581 -4.151,1.901 -5.968,3.718c-0.235,0.235 -0.462,0.477 -0.68,0.722c-2.765,0.035 -6.278,1.476 -7.556,2.745c-0.442,0.438 -0.666,0.896 -0.666,1.359c0,0.351 0.184,0.677 0.486,0.857l4.38,2.629c0.041,1.212 0.448,2.242 1.208,3.001c0.745,0.746 1.758,1.137 2.942,1.19l2.564,4.275c0.181,0.301 0.507,0.485 0.858,0.485c0.463,0 0.92,-0.224 1.359,-0.665c1.232,-1.242 2.625,-4.615 2.732,-7.316c0.291,-0.255 0.58,-0.518 0.859,-0.797c1.816,-1.817 3.137,-3.936 3.717,-5.968c0.639,-2.235 0.323,-4.133 -0.889,-5.345Zm-7.499,17.612l-1.428,-2.379c0.944,-0.105 1.854,-0.341 2.899,-1.02c-0.381,1.4 -0.99,2.696 -1.471,3.399Zm6.465,-12.816c-0.488,1.71 -1.628,3.522 -3.208,5.103c-1.581,1.581 -3.393,2.72 -5.103,3.209c-1.487,0.423 -2.717,0.284 -3.383,-0.381c-0.665,-0.665 -0.804,-1.898 -0.38,-3.382c0.488,-1.71 1.628,-3.522 3.208,-5.103c1.581,-1.581 3.393,-2.72 5.103,-3.209c0.566,-0.161 1.096,-0.241 1.571,-0.241c0.771,0 1.4,0.21 1.812,0.622c0.665,0.665 0.804,1.898 0.38,3.382Zm-16.703,2.579c0.703,-0.481 1.998,-1.09 3.399,-1.471c-0.679,1.044 -0.915,1.954 -1.02,2.898l-2.379,-1.427Zm11.373,-3.84c-0.78,0.78 -0.78,2.048 0,2.828c0.781,0.781 2.048,0.781 2.828,0c0.781,-0.78 0.781,-2.048 0,-2.828c-0.78,-0.781 -2.047,-0.781 -2.828,0Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-boost-accent : url ( "data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23f76902; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg%3E%3Cpath d='M21.502,2.561c-1.212,-1.213 -3.11,-1.53 -5.346,-0.89c-2.031,0.581 -4.151,1.901 -5.968,3.718c-0.235,0.235 -0.462,0.477 -0.68,0.722c-2.765,0.035 -6.278,1.476 -7.556,2.745c-0.442,0.438 -0.666,0.896 -0.666,1.359c0,0.351 0.184,0.677 0.486,0.857l4.38,2.629c0.041,1.212 0.448,2.242 1.208,3.001c0.745,0.746 1.758,1.137 2.942,1.19l2.564,4.275c0.181,0.301 0.507,0.485 0.858,0.485c0.463,0 0.92,-0.224 1.359,-0.665c1.232,-1.242 2.625,-4.615 2.732,-7.316c0.291,-0.255 0.58,-0.518 0.859,-0.797c1.816,-1.817 3.137,-3.936 3.717,-5.968c0.639,-2.235 0.323,-4.133 -0.889,-5.345Zm-7.499,17.612l-1.428,-2.379c0.944,-0.105 1.854,-0.341 2.899,-1.02c-0.381,1.4 -0.99,2.696 -1.471,3.399Zm6.465,-12.816c-0.488,1.71 -1.628,3.522 -3.208,5.103c-1.581,1.581 -3.393,2.72 -5.103,3.209c-1.487,0.423 -2.717,0.284 -3.383,-0.381c-0.665,-0.665 -0.804,-1.898 -0.38,-3.382c0.488,-1.71 1.628,-3.522 3.208,-5.103c1.581,-1.581 3.393,-2.72 5.103,-3.209c0.566,-0.161 1.096,-0.241 1.571,-0.241c0.771,0 1.4,0.21 1.812,0.622c0.665,0.665 0.804,1.898 0.38,3.382Zm-16.703,2.579c0.703,-0.481 1.998,-1.09 3.399,-1.471c-0.679,1.044 -0.915,1.954 -1.02,2.898l-2.379,-1.427Zm11.373,-3.84c-0.78,0.78 -0.78,2.048 0,2.828c0.781,0.781 2.048,0.781 2.828,0c0.781,-0.78 0.781,-2.048 0,-2.828c-0.78,-0.781 -2.047,-0.781 -2.828,0Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-boost-active : url ( "data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23F91880; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M21.502,2.561c-1.212,-1.213 -3.11,-1.53 -5.346,-0.89c-2.031,0.581 -4.151,1.901 -5.968,3.718c-0.235,0.235 -0.462,0.477 -0.68,0.722c-2.765,0.035 -6.278,1.476 -7.556,2.745c-0.442,0.438 -0.666,0.896 -0.666,1.359c0,0.351 0.184,0.677 0.486,0.857l4.38,2.629c0.041,1.212 0.448,2.242 1.208,3.001c0.745,0.746 2.942,1.19 2.942,1.19l2.564,4.275c0.181,0.301 0.507,0.485 0.858,0.485c0.463,0 0.92,-0.224 1.359,-0.665c1.132,-1.141 2.399,-4.08 2.681,-6.645c0.025,-0.227 0.042,-0.451 0.051,-0.671c0.291,-0.255 0.58,-0.518 0.859,-0.797c1.816,-1.817 3.137,-3.936 3.717,-5.968c0.639,-2.235 0.323,-4.133 -0.889,-5.345Zm-4.948,2.976c1.093,-0 1.98,0.887 1.98,1.98c0,1.093 -0.887,1.98 -1.98,1.98c-1.093,-0 -1.98,-0.887 -1.98,-1.98c0,-1.093 0.887,-1.98 1.98,-1.98Z' style='fill-rule:nonzero;'/%3E%3Cpath d='M6.194,17.686c1.126,1.126 3.356,0.784 2.229,1.911c-1.126,1.126 -4.134,2.305 -5.261,1.179c-1.126,-1.127 0.053,-4.135 1.179,-5.261c1.127,-1.127 0.727,1.045 1.853,2.171Z'/%3E%3C/svg%3E" ) ;
2023-07-31 04:22:32 +09:00
--icon-boost-status : url ( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23F91880' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
2023-07-10 19:09:13 +09:00
--icon-boost-notification-filter-bar : url ( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-boost-notification-filter-bar-active : url ( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-boost-notification-wrapper : url ( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
2023-07-30 21:49:58 +09:00
--icon-reply : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23282C37' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23282C37'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-reply-accent : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23f76902' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23f76902'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
2023-07-10 19:09:13 +09:00
--icon-share-detailed-status-action-bar : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23282C37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-share-detailed-status-action-bar-hover : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-bookmark-detailed-status-action-bar : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23282C37' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-detailed-status-action-bar-hover : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-detailed-status-action-bar-active : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-column-link : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bookmark-column-link-active : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23282C37" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-list : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/%3E%3Ccircle cx="80" cy="144" r="16" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E' ) ;
2023-07-30 21:49:58 +09:00
--icon-share : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23282C37' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-share-accent : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f76902' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
2023-07-10 19:09:13 +09:00
--icon-share-hover : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-star-column-link : url ( 'data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-star-column-link-active : url ( 'data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23282C37" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-star-notification : url ( 'data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="0" viewBox="0 0 24 24" fill="%23ffac33" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffac33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-heart-column-link : url ( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E" ) ;
--icon-heart-column-link-active : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23282C37'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-direct-messages : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E' ) ;
--icon-direct-messages-active : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23282C37" stroke="%23232543" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E' ) ;
--icon-users-column-link : url ( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23282C37" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23282C37" stroke-width="1.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-users-column-link-active : url ( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23282C37" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23282C37" stroke-width="2.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23282C37" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bookmark-status-hover : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-status-hover-red : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
2023-07-30 21:49:58 +09:00
--icon-bookmark : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bookmark-accent : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f76902" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E' ) ;
2023-07-31 04:22:32 +09:00
--icon-bookmark-active : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300ba7c' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
2023-07-10 19:09:13 +09:00
--icon-bell : url ( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bell-active : url ( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="%23282C37" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bell-header-tabs : url ( 'data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23282C37" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bell-header-tabs-active : url ( 'data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="%23282C37" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23282C37" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-home-notification : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E' ) ;
--icon-home-notification-active : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23282C37" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E' ) ;
--icon-home : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E' ) ;
--icon-globe : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23282C37" viewBox="0 0 512 512"%3E%3Cpath d="M96.85 286.62a8 8 0 00-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0052.41-8 8 8 0 00.79-15 1120 1120 0 01-109.48-55.61 1126.24 1126.24 0 01-102.87-66.77zM492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 00-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 003.15 16.06c22.74 25 26.42 38.51 25.48 41.36-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46-6.76-2.08-13.79-4.49a176.76 176.76 0 0019.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 00432 256a178.87 178.87 0 00-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 00-106.4 35.89 177.4 177.4 0 00-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 00-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14-29.57-30.26-33.09-45.61-32.16-48.45 2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0096.22 123l.36-.44a15.74 15.74 0 00-8.67-25.43A237.38 237.38 0 0064.13 93c-30.72-3.53-50.83 2.52-59.78 18-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64 7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19 9.09-15.62 4.08-36.32-14.86-61.5z"/%3E%3C/svg%3E' ) ;
--icon-home-column-link-active : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23282C37" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E' ) ;
--icon-hashtag : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E' ) ;
--icon-hashtag-active : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E' ) ;
2023-07-30 21:49:58 +09:00
--icon-star : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23282C37" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A' ) ;
--icon-star-accent : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23f76902" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A' ) ;
--icon-star-hover : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A' ) ;
--icon-star-active : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23ffb609" stroke="%23ffb609" stroke-width="4" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A' ) ;
2023-07-12 00:11:27 +09:00
--icon-search : url ( "data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23282C37' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E" ) ;
2023-07-10 19:09:13 +09:00
}
@ media ( prefers-color-scheme : dark ) {
: root {
--logo : url ( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' class='mastodon-logo' viewBox='0 0 216.414 232.01'%3E%3Cdefs xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient xmlns='http://www.w3.org/2000/svg' id='a' x2='0%25' y2='100%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%23E68A32'/%3E%3Cstop offset='100%25' stop-color='%23E68A32'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns='http://www.w3.org/2000/svg' fill='url(%23a)' d='M211.807 139.088c-3.18 16.366-28.492 34.277-57.562 37.748-15.159 1.809-30.084 3.471-45.999 2.741-26.027-1.192-46.565-6.212-46.565-6.212 0 2.534.156 4.946.469 7.202 3.384 25.687 25.47 27.225 46.391 27.943 21.116.723 39.919-5.206 39.919-5.206l.867 19.09s-14.77 7.931-41.08 9.39c-14.51.797-32.525-.365-53.507-5.919C9.232 213.82 1.406 165.311.209 116.091c-.365-14.613-.14-28.393-.14-39.918 0-50.33 32.976-65.083 32.976-65.083C49.672 3.454 78.204.242 107.865 0h.729c29.66.242 58.21 3.454 74.837 11.09 0 0 32.975 14.752 32.975 65.082 0 0 .414 37.134-4.599 62.916'/%3E%3Cpath fill='%23fff' d='M177.51 80.077v60.941h-24.144v-59.15c0-12.469-5.246-18.797-15.74-18.797-11.602 0-17.417 7.507-17.417 22.352V117.8H96.207V85.423c0-14.845-5.816-22.352-17.418-22.352-10.494 0-15.74 6.328-15.74 18.797v59.15H38.905V80.077c0-12.455 3.171-22.352 9.541-29.675 6.569-7.322 15.171-11.076 25.85-11.076 12.355 0 21.711 4.748 27.898 14.247l6.013 10.082 6.015-10.082c6.185-9.498 15.542-14.247 27.898-14.247 10.677 0 19.28 3.753 25.85 11.076 6.369 7.322 9.54 17.22 9.54 29.675'/%3E%3C/svg%3E" ) ;
--icon-follow-hashtag : url ( 'data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23ffffff" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7H214.7l.5-8.3c.7-9.8 1.4-11.5 8.2-18.5 8.6-9 7-8.7 41.4-9l30.2-.3V259h-9.5c-9.4 0-9.5 0-9.1-2.3.3-1.2 1.5-10.8 2.6-21.2 1.2-10.5 3-26.5 4.1-35.7 1-9.2 1.9-17.2 1.9-17.8 0-.7 12.3-1 38.5-1 23.5 0 40.3-.4 43.4-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%23ffffff" d="M317.2 207c-1.8 1.1-4.1 3.4-5.2 5.2-1.9 3.1-2 5.1-2 38V285h-34.7c-33 0-35 .1-38.1 2-6.7 4.1-7.2 6-7.2 30s.5 25.9 7.2 30c3.1 1.9 5.1 2 38.1 2H310v34.7c0 33 .1 35 2 38.1 4.1 6.7 6 7.2 30 7.2s25.9-.5 30-7.2c1.9-3.1 2-5.1 2-38.1V349h34.8c32.9 0 34.9-.1 38-2 6.7-4.1 7.2-6 7.2-30s-.5-25.9-7.2-30c-3.1-1.9-5.1-2-38-2H374v-34.8c0-32.9-.1-34.9-2-38-4.1-6.7-6-7.2-30-7.2-19.7 0-21.8.2-24.8 2z"/%3E%3Cpath fill="%23ffffff" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E' ) ;
--icon-unfollow-hashtag : url ( 'data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%2300ba7c" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7h38.8c21.3 0 38.8.4 38.8.9 0 1-2.3 21.5-5 45.1-5.9 52.1-6.4 57.6-5 62.4 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 5-3 8.7-6.7 10.1-10.1 1.2-2.9 1.1-3.1-10.8-15.1-6.7-6.7-12.6-13.2-13.2-14.4-1.5-2.9-1.4-25.8 0-28.6.6-1.2 9.2-10.3 19-20.3 24-24.2 24-20.9.3-44.4-9.6-9.6-18.2-18.7-19-20.2-2-3.8-2-25.8 0-29.6 1.7-3.2 34.2-35.5 37.3-37.1 1.2-.6 4.2-1.1 6.6-1.1 5.2 0 4.6 1.5 6.8-17.3l1.1-9.7h38.4c23.4 0 40.2-.4 43.3-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%2300ba7c" d="M277.5 223.2c-3.1 1.7-28.5 27-30.1 30-1.7 3.2-1.9 12-.3 15.1.6 1.2 11.7 12.9 24.7 25.9l23.7 23.8-23.7 23.7c-13 13.1-24.1 24.8-24.7 26-1.6 3.1-1.4 11.9.3 15.1 1.7 3.2 27.2 28.5 30.3 30.1 2.8 1.4 11.8 1.4 14.6 0 1.2-.6 12.9-11.7 26-24.7l23.7-23.7 23.8 23.7c13 13 24.7 24.1 25.9 24.7 2.8 1.4 11.8 1.4 14.6 0 3.1-1.6 28.6-26.9 30.3-30.1 1.7-3.2 1.9-12 .3-15.1-.6-1.2-11.7-12.9-24.7-26L388.5 318l23.7-23.8c13-13 24.1-24.7 24.7-25.9 1.6-3.1 1.4-11.9-.3-15.1-1.7-3.2-27.2-28.5-30.3-30.1-2.8-1.4-11.8-1.4-14.6 0-1.2.6-12.9 11.7-25.9 24.7L342 271.5l-23.7-23.7c-13.1-13-24.8-24.1-26-24.7-2.8-1.4-12.2-1.4-14.8.1z"/%3E%3C/svg%3E' ) ;
2023-08-07 00:29:53 +09:00
--icon-boost : url ( "data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23ffffff; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg%3E%3Cpath d='M21.502,2.561c-1.212,-1.213 -3.11,-1.53 -5.346,-0.89c-2.031,0.581 -4.151,1.901 -5.968,3.718c-0.235,0.235 -0.462,0.477 -0.68,0.722c-2.765,0.035 -6.278,1.476 -7.556,2.745c-0.442,0.438 -0.666,0.896 -0.666,1.359c0,0.351 0.184,0.677 0.486,0.857l4.38,2.629c0.041,1.212 0.448,2.242 1.208,3.001c0.745,0.746 1.758,1.137 2.942,1.19l2.564,4.275c0.181,0.301 0.507,0.485 0.858,0.485c0.463,0 0.92,-0.224 1.359,-0.665c1.232,-1.242 2.625,-4.615 2.732,-7.316c0.291,-0.255 0.58,-0.518 0.859,-0.797c1.816,-1.817 3.137,-3.936 3.717,-5.968c0.639,-2.235 0.323,-4.133 -0.889,-5.345Zm-7.499,17.612l-1.428,-2.379c0.944,-0.105 1.854,-0.341 2.899,-1.02c-0.381,1.4 -0.99,2.696 -1.471,3.399Zm6.465,-12.816c-0.488,1.71 -1.628,3.522 -3.208,5.103c-1.581,1.581 -3.393,2.72 -5.103,3.209c-1.487,0.423 -2.717,0.284 -3.383,-0.381c-0.665,-0.665 -0.804,-1.898 -0.38,-3.382c0.488,-1.71 1.628,-3.522 3.208,-5.103c1.581,-1.581 3.393,-2.72 5.103,-3.209c0.566,-0.161 1.096,-0.241 1.571,-0.241c0.771,0 1.4,0.21 1.812,0.622c0.665,0.665 0.804,1.898 0.38,3.382Zm-16.703,2.579c0.703,-0.481 1.998,-1.09 3.399,-1.471c-0.679,1.044 -0.915,1.954 -1.02,2.898l-2.379,-1.427Zm11.373,-3.84c-0.78,0.78 -0.78,2.048 0,2.828c0.781,0.781 2.048,0.781 2.828,0c0.781,-0.78 0.781,-2.048 0,-2.828c-0.78,-0.781 -2.047,-0.781 -2.828,0Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-boost-accent : url ( "data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23e68933; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg%3E%3Cpath d='M21.502,2.561c-1.212,-1.213 -3.11,-1.53 -5.346,-0.89c-2.031,0.581 -4.151,1.901 -5.968,3.718c-0.235,0.235 -0.462,0.477 -0.68,0.722c-2.765,0.035 -6.278,1.476 -7.556,2.745c-0.442,0.438 -0.666,0.896 -0.666,1.359c0,0.351 0.184,0.677 0.486,0.857l4.38,2.629c0.041,1.212 0.448,2.242 1.208,3.001c0.745,0.746 1.758,1.137 2.942,1.19l2.564,4.275c0.181,0.301 0.507,0.485 0.858,0.485c0.463,0 0.92,-0.224 1.359,-0.665c1.232,-1.242 2.625,-4.615 2.732,-7.316c0.291,-0.255 0.58,-0.518 0.859,-0.797c1.816,-1.817 3.137,-3.936 3.717,-5.968c0.639,-2.235 0.323,-4.133 -0.889,-5.345Zm-7.499,17.612l-1.428,-2.379c0.944,-0.105 1.854,-0.341 2.899,-1.02c-0.381,1.4 -0.99,2.696 -1.471,3.399Zm6.465,-12.816c-0.488,1.71 -1.628,3.522 -3.208,5.103c-1.581,1.581 -3.393,2.72 -5.103,3.209c-1.487,0.423 -2.717,0.284 -3.383,-0.381c-0.665,-0.665 -0.804,-1.898 -0.38,-3.382c0.488,-1.71 1.628,-3.522 3.208,-5.103c1.581,-1.581 3.393,-2.72 5.103,-3.209c0.566,-0.161 1.096,-0.241 1.571,-0.241c0.771,0 1.4,0.21 1.812,0.622c0.665,0.665 0.804,1.898 0.38,3.382Zm-16.703,2.579c0.703,-0.481 1.998,-1.09 3.399,-1.471c-0.679,1.044 -0.915,1.954 -1.02,2.898l-2.379,-1.427Zm11.373,-3.84c-0.78,0.78 -0.78,2.048 0,2.828c0.781,0.781 2.048,0.781 2.828,0c0.781,-0.78 0.781,-2.048 0,-2.828c-0.78,-0.781 -2.047,-0.781 -2.828,0Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E" ) ;
2023-07-30 21:49:58 +09:00
--icon-reply : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ffffff' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23ffffff'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-reply-accent : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23e68933' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23e68933'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
2023-07-10 19:09:13 +09:00
--icon-share-detailed-status-action-bar : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-share-detailed-status-action-bar-hover : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-bookmark-detailed-status-action-bar : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23ffffff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-detailed-status-action-bar-hover : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-detailed-status-action-bar-active : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-column-link : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bookmark-column-link-active : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-list : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/%3E%3Ccircle cx="80" cy="144" r="16" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E' ) ;
2023-07-30 21:49:58 +09:00
--icon-share : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-share-accent : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e68933' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
2023-07-10 19:09:13 +09:00
--icon-share-hover : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-star-column-link : url ( 'data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-star-column-link-active : url ( 'data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-star-notification : url ( 'data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="0" viewBox="0 0 24 24" fill="%23ffac33" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffac33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-heart-column-link : url ( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23ffffff' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E" ) ;
--icon-heart-column-link-active : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23ffffff'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-direct-messages : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E' ) ;
--icon-direct-messages-active : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23ffffff" stroke="%23232543" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E' ) ;
--icon-users-column-link : url ( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23ffffff" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-users-column-link-active : url ( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23ffffff" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bookmark-status-hover : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-status-hover-red : url ( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
2023-07-30 21:49:58 +09:00
--icon-bookmark : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bookmark-accent : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e68933" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E' ) ;
2023-07-10 19:09:13 +09:00
--icon-bell : url ( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bell-active : url ( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bell-header-tabs : url ( 'data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bell-header-tabs-active : url ( 'data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-home-notification : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E' ) ;
--icon-home-notification-active : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23ffffff" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E' ) ;
--icon-home : url ( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E' ) ;
--icon-globe : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23ffffff" viewBox="0 0 512 512"%3E%3Cpath d="M96.85 286.62a8 8 0 00-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0052.41-8 8 8 0 00.79-15 1120 1120 0 01-109.48-55.61 1126.24 1126.24 0 01-102.87-66.77zM492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 00-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 003.15 16.06c22.74 25 26.42 38.51 25.48 41.36-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46-6.76-2.08-13.79-4.49a176.76 176.76 0 0019.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 00432 256a178.87 178.87 0 00-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 00-106.4 35.89 177.4 177.4 0 00-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 00-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14-29.57-30.26-33.09-45.61-32.16-48.45 2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0096.22 123l.36-.44a15.74 15.74 0 00-8.67-25.43A237.38 237.38 0 0064.13 93c-30.72-3.53-50.83 2.52-59.78 18-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64 7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19 9.09-15.62 4.08-36.32-14.86-61.5z"/%3E%3C/svg%3E' ) ;
--icon-home-column-link-active : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23ffffff" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E' ) ;
--icon-hashtag : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E' ) ;
--icon-hashtag-active : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E' ) ;
2023-07-30 21:49:58 +09:00
--icon-star : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23ffffff" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A' ) ;
--icon-star-accent : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23e68933" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A' ) ;
2023-07-10 19:09:13 +09:00
--icon-star-hover : url ( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A' ) ;
2023-07-12 00:11:27 +09:00
--icon-search : url ( "data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E" ) ;
2023-07-10 19:09:13 +09:00
}
}
body . layout-single-column {
background-color : var ( --color-bg ) ;
color : var ( --color-fg ) ;
font-family : ui-rounded , "mastodon-font-sans-serif" , sans-serif ;
}
2023-07-10 21:58:15 +09:00
/* 🖱️ Scrollbars */
2023-07-11 04:27:58 +09:00
: root : has ( . layout-single-column ) * :: -webkit-scrollbar-track {
2023-07-10 19:09:13 +09:00
background-color : var ( --color-bg ) ;
padding : 2px ;
}
2023-07-11 04:27:58 +09:00
: root : has ( . layout-single-column ) * :: -webkit-scrollbar-thumb {
2023-07-10 19:09:13 +09:00
background-color : var ( --color-accent ) ;
border-radius : 50px ;
2023-07-12 22:05:44 +09:00
opacity : . 4 ;
2023-07-10 19:09:13 +09:00
}
2023-07-11 04:27:58 +09:00
: root : has ( . layout-single-column ) * :: -webkit-scrollbar-track : hover {
2023-07-10 19:09:13 +09:00
background-color : var ( --color-bg ) ;
}
2023-07-11 04:27:58 +09:00
: root : has ( . layout-single-column ) * :: -webkit-scrollbar-thumb : hover {
2023-07-10 19:09:13 +09:00
background-color : var ( --color-accent ) ;
opacity : . 7 ;
}
@ media screen and ( max-width : 1174px ) {
2023-07-11 04:27:58 +09:00
: root : has ( . layout-single-column ) * :: -webkit-scrollbar {
2023-07-10 19:09:13 +09:00
display : none ;
}
}
2023-07-10 21:58:15 +09:00
/* 💨 Loading bar */
2023-07-15 08:06:28 +09:00
. layout-single-column . loading-bar {
2023-07-10 21:58:15 +09:00
background-color : var ( --color-accent ) ;
}
2023-07-10 22:00:01 +09:00
/* Resetting borders */
2023-07-15 08:06:28 +09:00
. layout-single-column . column > . scrollable ,
. layout-single-column . error-column ,
. layout-single-column . getting-started ,
2023-07-10 22:00:01 +09:00
. layout-single-column . regeneration-indicator ,
2023-07-15 08:06:28 +09:00
. layout-single-column . audio-player ,
. layout-single-column . compose-form . spoiler-input__input ,
. layout-single-column . compose-form__autosuggest-wrapper ,
. layout-single-column . compose-form__poll-wrapper select ,
. layout-single-column . poll__option input [ type = text ] ,
. layout-single-column . report-dialog-modal__textarea ,
. layout-single-column . search__input ,
2023-07-10 22:00:01 +09:00
. layout-single-column . setting-text ,
2023-07-10 22:55:50 +09:00
. layout-single-column . compose-form . compose-form__buttons-wrapper ,
. layout-single-column . about__section__body {
2023-07-10 22:00:01 +09:00
border : 0 ;
}
2023-07-15 08:06:28 +09:00
. layout-single-column . column-inline-form ,
. layout-single-column . column > . scrollable ,
. layout-single-column . error-column ,
. layout-single-column . getting-started ,
2023-07-10 22:00:01 +09:00
. layout-single-column . regeneration-indicator {
background : transparent ;
}
2023-07-12 08:09:31 +09:00
/* Round avatars */
2023-07-10 22:00:01 +09:00
. layout-single-column . account__avatar img {
border-radius : 50 % ;
}
2023-07-12 08:09:31 +09:00
/* Rordered layout */
. layout-single-column . columns-area__panels__pane--navigational {
order : 1 ;
}
. layout-single-column . columns-area__panels__main {
order : 2 ;
}
. layout-single-column . columns-area__panels__pane--compositional {
order : 3 ;
}
. layout-single-column . columns-area--mobile . column {
2023-07-12 19:00:21 +09:00
flex : unset ;
2023-07-12 08:09:31 +09:00
height : auto ;
}
. layout-single-column . scrollable ,
. layout-single-column . column > . scrollable {
max-height : max-content ;
2023-07-30 03:19:43 +09:00
border-top-left-radius : 8px ;
border-top-right-radius : 8px ;
border-bottom-left-radius : 8px ;
border-bottom-right-radius : 8px ;
2023-07-12 08:09:31 +09:00
}
2023-08-02 22:28:17 +09:00
. layout-single-column . dismissable-banner + . scrollable {
border-top-left-radius : 0 ;
border-top-right-radius : 0 ;
}
2023-07-10 22:00:01 +09:00
2023-07-10 21:58:15 +09:00
/ * * ️ ⃣ Icons
-------- * /
2023-07-10 19:09:13 +09:00
. layout-single-column i . fa-bookmark : before ,
. layout-single-column i . fa-share-alt : before ,
. layout-single-column i . fa-bookmark : before ,
. layout-single-column i . fa-star : before ,
. layout-single-column i . fa-retweet : before {
content : " " ;
display : inline-block ;
width : 23px ;
height : 23px ;
background-repeat : no-repeat ;
background-position : center ;
}
. layout-single-column i . fa {
background-repeat : no-repeat ;
}
. layout-single-column . detailed-status__link . fa : before {
content : " " ;
width : 13px ;
height : 13px ;
margin-bottom : -2px ;
background-size : contain ;
}
/* Replace bookmark icon */
. layout-single-column i . fa-bookmark : before {
background-image : var ( --icon-bookmark ) ;
background-size : 80 % ;
2023-07-30 21:49:58 +09:00
background-position : center 55 % ;
2023-07-10 19:09:13 +09:00
}
2023-07-13 05:47:47 +09:00
. layout-single-column . detailed-status__button i . fa-bookmark : before {
background-image : var ( --icon-bookmark-accent ) ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . icon-button . active i . fa . fa-bookmark . fa-fw : before {
background-image : var ( --icon-bookmark-active ) ;
}
/* Replace share icon */
. layout-single-column i . fa-share-alt : before {
background-image : var ( --icon-share ) ;
}
2023-07-13 05:47:47 +09:00
. layout-single-column . detailed-status__button i . fa-share-alt : before {
background-image : var ( --icon-share-accent ) ;
}
2023-07-10 19:09:13 +09:00
/* Replace star icon */
. layout-single-column i . fa-star : before {
background-image : var ( --icon-star ) ;
text-align : center ;
2023-07-11 02:50:59 +09:00
line-height : 34px ;
2023-07-10 19:09:13 +09:00
}
2023-07-13 05:47:47 +09:00
. layout-single-column . detailed-status__button i . fa-star : before {
2023-07-31 04:22:32 +09:00
background-size : 75 % ;
2023-07-13 05:47:47 +09:00
background-image : var ( --icon-star-accent ) ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column button . icon-button . active i . fa-star : before ,
. layout-single-column . notification i . fa-star : before {
2023-07-30 21:49:58 +09:00
background-image : var ( --icon-star-active ) ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . detailed-status__link i . fa . fa-star : before {
content : " " ;
2023-08-07 00:29:53 +09:00
transform : scale ( . 9 ) ;
2023-07-10 19:09:13 +09:00
}
/* Replace retweet icon */
. layout-single-column i . fa . fa-retweet . fa-fw ,
. layout-single-column button . icon-button i . fa . fa-retweet . fa-fw ,
. layout-single-column button . icon-button : hover i . fa . fa-retweet . fa-fw {
background-image : var ( --icon-boost ) ;
background-position : center ;
}
2023-07-13 05:47:47 +09:00
. layout-single-column . detailed-status__button i . fa . fa-retweet . fa-fw ,
. layout-single-column . detailed-status__button button . icon-button i . fa . fa-retweet . fa-fw ,
. layout-single-column . detailed-status__button button . icon-button : hover i . fa . fa-retweet . fa-fw {
background-image : var ( --icon-boost-accent ) ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column button . icon-button . active i . fa . fa-retweet . fa-fw ,
2023-07-31 04:22:32 +09:00
. layout-single-column . detailed-status__button button . icon-button . active : hover i . fa . fa-retweet . fa-fw ,
2023-07-10 19:09:13 +09:00
. layout-single-column . notification i . fa . fa-retweet . fa-fw {
background-image : var ( --icon-boost-active ) ;
background-position : center ;
}
. layout-single-column . fa . fa-retweet . status__prepend-icon . fa-fw {
2023-07-31 04:22:32 +09:00
background-image : var ( --icon-boost-active ) ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . detailed-status__link . fa . fa-retweet : before {
background-image : var ( --icon-boost ) ;
}
. layout-single-column button . icon-button . reblogPrivate i . fa-retweet ,
. layout-single-column button . icon-button . reblogPrivate : hover i . fa-retweet ,
. layout-single-column button . icon-button . disabled i . fa-retweet ,
. layout-single-column button . icon-button . disabled : hover i . fa-retweet {
background-image : var ( --icon-boost ) ;
opacity : . 2 ;
pointer-events : none ;
}
2023-07-14 02:11:32 +09:00
. layout-single-column . boost-modal__action-bar . fa-retweet {
background-image : var ( --icon-boost ) ;
vertical-align : middle ;
}
2023-07-10 19:09:13 +09:00
/* Replace reply icon */
. layout-single-column i . fa-mail-reply :: before ,
. layout-single-column i . fa-reply :: before ,
. layout-single-column i . fa-reply-all :: before {
content : var ( --icon-reply ) ;
position : relative ;
2023-07-30 21:49:58 +09:00
top : 3px ;
2023-07-10 19:09:13 +09:00
}
2023-07-13 05:47:47 +09:00
. layout-single-column . detailed-status__button i . fa-reply :: before ,
. layout-single-column . detailed-status__button i . fa-reply-all :: before {
content : var ( --icon-reply-accent ) ;
2023-07-10 19:09:13 +09:00
}
2023-07-12 22:05:44 +09:00
2023-07-10 21:58:15 +09:00
/* Home icon */
. layout-single-column . notification__filter-bar . fa-home :: before {
content : var ( --icon-home-notification ) ;
2023-07-10 19:09:13 +09:00
}
2023-07-10 21:58:15 +09:00
. layout-single-column . notification__filter-bar . active . fa-home :: before {
content : var ( --icon-home-notification-active ) ;
2023-07-10 19:09:13 +09:00
}
2023-07-10 21:58:15 +09:00
. layout-single-column . column-link . fa-home :: before {
content : var ( --icon-home ) ;
}
. layout-single-column . column-link . active . fa-home :: before {
content : var ( --icon-home-column-link-active ) ;
}
2023-07-12 22:05:44 +09:00
. layout-single-column . fa-home . column-header__icon : before {
content : var ( --icon-home-notification-active ) ;
}
2023-07-10 21:58:15 +09:00
/* Federated icon */
. layout-single-column . column-link . fa-globe :: before {
content : var ( --icon-globe ) ;
}
2023-07-12 22:05:44 +09:00
. layout-single-column . fa-globe . column-header__icon : before {
content : var ( --icon-globe ) ;
2023-07-10 21:58:15 +09:00
}
2023-07-12 22:05:44 +09:00
/* Local icon */
. layout-single-column . fa-group . column-header__icon : before ,
. layout-single-column . fa-users . column-header__icon : before {
content : var ( --icon-users-column-link-active ) ;
2023-07-15 08:06:28 +09:00
}
2023-07-10 21:58:15 +09:00
/* Explore icon */
. layout-single-column . column-link . fa-hashtag :: before {
content : var ( --icon-hashtag ) ;
}
. layout-single-column . column-link . active . fa-hashtag :: before {
content : var ( --icon-hashtag-active ) ;
}
2023-07-12 22:05:44 +09:00
. layout-single-column . fa-hashtag . column-header__icon : before {
content : var ( --icon-hashtag-active ) ;
}
2023-07-12 00:11:27 +09:00
/* Search icon */
2023-07-12 00:25:30 +09:00
. layout-single-column . column-link i . fa-search {
transform : scale ( 1 ) ;
}
2023-07-12 00:11:27 +09:00
. layout-single-column . column-link . fa . fa-search :: before {
content : var ( --icon-search ) ;
2023-07-12 00:25:30 +09:00
left : 2px ;
2023-07-12 00:11:27 +09:00
}
. layout-single-column . column-link . active . fa . fa-search :: before {
content : var ( --icon-search ) ;
}
2023-07-12 22:05:44 +09:00
. layout-single-column . column-header__icon . fa-search {
2023-07-21 00:55:11 +09:00
vertical-align : baseline ;
color : var ( --color-content-fg ) ;
2023-07-12 22:05:44 +09:00
}
2023-07-10 21:58:15 +09:00
/* Local icon */
. layout-single-column . column-link . fa-users :: before {
content : var ( --icon-users-column-link ) ;
}
. layout-single-column . column-link . active . fa-users :: before {
content : var ( --icon-users-column-link-active ) ;
}
/* Notifications icon */
. layout-single-column . column-link . fa-bell :: before {
content : var ( --icon-bell ) ;
}
. layout-single-column . column-link . active . fa-bell :: before {
content : var ( --icon-bell-active ) ;
}
2023-07-12 22:05:44 +09:00
. layout-single-column . fa-bell . column-header__icon : before {
content : var ( --icon-bell-active ) ;
}
2023-07-10 21:58:15 +09:00
/* Direct messages icon */
. layout-single-column . column-link . fa-at :: before {
content : var ( --icon-direct-messages ) ;
}
2023-07-12 22:05:44 +09:00
. layout-single-column . fa-at . column-header__icon : before {
content : var ( --icon-direct-messages ) ;
}
2023-07-23 19:00:37 +09:00
. layout-single-column . fa-at . status__prepend-icon {
transform : scale ( . 7 ) ;
}
. layout-single-column . fa-at . status__prepend-icon :: before {
content : var ( --icon-direct-messages ) ;
}
2023-07-12 22:05:44 +09:00
/* Bookmarks icon */
2023-07-10 21:58:15 +09:00
. layout-single-column . column-link . fa-bookmark :: before {
content : var ( --icon-bookmark-column-link ) ;
background-image : none ;
}
. layout-single-column . column-link . active . fa-bookmark :: before {
content : var ( --icon-bookmark-column-link-active ) ;
}
2023-07-12 22:05:44 +09:00
. layout-single-column . fa-bookmark . column-header__icon : before {
content : var ( --icon-bookmark-column-link-active ) ;
}
/* Favorites icon */
2023-07-10 21:58:15 +09:00
. layout-single-column . column-link . fa-star :: before {
content : var ( --icon-star-column-link ) ;
background-image : none ;
}
. layout-single-column . column-link . active . fa-star :: before {
content : var ( --icon-star-column-link-active ) ;
}
2023-07-12 22:05:44 +09:00
. layout-single-column . fa-star . column-header__icon : before {
content : var ( --icon-star-column-link-active ) ;
}
/* Lists icon */
2023-07-10 21:58:15 +09:00
. layout-single-column . column-link . fa-list-ul {
transform : scale ( 1 ) ;
margin-right : 8px ;
margin-left : 1px ;
}
. layout-single-column . column-link . fa-list-ul :: before {
content : var ( --icon-list ) ;
background-image : none ;
2023-07-10 19:09:13 +09:00
}
2023-07-13 08:05:53 +09:00
/* Follow Requests icon */
. layout-single-column . column-link . fa-user-plus :: before {
content : var ( --icon-users-column-link ) ;
background-image : none ;
}
2023-07-10 19:09:13 +09:00
2023-07-13 07:31:58 +09:00
/* Follow hashtag icon */
. layout-single-column . column-header__button . column-header__icon . fa-user-plus :: before {
content : var ( --icon-follow-hashtag ) ;
position : relative ;
top : 2px ;
right : -5px ;
}
2023-07-15 08:06:28 +09:00
2023-07-13 08:05:53 +09:00
/* Unfollow hashtag icon */
. layout-single-column . column-header__button . column-header__icon . fa-user-times :: before {
2023-07-13 07:31:58 +09:00
content : var ( --icon-unfollow-hashtag ) ;
position : relative ;
top : 2px ;
right : -5px
2023-07-13 08:05:53 +09:00
}
2023-07-15 08:06:28 +09:00
2023-07-13 07:31:58 +09:00
2023-07-10 19:09:13 +09:00
2023-07-10 21:58:15 +09:00
/ * 📝 Compose panel
---------------- * /
2023-07-10 19:09:13 +09:00
. layout-single-column . compose-form {
2023-07-12 00:36:13 +09:00
padding : 0 0 71px ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . navigation-bar {
2023-07-30 03:19:43 +09:00
border-radius : 8px 8px 0 0 ;
2023-07-10 19:09:13 +09:00
background-color : var ( --color-content-secondary-bg ) ;
2023-07-30 03:19:43 +09:00
border-top : 1px solid var ( --color-lines ) ;
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . navigation-bar strong {
2023-07-31 00:08:39 +09:00
color : var ( --color-content-fg ) ;
2023-07-10 19:09:13 +09:00
}
2023-07-15 08:06:28 +09:00
. layout-single-column . compose-form . autosuggest-textarea__suggestions ,
2023-07-10 19:09:13 +09:00
. layout-single-column . compose-form . autosuggest-textarea__textarea ,
2023-07-12 07:04:24 +09:00
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item ,
2023-07-10 19:09:13 +09:00
. layout-single-column . compose-form . compose-form__buttons-wrapper ,
. layout-single-column . compose-form__autosuggest-wrapper ,
. layout-single-column . compose-form . compose-form__modifiers {
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
border : 0 ;
border-top : 0 ;
border-radius : 0 ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column . compose-form__autosuggest-wrapper ,
. layout-single-column . compose-form . compose-form__buttons-wrapper {
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
}
. layout-single-column . compose-form . compose-form__buttons-wrapper {
border-bottom : 1px solid var ( --color-lines ) ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . compose-form . compose-form__buttons-wrapper . icon-button ,
. layout-single-column . compose-form . compose-form__buttons-wrapper . text-icon-button ,
. layout-single-column . compose-form . character-counter {
color : var ( --color-fg ) ;
}
2023-07-20 22:01:54 +09:00
. layout-single-column . compose-form . compose-form__buttons-wrapper . icon-button . active {
2023-07-10 19:09:13 +09:00
color : var ( --color-accent ) ;
}
2023-07-20 22:01:54 +09:00
. layout-single-column . compose-form . compose-form__buttons-wrapper . text-icon-button . active {
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . compose-panel . autosuggest-textarea__textarea {
padding-left : 20px ;
2023-08-03 08:09:36 +09:00
padding-right : 45px ;
2023-07-10 19:09:13 +09:00
padding-top : 20px ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column . compose-panel . autosuggest-textarea__textarea :: placeholder {
font-size : 130 % ;
opacity : . 5 ;
}
2023-07-12 07:26:24 +09:00
. layout-single-column . compose-panel . autosuggest-textarea__textarea :: placeholder ,
. layout-single-column . compose-form . autosuggest-account . display-name__html {
2023-07-10 19:09:13 +09:00
color : var ( --color-content-fg ) ;
}
2023-07-12 07:26:24 +09:00
. layout-single-column . compose-form . autosuggest-account . display-name__account {
color : var ( --color-content-fg-muted ) ;
}
2023-07-12 07:04:24 +09:00
. layout-single-column . compose-form . autosuggest-textarea__suggestions--visible ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item {
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-12 07:04:24 +09:00
}
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item . selected ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item : active ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item : focus ,
2023-07-12 07:26:24 +09:00
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item : hover ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item . selected . autosuggest-account . display-name__account ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item : active . autosuggest-account . display-name__account ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item : focus . autosuggest-account . display-name__account ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item : hover . autosuggest-account . display-name__account ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item . selected . autosuggest-account . display-name__html ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item : active . autosuggest-account . display-name__html ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item : focus . autosuggest-account . display-name__html ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item : hover . autosuggest-account . display-name__html {
2023-07-12 07:04:24 +09:00
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . compose-form . compose-form__buttons-wrapper {
2023-07-30 03:19:43 +09:00
border-radius : 0 0 8px 8px ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . reply-indicator ,
. layout-single-column . compose-form . compose-form__warning {
background-color : var ( --color-accent-bg ) ;
2023-07-30 04:59:25 +09:00
border-left : 1px solid var ( --color-accent-lines ) ;
border-right : 1px solid var ( --color-accent-lines ) ;
2023-07-30 03:19:43 +09:00
border-top : 0 ;
border-bottom : 0 ;
2023-07-10 23:22:40 +09:00
box-shadow : none ;
2023-07-10 19:09:13 +09:00
margin : 0 ;
border-radius : 0 ;
}
. layout-single-column . compose-form . compose-form__warning ,
. layout-single-column . simple_form . recommended ,
. layout-single-column . compose-form . compose-form__warning ,
. layout-single-column . compose-form . compose-form__warning a ,
. layout-single-column . reply-indicator__content a ,
. layout-single-column . navigation-bar__profile-edit {
color : var ( --color-accent ) ;
}
. layout-single-column . empty-column-indicator ,
. layout-single-column . error-column {
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column . compose-form . autosuggest-input {
box-sizing : border-box ;
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . compose-form . spoiler-input . spoiler-input--visible {
margin-bottom : 0 ;
2023-07-20 21:58:16 +09:00
height : auto ;
background-color : var ( --color-content-bg ) ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . compose-form . spoiler-input__input {
background-color : var ( --color-accent-bg ) ;
color : var ( --color-accent ) ;
margin-bottom : 0 ;
2023-07-20 21:58:16 +09:00
border-radius : 10px ;
padding : 12px 15px ;
box-shadow :
0 0 0 4px inset var ( --color-content-bg ) ;
}
. layout-single-column . compose-form . spoiler-input__input : focus {
box-shadow :
0 0 0 4px inset var ( --color-content-bg ) ,
0 0 0 6px inset var ( --color-accent ) ,
0 0 0 1px inset var ( --color-content-bg ) ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . display-name {
color : var ( --color-content-fg ) ;
}
2023-07-11 02:50:59 +09:00
. layout-single-column . compose-form . compose-form__modifiers . compose-form__upload . icon-button {
color : # ffffff ;
}
2023-07-14 21:05:39 +09:00
. layout-single-column . compose-form . compose-form__modifiers . compose-form__upload . icon-button : active ,
. layout-single-column . compose-form . compose-form__modifiers . compose-form__upload . icon-button : focus ,
. layout-single-column . compose-form . compose-form__modifiers . compose-form__upload . icon-button : hover {
2023-07-11 02:50:59 +09:00
background-color : rgba ( 0 , 0 , 0 , . 4 ) ;
}
2023-07-10 19:09:13 +09:00
@ media screen and ( max-width : 1174px ) {
. layout-single-column . compose-form {
padding : 0 10px 10px ;
}
. layout-single-column . navigation-bar {
2023-07-30 03:19:43 +09:00
border-radius : 8px 8px 0 0 ;
2023-07-10 19:09:13 +09:00
margin : 10px 10px 0 ;
}
}
2023-07-30 03:19:43 +09:00
/* Publish button */
. layout-single-column . compose-form . compose-form__publish . compose-form__publish-button-wrapper {
padding-top : 10px ;
width : 100 % ;
}
. layout-single-column . compose-form . compose-form__publish . compose-form__publish-button-wrapper . button {
padding : 10px 18px ;
}
/* Emoji picker */
. layout-single-column . emoji-button {
margin : 15px 10px 0 0 ;
}
. layout-single-column . emoji-picker-dropdown__menu {
overflow : hidden ;
border-radius : 8px ;
background-color : var ( --color-content-bg ) ;
box-shadow :
0 0 0 1px var ( --color-lines ) ,
0 0 5px rgba ( 0 , 0 , 0 , . 15 ) ;
}
. layout-single-column . emoji-mart {
width : 100 % ! important ;
display : block ;
}
. layout-single-column . emoji-mart-bar : first-child {
background-color : var ( --color-accent-bg ) ;
2023-07-30 04:59:25 +09:00
border-color : var ( --color-accent-lines ) ;
2023-07-30 03:19:43 +09:00
}
. layout-single-column . emoji-mart-anchor-bar {
background-color : var ( --color-accent ) ;
}
. layout-single-column . emoji-mart-anchor-selected {
color : var ( --color-accent ) ;
}
. layout-single-column . emoji-mart-anchor-icon svg path ,
. layout-single-column . emoji-mart-anchor-icon svg rect {
fill : var ( --color-content-fg ) ;
}
. layout-single-column . emoji-mart-anchor-selected . emoji-mart-anchor-icon svg path ,
. layout-single-column . emoji-mart-anchor-selected . emoji-mart-anchor-icon svg rect ,
. layout-single-column . emoji-mart-search-icon svg path {
fill : var ( --color-accent ) ;
}
. layout-single-column . emoji-mart-search-icon ,
. layout-single-column . emoji-mart-search-icon : disabled ,
. layout-single-column . emoji-mart-search-icon svg {
opacity : 1 ;
}
. layout-single-column . emoji-mart-scroll :: -webkit-scrollbar-track {
background-color : var ( --color-content-bg ) ;
}
. layout-single-column . emoji-mart-search ,
. layout-single-column . emoji-mart-scroll ,
. layout-single-column . emoji-mart-category-label span {
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
}
. layout-single-column . emoji-mart-search input {
background-color : var ( --color-accent-bg ) ;
2023-07-30 04:59:25 +09:00
border-color : var ( --color-accent-lines ) ;
2023-08-03 08:04:46 +09:00
color : var ( --color-content-fg ) ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
}
. layout-single-column . emoji-mart-search input : focus {
border-color : var ( --color-accent ) ;
box-shadow : 0 0 0 1px inset var ( --color-accent ) ;
outline : 0 ;
}
. layout-single-column . emoji-mart-search input :: placeholder {
color : var ( --color-accent ) ;
}
2023-07-10 21:58:15 +09:00
2023-07-31 07:46:04 +09:00
/* Zoom on emojis on hover (in post content only */
2023-08-01 02:48:26 +09:00
. layout-single-column . status__content : not ( . status__content--collapsed ) { /* So the emoji doesn't clip out when zoomed on. */
2023-07-31 07:46:04 +09:00
overflow : visible ;
}
. layout-single-column . status__content . emojione {
transition : transform . 8s . 8s ;
}
. layout-single-column . status__content . emojione : hover {
transform : scale ( 2 . 5 ) ;
}
2023-07-10 21:58:15 +09:00
/ * 💬 Posts
-------- * /
2023-07-10 19:09:13 +09:00
. layout-single-column . reply-indicator__content ,
. layout-single-column . status__content {
color : var ( --color-content-fg ) ;
}
. layout-single-column . account__display-name strong ,
. layout-single-column . status__display-name strong ,
. layout-single-column . status__info . status__display-name . display-name__account {
2023-07-11 03:07:39 +09:00
color : var ( --color-content-fg ) ;
2023-07-10 19:09:13 +09:00
}
2023-07-31 00:08:39 +09:00
. layout-single-column . account__display-name strong ,
. layout-single-column . status__display-name strong {
font-weight : bold ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . status {
margin-left : 56px ;
padding : 0 10px ;
border-bottom : 0 ;
}
. layout-single-column . status__wrapper {
2023-07-12 05:45:41 +09:00
transition : background . 3s ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . status__wrapper ,
. layout-single-column . detailed-status__wrapper {
background-color : var ( --color-content-bg ) ;
2023-07-12 20:29:59 +09:00
padding : 13px 12px ;
2023-07-30 03:19:43 +09:00
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
}
@ media screen and ( max-width : 889px ) {
. layout-single-column . status__wrapper ,
. layout-single-column . detailed-status__wrapper {
border-left : 0 ;
border-right : 0 ;
}
. layout-single-column . status__wrapper {
padding : 10px 8px ;
}
}
. layout-single-column . scrollable > div : first-child > div : first-child > . status__wrapper ,
2023-07-30 05:18:02 +09:00
. layout-single-column . scrollable > div : first-child > . status__wrapper ,
2023-07-30 03:19:43 +09:00
. layout-single-column . scrollable > div > article : first-child > div > . status__wrapper ,
. layout-single-column . explore__search-results > div : first-child > . status__wrapper {
border-top : 1px solid var ( --color-lines ) ;
}
. layout-single-column . scrollable > div : last-child > div : last-child > . status__wrapper ,
2023-07-30 05:18:02 +09:00
. layout-single-column . scrollable > div : last-child > . status__wrapper ,
2023-07-30 03:19:43 +09:00
. layout-single-column . scrollable > div > article : last-child > div > . status__wrapper {
border-bottom : 1px solid var ( --color-lines ) ;
}
. layout-single-column . dismissable-banner + . scrollable > div > article : first-child > div > . status__wrapper {
border-top : 0 ;
}
@ media screen and ( min-width : 890px ) {
. layout-single-column . scrollable > div : first-child > div : first-child > . status__wrapper ,
2023-07-30 05:18:02 +09:00
. layout-single-column . scrollable > div : first-child > . status__wrapper ,
2023-07-30 03:19:43 +09:00
. layout-single-column . scrollable > div > article : first-child > div > . status__wrapper ,
. layout-single-column . explore__search-results > div : first-child > . status__wrapper {
border-top-left-radius : 8px ;
border-top-right-radius : 8px ;
}
. layout-single-column . scrollable > div : last-child > div : last-child > . status__wrapper ,
2023-07-30 05:18:02 +09:00
. layout-single-column . scrollable > div : last-child > . status__wrapper ,
2023-07-30 03:19:43 +09:00
. layout-single-column . scrollable > div > article : last-child > div > . status__wrapper {
border-bottom-right-radius : 8px ;
border-bottom-left-radius : 8px ;
}
. layout-single-column . dismissable-banner + . scrollable > div > article : first-child > div > . status__wrapper {
border-top-left-radius : 0 ;
border-top-right-radius : 0 ;
}
}
@ media screen and ( min-width : 890px ) and ( max-width : 1174px ) {
2023-07-31 00:45:43 +09:00
. layout-single-column . scrollable : first-child > div : first-child > div : first-child > . status__wrapper ,
. layout-single-column . scrollable : first-child > div > article : first-child > div > . status__wrapper {
2023-07-30 03:19:43 +09:00
margin-top : 15px ;
}
2023-07-10 19:09:13 +09:00
}
. layout-single-column . status__info {
height : 22px ;
margin-left : -56px ;
padding : 0 ;
margin-bottom : 0 ;
line-height : 10px ;
align-items : start ;
}
. layout-single-column . status__info . status__display-name {
overflow : visible ;
align-items : start ;
max-width : calc ( 100 % - 4em ) ;
}
. layout-single-column . status__info . status__display-name . display-name bdi ,
. layout-single-column . status__info . status__display-name . display-name__account {
vertical-align : top ;
}
. layout-single-column . status__info . status__display-name . display-name__account {
display : inline ;
opacity : . 7 ;
}
. layout-single-column . status__relative-time {
height : 22px ;
position : absolute ;
right : 22px ;
color : var ( --color-content-fg ) ;
2023-07-31 00:08:39 +09:00
opacity : . 6 ;
font-weight : bold ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . status__avatar {
margin-bottom : -10px ;
}
2023-07-15 08:06:28 +09:00
. layout-single-column . reply-indicator__content ,
2023-07-10 19:09:13 +09:00
. layout-single-column . status__content {
line-height : 19px ;
}
2023-07-12 20:21:51 +09:00
/* 📏 Post dividers */
2023-07-12 22:05:44 +09:00
/* Use ::before to set a non-full-width divider between posts and notifications. The divider sits above the post. */
2023-07-12 20:21:51 +09:00
. layout-single-column . status :: before ,
. layout-single-column . notification__message :: before {
2023-07-12 05:45:41 +09:00
position : absolute ;
2023-07-12 19:00:21 +09:00
background-color : var ( --color-lines ) ;
2023-07-30 03:19:43 +09:00
height : 1px ;
width : calc ( 100 % - 77px ) ;
2023-07-12 05:45:41 +09:00
right : 0 ;
2023-07-30 03:19:43 +09:00
top : -1px ;
2023-07-12 05:45:41 +09:00
content : "" ;
2023-07-30 21:49:58 +09:00
opacity : . 7 ;
2023-07-12 05:45:41 +09:00
}
2023-07-30 03:19:43 +09:00
@ media screen and ( max-width : 889px ) {
. layout-single-column . status :: before ,
. layout-single-column . notification__message :: before {
width : calc ( 100 % - 73px ) ;
}
}
2023-07-30 21:49:58 +09:00
@ media ( prefers-color-scheme : dark ) {
. layout-single-column . status :: before ,
. layout-single-column . notification__message :: before {
opacity : 1 ;
}
}
2023-07-30 03:19:43 +09:00
2023-07-12 22:05:44 +09:00
/* Remove border between posts when applicable */
2023-07-12 20:21:51 +09:00
. layout-single-column . notification . status :: before , /* no dividers on posts _inside_ notifications */
. layout-single-column . account-timeline__header + article . status :: before , /* no divider above first post on profile pages */
. layout-single-column . scrollable > div : first-child > . status :: before , /* no divider above first post in a column thread */
. layout-single-column . scrollable > div : first-child > div : first-child . status :: before /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ {
2023-07-12 05:45:41 +09:00
display : none ;
}
2023-07-30 03:19:43 +09:00
@ media screen and ( min-width : 890px ) and ( max-width : 1174px ) { /* no divider above first post in a column thread on medium-size devices */
. layout-single-column . scrollable > div : first-child > div : first-child > . status__wrapper . status :: before ,
. layout-single-column . scrollable > div > article : first-child > div > . status__wrapper . status :: before {
display : none ;
}
}
2023-07-10 21:58:15 +09:00
/* 👥 Threaded replies */
. layout-single-column . status--first-in-thread {
border-top : 0 ;
}
2023-07-12 19:00:21 +09:00
. layout-single-column . status--first-in-thread :: before {
width : 100 % ;
right : 0 ;
}
2023-07-10 21:58:15 +09:00
. layout-single-column . status--in-thread . attachment-list ,
. layout-single-column . status--in-thread . audio-player ,
. layout-single-column . status--in-thread . media-gallery ,
. layout-single-column . status--in-thread . picture-in-picture-placeholder ,
. layout-single-column . status--in-thread . status-card ,
. layout-single-column . status--in-thread . status__action-bar ,
. layout-single-column . status--in-thread . status__content ,
. layout-single-column . status--in-thread . video-player {
margin-left : 0 ;
2023-07-25 09:45:14 +09:00
width : auto ;
2023-07-10 21:58:15 +09:00
}
. layout-single-column . status--in-thread . status__line {
2023-07-30 04:59:25 +09:00
-webkit-border-start : 4px solid var ( --color-accent-bg ) ;
border-inline-start : 4px solid var ( --color-accent-bg ) ;
2023-07-10 21:58:15 +09:00
inset-inline-start : 43px ;
position : absolute ;
top : 0 ;
width : 0 ;
2023-07-30 05:18:02 +09:00
height : 14px ;
}
. layout-single-column . status__line . status__line--full {
height : 100 % ;
2023-07-10 21:58:15 +09:00
}
. layout-single-column . status__line--full : before {
2023-07-30 05:18:02 +09:00
background : transparent ;
2023-07-10 21:58:15 +09:00
}
2023-07-30 05:20:50 +09:00
. layout-single-column . status__line . status__line--full . status__line--first {
top : 58px ;
height : calc ( 100 % - 58px ) ;
}
2023-07-30 05:18:02 +09:00
@ media screen and ( max-width : 889px ) {
. layout-single-column . status--in-thread . status__line {
inset-inline-start : 39px ;
}
2023-07-10 21:58:15 +09:00
}
2023-07-12 05:45:41 +09:00
/* ⏺️ Posts when in focus */
. layout-single-column . status__wrapper . focusable : focus ,
. layout-single-column . detailed-status__wrapper . focusable : focus ,
. layout-single-column . focusable : focus . detailed-status ,
. layout-single-column . focusable : focus . detailed-status__action-bar ,
2023-07-15 08:06:28 +09:00
. layout-single-column . status__wrapper . focusable : focus . detailed-status ,
2023-07-12 05:45:41 +09:00
. layout-single-column . focusable : focus . detailed-status__action-bar {
outline : 0 ;
background : var ( --color-content-bg-focus ) ;
}
@ media screen and ( min-width : 1175px ) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */
. layout-single-column . status__wrapper : has ( . status__content : hover ) {
background : var ( --color-content-bg-focus ) ;
}
}
/* 👁️ Post detailed view */
2023-07-12 22:05:44 +09:00
. layout-single-column . detailed-status__wrapper { /* Set full-width divider above and below a detailed post */
2023-07-30 03:19:43 +09:00
border-top : 1px solid var ( --color-lines ) ;
border-bottom : 1px solid var ( --color-lines ) ;
2023-07-30 21:49:58 +09:00
box-shadow :
inset 0 -4px var ( --color-accent-lines ) ,
inset 0 4px var ( --color-accent-lines ) ;
2023-07-30 03:19:43 +09:00
}
. layout-single-column . scrollable > div : first-child > . detailed-status__wrapper { /* Detailed post is first in column */
border-top : 1px solid var ( --color-lines ) ;
border-top-right-radius : 8px ;
border-top-left-radius : 8px ;
2023-07-30 21:49:58 +09:00
box-shadow :
inset 0 -4px var ( --color-accent-lines ) ;
2023-07-30 03:19:43 +09:00
}
. layout-single-column . scrollable > div : last-child . detailed-status__wrapper : last-child { /* Detailed post is last in column */
border-bottom : 1px solid var ( --color-lines ) ;
border-bottom-right-radius : 8px ;
border-bottom-left-radius : 8px ;
2023-07-30 21:49:58 +09:00
box-shadow :
inset 0 4px var ( --color-accent-lines ) ;
}
. layout-single-column . scrollable > div : only-child . detailed-status__wrapper : last-child { /* Detailed post is the only post in column */
box-shadow : none ;
2023-07-30 03:19:43 +09:00
}
@ media screen and ( min-width : 890px ) and ( max-width : 1174px ) {
. layout-single-column . scrollable > div : first-child > . detailed-status__wrapper {
margin-top : 15px ;
}
2023-07-12 22:05:44 +09:00
}
2023-07-30 03:19:43 +09:00
@ media screen and ( max-width : 889px ) {
. layout-single-column . scrollable > div : first-child > . detailed-status__wrapper {
border-top-right-radius : 0 ;
border-top-left-radius : 0 ;
}
. layout-single-column . scrollable > div : last-child . detailed-status__wrapper : last-child {
border-bottom-right-radius : 0 ;
border-bottom-left-radius : 0 ;
}
2023-07-30 21:49:58 +09:00
. layout-single-column . detailed-status {
padding : 8px 8px 14px ;
}
}
. layout-single-column . detailed-status__display-avatar . account__avatar {
width : 60px ! important ;
height : 60px ! important ;
2023-07-12 22:05:44 +09:00
}
2023-07-12 05:45:41 +09:00
. layout-single-column . detailed-status . status__content {
line-height : 24px ;
}
. layout-single-column . detailed-status ,
. layout-single-column . detailed-status__action-bar {
background-color : var ( --color-content-bg ) ;
border : 0 ;
}
2023-07-31 00:08:39 +09:00
. layout-single-column . detailed-status__display-name strong ,
. layout-single-column . detailed-status__display-name . display-name__account {
color : var ( --color-content-fg ) ;
}
. layout-single-column . detailed-status__display-name strong {
font-size : 18px ;
font-weight : bold ;
2023-07-12 05:45:41 +09:00
}
. detailed-status__display-name . display-name__account {
opacity : . 7 ;
}
. layout-single-column . detailed-status__meta {
color : var ( --color-fg ) ;
opacity : . 8 ;
}
. layout-single-column . detailed-status__action-bar {
padding : 0 ;
}
. layout-single-column . animated-number {
color : var ( --color-content-fg ) ;
}
. layout-single-column article > . account {
padding : 16px ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column article : first-child > . account {
border-top : 1px solid var ( --color-lines ) ;
border-top-left-radius : 8px ;
border-top-right-radius : 8px ;
}
. layout-single-column article : last-child > . account {
border-bottom : 1px solid var ( --color-lines ) ;
border-bottom-left-radius : 8px ;
border-bottom-right-radius : 8px ;
}
2023-07-10 21:58:15 +09:00
/* ⭐ Action bar */
2023-07-10 19:09:13 +09:00
. layout-single-column . status__action-bar {
justify-content : left ;
margin-top : 8px ;
}
. layout-single-column . status__action-bar . status__action-bar__dropdown {
position : absolute ;
right : 18px ;
}
2023-07-30 21:49:58 +09:00
. layout-single-column . status__action-bar . icon-button . disabled {
pointer-events : none ;
}
. layout-single-column . status__action-bar . icon-button : active ,
. layout-single-column . status__action-bar . icon-button . active : active ,
. layout-single-column . status__action-bar . icon-button : focus ,
. layout-single-column . status__action-bar . icon-button . active : focus ,
. layout-single-column . detailed-status__action-bar . icon-button : active ,
. layout-single-column . detailed-status__action-bar . icon-button . active : active ,
. layout-single-column . detailed-status__action-bar . icon-button : focus ,
. layout-single-column . detailed-status__action-bar . icon-button . active : focus {
background-color : transparent ;
}
. layout-single-column . icon-button . star-icon . deactivate > . fa-star ,
. layout-single-column . icon-button . star-icon . activate > . fa-star { /* Disable default star spinning animation */
animation : none ;
}
2023-08-09 00:12:58 +09:00
. layout-single-column . status__action-bar . icon-button . star-icon . active > . fa ,
. layout-single-column . status__action-bar . icon-button . bookmark-icon . active > . fa {
2023-07-30 21:49:58 +09:00
animation : bounce . 4s ease-out ! important ;
}
2023-08-09 00:12:58 +09:00
. layout-single-column . detailed-status__action-bar . icon-button . star-icon . active > . fa ,
. layout-single-column . detailed-status__action-bar . icon-button . bookmark-icon . active > . fa {
2023-07-30 21:49:58 +09:00
animation : bounce-detailed . 4s ease-out ! important ;
}
@ keyframes bounce {
0 % {
transform : scale ( . 8 ) ;
}
50 % {
2023-07-31 00:08:39 +09:00
transform : scale ( 1 . 4 ) ;
2023-07-30 21:49:58 +09:00
}
75 % {
transform : scale ( . 6 ) ;
}
100 % {
transform : scale ( . 8 ) ;
}
}
@ keyframes bounce-detailed {
0 % {
transform : scale ( 1 ) ;
}
50 % {
2023-07-31 00:08:39 +09:00
transform : scale ( 1 . 6 ) ;
2023-07-30 21:49:58 +09:00
}
75 % {
transform : scale ( . 8 ) ;
}
100 % {
transform : scale ( 1 ) ;
}
}
2023-07-31 04:22:32 +09:00
. layout-single-column . status__action-bar . icon-button . reblogPrivate > . fa-retweet {
opacity : 1 ;
}
. layout-single-column . status__action-bar . icon-button . active > . fa-retweet {
animation : launch 1 . 2s ease-in ! important ;
}
. layout-single-column . detailed-status__action-bar . icon-button . active > . fa-retweet {
animation : launch-detailed 1 . 2s ease-out ! important ;
}
@ keyframes launch {
0 % {
transform : scale ( . 8 ) translate ( 0 ) ;
opacity : 0 ;
}
5 % {
transform : scale ( . 8 ) translate ( 0 ) ;
opacity : 1 ;
}
50 % {
2023-07-31 05:20:21 +09:00
transform : scale ( . 8 ) translate ( 200 % , -150 % ) ;
2023-07-31 04:22:32 +09:00
opacity : 0 ;
}
80 % {
2023-07-31 05:20:21 +09:00
transform : scale ( . 8 ) translate ( 200 % , -150 % ) ;
2023-07-31 04:22:32 +09:00
opacity : 0 ;
}
85 % {
transform : scale ( . 8 ) translate ( -20 % , 20 % ) ;
opacity : 0 ;
}
100 % {
transform : scale ( . 8 ) translate ( 0 ) ;
opacity : 1 ;
}
}
@ keyframes launch-detailed {
0 % {
transform : scale ( 1 ) translate ( 0 ) ;
opacity : 0 ;
}
5 % {
transform : scale ( 1 ) translate ( 0 ) ;
opacity : 1 ;
}
50 % {
transform : scale ( 1 ) translate ( 150 % , -150 % ) ;
opacity : 0 ;
}
80 % {
transform : scale ( 1 ) translate ( 150 % , -150 % ) ;
opacity : 0 ;
}
85 % {
transform : scale ( 1 ) translate ( -20 % , 20 % ) ;
opacity : 0 ;
}
100 % {
transform : scale ( 1 ) translate ( 0 ) ;
opacity : 1 ;
}
}
2023-07-10 19:09:13 +09:00
. layout-single-column . status__action-bar . icon-button ,
. layout-single-column . detailed-status__action-bar . icon-button {
min-width : 32px ! important ;
height : 32px ! important ;
border-radius : 30px ;
position : relative ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column . status__action-bar . icon-button . fa {
transform : scale ( . 8 ) ;
2023-07-30 21:49:58 +09:00
height : 32px ;
line-height : 32px ;
2023-07-30 03:19:43 +09:00
}
2023-07-10 19:09:13 +09:00
. layout-single-column . status__action-bar i . fa-star : before ,
. layout-single-column . status__action-bar i . fa-bookmark : before ,
. layout-single-column . status__action-bar i . fa-share-alt : before ,
. layout-single-column . detailed-status__action-bar i . fa-star : before ,
. layout-single-column . detailed-status__action-bar i . fa-bookmark : before ,
. layout-single-column . detailed-status__action-bar i . fa-share-alt : before {
height : 32px ;
2023-07-11 02:50:59 +09:00
}
. layout-single-column . icon-button . star-icon . active ,
. layout-single-column . notification__favourite-icon-wrapper . star-icon {
color : # ffb609 ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . status__prepend {
2023-07-12 20:32:37 +09:00
padding-top : 2px ;
2023-07-10 19:09:13 +09:00
padding-left : 0 ;
padding-right : 0 ;
2023-07-23 19:00:37 +09:00
margin-bottom : 0 ;
2023-07-10 19:09:13 +09:00
height : 25px ;
color : var ( --color-content-fg ) ;
}
. layout-single-column . status__prepend-icon-wrapper {
width : 56px ;
text-align : right ;
}
2023-07-23 19:00:37 +09:00
. layout-single-column . detailed-status__wrapper . status__prepend-icon-wrapper {
width : 46px ;
}
2023-07-31 07:46:04 +09:00
. layout-single-column . status__prepend . muted . emojione {
opacity : 1 ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . status-card ,
. layout-single-column . status-card . compact {
background-color : var ( --color-content-secondary-bg ) ;
2023-08-09 03:41:19 +09:00
border : 1px solid var ( --color-lines ) ;
box-shadow : none ;
transition : all . 3s ;
2023-07-12 00:44:50 +09:00
}
2023-07-10 19:09:13 +09:00
. layout-single-column a . status-card : hover ,
. layout-single-column a . status-card . compact : hover {
2023-08-09 03:41:19 +09:00
background-color : var ( --color-content-bg-focus ) ;
border-color : var ( --color-lines ) ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . status-card__image {
2023-07-15 18:55:05 +09:00
background : var ( --color-accent-bg ) ;
}
. layout-single-column . status-card__image > . fa {
2023-08-09 04:01:20 +09:00
color : var ( --color-content-fg ) ;
transition : all . 3s ;
}
. layout-single-column a . status-card : hover . status-card__image > . fa {
2023-07-15 18:55:05 +09:00
color : var ( --color-accent ) ;
2023-07-10 19:09:13 +09:00
}
2023-08-09 03:41:19 +09:00
. layout-single-column . status-card__title ,
. layout-single-column . status-card__host ,
. layout-single-column . status-card__description ,
. layout-single-column . status-card__author {
color : var ( --color-content-fg ) ;
transition : all . 2s ;
}
. layout-single-column . status-card : active . status-card__host ,
. layout-single-column . status-card : focus . status-card__host ,
. layout-single-column . status-card : hover . status-card__host {
color : var ( --color-accent ) ;
}
. layout-single-column . status-card : active . status-card__author ,
. layout-single-column . status-card : active . status-card__description ,
. layout-single-column . status-card : active . status-card__title ,
. layout-single-column . status-card : focus . status-card__author ,
. layout-single-column . status-card : focus . status-card__description ,
. layout-single-column . status-card : focus . status-card__title ,
. layout-single-column . status-card : hover . status-card__author ,
. layout-single-column . status-card : hover . status-card__description ,
. layout-single-column . status-card : hover . status-card__title {
color : var ( --color-content-fg ) ;
}
2023-08-09 04:05:41 +09:00
. layout-single-column . status-card__author strong {
font-weight : 800 ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . status__content p {
margin-bottom : 12px ;
}
. layout-single-column . status__content p : last-child {
margin-bottom : 0 ;
}
. layout-single-column . status__content > p : first-child : has ( . status__content__spoiler-link ) {
margin-bottom : 1px ;
}
. layout-single-column . status__content > p : first-child : has ( . status__content__spoiler-link ) span {
font-weight : bold ;
}
. layout-single-column . media-gallery {
border-radius : 8px ;
}
. layout-single-column . icon-button . overlayed {
background-color : # ffffff ;
color : # 444b5d ;
opacity : . 6 ;
transition : opacity . 3s ;
}
. layout-single-column . icon-button . overlayed : hover {
background-color : # ffffff ;
color : # 444b5d ;
opacity : 1 ;
}
. layout-single-column . status__wrapper--filtered__button {
color : var ( --color-accent ) ;
}
. layout-single-column . status__wrapper--filtered {
2023-07-21 03:05:51 +09:00
color : var ( --color-content-fg ) ;
2023-08-03 22:41:16 +09:00
border-top : 1px solid var ( --color-lines ) ;
border-bottom : 1px solid var ( --color-lines ) ;
2023-07-10 19:09:13 +09:00
padding : 12px ;
}
2023-07-10 23:22:40 +09:00
/* 📊 Polls */
. layout-single-column . poll__chart ,
. layout-single-column . muted . poll__chart . leading {
2023-07-10 21:58:15 +09:00
background : var ( --color-accent ) ;
opacity : . 4 ;
height : 12px ;
border-radius : 10px ;
}
2023-07-10 23:22:40 +09:00
. layout-single-column . poll__chart . leading ,
. layout-single-column . muted . poll__chart . leading {
2023-07-10 21:58:15 +09:00
opacity : 1 ;
}
2023-07-10 23:22:40 +09:00
. layout-single-column . poll__footer {
color : var ( --color-content-fg ) ;
}
. layout-single-column . poll__link {
color : var ( --color-accent ) ;
text-decoration : none ;
}
2023-07-11 00:32:47 +09:00
. layout-single-column . poll__input {
border : 2px solid var ( --color-content-fg ) ;
}
. layout-single-column . poll__input : hover {
border-color : var ( --color-accent ) ;
background-color : var ( --color-accent-bg ) ;
}
. layout-single-column . poll__input . active ,
. layout-single-column . poll__input : active ,
. layout-single-column . poll__input : focus {
background-color : var ( --color-accent ) ;
}
. layout-single-column . poll__input . active {
border-color : var ( --color-accent ) ;
}
. layout-single-column . poll__footer . button . button-secondary {
padding : 0 16px ;
}
. layout-single-column . poll__footer . button . button-secondary : hover {
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
}
2023-07-14 21:05:39 +09:00
/* Poll composer */
. layout-single-column . compose-form__poll-wrapper ,
. layout-single-column . compose-form__poll-wrapper . poll__footer {
border-top : 0 ;
}
. layout-single-column . compose-form__poll-wrapper ul {
background-color : var ( --color-accent-bg ) ;
}
. layout-single-column . compose-form__poll-wrapper . autosuggest-input input : focus {
box-shadow : 0 0 0 2px var ( --color-accent ) ;
}
. layout-single-column . compose-form__poll-wrapper . poll__footer . button . button-secondary {
padding : 6px 16px ;
}
2023-07-20 22:07:55 +09:00
. layout-single-column . compose-form__poll-wrapper . icon-button . disabled {
color : transparent ;
pointer-events : none ;
}
2023-07-10 19:09:13 +09:00
2023-07-11 21:50:07 +09:00
/* Empty columns */
2023-07-11 19:16:09 +09:00
. layout-single-column . empty-column-indicator {
2023-07-19 04:16:08 +09:00
background-color : var ( --color-content-secondary-bg ) ;
2023-07-11 19:16:09 +09:00
color : var ( --color-content-fg ) ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-19 04:16:08 +09:00
contain : content ;
2023-07-11 19:16:09 +09:00
}
2023-07-11 21:35:59 +09:00
. layout-single-column . empty-column-indicator a {
color : var ( --color-accent ) ;
}
2023-07-11 19:16:09 +09:00
2023-07-12 07:43:53 +09:00
/* Timeline hint */
. layout-single-column . timeline-hint {
2023-07-19 04:16:08 +09:00
background-color : var ( --color-content-secondary-bg ) ;
2023-07-12 07:43:53 +09:00
color : var ( --color-content-fg ) ;
}
. layout-single-column . timeline-hint a {
color : var ( --color-accent ) ;
}
2023-07-11 19:16:09 +09:00
2023-07-11 05:12:11 +09:00
/* 📤 DMs */
2023-07-11 19:16:09 +09:00
. layout-single-column . follow_requests-unlocked_explanation {
2023-07-11 21:35:59 +09:00
background-color : var ( --color-accent-bg ) ;
color : var ( --color-content-fg ) ;
2023-07-31 00:08:39 +09:00
border : 1px solid var ( --color-accent-lines ) ;
2023-07-11 21:35:59 +09:00
}
2023-08-05 04:16:45 +09:00
@ media screen and ( min-width : 890px ) {
. layout-single-column . column-back-button--slim + . scrollable . follow_requests-unlocked_explanation {
border-radius : 8px ;
margin-top : 13px ;
}
}
2023-07-11 21:35:59 +09:00
. layout-single-column . follow_requests-unlocked_explanation a {
color : var ( --color-accent ) ;
}
. layout-single-column . conversation__unread {
2023-07-11 05:12:11 +09:00
background-color : var ( --color-accent ) ;
}
. layout-single-column . conversation . conversation--unread {
background-color : var ( --color-content-bg-focus ) ;
}
2023-07-11 21:35:59 +09:00
. layout-single-column . conversation__unread {
2023-07-11 21:24:28 +09:00
color : var ( --color-accent-fg ) ;
}
. layout-single-column . conversation__content__names a strong {
font-weight : bold ;
}
2023-07-11 05:12:11 +09:00
. layout-single-column . conversation__content__names ,
2023-07-11 21:24:28 +09:00
. layout-single-column . conversation__content__names a ,
. layout-single-column . conversation__content__relative-time ,
. layout-single-column . conversation . attachment-list__list a ,
. layout-single-column . conversation . attachment-list . compact . fa ,
. layout-single-column . conversation . status__content p {
2023-07-11 05:12:11 +09:00
color : var ( --color-content-fg ) ;
}
2023-07-11 19:16:09 +09:00
. layout-single-column . conversation {
background-color : var ( --color-content-bg ) ;
2023-07-30 03:19:43 +09:00
border-bottom : 1px solid var ( --color-lines ) ;
2023-07-11 19:16:09 +09:00
}
2023-07-11 05:12:11 +09:00
. layout-single-column . conversation__content__relative-time {
opacity : . 7 ;
}
2023-07-30 03:19:43 +09:00
@ media screen and ( min-width : 890px ) {
. layout-single-column . conversation {
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
}
}
2023-07-11 05:12:11 +09:00
2023-07-31 00:08:39 +09:00
/* Speech bubble look DMs */
. layout-single-column . status-direct . status__content ,
. layout-single-column . detailed-status-direct . status__content {
padding : . 7em 1 . 2em . 7em 1em ;
margin-top : 4px ;
background : var ( --color-accent-bg ) ;
border : 1px solid var ( --color-accent-lines ) ;
border-radius : 5px 18px 18px 16px ;
display : inline-block ;
}
. layout-single-column . status-direct . fa . fa-at ,
. layout-single-column . detailed-status-direct . fa . fa-at {
font-size : 20px ;
}
. layout-single-column . status-direct . fa . fa-at :: before ,
. layout-single-column . detailed-status-direct . fa . fa-at :: before {
background-size : contain ;
background-repeat : no-repeat ;
background-image : var ( --icon-direct-messages ) ;
background-position : center 3px ;
color : transparent ;
}
. layout-single-column . detailed-status-direct . fa . fa-at :: before {
background-position : center 4px ;
}
. layout-single-column . status-direct . muted . status__content {
background : rgba ( 155 , 174 , 200 , 0 . 1 ) ;
2023-07-31 00:40:41 +09:00
border-color : var ( --color-lines ) ;
2023-07-31 00:08:39 +09:00
}
2023-07-10 19:09:13 +09:00
2023-07-10 21:58:15 +09:00
/ * ⏺ ️ Column headers
----------------- * /
2023-07-10 19:09:13 +09:00
. layout-single-column . tabs-bar__wrapper {
background-color : transparent ;
2023-07-30 03:19:43 +09:00
border-radius : 8px 8px 0 0 ;
2023-07-15 08:06:28 +09:00
box-shadow :
2023-07-10 19:09:13 +09:00
inset 0 10px var ( --color-bg ) ,
0 -30px var ( --color-bg ) ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column . column-header__wrapper {
padding-bottom : 10px ;
}
. layout-single-column . column-header__wrapper . active : before {
background : none ;
opacity : 40 % ;
}
. layout-single-column . column-header__wrapper . active {
box-shadow : 0 0 ;
}
. layout-single-column . column-header__wrapper :: after ,
. layout-single-column . column-back-button :: after {
content : " " ;
position : absolute ;
left : 0 ;
right : 0 ;
bottom : -10px ;
border-radius : 8px 8px 0 0 ;
box-shadow :
0 -5px var ( --color-bg ) ,
0 -10px var ( --color-bg ) ,
0 -15px var ( --color-bg ) ,
0 -20px var ( --color-bg ) ;
height : 10px ;
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
background-color : transparent ;
z-index : -1 ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . column-header {
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . column-header ,
. layout-single-column . column-back-button {
background : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
2023-07-30 03:19:43 +09:00
border : 1px solid var ( --color-lines ) ;
border-radius : 8px ;
2023-07-25 09:41:04 +09:00
overflow : hidden ;
2023-07-10 19:09:13 +09:00
font-weight : bold ;
}
. layout-single-column . column-header__button ,
. layout-single-column . column-header__back-button {
background-color : var ( --color-content-bg ) ;
border : 0 ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column . column-back-button {
margin-bottom : 10px ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . column-header__button {
2023-07-10 23:30:40 +09:00
color : var ( --color-content-fg ) ;
transition : all . 2s ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . column-header . active . column-header__icon {
color : var ( --color-accent ) ;
text-shadow : none ;
}
. layout-single-column . column-header__button . active ,
. layout-single-column . column-header__button . active : hover ,
. layout-single-column . column-header__button : hover {
color : var ( --color-accent ) ;
background-color : var ( --color-accent-bg ) ;
}
2023-07-21 05:35:43 +09:00
@ media screen and ( max-width : 1174px ) {
2023-07-30 03:19:43 +09:00
. layout-single-column . column-header__wrapper :: after ,
. layout-single-column . column-back-button :: after {
display : none ;
}
2023-07-21 05:35:43 +09:00
. layout-single-column . column-header__button . active ,
. layout-single-column . column-header__button . active : hover ,
. layout-single-column . column-header__button : hover {
background-color : transparent ;
}
}
2023-08-05 04:16:45 +09:00
. layout-single-column . column-back-button--slim-button :: after {
display : none ;
}
. layout-single-column . column-back-button--slim-button {
top : -47px
}
@ media screen and ( max-width : 1174px ) {
. layout-single-column . column-back-button--slim-button {
height : 47px ;
}
}
2023-07-10 19:09:13 +09:00
. layout-single-column . load-gap ,
. layout-single-column . load-more {
background-color : var ( --color-accent-bg ) ;
color : var ( --color-accent ) ;
2023-07-30 04:59:25 +09:00
border : 1px solid var ( --color-accent-lines ) ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . load-gap : hover ,
. layout-single-column . load-more : hover {
2023-07-30 04:59:25 +09:00
background-color : var ( --color-accent-lines ) ;
2023-07-30 03:19:43 +09:00
}
@ media screen and ( min-width : 890px ) {
. layout-single-column . item-list > . load-gap : first-child ,
. layout-single-column . item-list > . load-gap : first-child {
border-radius : 8px 8px 0 0 ;
}
2023-07-10 19:09:13 +09:00
}
2023-07-30 03:19:43 +09:00
@ media screen and ( min-width : 890px ) and ( max-width : 1174px ) {
. layout-single-column . item-list > . load-gap : first-child ,
. layout-single-column . item-list > . load-gap : first-child {
margin-top : 15px ;
}
}
2023-07-10 19:09:13 +09:00
. layout-single-column . column-header__collapsible {
border-bottom : 0 ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-21 05:35:43 +09:00
box-shadow : 0 -20px 0 var ( --color-bg ) ;
2023-07-30 03:19:43 +09:00
background-color : var ( --color-secondary-bg ) ;
}
. layout-single-column . column-header__collapsible : not ( . collapsed ) {
border : 1px solid var ( --color-lines ) ;
}
. layout-single-column . column-header__collapsible :: -webkit-scrollbar-track {
background-color : transparent ;
2023-07-21 05:35:43 +09:00
}
@ media screen and ( max-width : 1174px ) {
. layout-single-column . column-header__collapsible {
box-shadow : none ;
border-radius : 0 ;
}
2023-07-11 22:51:28 +09:00
}
. layout-single-column . column-header__collapsible : not ( . collapsed ) {
2023-07-30 03:19:43 +09:00
margin-top : 10px ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . column-header__collapsible-inner {
background : var ( --color-secondary-bg ) ;
border : 0 ;
}
. layout-single-column . column-settings__section {
color : var ( --color-content-fg-bold ) ;
}
. layout-single-column . setting-toggle__label {
color : var ( --color-content-fg ) ;
}
. layout-single-column . column-header > button {
padding : 0 0 0 15px ;
2023-07-30 03:19:43 +09:00
line-height : 45px ;
2023-07-10 19:09:13 +09:00
font-weight : bold ;
2023-07-15 08:06:28 +09:00
}
2023-07-10 19:09:13 +09:00
. layout-single-column . column-header__icon {
vertical-align : middle ;
display : inline-block ;
margin-right : 8px ;
transform : scale ( . 8 ) ;
line-height : 23px ;
}
@ media screen and ( max-width : 1174px ) {
. layout-single-column . ui__header {
background-color : transparent ;
border-bottom : 0 ;
}
. layout-single-column . ui__header__logo {
margin-left : 3px ;
}
. layout-single-column . tabs-bar__wrapper {
box-shadow : none ;
2023-08-01 02:18:38 +09:00
display : block ;
2023-07-30 03:45:45 +09:00
margin-bottom : -2px ;
2023-07-10 19:09:13 +09:00
border-radius : 0 ;
2023-07-30 03:19:43 +09:00
height : 45px ;
2023-07-30 03:45:45 +09:00
border-bottom : 1px solid rgba ( 0 , 0 , 0 , . 1 ) ;
2023-07-11 01:11:58 +09:00
}
2023-08-01 02:18:38 +09:00
. layout-single-column . tabs-bar__wrapper : has ( > # tabs-bar__portal ) {
display : none ;
}
. layout-single-column . tabs-bar__wrapper : has ( > # tabs-bar__portal > . column-back-button ) ,
. layout-single-column . tabs-bar__wrapper : has ( > # tabs-bar__portal > . column-header__wrapper ) { /* Column header (2nd top bar) is displayed only if there's something inside */
display : block ;
}
2023-07-15 08:06:28 +09:00
. layout-single-column . column-header ,
2023-07-10 19:09:13 +09:00
. layout-single-column . column-back-button ,
2023-07-15 08:06:28 +09:00
. layout-single-column . column-header__button ,
2023-07-10 19:09:13 +09:00
. layout-single-column . column-header__back-button {
background-color : transparent ;
2023-07-30 03:19:43 +09:00
height : 45px ;
border : 0 ;
2023-07-10 19:09:13 +09:00
}
2023-07-15 07:22:49 +09:00
. layout-single-column . ui :: after { /* Set a backdrop blur background to both top bars */
2023-07-20 20:00:18 +09:00
-webkit-backdrop-filter : blur ( 20px ) ;
backdrop-filter : blur ( 20px ) ;
2023-07-10 19:09:13 +09:00
background-color : rgba ( 245 , 242 , 239 , 0 . 75 ) ;
content : "" ;
2023-08-01 02:18:38 +09:00
height : 100px ;
2023-07-10 19:09:13 +09:00
left : 0 ;
position : fixed ;
top : 0 ;
width : 100 % ;
z-index : 1 ;
}
2023-08-01 02:18:38 +09:00
. layout-single-column . ui : has ( . columns-area__panels > . columns-area__panels__main > . tabs-bar__wrapper > # tabs-bar__portal ) :: after {
height : 55px ;
2023-07-10 19:09:13 +09:00
}
2023-08-01 02:18:38 +09:00
. layout-single-column . ui : has ( . columns-area__panels > . columns-area__panels__main > . tabs-bar__wrapper > # tabs-bar__portal > . column-back-button ) :: after ,
. layout-single-column . ui : has ( . columns-area__panels > . columns-area__panels__main > . tabs-bar__wrapper > # tabs-bar__portal > . column-header__wrapper ) :: after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */
height : 100px ;
2023-07-10 19:09:13 +09:00
}
2023-07-12 22:05:44 +09:00
. layout-single-column . column-header__collapsible : not ( . collapsed ) { /* Remove margin between column settings and column header */
2023-07-30 03:19:43 +09:00
margin-top : 0 ;
2023-07-10 19:09:13 +09:00
}
}
@ media ( prefers-color-scheme : dark ) {
@ media screen and ( max-width : 1174px ) {
2023-07-15 07:22:49 +09:00
. layout-single-column . ui :: after {
2023-07-26 06:00:49 +09:00
background-color : rgba ( 3 , 3 , 3 , . 65 ) ;
2023-07-30 03:45:45 +09:00
}
. layout-single-column . tabs-bar__wrapper {
2023-07-30 03:19:43 +09:00
border-color : rgba ( 255 , 255 , 255 , . 1 ) ;
2023-07-10 19:09:13 +09:00
}
}
}
2023-07-10 21:58:15 +09:00
/ * ⏺ ️ Horizontal selectors
( used to navigate subsections on the Explore , Live Feeds and Account pages ) * /
2023-07-10 19:09:13 +09:00
. layout-single-column . account__section-headline ,
. layout-single-column . notification__filter-bar {
background : var ( --color-accent-bg ) ;
2023-07-30 04:59:25 +09:00
border : 1px solid var ( --color-accent-lines ) ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-10 19:09:13 +09:00
margin-bottom : 10px ;
}
2023-07-15 08:06:28 +09:00
. layout-single-column . account__section-headline a ,
. layout-single-column . account__section-headline button ,
. layout-single-column . notification__filter-bar a ,
2023-07-10 19:09:13 +09:00
. layout-single-column . notification__filter-bar button {
2023-07-10 23:35:40 +09:00
background-color : var ( --color-accent-bg ) ;
color : var ( --color-accent ) ;
box-shadow : 0 0 0 4px var ( --color-accent-bg ) inset ;
border-radius : 9px ;
transition : all . 2s ;
2023-07-30 03:19:43 +09:00
padding : 14px 0 ;
2023-07-10 23:35:40 +09:00
}
2023-07-15 08:06:28 +09:00
. layout-single-column . account__section-headline a : hover ,
. layout-single-column . account__section-headline button : hover ,
. layout-single-column . notification__filter-bar a : hover ,
2023-07-10 23:35:40 +09:00
. layout-single-column . notification__filter-bar button : hover {
2023-07-30 04:59:25 +09:00
background-color : var ( --color-accent-lines ) ;
2023-07-25 09:17:42 +09:00
color : var ( --color-accent ) ;
2023-07-10 23:35:40 +09:00
box-shadow : 0 0 0 4px var ( --color-accent-bg ) inset ;
2023-07-10 19:09:13 +09:00
}
2023-07-15 08:06:28 +09:00
. layout-single-column . account__section-headline a . active ,
. layout-single-column . account__section-headline button . active ,
. layout-single-column . notification__filter-bar a . active ,
2023-07-10 19:09:13 +09:00
. layout-single-column . notification__filter-bar button . active {
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
box-shadow : 0 0 0 4px var ( --color-accent-bg ) inset ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column . account__section-headline a . active :: before ,
. layout-single-column . account__section-headline button . active :: before ,
. layout-single-column . notification__filter-bar a . active :: before ,
. layout-single-column . notification__filter-bar button . active :: before {
2023-07-10 19:09:13 +09:00
display : none ;
2023-07-15 08:06:28 +09:00
}
2023-07-10 19:09:13 +09:00
. layout-single-column . account__section-headline button ,
. layout-single-column . notification__filter-bar button {
background-color : transparent ;
}
2023-07-12 00:20:41 +09:00
. layout-single-column . account__section-headline a :: after ,
2023-07-30 03:19:43 +09:00
. layout-single-column . account__section-headline button :: after ,
. layout-single-column . notification__filter-bar a :: after ,
. layout-single-column . notification__filter-bar button :: after ,
. layout-single-column . account__section-headline a . active :: after ,
. layout-single-column . account__section-headline button . active :: after ,
. layout-single-column . notification__filter-bar a . active :: after ,
. layout-single-column . notification__filter-bar button . active :: after {
2023-07-10 19:09:13 +09:00
display : block ;
position : absolute ;
content : " " ;
width : 2px ;
2023-07-30 03:19:43 +09:00
height : auto ;
2023-07-30 04:59:25 +09:00
background-color : var ( --color-accent-lines ) ;
2023-07-10 19:09:13 +09:00
top : 8px ;
2023-07-30 03:19:43 +09:00
right : -1px ;
left : auto ;
2023-07-10 19:09:13 +09:00
bottom : 8px ;
border-radius : 50px ;
2023-07-11 19:07:32 +09:00
z-index : 1 ;
2023-07-30 03:19:43 +09:00
transform : unset ;
border : 0 ;
2023-07-10 19:09:13 +09:00
}
2023-07-12 00:20:41 +09:00
. layout-single-column . account__section-headline a : last-child :: after ,
2023-07-30 03:19:43 +09:00
. layout-single-column . account__section-headline button : last-child :: after ,
. layout-single-column . notification__filter-bar a : last-child : after ,
. layout-single-column . notification__filter-bar button : last-child : after {
2023-07-10 19:09:13 +09:00
display : none ;
}
@ media ( prefers-color-scheme : dark ) {
2023-07-15 08:06:28 +09:00
. layout-single-column . account__section-headline a . active ,
. layout-single-column . account__section-headline button . active ,
. layout-single-column . notification__filter-bar a . active ,
2023-07-10 19:09:13 +09:00
. layout-single-column . notification__filter-bar button . active {
background-color : var ( --color-bg ) ;
}
}
2023-07-30 03:19:43 +09:00
@ media screen and ( max-width : 889px ) {
. layout-single-column . account__section-headline ,
. layout-single-column . notification__filter-bar {
margin-left : 10px ;
margin-right : 10px ;
}
}
@ media screen and ( max-width : 1174px ) {
. layout-single-column . account__section-headline ,
. layout-single-column . notification__filter-bar {
margin-top : 10px ;
}
}
2023-07-10 19:09:13 +09:00
2023-07-10 21:58:15 +09:00
/ * 📍 Navigation panel
------------------- * /
2023-07-10 19:09:13 +09:00
. layout-single-column . column-link--transparent {
color : var ( --color-fg ) ;
}
. layout-single-column . column-link--logo {
margin-left : 4px ;
}
2023-07-15 08:06:28 +09:00
. layout-single-column . column-link . column-link--logo ,
2023-07-10 19:09:13 +09:00
. layout-single-column . ui__header__logo {
display : inline-flex ;
padding : 0 ;
width : 50px ;
height : 50px ;
background-image : var ( --logo ) ;
background-repeat : no-repeat ;
background-position : center ;
background-size : 32px auto ;
}
. layout-single-column . column-link . column-link--logo svg ,
. layout-single-column . ui__header__logo svg {
display : none ;
}
. layout-single-column . navigation-panel__logo {
margin-bottom : 10px ;
}
. layout-single-column . column-link : not ( . column-link--logo ) {
2023-07-10 23:30:40 +09:00
padding : 10px 20px 11px 13px ;
2023-07-10 19:09:13 +09:00
margin-left : 3px ;
font-weight : 500 ;
2023-07-30 03:19:43 +09:00
}
2023-07-10 19:09:13 +09:00
. layout-single-column a . column-link--transparent . active ,
. layout-single-column a . column-link--transparent . active : hover {
color : var ( --color-content-fg ) ;
font-weight : bold ;
}
. layout-single-column . column-link--transparent : hover {
border-radius : 8px ;
padding-right : 20px ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column a . column-link--transparent span {
position : relative ;
}
@ media screen and ( min-width : 1175px ) {
. layout-single-column . column-link : not ( . column-link--logo ) {
transition : all . 2s ;
}
2023-07-30 03:45:45 +09:00
. layout-single-column . column-link : not ( . column-link--logo ) [ href = "/settings/preferences" ] {
padding-bottom : 13px ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column a . column-link--transparent span :: before {
content : " " ;
left : -40px ;
background-color : transparent ;
transition : . 3s background-color ;
top : -12px ;
right : -16px ;
position : absolute ;
border-radius : 8px ;
z-index : -1 ;
bottom : -13px ;
}
. layout-single-column a . column-link--transparent : hover span :: before {
background-color : var ( --color-accent-bg ) ;
}
. layout-single-column a . column-link--transparent . active span :: before ,
. layout-single-column a . column-link--transparent . active : hover span :: before {
background-color : var ( --color-content-bg ) ;
}
}
2023-07-10 19:09:13 +09:00
. layout-single-column . icon-with-badge__badge {
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
border-radius : 20px ;
top : -4px ;
font-weight : bold ;
border : 0 ;
2023-07-30 21:49:58 +09:00
z-index : 1 ;
2023-07-15 08:06:28 +09:00
}
2023-07-10 19:09:13 +09:00
. layout-single-column . compose-panel hr , . navigation-panel hr {
display : none ;
}
. layout-single-column . column-link__icon {
transform : scale ( . 8 ) ;
vertical-align : middle ;
margin-right : 9px ;
}
. layout-single-column . column-link span {
vertical-align : middle ;
}
. layout-single-column . column-link . fa :: before {
position : relative ;
top : 1px ;
}
2023-07-20 20:46:48 +09:00
. layout-single-column . list-panel {
padding : 5px 9px 8px 27px ;
margin : 0 0 5px ;
display : none ;
}
. layout-single-column . list-panel i . fa {
display : none ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column . list-panel . column-link span :: before {
left : -12px ;
top : -10px ;
right : -12px ; ;
bottom : -10px ;
2023-07-20 20:46:48 +09:00
}
2023-07-30 03:19:43 +09:00
. layout-single-column . column-link [ href = "/lists" ] . active : has ( + . list-panel . column-link . active ) span :: before {
2023-07-20 20:46:48 +09:00
background-color : var ( --color-accent-bg ) ;
}
2023-07-30 03:19:43 +09:00
@ media screen and ( min-width : 1175px ) {
. layout-single-column . column-link [ href = "/lists" ] : hover + . list-panel ,
. layout-single-column . column-link [ href = "/lists" ] . active + . list-panel ,
. layout-single-column . list-panel : hover {
display : block ;
animation : fadein . 5s 1 ;
}
2023-07-20 20:46:48 +09:00
}
@ keyframes fadein {
from {
opacity : 0 ;
transform : translateY ( -10 % ) ;
}
to {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
}
2023-07-10 19:09:13 +09:00
@ media screen and ( max-width : 1174px ) {
. layout-single-column . columns-area__panels__pane--navigational . columns-area__panels__pane__inner {
width : 100vw ;
height : calc ( 4 . 2em + env ( safe-area-inset-bottom ) ) ;
bottom : 0 ;
left : 0 ;
2023-07-12 08:10:27 +09:00
z-index : 3 ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . columns-area__panels__pane--navigational . navigation-panel {
width : 100vw ;
height : 4 . 2em ;
padding-bottom : env ( safe-area-inset-bottom ) ;
flex-direction : row ;
overflow-x : auto ;
backdrop-filter : blur ( 20px ) ;
-webkit-backdrop-filter : blur ( 20px ) ;
background-color : rgba ( 255 , 255 , 255 , 0 . 5 ) ;
border-left : 0 ;
2023-07-30 03:19:43 +09:00
border-top : 1px solid rgba ( 0 , 0 , 0 , . 1 ) ;
2023-07-10 19:09:13 +09:00
}
2023-07-15 08:06:28 +09:00
. layout-single-column . navigation-panel . column-link ,
2023-07-10 19:09:13 +09:00
. layout-single-column . navigation-panel . navigation-panel__legal ,
2023-07-15 08:06:28 +09:00
. layout-single-column a . column-link--transparent . active ,
2023-07-10 19:09:13 +09:00
. layout-single-column a . column-link--transparent . active : hover ,
. layout-single-column . column-link--transparent : hover {
flex : 0 0 18vw ;
2023-07-30 03:19:43 +09:00
margin : 6px 0 8px ;
2023-07-10 19:09:13 +09:00
padding : 4px 0 3px ;
border-radius : 0 ;
justify-content : center ;
display : inline-flex ;
align-items : center ;
box-sizing : border-box ;
background-color : transparent ;
}
2023-07-15 08:06:28 +09:00
. layout-single-column a . column-link--transparent . active ,
2023-07-10 19:09:13 +09:00
. layout-single-column a . column-link--transparent . active : hover ,
. layout-single-column a . column-link--transparent : active {
2023-07-30 03:19:43 +09:00
margin : 6px 0 8px ;
2023-07-10 19:09:13 +09:00
padding : 4px 0 3px ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
background-color : # ffffff ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . column-link__icon {
transform : scale ( 1 ) ;
margin : 0 ;
}
. layout-single-column . column-link span {
padding-left : . 5em ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column . column-link . fa-list-ul {
margin-right : 0 ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . columns-area__panels__main {
width : calc ( 100 % - 285px ) ;
margin-left : -285px ;
}
. layout-single-column . columns-area__panels {
padding-bottom : 6em ;
}
. layout-single-column . columns-area__panels . navigation-panel__legal {
margin : 0 ;
padding : 0 ;
}
. layout-single-column . columns-area__panels . navigation-panel__legal . column-link--transparent {
height : calc ( 100 % - 13px ) ;
box-sizing : border-box ;
}
}
@ media screen and ( max-width : 889px ) {
. layout-single-column . columns-area__panels__main {
width : 100 % ;
margin-left : -55px ;
}
}
@ media ( prefers-color-scheme : dark ) {
@ media screen and ( max-width : 1174px ) {
. layout-single-column . columns-area__panels__pane--navigational . navigation-panel {
2023-07-26 06:00:49 +09:00
background-color : rgba ( 3 , 3 , 3 , . 65 ) ;
2023-07-30 03:19:43 +09:00
border-left : 0 ;
border-right : 0 ;
border-bottom : 0 ;
border-top : 1px solid rgba ( 255 , 255 , 255 , . 1 ) ;
2023-07-10 19:09:13 +09:00
}
2023-07-15 08:06:28 +09:00
. layout-single-column a . column-link--transparent . active ,
. layout-single-column a . column-link--transparent . active : hover ,
2023-07-10 19:09:13 +09:00
. layout-single-column a . column-link--transparent : active {
background-color : var ( --color-bg ) ;
}
}
}
2023-07-10 21:58:15 +09:00
/ * 👤 Account view
--------------- * /
2023-07-10 19:09:13 +09:00
. layout-single-column . account__header {
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-10 19:09:13 +09:00
margin-bottom : 10px ;
background-color : var ( --color-content-bg ) ;
2023-07-30 03:19:43 +09:00
border : 1px solid var ( --color-lines ) ;
}
@ media screen and ( min-width : 890px ) and ( max-width : 1174px ) {
. layout-single-column . account__header {
margin-top : 15px ;
}
}
@ media screen and ( max-width : 889px ) {
. layout-single-column . account__header {
border-left : 0 ;
border-right : 0 ;
border-radius : 0 ;
}
2023-07-10 19:09:13 +09:00
}
. layout-single-column . account__header__image {
height : 150px ;
background-color : var ( --color-secondary-bg ) ;
border-bottom : 0 ;
}
. layout-single-column . account__header__bar {
border : 0 ;
}
. layout-single-column . account__header__bar . avatar . account__avatar {
border-radius : 50 % ;
border-width : 5px ;
width : 100px ! important ;
height : 100px ! important ;
background-color : var ( --color-content-bg ) ;
border-color : var ( --color-content-bg ) ;
}
. layout-single-column . account__header__tabs__name h1 ,
. layout-single-column . account__header__tabs__name h1 small {
2023-07-31 00:08:39 +09:00
color : var ( --color-content-fg ) ;
}
. layout-single-column . account__header__tabs__name h1 > span {
font-size : 18px ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . account__header__tabs__name h1 small {
opacity : . 7 ;
}
. layout-single-column . account__section-headline {
margin-bottom : 10px ;
}
. layout-single-column . account__header__content a {
color : var ( --color-accent ) ;
text-decoration : none ;
}
. layout-single-column . account__header__content a : hover {
text-decoration : underline ;
}
. layout-single-column . account__header__extra__links a strong {
color : var ( --color-content-fg-bold ) ;
}
. layout-single-column . account__header__account-note label {
margin-bottom : 0 ;
}
. layout-single-column . account__header__account-note label ,
. layout-single-column . account__header__account-note textarea :: placeholder {
color : var ( --color-content-fg-bold ) ;
opacity : . 5 ;
}
. layout-single-column . account__header__account-note textarea {
color : var ( --color-content-fg ) ;
}
. layout-single-column . account__header__account-note textarea : focus {
background-color : var ( --color-accent-bg ) ;
}
2023-08-07 22:10:42 +09:00
. layout-single-column . account__header__badges . account-role {
border-radius : 8px ;
}
2023-08-09 03:49:24 +09:00
. layout-single-column . account__header__badges . account-role span {
color : var ( --color-content-fg ) ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . account__header__extra__links a ,
. layout-single-column . account__header__bio . account__header__content ,
. layout-single-column . account__header__bio . account__header__fields dd {
color : var ( --color-content-fg ) ;
}
. layout-single-column . account__header__bio . account__header__fields {
background-color : var ( --color-content-secondary-bg ) ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . account__header__bio . account__header__fields : has ( dl : only-child ) {
display : none ;
}
. layout-single-column . account__header__bio . account__header__fields dt {
font-weight : bold ;
font-size : 12px ;
}
. layout-single-column . account__header__bio . account__header__fields dl ,
. layout-single-column . account__header__bio . account__header__fields . verified {
border-bottom : 0 ;
position : relative ;
}
. layout-single-column . account__header__bio . account__header__fields dl : not ( : last-child ) : after {
display : block ;
content : " " ;
2023-07-30 03:19:43 +09:00
height : 1px ;
2023-07-10 19:09:13 +09:00
bottom : -1px ;
right : 15px ;
2023-07-30 03:19:43 +09:00
background-color : var ( --color-lines ) ;
2023-07-10 19:09:13 +09:00
left : 15px ;
position : absolute ;
border-radius : 50px ;
}
. layout-single-column . account__header__bio . account__header__fields dl : nth-child ( 2 ) { /* Add a corner radius to the second profile field because we're hiding the Joined field */
2023-07-30 03:19:43 +09:00
border-top-left-radius : 8px ;
border-top-right-radius : 8px ;
2023-07-10 19:09:13 +09:00
margin-top : 0 ;
}
. layout-single-column . account__header__bio . account__header__fields . verified + . verified { /* Fix double border between 2 successive verified fields */
margin-top : 0 ;
border-top-width : 0 ;
}
. layout-single-column . account__header__bio . account__header__fields . verified a , . account__header__bio . account__header__fields . verified dd { /* Verified field tweak: vivid green text */
color : var ( --color-accent ) ;
}
. layout-single-column . account__header__bio . account__header__fields . verified dt ,
. layout-single-column . account__header__bio . account__header__fields dt { /* Verified field tweak: restore default field title color */
color : var ( --color-content-fg ) ;
}
. layout-single-column . account__header__bio . account__header__fields . verified { /* Verified field tweak: restore default background and border */
border-top : 0 ;
border-right : 0 ;
border-left : 0 ;
background : none ;
}
. layout-single-column . account__header__extra . account__header__fields . verified dd span : first-child { /* Verified field tweak: adding a green background circle to the checkmark icon */
display : inline-block ;
background-color : var ( --color-accent ) ;
border-radius : 50px ;
width : 1 . 2em ;
height : 1 . 2em ;
line-height : 1 . 2 ;
text-align : center ;
margin-right : 2px ;
}
. layout-single-column . account__header__extra . account__header__fields . verified dd span : first-child i { /* white checkmark */
color : # fff ;
font-size : 85 % ;
transform : scale ( . 9 ) ;
}
. layout-single-column . account__header__bio . account__header__fields . verified : last-child {
border-bottom : 0 ;
}
2023-07-12 23:39:32 +09:00
. layout-single-column . account-timeline__header + article . status__wrapper ,
. layout-single-column . account-timeline__header + article . account { /* rounded corners on first post below account header + on first account in followings/followers list */
2023-07-30 03:19:43 +09:00
border-radius : 8px 8px 0 0 ;
border-right : 1px solid var ( --color-lines ) ;
border-left : 1px solid var ( --color-lines ) ;
border-top : 1px solid var ( --color-lines ) ;
}
@ media screen and ( max-width : 889px ) {
. layout-single-column . account-timeline__header + article . status__wrapper ,
. layout-single-column . account-timeline__header + article . account {
border-left : 0 ;
border-right : 0 ;
2023-07-30 03:55:25 +09:00
border-radius : 0 ;
2023-07-30 03:19:43 +09:00
}
2023-07-10 19:09:13 +09:00
}
2023-07-19 04:16:08 +09:00
. layout-single-column . follow-request-banner ,
. layout-single-column . moved-account-banner {
2023-07-19 03:49:22 +09:00
background-color : var ( --color-accent-bg ) ;
}
2023-07-19 04:16:08 +09:00
. layout-single-column . moved-account-banner {
margin-bottom : 10px ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-19 04:16:08 +09:00
}
. layout-single-column . follow-request-banner__message ,
. layout-single-column . moved-account-banner__message {
2023-07-19 03:49:22 +09:00
color : var ( --color-content-fg ) ;
}
2023-07-19 04:16:08 +09:00
. layout-single-column . moved-account-banner__message {
2023-07-19 03:49:22 +09:00
font-weight : bold ;
}
2023-07-10 19:09:13 +09:00
2023-07-10 21:58:15 +09:00
/ * ✨ Explore tab
-------------- * /
2023-07-30 03:19:43 +09:00
@ media screen and ( min-width : 890px ) {
. layout-single-column . account__section-headline + . scrollable article : first-child . status__wrapper {
2023-08-01 20:17:10 +09:00
border-top-left-radius : 8px ;
border-top-right-radius : 8px ;
2023-07-30 03:19:43 +09:00
margin-top : 0 ;
}
2023-08-01 20:17:10 +09:00
. layout-single-column . account__section-headline + . scrollable article : last-child . status__wrapper {
border-bottom-left-radius : 8px ;
border-bottom-right-radius : 8px ;
}
2023-07-10 19:09:13 +09:00
}
. layout-single-column . icon-button . active . fa . fa-retweet + . icon-button__counter . animated-number {
2023-08-01 18:48:15 +09:00
color : # E53880 ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . icon-button . active . fa . fa-star + . icon-button__counter . animated-number {
color : # ca8f04 ;
}
2023-07-10 21:19:16 +09:00
/* #️⃣ Trending hashtags */
2023-07-10 21:58:15 +09:00
. layout-single-column . trends__item__sparkline path : last-child {
stroke : var ( --color-accent ) ! important ;
}
. layout-single-column . trends__item__sparkline path : first-child {
fill : var ( --color-accent ) ! important ;
2023-08-03 22:21:13 +09:00
fill-opacity : 20 % ! important ;
2023-07-10 21:58:15 +09:00
}
2023-07-10 19:09:13 +09:00
. layout-single-column . explore__links {
background-color : var ( --color-content-bg ) ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
border : 1px solid var ( --color-lines ) ;
2023-07-10 19:09:13 +09:00
overflow : hidden ;
}
2023-07-30 03:19:43 +09:00
@ media screen and ( max-width : 889px ) {
. layout-single-column . explore__links {
border-radius : 0 ;
border-left : 0 ;
border-right : 0 ;
}
}
2023-07-12 01:08:09 +09:00
. layout-single-column . columns-area__panels__main . trends__item {
2023-07-10 19:09:13 +09:00
background-color : var ( --color-content-bg ) ;
border-bottom : 2px solid var ( --color-content-secondary-bg ) ;
}
. layout-single-column . explore__links . trends__item : last-child {
border-bottom : 0 ;
}
2023-07-12 01:08:09 +09:00
. layout-single-column . trends__item__name ,
2023-07-30 04:02:11 +09:00
. layout-single-column . trends__item__current {
color : var ( --color-fg-muted ) ;
2023-07-10 19:09:13 +09:00
}
2023-07-30 04:02:11 +09:00
. layout-single-column . trends__item__name a {
2023-07-10 19:09:13 +09:00
color : var ( --color-fg ) ;
}
2023-07-10 21:19:16 +09:00
2023-08-09 03:59:24 +09:00
/* Hashtag header */
. layout-single-column . hashtag-header {
font-size : 15px ;
color : var ( --color-accent ) ;
background-color : var ( --color-accent-bg ) ;
border-top : 1px solid var ( --color-accent-lines ) ;
border-bottom : 1px solid var ( --color-lines ) ;
}
. layout-single-column . hashtag-header__header {
margin-bottom : 0 ;
}
. layout-single-column . hashtag-header__header h1 {
color : var ( --color-content-fg ) ;
}
@ media screen and ( min-width : 890px ) and ( max-width : 1174px ) {
. layout-single-column . hashtag-header {
margin-top : 15px ;
}
}
@ media screen and ( min-width : 890px ) {
. layout-single-column . hashtag-header {
border-top-left-radius : 8px ;
border-top-right-radius : 8px ;
border-left : 1px solid var ( --color-accent-lines ) ;
border-right : 1px solid var ( --color-accent-lines ) ;
}
}
2023-07-13 19:40:54 +09:00
/* Account recommendations (For You Tab + User directory */
. layout-single-column . scrollable . account-card {
margin : 0 0 10px ;
background-color : var ( --color-content-bg ) ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
border : 1px solid var ( --color-lines ) ;
}
@ media screen and ( max-width : 889px ) {
. layout-single-column . scrollable . account-card {
margin : 0 10px 10px ;
}
2023-07-15 08:06:28 +09:00
}
2023-07-13 19:40:54 +09:00
. layout-single-column . account-card__header {
padding : 0 ;
2023-07-30 03:19:43 +09:00
border-top-left-radius : 8px ;
border-top-right-radius : 8px ;
border-bottom-left-radius : 0 ;
border-bottom-right-radius : 0 ;
2023-07-13 19:40:54 +09:00
height : 128px ;
overflow : hidden ;
}
. layout-single-column . scrollable . account-card__bio : after {
background : linear-gradient ( 270deg , var ( --color-content-bg ) , transparent ) ;
}
. layout-single-column . account-card__title__avatar . account__avatar {
border : 0 ;
border-radius : 50 % ;
overflow : visible ;
}
. layout-single-column . account-card__title__avatar img {
border : 0 ;
border-radius : 50 % ;
box-shadow : 0 0 0 3px var ( --color-content-bg ) ;
}
. layout-single-column . account-card__title . display-name bdi ,
. layout-single-column . account-card__counters__item ,
. layout-single-column . account-card__counters__item small {
color : var ( --color-content-fg-bold ) ;
}
. layout-single-column . account-card__counters__item small {
opacity : . 7 ;
}
2023-07-13 19:47:57 +09:00
. layout-single-column . account-card__bio a {
color : var ( --color-accent ) ;
}
. layout-single-column . filter-form {
background-color : var ( --color-accent-bg ) ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-13 19:47:57 +09:00
margin-bottom : 10px ;
}
. layout-single-column . filter-form__column {
padding : 10px 15px ;
}
2023-07-13 19:40:54 +09:00
2023-07-10 21:19:16 +09:00
/* 📰 Trending stories */
. layout-single-column . story {
background-color : var ( --color-content-bg ) ;
2023-07-25 09:17:42 +09:00
transition : background-color . 2s ;
2023-07-10 21:19:16 +09:00
}
. layout-single-column . story : not ( : last-child ) {
border-bottom : 2px solid var ( --color-content-secondary-separator ) ;
}
. layout-single-column . story ,
. layout-single-column . story__details__title {
color : var ( --color-content-fg ) ;
}
. layout-single-column . story : hover {
2023-07-25 09:17:42 +09:00
background-color : var ( --color-content-bg-focus ) ;
2023-07-10 21:19:16 +09:00
}
. layout-single-column . story__details__publisher ,
. layout-single-column . story__details__shared {
color : var ( --color-fg ) ;
}
2023-07-10 21:58:15 +09:00
/* 🔍 Search field and search results */
. layout-single-column . search {
margin-bottom : 10px ;
}
. layout-single-column . search__input {
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-10 21:58:15 +09:00
background-color : var ( --color-accent-bg ) ;
color : var ( --color-content-fg ) ;
2023-07-30 04:59:25 +09:00
border : 1px solid var ( --color-accent-lines ) ;
2023-07-10 21:58:15 +09:00
}
. layout-single-column . search__input :: placeholder ,
. layout-single-column . compose-form . spoiler-input__input :: placeholder {
font-weight : 500 ;
color : var ( --color-accent ) ;
}
2023-07-11 23:27:22 +09:00
. layout-single-column . search__input : focus {
2023-07-30 03:19:43 +09:00
border : 1px solid var ( --color-accent ) ;
box-shadow : inset 0 0 0 1px var ( --color-accent ) ;
2023-07-11 23:27:22 +09:00
}
2023-07-12 01:29:56 +09:00
. layout-single-column . compose-panel . fa-search ,
. layout-single-column . compose-panel . fa . active {
2023-07-10 21:58:15 +09:00
right : 15px ;
2023-07-30 22:15:27 +09:00
top : 16px ;
2023-07-20 19:53:12 +09:00
color : var ( --color-accent ) ;
}
2023-07-20 21:23:01 +09:00
. layout-single-column . compose-panel . fa-search . active ,
. layout-single-column . compose-panel . fa-times-circle . active ,
. layout-single-column . search__icon . fa . active {
2023-07-20 19:53:12 +09:00
opacity : 1 ;
2023-07-30 03:19:43 +09:00
z-index : 1 ;
2023-07-10 21:58:15 +09:00
}
2023-07-12 01:29:56 +09:00
. layout-single-column . compose-panel . fa-times-circle . active {
top : 16px ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . explore__search-results {
background-color : var ( --color-content-bg ) ;
overflow : hidden ;
}
. layout-single-column . explore__search-header {
background-color : transparent ;
}
. layout-single-column . explore__search-results . account {
padding-top : 16px ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column . explore__search-results . account : first-child {
border-top : 1px solid var ( --color-lines ) ;
}
. layout-single-column . explore__search-results . account : last-child {
border-bottom : 1px solid var ( --color-lines ) ;
}
. layout-single-column . explore__search-results . trends__item {
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
}
. layout-single-column . explore__search-results . trends__item : first-child {
border-top : 1px solid var ( --color-lines ) ;
}
. layout-single-column . explore__search-results . trends__item : last-child {
border-bottom : 1px solid var ( --color-lines ) ;
}
@ media screen and ( min-width : 890px ) {
. layout-single-column . explore__search-results {
border-radius : 8px ;
}
. layout-single-column . explore__search-results . account : first-child ,
. layout-single-column . explore__search-results . trends__item : first-child {
border-radius : 8px 8px 0 0 ;
}
2023-07-30 04:16:45 +09:00
. layout-single-column . explore__search-results . account : last-child ,
2023-07-30 03:19:43 +09:00
. layout-single-column . explore__search-results . trends__item : last-child ,
. layout-single-column . explore__search-results . load-more : last-child {
border-radius : 0 0 8px 8px ;
}
}
2023-07-10 19:09:13 +09:00
. layout-single-column . account . account__details > span {
color : var ( --color-content-fg ) ;
}
. layout-single-column . account . account__details . verified-badge {
color : var ( --color-accent ) ;
}
. layout-single-column . search__popout {
background-color : var ( --color-content-bg ) ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-10 19:09:13 +09:00
box-shadow : 0 4px 6px rgba ( 0 , 0 , 0 , . 1 ) ;
2023-07-12 03:26:14 +09:00
margin-top : 5px ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . search__popout h4 ,
. layout-single-column . search__popout__menu__message ,
. layout-single-column . search__popout__menu__item {
color : var ( --color-content-fg ) ;
}
. layout-single-column . search__popout__menu__item mark {
color : var ( --color-content-fg-bold ) ;
}
2023-07-15 08:06:28 +09:00
. search__popout__menu__item . selected ,
. search__popout__menu__item : active ,
. search__popout__menu__item : focus ,
2023-07-10 19:09:13 +09:00
. search__popout__menu__item : hover ,
2023-07-15 08:06:28 +09:00
. search__popout__menu__item . selected mark ,
. search__popout__menu__item : active mark ,
. search__popout__menu__item : focus mark ,
2023-07-10 19:09:13 +09:00
. search__popout__menu__item : hover mark {
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
}
2023-07-10 21:19:16 +09:00
2023-07-10 19:09:13 +09:00
@ media screen and ( max-width : 1174px ) {
. layout-single-column . search {
margin-bottom : 0 ;
}
. layout-single-column . explore__search-header {
padding-top : 2px ;
}
. layout-single-column . search__input {
padding : 13px ;
}
2023-07-15 08:06:28 +09:00
. layout-single-column i . fa-search ,
2023-07-10 19:09:13 +09:00
. layout-single-column i . fa . active {
2023-07-20 19:53:12 +09:00
color : var ( --color-accent ) ;
2023-07-12 00:11:27 +09:00
transform : scale ( 1 ) ;
2023-07-30 22:15:27 +09:00
top : 14px ;
2023-07-15 08:06:28 +09:00
}
2023-07-10 19:09:13 +09:00
. layout-single-column . explore__search-header {
2023-07-30 03:19:43 +09:00
padding : 10px 0 0 ;
2023-07-10 19:09:13 +09:00
}
}
@ media screen and ( max-width : 889px ) {
. layout-single-column . explore__search-header {
2023-07-30 03:19:43 +09:00
padding : 10px 10px 0 ;
2023-07-10 19:09:13 +09:00
}
}
2023-08-02 22:28:17 +09:00
/* Dismissable banners */
2023-07-10 19:09:13 +09:00
. layout-single-column . dismissable-banner {
background-color : var ( --color-accent ) ;
box-shadow : 0 5px var ( --color-content-bg ) ;
2023-07-30 03:19:43 +09:00
border-radius : 8px 8px 0 0 ;
2023-08-02 22:28:17 +09:00
border : 1px solid var ( --color-lines ) ;
2023-07-11 01:19:18 +09:00
margin : 0 ;
2023-07-10 19:09:13 +09:00
}
2023-08-02 22:28:17 +09:00
. layout-single-column . explore__links . dismissable-banner {
border : 0 ;
border-radius : 7px 7px 0 0 ;
}
@ media screen and ( max-width : 889px ) {
. layout-single-column . dismissable-banner ,
. layout-single-column . explore__links . dismissable-banner {
border-radius : 0 ;
border-left : 0 ;
border-right : 0 ;
}
}
@ media screen and ( min-width : 890px ) and ( max-width : 1174px ) {
. layout-single-column . dismissable-banner {
margin-top : 10px ;
}
. layout-single-column . explore__links . dismissable-banner {
margin-top : 0 ;
}
}
2023-07-10 19:09:13 +09:00
. layout-single-column . dismissable-banner__message ,
. layout-single-column . dismissable-banner__action . icon-button {
color : var ( --color-accent-fg ) ;
}
2023-07-23 19:00:37 +09:00
. layout-single-column . dismissable-banner__message h1 {
color : var ( --color-accent-fg ) ;
margin-top : 10px ;
}
. layout-single-column . dismissable-banner__message__actions__wrapper {
flex-flow : row-reverse ;
}
. layout-single-column . dismissable-banner : has ( . dismissable-banner__message > img : first-child ) {
background : linear-gradient ( to bottom , var ( --color-accent ) , rgba ( 247 , 105 , 2 , 0 . 4 ) ) ;
padding-left : 10px ;
padding-right : 10px ;
margin-bottom : 2px ;
}
. layout-single-column . dismissable-banner__background-image {
bottom : -35 % ;
opacity : . 3 ;
}
. layout-single-column . dismissable-banner__message__actions . button ,
. layout-single-column . dismissable-banner__message__actions . button . button-tertiary {
line-height : 28px ;
padding : 6px 17px ;
}
2023-07-10 19:09:13 +09:00
2023-07-10 21:58:15 +09:00
/ * 🔔 Notifications
---------------- * /
2023-07-11 21:24:28 +09:00
. layout-single-column . status . muted . status__content ,
. layout-single-column . status . muted . status__content a ,
. layout-single-column . status . muted . status__content p ,
. layout-single-column . status . muted . status__display-name strong ,
2023-07-10 19:09:13 +09:00
. layout-single-column . attachment-list__list a ,
. layout-single-column . attachment-list . compact . fa {
2023-07-11 20:11:24 +09:00
color : var ( --color-content-fg-muted ) ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . notification . unread :: before ,
. layout-single-column . status__wrapper . unread :: before {
background-color : var ( --color-accent ) ;
2023-07-30 03:19:43 +09:00
width : 8px ;
2023-07-10 19:09:13 +09:00
border : 0 ;
top : 5px ;
height : auto ;
bottom : 5px ;
border-radius : 8px ;
left : 5px ;
z-index : 1 ;
}
. layout-single-column . notification__message {
padding : 12px 12px 0 ;
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg-bold ) ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column . scrollable > div > article : first-child . notification__message {
border-top : 1px solid var ( --color-lines ) ;
}
2023-07-31 09:13:55 +09:00
. layout-single-column . notification__display-name {
font-weight : bold ;
}
2023-07-31 07:08:14 +09:00
. layout-single-column . notification__report {
background-color : var ( --color-content-bg ) ;
border-bottom : 0 ;
padding-top : 10px ;
gap : 15px ;
}
. layout-single-column . notification__report__details {
color : var ( --color-content-fg ) ;
}
2023-07-30 03:19:43 +09:00
@ media screen and ( min-width : 889px ) {
. layout-single-column . notification__message {
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
}
. layout-single-column . scrollable > div > article : first-child . notification__message {
border-top : 1px solid var ( --color-lines ) ;
border-top-left-radius : 8px ;
border-top-right-radius : 8px ;
}
2023-07-31 07:08:14 +09:00
. layout-single-column . notification__report {
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
}
2023-07-30 03:19:43 +09:00
}
2023-07-11 03:17:15 +09:00
. layout-single-column . notification__message . fa {
color : var ( --color-accent ) ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . notification__favourite-icon-wrapper {
width : 56px ;
text-align : right ;
}
2023-07-31 09:06:19 +09:00
@ media screen and ( max-width : 889px ) {
. layout-single-column . notification__favourite-icon-wrapper {
width : 51px ;
}
}
2023-07-11 02:50:59 +09:00
. layout-single-column . notification__favourite-icon-wrapper i . fa-star {
font-size : 15px ;
}
. layout-single-column . notification__favourite-icon-wrapper i . fa-star : before {
line-height : 24px ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . notification . status__wrapper {
padding-top : 0 ;
}
. layout-single-column . notification-favourite . status__action-bar ,
. layout-single-column . notification-reblog . status__action-bar ,
. layout-single-column . notification-poll . status__action-bar ,
. layout-single-column . notification-status . status__action-bar {
display : none ;
}
. layout-single-column . account {
background-color : var ( --color-content-bg ) ;
border-bottom : 0 ;
padding-left : 22px ;
padding-top : 4px ;
}
. layout-single-column . explore__search-results . account {
padding-top : 16px ;
}
2023-07-30 03:19:43 +09:00
@ media screen and ( min-width : 890px ) {
. layout-single-column . account {
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
}
}
2023-07-10 19:09:13 +09:00
2023-07-14 21:42:08 +09:00
/* 📋 Lists tab */
2023-07-11 23:24:54 +09:00
. layout-single-column . column-inline-form {
background-color : var ( --color-accent-bg ) ;
2023-07-30 04:59:25 +09:00
border : 1px solid var ( --color-accent-lines ) ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-11 23:24:54 +09:00
margin-bottom : 10px ;
}
2023-07-30 03:19:43 +09:00
@ media screen and ( max-width : 1174px ) {
. layout-single-column . column-inline-form {
margin-top : 10px ;
}
}
@ media screen and ( max-width : 889px ) {
. layout-single-column . column-inline-form {
margin-left : 10px ;
margin-right : 10px ;
}
}
2023-07-11 23:24:54 +09:00
. layout-single-column . column-inline-form label input ,
. layout-single-column . column-inline-form label input : focus {
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-11 23:24:54 +09:00
}
. layout-single-column . column-inline-form label input : focus {
box-shadow : 0 0 0 2px var ( --color-accent ) ;
}
. layout-single-column . column-subheading ,
. layout-single-column . columns-area__panels__main . column-link {
background-color : var ( --color-content-bg ) ;
color : var ( --color-fg ) ;
}
. layout-single-column . column-subheading {
color : var ( --color-fg-muted ) ;
2023-07-30 03:19:43 +09:00
border : 1px solid var ( --color-lines ) ;
border-bottom : 0 ;
border-radius : 8px 8px 0 0 ;
}
@ media screen and ( max-width : 889px ) {
. layout-single-column . column-subheading {
border-left : 0 ;
border-right : 0 ;
border-radius : 0 ;
}
2023-07-11 23:24:54 +09:00
}
. layout-single-column . columns-area__panels__main . column-link {
margin-left : 0 ;
width : 100 % ;
2023-07-30 03:19:43 +09:00
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
2023-07-11 23:24:54 +09:00
border-bottom : 2px solid var ( --color-content-secondary-separator ) ;
box-sizing : border-box ;
}
. layout-single-column . columns-area__panels__main . column-link : hover {
background-color : var ( --color-content-secondary-bg ) ;
color : var ( --color-accent ) ;
}
. layout-single-column . columns-area__panels__main article : last-child . column-link {
2023-07-30 03:19:43 +09:00
border-bottom : 1px solid var ( --color-lines ) ;
border-radius : 0 0 8px 8px ;
}
@ media screen and ( max-width : 889px ) {
. layout-single-column . columns-area__panels__main . column-link {
border-left : 0 ;
border-right : 0 ;
}
. layout-single-column . columns-area__panels__main article : last-child . column-link {
border-radius : 0 ;
}
2023-07-11 23:24:54 +09:00
}
2023-07-13 03:58:22 +09:00
/* List adder dialog */
. layout-single-column . list-adder ,
. layout-single-column . list-adder__account ,
. layout-single-column . list-adder__lists {
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
}
2023-07-13 03:58:22 +09:00
. layout-single-column . list-adder__account {
margin-top : 12px ;
}
2023-07-13 03:58:22 +09:00
. layout-single-column . list-adder . column-inline-form {
border-radius : 0 ;
}
. list-adder . list {
border-bottom : 2px solid var ( --color-content-secondary-separator ) ;
}
2023-07-11 23:24:54 +09:00
2023-07-14 21:42:08 +09:00
/* ➕ Follow requests */
2023-07-13 08:05:53 +09:00
. layout-single-column # Follow-requests {
margin-bottom : 0 ;
z-index : 0 ;
}
. layout-single-column . account-authorize__wrapper {
margin : 10px 0 ;
}
. layout-single-column . account-authorize {
background-color : var ( --color-content-bg ) ;
2023-07-30 03:19:43 +09:00
border-radius : 8px 8px 0 0 ;
2023-07-13 08:05:53 +09:00
padding : 20px
}
. layout-single-column . account--panel {
background-color : var ( --color-accent-bg ) ;
border : 0 ;
2023-07-30 03:19:43 +09:00
border-radius : 0 0 8px 8px ;
2023-07-13 08:05:53 +09:00
}
. layout-single-column . account__header__content {
color : var ( --color-content-fg ) ;
}
. layout-single-column . account--panel__button : first-child . icon-button {
color : var ( --color-accent ) ;
}
@ media screen and ( max-width : 1174px ) {
. layout-single-column # Follow-requests + . column-back-button--slim . column-back-button {
position : absolute ;
right : 0 ;
margin : 0 ;
width : auto ;
}
}
2023-07-11 19:19:07 +09:00
/ * ⏺ ️ Other UI components : buttons , toggles , . . .
----------------------------------------- * /
2023-07-10 19:09:13 +09:00
. layout-single-column . button ,
. layout-single-column . account__header__tabs__buttons . icon-button {
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . button ,
. layout-single-column . button . logo-button ,
. layout-single-column . rules-list li : before ,
. layout-single-column . icon-with-badge__badge {
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
2023-07-10 23:30:40 +09:00
transition : all . 2s ;
2023-07-10 19:09:13 +09:00
}
2023-08-09 03:17:06 +09:00
. layout-single-column . button : disabled ,
. layout-single-column . button . disabled {
opacity : . 7 ;
}
2023-07-10 21:58:15 +09:00
. layout-single-column . text-icon-button . active ,
2023-07-10 19:09:13 +09:00
. layout-single-column . button . button-tertiary ,
. layout-single-column . account__header__fields a ,
. layout-single-column . account__header__bio . account__header__fields a ,
. layout-single-column . reply-indicator__content a . unhandled-link ,
2023-07-12 20:37:02 +09:00
. layout-single-column . status__content a ,
. layout-single-column . status__content a . hashtag ,
2023-07-10 19:09:13 +09:00
. layout-single-column . status__content a . unhandled-link ,
. layout-single-column . column-back-button ,
. layout-single-column . about__section__title ,
. layout-single-column . prose a ,
. layout-single-column . column-link--transparent . active ,
. layout-single-column . column-header > . column-header__back-button ,
. layout-single-column . column-header__back-button ,
. layout-single-column . interaction-modal__icon ,
. layout-single-column . status__content a . mention ,
2023-07-10 21:58:15 +09:00
. layout-single-column . status__content__read-more-button ,
2023-07-10 19:09:13 +09:00
. layout-single-column . status__action-bar__dropdown . icon-button . active ,
. layout-single-column . account__relationship . icon-button . active ,
2023-07-11 22:22:12 +09:00
. layout-single-column . account__header__tabs__buttons . icon-button . active ,
2023-07-13 05:47:47 +09:00
. layout-single-column . text-btn ,
. layout-single-column . detailed-status__action-bar-dropdown . icon-button {
2023-07-10 19:09:13 +09:00
color : var ( --color-accent ) ;
}
. layout-single-column . icon-button ,
2023-07-10 21:58:15 +09:00
. layout-single-column . icon-button . inverted ,
2023-07-15 08:06:28 +09:00
. layout-single-column . reply-indicator__content . status__content__spoiler-link ,
2023-07-10 21:58:15 +09:00
. layout-single-column . status__content . status__content__spoiler-link {
2023-07-10 19:09:13 +09:00
color : var ( --color-content-fg ) ;
}
2023-07-15 08:06:28 +09:00
. layout-single-column . reply-indicator__content . status__content__spoiler-link ,
2023-07-10 19:09:13 +09:00
. layout-single-column . status__content . status__content__spoiler-link {
background-color : var ( --color-accent-bg ) ;
}
. layout-single-column . account__header__tabs__buttons . icon-button {
padding : 3px ;
border : 0 ;
color : var ( --color-content-fg ) ;
background-color : var ( --color-content-secondary-bg ) ;
}
. layout-single-column . account__header__tabs__buttons . icon-button : hover {
background-color : var ( --color-accent-bg ) ;
color : var ( --color-accent ) ;
}
2023-07-15 08:06:28 +09:00
. layout-single-column . icon-button : active ,
. layout-single-column . icon-button : focus ,
2023-07-10 19:09:13 +09:00
. layout-single-column . icon-button : hover {
background-color : var ( --color-accent-bg ) ;
2023-07-11 21:42:11 +09:00
color : var ( --color-accent ) ;
2023-07-10 19:09:13 +09:00
}
2023-07-31 06:57:48 +09:00
. layout-single-column . language-dropdown__dropdown {
background-color : var ( --color-content-bg ) ;
border-radius : 8px ;
border : 1px solid var ( --color-lines ) ;
box-shadow : 0 0 5px rgba ( 0 , 0 , 0 , . 15 ) ;
}
. layout-single-column . language-dropdown__dropdown__results__item {
border-radius : 8px ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . language-dropdown__dropdown__results__item . active ,
. layout-single-column . language-dropdown__dropdown__results__item . active : hover {
background-color : var ( --color-accent ) ;
2023-07-31 06:57:48 +09:00
color : var ( --color-accent-fg ) ;
}
. layout-single-column . language-dropdown__dropdown__results__item : active ,
. layout-single-column . language-dropdown__dropdown__results__item : focus ,
. layout-single-column . language-dropdown__dropdown__results__item : hover {
background-color : var ( --color-accent-bg ) ;
}
. layout-single-column . language-dropdown__dropdown__results__item__native-name {
font-weight : bold ;
}
. layout-single-column . language-dropdown__dropdown__results__item__common-name {
opacity : . 7 ;
}
. layout-single-column . language-dropdown__dropdown__results__item__common-name ,
. layout-single-column . language-dropdown__dropdown__results__item__native-name {
color : var ( --color-content-fg ) ;
}
. layout-single-column . language-dropdown__dropdown__results__item . active . language-dropdown__dropdown__results__item__common-name ,
. layout-single-column . language-dropdown__dropdown__results__item . active . language-dropdown__dropdown__results__item__native-name ,
. layout-single-column . language-dropdown__dropdown__results__item . active : hover . language-dropdown__dropdown__results__item__common-name ,
. layout-single-column . language-dropdown__dropdown__results__item . active : hover . language-dropdown__dropdown__results__item__native-name {
color : var ( --color-accent-fg ) ;
}
. layout-single-column . language-dropdown__dropdown__results__item : active . language-dropdown__dropdown__results__item__native-name ,
. layout-single-column . language-dropdown__dropdown__results__item : focus . language-dropdown__dropdown__results__item__native-name ,
. layout-single-column . language-dropdown__dropdown__results__item : hover . language-dropdown__dropdown__results__item__native-name ,
. layout-single-column . language-dropdown__dropdown__results__item : active . language-dropdown__dropdown__results__item__common-name ,
. layout-single-column . language-dropdown__dropdown__results__item : focus . language-dropdown__dropdown__results__item__common-name ,
. layout-single-column . language-dropdown__dropdown__results__item : hover . language-dropdown__dropdown__results__item__common-name {
color : var ( --color-accent ) ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . button : not ( . button-secondary ) : active ,
. layout-single-column . button : not ( . button-secondary ) : focus ,
. layout-single-column . button : not ( . button-secondary ) : hover ,
. layout-single-column . button . button-tertiary : active ,
. layout-single-column . button . button-tertiary : focus ,
. layout-single-column . button . button-tertiary : hover ,
. layout-single-column . button . logo-button : active ,
. layout-single-column . button . logo-button : focus ,
. layout-single-column . button . logo-button : hover {
background-color : var ( --color-accent-focus ) ;
}
2023-07-11 22:22:12 +09:00
2023-07-14 21:42:08 +09:00
/* ⏺️ Toggles */
2023-07-11 22:22:12 +09:00
. layout-single-column . setting-toggle__label {
vertical-align : top ;
}
2023-07-10 21:58:15 +09:00
. layout-single-column . react-toggle-track {
2023-07-30 04:59:25 +09:00
background-color : var ( --color-accent-lines ) ;
2023-07-30 03:19:43 +09:00
box-shadow :
2023-07-30 04:59:25 +09:00
0 0 0 20px var ( --color-accent-lines ) inset ,
0 0 0 20px var ( --color-accent-lines ) inset ,
0 0 0 1px var ( --color-accent-lines ) inset ,
0 0 0 1px var ( --color-accent-lines ) inset
2023-07-30 03:19:43 +09:00
}
2023-07-11 22:22:12 +09:00
. layout-single-column . react-toggle-thumb {
border : 0 ;
2023-07-10 21:58:15 +09:00
}
. layout-single-column . react-toggle . react-toggle--checked . react-toggle-track ,
. layout-single-column . react-toggle . react-toggle--checked : is ( : hover , : focus-within ) : not ( . react-toggle--disabled ) . react-toggle-track ,
. layout-single-column . react-toggle . react-toggle--checked : hover : not ( . react-toggle--disabled ) . react-toggle-track {
background-color : var ( --color-accent ) ;
}
. layout-single-column . react-toggle--checked . react-toggle-thumb {
border-color : var ( --color-accent ) ;
}
2023-07-30 03:19:43 +09:00
. layout-single-column . react-toggle : is ( : hover , : focus-within ) : not ( . react-toggle--disabled ) . react-toggle-track {
background-color : var ( --color-accent-focus ) ;
}
2023-07-11 23:33:09 +09:00
2023-07-14 21:42:08 +09:00
/* ⏺️ Radio buttons */
2023-07-11 23:33:09 +09:00
. layout-single-column . radio-button {
color : var ( --color-content-fg ) ;
}
. layout-single-column . radio-button__input {
border-width : 2px ;
border-color : var ( --color-content-fg-muted ) ;
background-color : var ( --color-content-bg ) ;
}
. layout-single-column . radio-button__input . checked {
border-color : var ( --color-accent ) ;
background-color : var ( --color-accent ) ;
}
2023-07-31 00:08:39 +09:00
. layout-single-column . dropdown-menu ,
. layout-single-column . dropdown-menu__container__header ,
. layout-single-column . dropdown-menu__item . edited-timestamp__history__item ,
. layout-single-column . dropdown-menu__item a ,
. layout-single-column . dropdown-menu__item button {
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
border-color : var ( --color-lines ) ;
}
2023-07-11 23:33:09 +09:00
2023-07-11 01:11:58 +09:00
. layout-single-column . dropdown-menu ,
. layout-single-column . dropdown-menu__item a ,
. layout-single-column . dropdown-menu__arrow : before {
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
border : 0 ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . dropdown-menu__item a : active ,
. layout-single-column . dropdown-menu__item a : focus ,
. layout-single-column . dropdown-menu__item a : hover ,
. layout-single-column . dropdown-menu__item button : active ,
. layout-single-column . dropdown-menu__item button : focus ,
. layout-single-column . dropdown-menu__item button : hover {
background : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
outline : 0 ;
}
2023-07-11 01:11:58 +09:00
. layout-single-column . dropdown-menu__separator {
border-color : var ( --color-content-secondary-separator ) ;
}
2023-07-10 19:09:13 +09:00
. layout-single-column . privacy-dropdown . active . privacy-dropdown__value . active ,
2023-07-14 02:11:32 +09:00
. layout-single-column . privacy-dropdown . active . privacy-dropdown__value ,
2023-07-10 19:09:13 +09:00
. layout-single-column . privacy-dropdown__option . active ,
2023-07-14 02:11:32 +09:00
. layout-single-column . privacy-dropdown__option . active : hover ,
2023-07-10 19:09:13 +09:00
. layout-single-column . privacy-dropdown__option : hover {
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
}
2023-07-15 08:06:28 +09:00
. layout-single-column . privacy-dropdown__option . active . privacy-dropdown__option__content ,
. layout-single-column . privacy-dropdown__option . active . privacy-dropdown__option__content strong ,
. layout-single-column . privacy-dropdown__option : hover . privacy-dropdown__option__content ,
2023-07-10 19:09:13 +09:00
. layout-single-column . privacy-dropdown__option : hover . privacy-dropdown__option__content strong ,
. layout-single-column . privacy-dropdown . active . privacy-dropdown__value . active . icon-button ,
. layout-single-column . privacy-dropdown . icon-button . inverted . active {
2023-07-14 02:11:32 +09:00
background-color : var ( --color-accent ) ;
2023-07-10 19:09:13 +09:00
color : var ( --color-accent-fg ) ;
}
. layout-single-column . button . button-tertiary . button--confirmation ,
. layout-single-column . button . button-tertiary . button--destructive {
background-color : transparent ;
}
2023-07-19 04:16:08 +09:00
. layout-single-column . button . button-tertiary . button--confirmation {
color : # 4e8a6b ;
background-color : rgba ( 121 , 189 , 154 , 0 . 3 ) ;
}
. layout-single-column . button . button-tertiary . button--destructive {
color : # df405a ;
background-color : rgba ( 223 , 64 , 90 , 0 . 3 ) ;
}
2023-07-15 08:06:28 +09:00
. layout-single-column . button . button-tertiary . button--confirmation : active ,
. layout-single-column . button . button-tertiary . button--confirmation : focus ,
2023-07-10 19:09:13 +09:00
. layout-single-column . button . button-tertiary . button--confirmation : hover {
background-color : # 79bd9a ;
2023-07-19 04:16:08 +09:00
color : # ffffff ;
2023-07-10 19:09:13 +09:00
}
2023-07-15 08:06:28 +09:00
. layout-single-column . button . button-tertiary . button--destructive : active ,
. layout-single-column . button . button-tertiary . button--destructive : focus ,
2023-07-10 19:09:13 +09:00
. layout-single-column . button . button-tertiary . button--destructive : hover {
background-color : # df405a ;
2023-07-19 04:16:08 +09:00
color : # ffffff ;
}
@ media ( prefers-color-scheme : dark ) {
. layout-single-column . button . button-tertiary . button--confirmation {
color : # 72cb9d ;
}
. layout-single-column . button . button-tertiary . button--destructive {
color : # f3637b ;
}
2023-07-10 19:09:13 +09:00
}
2023-07-15 08:06:28 +09:00
. layout-single-column . app-body . block-modal__cancel-button ,
. layout-single-column . app-body . confirmation-modal__cancel-button ,
. layout-single-column . app-body . confirmation-modal__secondary-button ,
2023-07-10 19:09:13 +09:00
. layout-single-column . app-body . mute-modal__cancel-button {
background-color : transparent ;
}
. layout-single-column . status__content a . hashtag {
color : var ( --color-accent ) ;
}
2023-07-10 21:58:15 +09:00
2023-07-11 01:15:45 +09:00
/ * 🖱 ️ Interaction modals
--------------------- * /
. layout-single-column . interaction-modal {
background-color : var ( --color-content-bg ) ;
2023-07-15 18:50:30 +09:00
border : 0 ;
2023-07-11 01:15:45 +09:00
}
. layout-single-column . interaction-modal ,
. layout-single-column . interaction-modal__lead h3 {
color : var ( --color-content-fg ) ;
}
. layout-single-column . interaction-modal__lead p ,
. layout-single-column . interaction-modal__choices__choice p {
color : var ( --color-fg ) ;
}
. layout-single-column . interaction-modal . button ,
. layout-single-column . interaction-modal . button . button-tertiary {
padding : 10px 18px ;
}
. layout-single-column . interaction-modal . button . button-tertiary : hover {
background-color : var ( --color-content-secondary-separator ) ;
}
. layout-single-column . copypaste input {
border-color : var ( --color-accent ) ;
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
}
. layout-single-column . interaction-modal . copypaste button {
2023-07-30 03:19:43 +09:00
padding : 8px 18px ;
2023-07-11 01:15:45 +09:00
}
2023-07-15 18:50:30 +09:00
. layout-single-column . modal-root__overlay {
background-color : hsla ( 0 , 0 % , 1 % , 0 . 7 ) ;
}
2023-07-14 02:11:32 +09:00
. layout-single-column . modal-root__modal ,
. layout-single-column . boost-modal__container ,
. layout-single-column . mute-modal__container ,
. layout-single-column . block-modal__container {
background-color : var ( --color-content-bg ) ;
2023-07-14 20:42:44 +09:00
color : var ( --color-content-fg ) ;
2023-07-14 02:11:32 +09:00
}
. layout-single-column . boost-modal__container {
margin-bottom : -11px ;
}
. layout-single-column . confirmation-modal__container ,
. layout-single-column . mute-modal__container ,
. layout-single-column . block-modal__container {
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
}
. layout-single-column . block-modal__action-bar ,
. layout-single-column . boost-modal__action-bar ,
. layout-single-column . confirmation-modal__action-bar ,
. layout-single-column . mute-modal__action-bar {
background-color : var ( --color-accent-bg ) ;
}
. layout-single-column . block-modal__action-bar > div ,
. layout-single-column . boost-modal__action-bar > div ,
. layout-single-column . confirmation-modal__action-bar > div ,
. layout-single-column . mute-modal__action-bar > div ,
. layout-single-column . boost-modal__container . status__content__text ,
. layout-single-column . boost-modal__container . display-name strong . display-name__html ,
. layout-single-column . boost-modal__container . status__info ,
. layout-single-column . boost-modal__container . status__relative-time time ,
. layout-single-column . boost-modal__container . status . light . status__visibility-icon {
color : var ( --color-content-fg ) ;
}
2023-07-14 20:42:44 +09:00
. layout-single-column . actions-modal ul li : not ( : empty ) a {
color : var ( --color-content-fg ) ;
}
. layout-single-column . actions-modal ul li : not ( : empty ) a . active ,
. layout-single-column . actions-modal ul li : not ( : empty ) a . active button ,
. layout-single-column . actions-modal ul li : not ( : empty ) a : active ,
. layout-single-column . actions-modal ul li : not ( : empty ) a : active button ,
. layout-single-column . actions-modal ul li : not ( : empty ) a : focus ,
. layout-single-column . actions-modal ul li : not ( : empty ) a : focus button ,
. layout-single-column . actions-modal ul li : not ( : empty ) a : hover ,
. layout-single-column . actions-modal ul li : not ( : empty ) a : hover button {
background-color : var ( --color-accent ) ;
color : var ( --color-accent-fg ) ;
}
2023-07-14 02:11:32 +09:00
2023-07-23 03:39:21 +09:00
/* Media modals */
. layout-single-column . modal-root__modal . media-modal {
background-color : rgba ( 255 , 255 , 255 , . 8 ) ;
}
. layout-single-column . media-modal__overlay . picture-in-picture__footer {
background-color : transparent ;
}
. layout-single-column . media-modal__nav ,
. layout-single-column . media-modal__overlay . picture-in-picture__footer . icon-button {
color : var ( --color-content-fg ) ;
}
. layout-single-column . media-modal__page-dot {
background-color : var ( --color-content-fg ) ;
}
@ media ( prefers-color-scheme : dark ) {
. layout-single-column . modal-root__modal . media-modal {
background-color : rgba ( 0 , 0 , 0 , . 6 ) ;
}
}
2023-07-25 09:27:28 +09:00
/* Report modals */
. layout-single-column . report-dialog-modal__container {
border-top : 0 ;
}
. layout-single-column . report-dialog-modal__lead {
color : var ( --color-content-fg-muted ) ;
}
. layout-single-column . report-dialog-modal . poll__option . dialog-option {
border-color : var ( --color-lines ) ;
border-width : 3px ;
}
. layout-single-column . report-dialog-modal . dialog-option . poll__input {
border-color : var ( --color-accent ) ;
}
. layout-single-column . report-dialog-modal . dialog-option . poll__input . active {
border-color : var ( --color-accent ) ;
background-color : var ( --color-accent ) ;
}
. layout-single-column . report-dialog-modal . poll__option . dialog-option > . poll__option__text {
color : var ( --color-content-fg ) ;
}
. layout-single-column . report-dialog-modal . poll__option . dialog-option > . poll__option__text strong {
color : var ( --color-content-fg-bold )
}
2023-07-14 21:42:08 +09:00
/* 🖼️ Picture in Picture */
. layout-single-column . picture-in-picture {
box-shadow : 0 0 5px rgba ( 0 , 0 , 0 , . 2 ) ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-14 21:42:08 +09:00
}
. layout-single-column . picture-in-picture__footer ,
. layout-single-column . picture-in-picture__header {
background-color : var ( --color-content-bg ) ;
}
. layout-single-column . picture-in-picture__header . display-name span {
color : var ( --color-content-fg-muted ) ;
}
/* ⏯️ Video controls */
. layout-single-column . video-player__seek__progress ,
. layout-single-column . video-player__volume__handle ,
2023-07-14 21:49:21 +09:00
. layout-single-column . video-player__volume__current ,
. layout-single-column . video-player__seek__handle {
2023-07-14 21:42:08 +09:00
background-color : var ( --color-accent ) ;
}
2023-07-11 01:15:45 +09:00
2023-07-10 21:58:15 +09:00
/ * 📄 Meta
------- * /
. layout-single-column . link-footer p ,
. layout-single-column . link-footer a {
2023-07-11 21:07:14 +09:00
color : var ( --color-fg-muted ) ;
2023-07-10 21:58:15 +09:00
}
2023-07-10 19:09:13 +09:00
/* Server banner */
. layout-single-column . server-banner__introduction {
display : none ;
}
. layout-single-column . server-banner {
padding : 0 0 20px ;
}
. layout-single-column . server-banner__hero {
2023-07-30 03:19:43 +09:00
border-radius : 8px 8px 0 0 ;
2023-07-10 19:09:13 +09:00
margin-bottom : 0 ;
}
. layout-single-column . server-banner__description {
padding : 20px 15px 20px ;
margin-bottom : 0 ;
background-color : var ( --color-content-bg ) ;
2023-07-30 03:19:43 +09:00
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . server-banner__meta {
2023-07-30 03:19:43 +09:00
padding : 0 15px 20px ;
2023-07-10 19:09:13 +09:00
background-color : var ( --color-content-bg ) ;
2023-07-30 03:19:43 +09:00
border-left : 1px solid var ( --color-lines ) ;
border-right : 1px solid var ( --color-lines ) ;
border-bottom : 1px solid var ( --color-lines ) ;
2023-07-10 19:09:13 +09:00
gap : 0 ;
margin : 0 ;
2023-07-30 03:19:43 +09:00
border-radius : 0 0 8px 8px ;
2023-07-10 19:09:13 +09:00
align-items : end ;
}
. layout-single-column . server-banner h4 {
color : var ( --color-fg ) ;
2023-07-30 03:19:43 +09:00
font-size : 80 % ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . server-banner__number {
color : var ( --color-content-fg-bold ) ;
}
. layout-single-column . server-banner__number-label {
color : var ( --color-content-fg ) ;
}
. layout-single-column . server-banner . account {
background-color : transparent ;
box-shadow : none ;
padding : 0 ;
2023-07-30 03:19:43 +09:00
border-left : 0 ;
border-right : 0 ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . server-banner__meta__column : first-child {
width : calc ( 60 % - 5px ) ;
}
. layout-single-column . server-banner__meta__column : nth-child ( 2 ) {
width : calc ( 40 % - 5px ) ;
}
. layout-single-column . server-banner . button . button-secondary {
padding : 10px ;
margin : 10px 0 ;
}
. layout-single-column . button . button-secondary ,
. layout-single-column . button . button-tertiary {
border : 0 ;
background-color : var ( --color-accent-bg ) ;
color : var ( --color-accent ) ;
}
. layout-single-column . button . button-secondary : hover ,
. layout-single-column . button . button-tertiary : hover {
background-color : var ( --color-content-bg ) ;
color : var ( --color-content-fg ) ;
}
. layout-single-column . sign-in-banner . button ,
. layout-single-column . button . button-secondary ,
. layout-single-column . button . button-tertiary {
padding : 10px 18px ;
}
. layout-single-column . sign-in-banner p {
color : var ( --color-fg ) ;
opacity : . 5 ;
}
2023-07-11 01:11:58 +09:00
2023-07-20 21:01:31 +09:00
/* 🤗 Onboarding suggestions */
. layout-single-column . scrollable . follow-recommendations-container ,
. layout-single-column . column-list {
background-color : var ( --color-content-bg ) ;
}
. layout-single-column . column-title . logo {
display : none ;
}
. layout-single-column . column-title h3 ,
. layout-single-column . column-title p {
color : var ( --color-content-fg ) ;
}
. layout-single-column . column-list {
border : 0 ;
}
. layout-single-column . account__note {
color : var ( --color-content-fg-muted ) ;
}
2023-07-21 05:35:43 +09:00
/* 📢 Announcements */
. layout-single-column . announcements ,
. layout-single-column . announcements :: after {
background-color : var ( --color-accent-bg ) ;
color : var ( --color-content-fg ) ;
}
. layout-single-column . announcements {
margin-bottom : 10px ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-21 05:35:43 +09:00
overflow : visible ;
z-index : 0 ;
box-shadow : 0 -20px var ( --color-bg ) ;
}
. layout-single-column . announcements__item strong {
font-weight : 800 ;
color : var ( --color-content-fg-bold ) ;
}
. layout-single-column . announcements__pagination ,
. layout-single-column . announcements__pagination . icon-button {
color : var ( --color-content-fg ) ;
}
. layout-single-column . announcements__mastodon {
2023-07-30 03:19:43 +09:00
border-radius : 0 0 0 8px ;
2023-07-21 05:35:43 +09:00
}
. layout-single-column . reactions-bar__item {
background-color : var ( --color-content-bg ) ;
}
. layout-single-column . reactions-bar__item . active {
background-color : var ( --color-accent ) ;
}
. layout-single-column . reactions-bar__item__count ,
. layout-single-column . reactions-bar__item__count . animated-number {
color : var ( --color-content-fg ) ;
}
. layout-single-column . reactions-bar__item . active . reactions-bar__item__count . animated-number {
color : var ( --color-accent-fg ) ;
}
2023-07-21 05:43:16 +09:00
. layout-single-column . reactions-bar . emoji-button ,
2023-07-21 06:51:51 +09:00
. layout-single-column . announcements__item__content a . unhandled-link ,
. layout-single-column . announcements__item__content a {
2023-07-21 05:35:43 +09:00
color : var ( --color-accent ) ;
}
@ media screen and ( max-width : 1174px ) {
. layout-single-column . announcements {
box-shadow : none ;
margin-top : -10px ;
border-radius : 0 ;
}
. layout-single-column . announcements__mastodon {
border-radius : 0 ;
}
}
2023-07-10 21:58:15 +09:00
/ * 📜 About page
------------- * /
2023-07-10 19:09:13 +09:00
. layout-single-column . scrollable . about {
background-color : var ( --color-content-bg ) ;
2023-07-30 03:19:43 +09:00
border : 1px solid var ( --color-lines ) ;
2023-07-10 22:55:50 +09:00
display : flex ;
flex-flow : column ;
}
2023-07-30 03:19:43 +09:00
@ media screen and ( max-width : 889px ) {
. layout-single-column . scrollable . about {
border-left : 0 ;
border-right : 0 ;
}
}
2023-07-11 01:33:07 +09:00
. layout-single-column . about__header {
2023-07-10 22:55:50 +09:00
order : 1 ;
margin-bottom : 10px ;
}
2023-07-11 01:33:07 +09:00
. layout-single-column . about__section : nth-child ( 3 ) {
2023-07-10 22:55:50 +09:00
order : 2 ;
}
2023-07-11 01:33:07 +09:00
. layout-single-column . about__meta {
2023-07-10 22:55:50 +09:00
order : 3 ;
}
2023-07-11 01:33:07 +09:00
. layout-single-column . about__section : nth-child ( 4 ) {
2023-07-10 22:55:50 +09:00
order : 4 ;
}
2023-07-11 01:33:07 +09:00
. layout-single-column . about__section : nth-child ( 5 ) {
2023-07-10 22:55:50 +09:00
order : 5 ;
2023-07-10 19:09:13 +09:00
}
2023-07-11 01:33:07 +09:00
. layout-single-column . link-footer {
2023-07-10 22:55:50 +09:00
order : 6 ;
}
2023-07-11 01:33:07 +09:00
. layout-single-column . about__footer {
2023-07-10 22:55:50 +09:00
order : 7 ;
}
. layout-single-column . about__header h1 ,
. layout-single-column . about__header p ,
2023-07-10 19:09:13 +09:00
. layout-single-column # mastodon > div > div > div . columns-area__panels > div . columns-area__panels__main > div . columns-area . columns-area--mobile > div > div > div . about__section . active : nth-of-type ( 3 ) > div . about__section__title {
display : none ;
}
2023-07-10 22:55:50 +09:00
. layout-single-column . about__header p ,
. layout-single-column . about__meta h4 {
color : var ( --color-fg ) ;
}
. layout-single-column . about__header__hero {
margin : -20px -20px 20px ;
width : calc ( 100 % + 40px ) ;
2023-07-30 03:19:43 +09:00
border-radius : 0 ;
2023-07-10 22:55:50 +09:00
background-color : var ( --color-content-bg ) ;
}
. layout-single-column . about__header__hero ,
. layout-single-column . about__meta {
margin-bottom : 10px ;
}
. layout-single-column . about__header h1 {
margin-bottom : 0 ;
}
2023-07-30 03:19:43 +09:00
@ media screen and ( min-width : 890px ) {
. layout-single-column . scrollable . about {
border-radius : 8px ! important ;
}
. layout-single-column . about__header__hero {
border-radius : 8px 8px 0 0 ;
}
}
2023-07-10 22:55:50 +09:00
. layout-single-column . about__mail {
color : var ( --color-content-fg ) ;
}
. layout-single-column . about__meta h4 {
font-size : 12px ;
font-weight : bold ;
margin-bottom : 8px ;
}
. layout-single-column . about__meta . account {
background : none ;
box-shadow : none ;
padding : 0 ;
2023-07-30 03:19:43 +09:00
border-left : 0 ;
border-right : 0 ;
2023-07-10 22:55:50 +09:00
}
. layout-single-column . about__meta__divider {
border-left : 3px solid var ( --color-content-secondary-separator ) ;
}
@ media screen and ( max-width : 600px ) {
. layout-single-column . about__meta__divider {
border-top : 3px solid var ( --color-content-secondary-separator ) ;
2023-07-11 01:30:29 +09:00
width : 90 % ;
2023-07-10 22:55:50 +09:00
}
}
2023-07-10 23:14:55 +09:00
. layout-single-column . about__section : nth-child ( 3 ) . about__section__body {
2023-07-10 22:55:50 +09:00
padding-bottom : 4em ;
}
2023-07-15 08:06:28 +09:00
. layout-single-column . about__meta ,
2023-07-11 00:51:37 +09:00
. layout-single-column . about__section__title {
2023-07-10 19:09:13 +09:00
color : var ( --color-accent ) ;
background-color : var ( --color-content-secondary-bg ) ;
border : 0 ;
2023-07-30 03:19:43 +09:00
border-radius : 8px ;
2023-07-15 08:06:28 +09:00
}
2023-07-10 19:09:13 +09:00
. layout-single-column . about__section . active . about__section__title {
2023-07-30 03:19:43 +09:00
border-radius : 8px 8px 0 0 ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . about__section . active : not ( : nth-of-type ( 3 ) ) . about__section__body {
border : 0 ! important ;
background-color : var ( --color-content-secondary-bg ) ;
2023-07-30 03:19:43 +09:00
border-radius : 0 0 8px 8px ;
2023-07-10 19:09:13 +09:00
}
2023-07-10 22:55:50 +09:00
. layout-single-column . prose ,
. layout-single-column . prose p ,
2023-07-15 08:06:28 +09:00
. layout-single-column . prose b ,
. layout-single-column . prose h1 ,
. layout-single-column . prose h2 ,
. layout-single-column . prose h3 ,
. layout-single-column . prose h4 ,
. layout-single-column . prose h5 ,
. layout-single-column . prose h6 ,
2023-07-10 22:55:50 +09:00
. layout-single-column . prose strong ,
2023-07-10 23:14:55 +09:00
. layout-single-column . rules-list ,
. layout-single-column . about__domain-blocks__domain h6 ,
. layout-single-column . about__domain-blocks__domain__type {
2023-07-10 19:09:13 +09:00
color : var ( --color-content-fg ) ;
}
2023-07-10 22:55:50 +09:00
. layout-single-column . prose ul > li : before {
background-color : var ( --color-fg ) ;
2023-07-10 19:09:13 +09:00
}
. layout-single-column . about__section__body . prose hr {
border-color : var ( --color-content-secondary-separator ) ;
margin-top : 2em ;
margin-bottom : 2em ;
border-width : 3px ;
}
. layout-single-column . about__section__body . prose a ,
. layout-single-column . about__section__body . prose a : hover {
2023-08-07 03:35:57 +09:00
color : var ( --color-accent ) ;
2023-07-10 19:09:13 +09:00
text-decoration : none ;
}
2023-08-07 03:35:57 +09:00
. layout-single-column . about__section__body . prose a : hover {
text-decoration : underline ;
}
2023-07-10 22:55:50 +09:00
. layout-single-column . about__section__body . prose small . lang_label {
2023-07-10 19:09:13 +09:00
margin-left : -2em ;
display : block ;
color : var ( --color-content-fg-bold ) ;
opacity : . 5 ;
font-weight : bold ;
font-size : 80 % ;
float : left ;
}
2023-07-10 23:14:55 +09:00
. about__section . active . about__section__title {
background-color : var ( --color-accent-bg ) ;
}
. layout-single-column . rules-list li {
2023-08-02 06:20:04 +09:00
border-bottom : 2px solid var ( --color-accent-lines ) ;
2023-07-10 23:14:55 +09:00
padding : 1em 1 . 75em 1em 3 . 4em ;
}
. layout-single-column . rules-list li : last-child {
border-bottom : 0 ;
}
. about__domain-blocks {
background-color : var ( --color-content-bg ) ;
border : 0 ;
}
. about__domain-blocks__domain {
color : var ( --color-content-fg ) ;
border-bottom : 0 ;
}
. about__domain-blocks__domain : nth-child ( 2n ) {
background-color : var ( --color-content-secondary-bg ) ;
2023-07-12 22:05:44 +09:00
}
2023-08-01 20:39:37 +09:00
/* Privacy Policy page */
. layout-single-column . column > . scrollable . privacy-policy {
border : 1px solid var ( --color-lines ) ;
background-color : var ( --color-content-bg ) ;
}
2023-07-12 22:05:44 +09:00
/* 👋 Hide superfluous UI */
. layout-single-column div # mastodon > div > div > div : nth-child ( 2 ) > div : nth-child ( 3 ) > div > div > div : nth-child ( 3 ) > hr ,
. layout-single-column . navigation-panel__legal > hr ,
. layout-single-column . about__footer , /* Hide meta footer */
. layout-single-column . server-banner__introduction , /* Hide generic mastodon server introduction in sidebar */
. layout-single-column . search-banner ~ . search , /* Hide search field for logged out users */
. layout-single-column . ui__header__links . button . button-tertiary ,
. layout-single-column . getting-started__trends h4 , /* Hide Trending header in sidebar */
. layout-single-column . account__header__bio . account__header__fields > dl : first-child /* Hide "Joined" field on profiles */ {
display : none ;
2023-07-15 08:06:28 +09:00
}