mirror/Tangerine-UI
1
0
Fork 0
mirror of https://github.com/nileane/TangerineUI-for-Mastodon synced 2024-11-27 22:38:18 +09:00
Code
843b8d7e26
Tangerine-UI/TangerineUIforMastodon-singlecolumnlayout.css
Niléane 843b8d7e26
Fixes to dropdowns
2023-07-10 18:11:58 +02:00

2074 lines
129 KiB
CSS
Raw Blame History

/* TangerineUI for Mastodon
by @nileane@nileane.fr
Tangerine UI is a UI revamp for Mastodon's Web interface.
version: 0.7
Last Mastodon compatibility check: v4.1.4 ✅
*/
:root {
--color-bg: #f5f2ef;
--color-fg: #444b5d;
--color-secondary-bg: #f2eae4;
--color-secondary-separator: #ede3db;
--color-content-bg: #ffffff;
--color-content-fg: #454B5B;
--color-content-fg-bold: #000000;
--color-content-secondary-bg: #f9f6f4;
--color-content-secondary-separator: rgba(237, 227, 219, 0.4);
--color-content-bg-focus: #fffcfa;
--color-accent: #f76a02;
--color-accent-focus: #ff9346;
--color-accent-bg: #f6e5dd;
--color-accent-fg: #ffffff;
--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");
--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');
--icon-boost: 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-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='%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");
--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='%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-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
--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");
--icon-reply-nofitication-filter-bar-active: url('data:image/svg+xml, %3Csvg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23282C37" d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366a8.13 8.13 0 0 1 8.129 8.13c0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067A8.005 8.005 0 0 1 1.751 10zm8.005-6a6.005 6.005 0 1 0 .133 12.01l.351-.01h1.761v2.3l5.087-2.81A6.127 6.127 0 0 0 14.122 4H9.756z"/%3E%3Cellipse fill="%23282C37" fill-rule="evenodd" stroke-width="1.28569" cx="11.835" cy="10.2" rx="9.117" ry="8.123"/%3E%3C/svg%3E%0A');
--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%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-detailed-status-action-bar: 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%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-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%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-conversation: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%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-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-reply-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%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-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');
--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' 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-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-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' 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-hover: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23F91880' 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-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' 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-heart-active-red: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%23F91880'%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-heart-notification: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23F91880'%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-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");
--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" 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-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' 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");
--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');
--icon-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23282C37" 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');
--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');
--icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23535C76' 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");
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #19191A;
--color-fg: #cfbeb7;
--color-secondary-bg: #211f1d;
--color-secondary-separator: #2e2823;
--color-content-bg: #252526;
--color-content-fg: #f2f2f2;
--color-content-fg-bold: #ffffff;
--color-content-secondary-bg: #332f2c;
--color-content-secondary-separator: rgba(77, 73, 70, 0.4);
--color-content-bg-focus: #2e2e2e;
--color-accent: #E68A32;
--color-accent-focus: #ff9346;
--color-accent-bg: #3c2a1f;
--color-accent-fg: #ffffff;
--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');
--icon-boost: 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='%23ffffff' 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-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='%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");
--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='%23ffffff' 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-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
--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='%23ffffff' 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='%23ffffff' 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");
--icon-reply-nofitication-filter-bar-active: url('data:image/svg+xml, %3Csvg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23ffffff" d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366a8.13 8.13 0 0 1 8.129 8.13c0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067A8.005 8.005 0 0 1 1.751 10zm8.005-6a6.005 6.005 0 1 0 .133 12.01l.351-.01h1.761v2.3l5.087-2.81A6.127 6.127 0 0 0 14.122 4H9.756z"/%3E%3Cellipse fill="%23ffffff" fill-rule="evenodd" stroke-width="1.28569" cx="11.835" cy="10.2" rx="9.117" ry="8.123"/%3E%3C/svg%3E%0A');
--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%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-detailed-status-action-bar: 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%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-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%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-conversation: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%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-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-reply-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%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-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');
--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' 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-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-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' 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-hover: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23F91880' 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-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' 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-heart-active-red: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%23F91880'%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-heart-notification: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23F91880'%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-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");
--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" 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-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' 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");
--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');
--icon-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffffff" 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');
--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');
}
}
body.layout-single-column {
background-color: var(--color-bg);
color: var(--color-fg);
font-family: ui-rounded, "mastodon-font-sans-serif", sans-serif;
}
/* 🖱️ Scrollbars */
::-webkit-scrollbar-track {
background-color: var(--color-bg);
padding: 2px;
}
::-webkit-scrollbar-thumb {
background-color: var(--color-accent);
border-radius: 50px;
opacity: .3;
}
::-webkit-scrollbar-track:hover {
background-color: var(--color-bg);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--color-accent);
opacity: .7;
}
@media screen and (max-width:1174px) {
::-webkit-scrollbar {
display: none;
}
}
/* 👋 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 .navigation-panel > .column-link:only-of-type, /* Hide Explore tab for logged-out users */
.layout-single-column .navigation-panel__sign-in-banner + .navigation-panel__legal + .flex-spacer + .getting-started__trends, /* Hide Trending section for logged-out users */
.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;
}
/* 💨 Loading bar */
.layout-single-column .loading-bar {
background-color: var(--color-accent);
}
/* Resetting borders */
.layout-single-column .column-inline-form,
.layout-single-column .column>.scrollable,
.layout-single-column .error-column,
.layout-single-column .getting-started,
.layout-single-column .regeneration-indicator,
.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,
.layout-single-column .setting-text,
.layout-single-column .compose-form .compose-form__buttons-wrapper,
.layout-single-column .about__section__body {
border: 0;
}
.layout-single-column .column-inline-form,
.layout-single-column .column>.scrollable,
.layout-single-column .error-column,
.layout-single-column .getting-started,
.layout-single-column .regeneration-indicator {
background: transparent;
}
.layout-single-column .account__avatar img {
border-radius: 50%;
}
/* *️⃣ Icons
-------- */
.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%;
}
.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);
}
/* Replace star icon */
.layout-single-column i.fa-star:before {
background-image: var(--icon-star);
text-align: center;
line-height: 29px;
}
.layout-single-column button.icon-button.active i.fa-star:before,
.layout-single-column .notification i.fa-star:before {
background-image: var(--icon-star-hover);
}
.layout-single-column .detailed-status__link i.fa.fa-star:before {
content: " ";
}
/* 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;
}
.layout-single-column button.icon-button.active i.fa.fa-retweet.fa-fw,
.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 {
background-image: var(--icon-boost-status-prepend);
}
.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;
}
/* 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;
top: 2px;
}
/* Convert action bar icons to accent color using filters */
.layout-single-column .detailed-status__action-bar button.icon-button:not(.active,:hover) {
filter: brightness(0) saturate(100%) invert(51%) sepia(47%) saturate(996%) hue-rotate(339deg) brightness(95%) contrast(90%);
transition: none;
}
@media (prefers-color-scheme: dark) {
.layout-single-column .detailed-status__action-bar button.icon-button:not(.active,:hover) {
filter: brightness(0) saturate(100%) invert(67%) sepia(40%) saturate(2566%) hue-rotate(340deg) brightness(97%) contrast(86%);
}
}
/* Home icon */
.layout-single-column .notification__filter-bar .fa-home::before {
content: var(--icon-home-notification);
}
.layout-single-column .notification__filter-bar .active .fa-home::before {
content: var(--icon-home-notification-active);
}
.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);
}
/* Federated icon */
.layout-single-column .column-link .fa-globe::before {
content: var(--icon-globe);
}
‡
.layout-single-column .column-link.active .fa-home::before {
content: var(--icon-home-column-link-active);
}
/* 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);
}
/* 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);
}
/* Direct messages icon */
.layout-single-column .column-link .fa-at::before {
content: var(--icon-direct-messages);
}
.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);
}
.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);
}
.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;
}
/* 📝 Compose panel
---------------- */
.layout-single-column .compose-form {
padding: 0 0;
}
.layout-single-column .navigation-bar {
border-radius: 7px 7px 0 0;
background-color: var(--color-content-secondary-bg);
}
.layout-single-column .navigation-bar strong {
color: var(--color-content-fg-bold);
}
.layout-single-column .compose-form .autosuggest-textarea__suggestions,
.layout-single-column .compose-form .autosuggest-textarea__textarea,
.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;
}
.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);
}
.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active,
.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active {
color: var(--color-accent);
}
.layout-single-column .compose-panel .autosuggest-textarea__textarea {
padding-left: 20px;
padding-top: 20px;
}
.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder {
color: var(--color-content-fg);
}
.layout-single-column .compose-form .compose-form__buttons-wrapper {
border-radius: 0 0 7px 7px;
}
.layout-single-column .reply-indicator,
.layout-single-column .compose-form .compose-form__warning {
background-color: var(--color-accent-bg);
box-shadow: none;
margin: 0;
border-radius: 0;
border: 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);
}
.layout-single-column .compose-form .spoiler-input.spoiler-input--visible {
margin-bottom: 0;
}
.layout-single-column .compose-form .spoiler-input__input {
background-color: var(--color-accent-bg);
color: var(--color-accent);
margin-bottom: 0;
border-radius: 0;
}
.layout-single-column .display-name {
color: var(--color-content-fg);
}
@media screen and (max-width:1174px) {
.layout-single-column .compose-form {
padding: 0 10px 10px;
}
.layout-single-column .navigation-bar {
border-radius: 7px 7px 0 0;
margin: 10px 10px 0;
}
}
/* 💬 Posts
-------- */
.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 {
color: var(--color-content-fg-bold);
}
.layout-single-column .scrollable {
border-radius: 7px;
}
.layout-single-column .status {
margin-left: 56px;
padding: 0 10px;
border-bottom: 0;
}
.layout-single-column .status__wrapper {
transition: background .3s, box-shadow .3s;
box-shadow:
inset 72px 0 var(--color-content-bg),
0 -2px var(--color-content-secondary-bg) inset;
}
.layout-single-column .scrollable > div[role="feed"] > article:last-child div:last-child .status__wrapper,
.layout-single-column .scrollable > div[role="feed"] > article:last-of-type div:last-child .status__wrapper,
.layout-single-column .columns-area > div[role="region"] > .scrollable > div:last-child > div:last-child > .status__wrapper {
border-radius: 0 0 7px 7px;
box-shadow: none;
}
.layout-single-column .status__wrapper,
.layout-single-column .detailed-status__wrapper {
background-color: var(--color-content-bg);
padding: 15px 12px 12px;
}
.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);
opacity: .7;
}
.layout-single-column .status__avatar {
margin-bottom: -10px;
}
.layout-single-column .reply-indicator__content,
.layout-single-column .status__content {
line-height: 19px;
}
/* 👥 Threaded replies */
.layout-single-column .status__wrapper:has(.status--first-in-thread) {
box-shadow:
0 -3px var(--color-bg),
inset 72px 0 var(--color-content-bg),
0 -2px var(--color-content-secondary-bg) inset;
}
.layout-single-column .status--first-in-thread {
border-top: 0;
}
.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;
}
.layout-single-column .status--in-thread .status__line {
-webkit-border-start: 3px solid var(--color-content-secondary-bg);
border-inline-start: 3px solid var(--color-content-secondary-bg);
inset-inline-start: 43px;
position: absolute;
top: 0;
width: 0;
}
.layout-single-column .status__line--full:before {
background: var(--color-content-secondary-bg);
inset-inline-start: -3px;
width: 3px;
}
.layout-single-column .status__line.status__line--full.status__line--first {
top: 58px;
height: calc(100% - 58px);
}
.layout-single-column .scrollable > div:has(.status__wrapper .status--in-thread):has(+ div > .detailed-status__wrapper) .status__wrapper {
box-shadow: 0 -3px var(--color-bg) inset;
}
/* ⭐ Action bar */
.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;
}
.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;
}
.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;
top: 8px;
}
.layout-single-column .status__prepend {
font-weight: bold;
padding-top: 5px;
padding-left: 0;
padding-right: 0;
height: 25px;
color: var(--color-content-fg);
}
.layout-single-column .status__prepend-icon-wrapper {
width: 56px;
text-align: right;
}
.layout-single-column .status-card,
.layout-single-column .status-card.compact {
background-color: var(--color-content-secondary-bg);
border: none;
box-shadow:
0 1px 4px rgba(0, 0, 0, .08);
}
.layout-single-column .status-card__title,
.layout-single-column .status-card__host {
color: var(--color-content-fg-bold);
}
.layout-single-column .status-card__host {
opacity: .7;
}
.layout-single-column a.status-card:hover,
.layout-single-column a.status-card.compact:hover {
background-color: var(--color-accent-bg);
}
.layout-single-column .status-card__image {
background: rgba(249, 191, 164, 0.5);
}
.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 {
border-bottom: 0;
padding: 12px;
}
/* 📊 Polls */
.layout-single-column .poll__chart,
.layout-single-column .muted .poll__chart.leading {
background: var(--color-accent);
opacity: .4;
height: 12px;
border-radius: 10px;
}
.layout-single-column .poll__chart.leading,
.layout-single-column .muted .poll__chart.leading {
opacity: 1;
}
.layout-single-column .poll__footer {
color: var(--color-content-fg);
}
.layout-single-column .poll__link {
color: var(--color-accent);
text-decoration: none;
}
.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);
}
/* ⏺️ 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,
.layout-single-column .status__wrapper.focusable:focus .detailed-status,
.layout-single-column .focusable:focus .detailed-status__action-bar,
.layout-single-column .status__wrapper:has(.status__content:hover) {
outline: 0;
background: var(--color-content-bg-focus);
}
.layout-single-column .status__wrapper.focusable:focus,
.layout-single-column .status__wrapper:has(.status__content:hover) {
box-shadow:
inset 72px 0 var(--color-content-bg-focus),
0 -2px var(--color-content-secondary-bg) inset;
}
.layout-single-column .status__wrapper.focusable:has(.status--first-in-thread .status__content):focus {
box-shadow:
0 -3px var(--color-bg),
inset 72px 0 var(--color-content-bg-focus),
0 -2px var(--color-content-secondary-bg) inset;
}
.layout-single-column .status__wrapper:has(.status--first-in-thread .status__content:hover) {
box-shadow:
0 -3px var(--color-bg),
inset 72px 0 var(--color-content-bg-focus),
0 -2px var(--color-content-secondary-bg) inset;
}
/* 👁️ Post detailed view */
.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;
}
.detailed-status__display-name strong,
.detailed-status__display-name .display-name__account {
color: var(--color-content-fg-bold);
}
.detailed-status__display-name .display-name__account{
opacity: .7;
}
.layout-single-column .detailed-status__wrapper {
border-bottom: 3px solid var(--color-bg);
}
.layout-single-column .detailed-status__meta {
color: var(--color-fg);
opacity: .8;
}
.layout-single-column .detailed-status__action-bar {
border-top: 0;
border-bottom: 0;
padding: 0;
}
.layout-single-column .animated-number {
color: var(--color-content-fg);
}
.layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child {
border-radius: 0 0 7px 7px;
border: none;
}
.layout-single-column article > .account {
padding: 16px;
}
.layout-single-column article:last-child > .account {
border-radius: 0 0 7px 7px;
}
/* ⏺️ Column headers
----------------- */
.layout-single-column .tabs-bar__wrapper {
border-radius: 0;
background-color: transparent;
border-radius: 7px 7px 0 0;
box-shadow:
inset 0 10px var(--color-bg),
0 -30px var(--color-bg);
}
.layout-single-column .column-header {
border-radius: 7px;
margin-bottom: 10px;
}
.layout-single-column .column-header,
.layout-single-column .column-back-button {
background: var(--color-content-bg);
color: var(--color-content-fg);
border: 0;
border-radius: 7px;
font-weight: bold;
margin-bottom: 10px;
}
.layout-single-column .column-header__button,
.layout-single-column .column-header__back-button {
background-color: var(--color-content-bg);
border: 0;
}
.layout-single-column .column-header__button {
color: var(--color-content-fg);
transition: all .2s;
}
.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.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);
}
.layout-single-column .load-gap,
.layout-single-column .load-more {
background-color: var(--color-accent-bg);
color: var(--color-accent);
border-bottom: 0;
}
.layout-single-column .load-gap {
border-radius: 7px 7px 0 0;
}
.layout-single-column .load-gap:hover,
.layout-single-column .load-more:hover {
opacity: .6;
}
.layout-single-column .column-header__collapsible {
border-bottom: 0;
}
.layout-single-column .column-header__collapsible-inner {
background: var(--color-secondary-bg);
border: 0;
border-radius: 7px;
}
.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;
line-height: 48px;
font-weight: bold;
}
.layout-single-column .column-header__icon {
vertical-align: middle;
display: inline-block;
margin-right: 8px;
transform: scale(.8);
line-height: 23px;
}
.layout-single-column i.fa-home.column-header__icon:before {
content: var(--icon-home-notification-active);
}
.layout-single-column i.fa-bell.column-header__icon:before {
content: var(--icon-bell-active);
}
.layout-single-column i.fa-hashtag.column-header__icon:before {
content: var(--icon-hashtag-active);
}
.layout-single-column i.fa-group.column-header__icon:before,
.layout-single-column i.fa-users.column-header__icon:before {
content: var(--icon-users-column-link-active);
}
.layout-single-column .fa-globe.column-header__icon:before {
content: var(--icon-globe);
}
.layout-single-column .fa-at.column-header__icon:before {
content: var(--icon-direct-messages);
}
.layout-single-column .fa-star.column-header__icon:before {
content: var(--icon-star-column-link-active);
}
.layout-single-column .fa-bookmark.column-header__icon:before {
content: var(--icon-bookmark-column-link-active);
}
@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;
display: none;
margin-bottom: 0;
border-radius: 0;
height: 55px;
}
.layout-single-column .columns-area--mobile {
border-radius: 7px;
}
.layout-single-column .column-header,
.layout-single-column .column-back-button,
.layout-single-column .column-header__button,
.layout-single-column .column-header__back-button {
background-color: transparent;
height: 55px;
}
.layout-single-column .ui:after {
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
background-color: rgba(245, 242, 239, 0.75);
content: "";
height: 55px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.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 {
height: 110px;
}
.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) {
display: block;
}
.layout-single-column .column-header__collapsible-inner {
margin-top: 0;
}
}
@media (prefers-color-scheme: dark) {
@media screen and (max-width:1174px) {
.layout-single-column .ui:after {
background-color: rgba(24, 24, 25, 0.7);
}
}
}
/* ⏺️ Horizontal selectors
(used to navigate subsections on the Explore, Live Feeds and Account pages) */
.layout-single-column .account__section-headline,
.layout-single-column .notification__filter-bar {
background: var(--color-accent-bg);
border: 0;
border-radius: 7px;
margin-bottom: 10px;
}
.layout-single-column .account__section-headline a,
.layout-single-column .account__section-headline button,
.layout-single-column .notification__filter-bar a,
.layout-single-column .notification__filter-bar button {
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;
}
.layout-single-column .account__section-headline a:hover,
.layout-single-column .account__section-headline button:hover,
.layout-single-column .notification__filter-bar a:hover,
.layout-single-column .notification__filter-bar button:hover {
background-color: var(--color-content-bg);
color: var(--color-content-fg);
box-shadow: 0 0 0 4px var(--color-accent-bg) inset;
}
.layout-single-column .account__section-headline a.active,
.layout-single-column .account__section-headline button.active,
.layout-single-column .notification__filter-bar a.active,
.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;
}
.layout-single-column .account__section-headline a.active:after,
.layout-single-column .account__section-headline a.active:before,
.layout-single-column .account__section-headline button.active:after,
.layout-single-column .account__section-headline button.active:before,
.layout-single-column .notification__filter-bar a.active:after,
.layout-single-column .notification__filter-bar a.active:before,
.layout-single-column .notification__filter-bar button.active:after,
.layout-single-column .notification__filter-bar button.active:before {
display: none;
}
.layout-single-column .account__section-headline button,
.layout-single-column .notification__filter-bar button {
background-color: transparent;
}
.layout-single-column .account__section-headline a::after {
display: block;
position: absolute;
content: " ";
width: 2px;
background-color: var(--color-accent);
top: 8px;
right: -2px;
bottom: 8px;
opacity: .1;
border-radius: 50px;
}
.layout-single-column .account__section-headline a:last-child::after {
display: none;
}
@media (prefers-color-scheme: dark) {
.layout-single-column .account__section-headline a.active,
.layout-single-column .account__section-headline button.active,
.layout-single-column .notification__filter-bar a.active,
.layout-single-column .notification__filter-bar button.active {
background-color: var(--color-bg);
}
}
/* 📍 Navigation panel
------------------- */
.layout-single-column .column-link--transparent {
color: var(--color-fg);
}
.layout-single-column .column-link--logo {
margin-left: 4px;
}
.layout-single-column .column-link.column-link--logo,
.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 .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 .navigation-panel__logo {
margin-bottom: 10px;
}
.layout-single-column .column-link:not(.column-link--logo) {
padding: 10px 20px 11px 13px;
width: max-content;
margin-left: 3px;
font-weight: 500;
transition: all .2s;
}
.layout-single-column a.column-link--transparent.active,
.layout-single-column a.column-link--transparent.active:hover {
background-color: var(--color-content-bg);
border-radius: 8px;
color: var(--color-content-fg);
font-weight: bold;
}
.layout-single-column .column-link--transparent:hover {
background-color: var(--color-accent-bg);
border-radius: 8px;
padding-right: 20px;
}
.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;
}
.layout-single-column .compose-panel hr, .navigation-panel hr {
display: none;
}
.layout-single-column .list-panel {
padding: 8px 9px 8px 7px;
margin: 5px 0 5px;
border-radius: 9px;
background-color: var(--color-secondary-bg);
}
.layout-single-column .list-panel .column-link {
width: auto;
position: relative;
padding: 12px 13px;
overflow: visible;
}
.layout-single-column .list-panel .column-link:not(:last-child,:hover,.active)::after {
display: block;
content: " ";
height: 2px;
bottom: -2px;
right: 15px;
background-color: var(--color-secondary-separator);
left: 15px;
position: absolute;
}
.layout-single-column .list-panel i.fa {
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;
}
@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;
}
.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;
}
.layout-single-column .navigation-panel .column-link,
.layout-single-column .navigation-panel .navigation-panel__legal,
.layout-single-column a.column-link--transparent.active,
.layout-single-column a.column-link--transparent.active:hover,
.layout-single-column .column-link--transparent:hover {
flex: 0 0 18vw;
margin: 6px 0 7px;
padding: 4px 0 3px;
border-radius: 0;
justify-content: center;
display: inline-flex;
align-items: center;
box-sizing: border-box;
background-color: transparent;
}
.layout-single-column a.column-link--transparent.active,
.layout-single-column a.column-link--transparent.active:hover,
.layout-single-column a.column-link--transparent:active {
margin: 6px 0 7px;
padding: 4px 0 3px;
border-radius: 7px;
box-shadow: 0 0 6px rgba(0, 0, 0, .1);
background-color: var(--color-content-bg);
}
.layout-single-column .column-link__icon {
transform: scale(1);
margin: 0;
}
.layout-single-column .column-link span {
padding-left: .5em;
}
.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 {
background-color: rgba(24, 24, 25, 0.7);
border: 0;
}
.layout-single-column a.column-link--transparent.active,
.layout-single-column a.column-link--transparent.active:hover,
.layout-single-column a.column-link--transparent:active {
background-color: var(--color-bg);
}
}
}
/* 👤 Account view
--------------- */
.layout-single-column .account__header {
border-radius: 7px;
margin-bottom: 10px;
background-color: var(--color-content-bg);
}
.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 {
color: var(--color-content-fg-bold);
}
.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);
}
.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);
border-radius: 7px;
}
.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: " ";
height: 2px;
bottom: -1px;
right: 15px;
background-color: var(--color-content-secondary-separator);
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 */
border-top-left-radius: 7px;
border-top-right-radius: 7px;
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;
}
.layout-single-column .account-timeline__header + article .status__wrapper {
border-radius: 7px 7px 0 0;
}
/* ✨ Explore tab
-------------- */
.layout-single-column .account__section-headline + .scrollable article:first-child .status__wrapper {
border-radius: 7px 7px 0 0;
}
.layout-single-column .icon-button.active .fa.fa-retweet + .icon-button__counter .animated-number {
color: var(--color-verified);
}
.layout-single-column .icon-button.active .fa.fa-star + .icon-button__counter .animated-number {
color: #ca8f04;
}
/* #️⃣ Trending hashtags */
.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;
opacity: 20%;
}
.layout-single-column .explore__links {
background-color: var(--color-content-bg);
border-radius: 7px;
overflow: hidden;
}
.layout-single-column .explore__links .trends__item {
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;
}
.layout-single-column .trends__item__name {
color: var(--color-content-fg);
}
.layout-single-column .trends__item__name a {
color: var(--color-content-fg-bold);
}
.getting-started__trends .trends__item__current {
color: var(--color-fg);
}
.layout-single-column .scrollable .account-card {
margin: 0 0 10px;
background-color: var(--color-content-bg);
border-radius: 7px;
}
.layout-single-column .account-card__header {
padding: 0;
border-radius: 7px 7px 0 0;
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);
}
/* 📰 Trending stories */
.layout-single-column .story {
background-color: var(--color-content-bg);
}
.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 {
background-color: var(--color-accent-bg);
}
.layout-single-column .story__details__publisher,
.layout-single-column .story__details__shared {
color: var(--color-fg);
}
/* 🔍 Search field and search results */
.layout-single-column .search {
margin-bottom: 10px;
}
.layout-single-column .search__input {
border-radius: 7px;
background-color: var(--color-accent-bg);
color: var(--color-content-fg);
border: none;
}
.layout-single-column .search__input::placeholder,
.layout-single-column .compose-form .spoiler-input__input::placeholder {
font-weight: 500;
color: var(--color-accent);
}
.layout-single-column i.fa-search,
.layout-single-column i.fa.active {
opacity: 1;
right: 15px;
}
.layout-single-column i.fa-search:before {
content: " ";
}
.layout-single-column i.fa-search.active:before,
.layout-single-column i.fa-search.column-header__icon:before {
content: var(--icon-search);
}
.layout-single-column .explore__search-results {
background-color: var(--color-content-bg);
border-radius: 7px;
overflow: hidden;
}
.layout-single-column .explore__search-header {
background-color: transparent;
}
.layout-single-column .explore__search-results .account {
padding-top: 16px;
}
.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);
border-radius: 0 0 7px 7px;
box-shadow: 0 4px 6px rgba(0,0,0,.1);
}
.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);
}
.search__popout__menu__item.selected,
.search__popout__menu__item:active,
.search__popout__menu__item:focus,
.search__popout__menu__item:hover,
.search__popout__menu__item.selected mark,
.search__popout__menu__item:active mark,
.search__popout__menu__item:focus mark,
.search__popout__menu__item:hover mark {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
@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;
}
.layout-single-column i.fa-search,
.layout-single-column i.fa.active {
transform: scale(1.3);
top: 13px;
}
.layout-single-column .explore__search-header {
padding: 0 0 10px;
}
}
@media screen and (max-width:889px) {
.layout-single-column .account__section-headline,
.layout-single-column .notification__filter-bar {
margin-left: 10px;
margin-right: 10px;
}
.layout-single-column .explore__search-header {
padding: 10px;
}
}
.layout-single-column .dismissable-banner {
background-color: var(--color-accent);
box-shadow: 0 5px var(--color-content-bg);
border-radius: 7px 7px 0 0;
border: 0;
}
.layout-single-column .dismissable-banner__message,
.layout-single-column .dismissable-banner__action .icon-button {
color: var(--color-accent-fg);
}
/* 🔔 Notifications
---------------- */
.layout-single-column .muted .status__content,
.layout-single-column .muted .status__content a,
.layout-single-column .muted .status__content p,
.layout-single-column .muted .status__display-name strong,
.layout-single-column .attachment-list__list a,
.layout-single-column .attachment-list.compact .fa {
color: var(--color-content-fg);
}
.layout-single-column .notification.unread::before,
.layout-single-column .status__wrapper.unread::before {
background-color: var(--color-accent);
width: 7px;
border: 0;
top: 5px;
height: auto;
bottom: 5px;
border-radius: 8px;
left: 5px;
z-index: 1;
}
.layout-single-column article:first-child .notification__message,
.layout-single-column article:first-child > div > .status__wrapper:first-child {
border-radius: 7px 7px 0 0;
}
.layout-single-column .notification__message {
padding: 12px 12px 0;
background-color: var(--color-content-bg);
color: var(--color-content-fg-bold);
}
.layout-single-column .notification__favourite-icon-wrapper {
width: 56px;
text-align: right;
}
.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;
box-shadow:
inset 72px 0 var(--color-content-bg),
0 -2px var(--color-content-secondary-bg) inset;
}
.layout-single-column .explore__search-results .account {
padding-top: 16px;
}
.layout-single-column .notification__message .fa {
color: var(--color-accent);
}
.layout-single-column .notification .status.muted {
opacity: .5;
transition: opacity .5s;
}
/* 🖱️ Interaction modals
--------------------- */
.layout-single-column .interaction-modal {
background-color: var(--color-content-bg);
}
.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.tertiary {
padding: 10px 18px;
}
.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 {
padding: 7px 18px;
}
/* ⏺️ UI components : buttons, toggles, ...
---------------------------------------- */
.layout-single-column .button,
.layout-single-column .account__header__tabs__buttons .icon-button {
border-radius: 7px;
}
.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);
transition: all .2s;
}
.layout-single-column .text-icon-button.active,
.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,
.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,
.layout-single-column .status__content__read-more-button,
.layout-single-column .status__action-bar__dropdown .icon-button.active,
.layout-single-column .account__relationship .icon-button.active,
.layout-single-column .account__header__tabs__buttons .icon-button.active {
color: var(--color-accent);
}
.layout-single-column .icon-button,
.layout-single-column .icon-button.inverted,
.layout-single-column .reply-indicator__content .status__content__spoiler-link,
.layout-single-column .status__content .status__content__spoiler-link {
color: var(--color-content-fg);
}
.layout-single-column .reply-indicator__content .status__content__spoiler-link,
.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);
}
.layout-single-column .icon-button:active,
.layout-single-column .icon-button:focus,
.layout-single-column .icon-button:hover {
background-color: var(--color-accent-bg);
}
.layout-single-column .language-dropdown__dropdown__results__item.active,
.layout-single-column .language-dropdown__dropdown__results__item.active:hover {
background-color: var(--color-accent);
}
.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);
}
.layout-single-column .react-toggle-track {
background-color: var(--color-neutral);
}
.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);
}
.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;
}
.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;
}
.layout-single-column .dropdown-menu__separator {
border-color: var(--color-content-secondary-separator);
}
.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active,
.layout-single-column .privacy-dropdown__option.active,
.layout-single-column .privacy-dropdown__option:hover {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
.layout-single-column .privacy-dropdown__option.active:hover {
background-color: var(--color-accent-focus);
}
.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,
.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 {
color: var(--color-accent-fg);
}
.layout-single-column .button.button-tertiary.button--confirmation,
.layout-single-column .button.button-tertiary.button--destructive {
background-color: transparent;
}
.layout-single-column .button.button-tertiary.button--confirmation:active,
.layout-single-column .button.button-tertiary.button--confirmation:focus,
.layout-single-column .button.button-tertiary.button--confirmation:hover {
background-color: #79bd9a;
}
.layout-single-column .button.button-tertiary.button--destructive:active,
.layout-single-column .button.button-tertiary.button--destructive:focus,
.layout-single-column .button.button-tertiary.button--destructive:hover {
background-color: #df405a;
}
.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,
.layout-single-column .app-body .mute-modal__cancel-button {
background-color: transparent;
}
.layout-single-column .status__content a.hashtag {
color: var(--color-accent);
}
/* 📄 Meta
------- */
.layout-single-column .link-footer p,
.layout-single-column .link-footer a {
color: var(--color-fg);
}
.layout-single-column .link-footer p {
opacity: .5;
}
/* 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 {
border-radius: 7px 7px 0 0;
margin-bottom: 0;
}
.layout-single-column .server-banner__description {
padding: 20px 15px 20px;
margin-bottom: 0;
background-color: var(--color-content-bg);
}
.layout-single-column .server-banner__meta {
padding: 10px 15px 20px;
background-color: var(--color-content-bg);
gap: 0;
margin: 0;
border-radius: 0 0 7px 7px;
align-items: end;
}
.layout-single-column .server-banner h4 {
color: var(--color-fg);
}
.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;
}
.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__meta__column:nth-child(2) h4 {
display: none;
}
.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;
}
/* 📜 About page
------------- */
.layout-single-column .scrollable.about {
background-color: var(--color-content-bg);
display: flex;
flex-flow: column;
}
.about__header {
order: 1;
margin-bottom: 10px;
}
.about__section:nth-child(3) {
order: 2;
}
.about__meta {
order: 3;
}
.about__section:nth-child(4) {
order: 4;
}
.about__section:nth-child(5) {
order: 5;
}
.link-footer {
order: 6;
}
.about__footer {
order: 7;
}
.layout-single-column .about__header h1,
.layout-single-column .about__header p,
.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;
}
.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);
border-radius: 7px 7px 0 0;
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;
}
.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;
}
.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);
}
}
.layout-single-column .about__section:nth-child(3) .about__section__body {
padding-bottom: 4em;
}
.layout-single-column .about__meta,
.layout-single-column .about__section__title {
color: var(--color-accent);
background-color: var(--color-content-secondary-bg);
border: 0;
border-radius: 7px;
}
.layout-single-column .about__section.active .about__section__title {
border-radius: 7px 7px 0 0;
}
.layout-single-column .about__section.active:not(:nth-of-type(3)) .about__section__body {
border: 0 !important;
background-color: var(--color-content-secondary-bg);
border-radius: 0 0 7px 7px;
}
.layout-single-column .prose,
.layout-single-column .prose p,
.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,
.layout-single-column .prose strong,
.layout-single-column .rules-list,
.layout-single-column .about__domain-blocks__domain h6,
.layout-single-column .about__domain-blocks__domain__type {
color: var(--color-content-fg);
}
.layout-single-column .prose ul>li:before {
background-color: var(--color-fg);
}
.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 {
color: var(--color-content-fg);
text-decoration: none;
}
.layout-single-column .about__section__body .prose small.lang_label {
margin-left: -2em;
display: block;
color: var(--color-content-fg-bold);
opacity: .5;
font-weight: bold;
font-size: 80%;
float: left;
}
.about__section.active .about__section__title {
background-color: var(--color-accent-bg);
}
.layout-single-column .rules-list li {
border-bottom: 2px solid #f5f2ef;
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);
}
View Git Blame Copy Permalink