Customisation Mastodon: le thème
Ce week-end, j’ai décidé de travailler sur l’identité graphique du FédiVienne: je me suis donc attelé “thémer” Mastodon, qui sera la place centrale de la plateforme.
Je suis parti du thème Tangerine, de Niléane (que je remercie pour son travail et son chouette retour), et j’ai passé quelques heures à tout accorder avec la palette Nord.
J’ai aussi laissé la possibilité de définir un logo.svg dans le dossier du thème, ça va nous servir pour la suite.
Voici donc le css du thème Nord, pour Mastodon:
/* Nord for Mastodon Adapté depuis Tangerine version 1.9: A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ by @nileane@nileane.fr Compatible with: Mastodon v4.2.0 ✅ */ /* 🎨 Colors */ :root { --color-bg: #d8dee9; --color-fg: #2e3440; --color-fg-muted: #4c566a; --color-secondary-bg: #e5e9f0; --color-secondary-separator: #e5e9f0; --color-content-bg: #eceff4; --color-content-fg: #3b4252; --color-content-fg-bold: #000000; --color-content-fg-muted: #4c566a; --color-content-secondary-bg: #d8dee9; --color-content-secondary-separator: rgba(237, 227, 219, 0.4); --color-content-bg-focus: #eceff4; --color-accent: #2e3440; --color-accent-focus: #3b4252; --color-accent-lines: rgba(46,52,64, 0.02); --color-accent-bg: #e5e9f0 ; --color-accent-fg: #ffffff; --color-lines: #d8dee9; } @media (prefers-color-scheme: dark) { :root { --color-bg: #2e3440; --color-fg: #d8dee9; --color-fg-muted: #eceff4; --color-secondary-bg: #3b4252; --color-secondary-separator: #3b4252; --color-content-bg: #4c566a; --color-content-fg: #e5e9f0; --color-content-fg-bold: #ffffff; --color-content-fg-muted: #eceff4; --color-content-secondary-bg: #2e3440; --color-content-secondary-separator: rgba(129,161,193, 0.4); --color-content-bg-focus: #4c566a; --color-accent: #d8dee9; --color-accent-focus: #e5e9f0; --color-accent-lines: rgba(216,222,233, 0.02); --color-accent-bg: #3b4252; --color-accent-fg: #000000; --color-lines: #2e3440; } } :root { --logo: url('data:image/svg+xml, %3Csvg class="mastodon-logo" xmlns="http://www.w3.org/2000/svg" width="28px" height="28px" viewBox="0 0 216.4144 232.00976"%3E%3Cdefs xmlns="http://www.w3.org/2000/svg"%3E%3ClinearGradient xmlns="http://www.w3.org/2000/svg" id="gradient" x2="0%25" y2="100%25" gradientUnits="userSpaceOnUse"%3E%3Cstop offset="0%25" stop-color="%23595aff"%3E%3C/stop%3E%3Cstop offset="100%25" stop-color="%23595aff"%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns="http://www.w3.org/2000/svg" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="url(%23gradient)"%3E%3C/path%3E%3Cpath d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="%23fff"%3E%3C/path%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="%238fbcbb" 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="%238fbcbb" 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,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23282C37; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg%3E%3Cpath d='M21.502,2.561c-1.212,-1.213 -3.11,-1.53 -5.346,-0.89c-2.031,0.581 -4.151,1.901 -5.968,3.718c-0.235,0.235 -0.462,0.477 -0.68,0.722c-2.765,0.035 -6.278,1.476 -7.556,2.745c-0.442,0.438 -0.666,0.896 -0.666,1.359c0,0.351 0.184,0.677 0.486,0.857l4.38,2.629c0.041,1.212 0.448,2.242 1.208,3.001c0.745,0.746 1.758,1.137 2.942,1.19l2.564,4.275c0.181,0.301 0.507,0.485 0.858,0.485c0.463,0 0.92,-0.224 1.359,-0.665c1.232,-1.242 2.625,-4.615 2.732,-7.316c0.291,-0.255 0.58,-0.518 0.859,-0.797c1.816,-1.817 3.137,-3.936 3.717,-5.968c0.639,-2.235 0.323,-4.133 -0.889,-5.345Zm-7.499,17.612l-1.428,-2.379c0.944,-0.105 1.854,-0.341 2.899,-1.02c-0.381,1.4 -0.99,2.696 -1.471,3.399Zm6.465,-12.816c-0.488,1.71 -1.628,3.522 -3.208,5.103c-1.581,1.581 -3.393,2.72 -5.103,3.209c-1.487,0.423 -2.717,0.284 -3.383,-0.381c-0.665,-0.665 -0.804,-1.898 -0.38,-3.382c0.488,-1.71 1.628,-3.522 3.208,-5.103c1.581,-1.581 3.393,-2.72 5.103,-3.209c0.566,-0.161 1.096,-0.241 1.571,-0.241c0.771,0 1.4,0.21 1.812,0.622c0.665,0.665 0.804,1.898 0.38,3.382Zm-16.703,2.579c0.703,-0.481 1.998,-1.09 3.399,-1.471c-0.679,1.044 -0.915,1.954 -1.02,2.898l-2.379,-1.427Zm11.373,-3.84c-0.78,0.78 -0.78,2.048 0,2.828c0.781,0.781 2.048,0.781 2.828,0c0.781,-0.78 0.781,-2.048 0,-2.828c-0.78,-0.781 -2.047,-0.781 -2.828,0Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E"); --icon-boost-accent: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%235e81ac; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg%3E%3Cpath d='M21.502,2.561c-1.212,-1.213 -3.11,-1.53 -5.346,-0.89c-2.031,0.581 -4.151,1.901 -5.968,3.718c-0.235,0.235 -0.462,0.477 -0.68,0.722c-2.765,0.035 -6.278,1.476 -7.556,2.745c-0.442,0.438 -0.666,0.896 -0.666,1.359c0,0.351 0.184,0.677 0.486,0.857l4.38,2.629c0.041,1.212 0.448,2.242 1.208,3.001c0.745,0.746 1.758,1.137 2.942,1.19l2.564,4.275c0.181,0.301 0.507,0.485 0.858,0.485c0.463,0 0.92,-0.224 1.359,-0.665c1.232,-1.242 2.625,-4.615 2.732,-7.316c0.291,-0.255 0.58,-0.518 0.859,-0.797c1.816,-1.817 3.137,-3.936 3.717,-5.968c0.639,-2.235 0.323,-4.133 -0.889,-5.345Zm-7.499,17.612l-1.428,-2.379c0.944,-0.105 1.854,-0.341 2.899,-1.02c-0.381,1.4 -0.99,2.696 -1.471,3.399Zm6.465,-12.816c-0.488,1.71 -1.628,3.522 -3.208,5.103c-1.581,1.581 -3.393,2.72 -5.103,3.209c-1.487,0.423 -2.717,0.284 -3.383,-0.381c-0.665,-0.665 -0.804,-1.898 -0.38,-3.382c0.488,-1.71 1.628,-3.522 3.208,-5.103c1.581,-1.581 3.393,-2.72 5.103,-3.209c0.566,-0.161 1.096,-0.241 1.571,-0.241c0.771,0 1.4,0.21 1.812,0.622c0.665,0.665 0.804,1.898 0.38,3.382Zm-16.703,2.579c0.703,-0.481 1.998,-1.09 3.399,-1.471c-0.679,1.044 -0.915,1.954 -1.02,2.898l-2.379,-1.427Zm11.373,-3.84c-0.78,0.78 -0.78,2.048 0,2.828c0.781,0.781 2.048,0.781 2.828,0c0.781,-0.78 0.781,-2.048 0,-2.828c-0.78,-0.781 -2.047,-0.781 -2.828,0Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E"); --icon-boost-active: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23D08770; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M21.502,2.561c-1.212,-1.213 -3.11,-1.53 -5.346,-0.89c-2.031,0.581 -4.151,1.901 -5.968,3.718c-0.235,0.235 -0.462,0.477 -0.68,0.722c-2.765,0.035 -6.278,1.476 -7.556,2.745c-0.442,0.438 -0.666,0.896 -0.666,1.359c0,0.351 0.184,0.677 0.486,0.857l4.38,2.629c0.041,1.212 0.448,2.242 1.208,3.001c0.745,0.746 2.942,1.19 2.942,1.19l2.564,4.275c0.181,0.301 0.507,0.485 0.858,0.485c0.463,0 0.92,-0.224 1.359,-0.665c1.132,-1.141 2.399,-4.08 2.681,-6.645c0.025,-0.227 0.042,-0.451 0.051,-0.671c0.291,-0.255 0.58,-0.518 0.859,-0.797c1.816,-1.817 3.137,-3.936 3.717,-5.968c0.639,-2.235 0.323,-4.133 -0.889,-5.345Zm-4.948,2.976c1.093,-0 1.98,0.887 1.98,1.98c0,1.093 -0.887,1.98 -1.98,1.98c-1.093,-0 -1.98,-0.887 -1.98,-1.98c0,-1.093 0.887,-1.98 1.98,-1.98Z' style='fill-rule:nonzero;'/%3E%3Cpath d='M6.194,17.686c1.126,1.126 3.356,0.784 2.229,1.911c-1.126,1.126 -4.134,2.305 -5.261,1.179c-1.126,-1.127 0.053,-4.135 1.179,-5.261c1.127,-1.127 0.727,1.045 1.853,2.171Z'/%3E%3C/svg%3E"); --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='%23D08770' 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: 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='%238fbcbb' 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: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23282C37' aria-hidden='true'%3E%3Cg stroke-width='0.5' stroke='%23282C37'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); --icon-reply-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%235e81ac' aria-hidden='true'%3E%3Cg stroke-width='0.5' stroke='%235e81ac'%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='%23D08770' 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='%23D08770' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); --icon-bookmark-column-link: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-column-link-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23282C37" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-list: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/%3E%3Ccircle cx="80" cy="144" r="16" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E'); --icon-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23282C37' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-share-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235e81ac' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23282C37" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-star-notification: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="0" viewBox="0 0 24 24" fill="%23ffac33" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffac33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-heart-column-link: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E"); --icon-users-column-link-accent: 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="%235e81ac"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%235e81ac" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%235e81ac" 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="%235e81ac" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%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='%23D08770' 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.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235e81ac" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%238fbcbb' 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="45"/%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="45"/%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-notification-accent: 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="%235e81ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="45"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%235e81ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="45"/%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="20" height="20" fill="none" stroke="%23282C37" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-star-accent: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%235e81ac" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-star-hover: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-star-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23ebcb8b" stroke="%23ebcb8b" stroke-width="4" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23282C37' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); --icon-poll: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill:%23282C37;transform: ;msFilter:;'%3E%3Cpath d='M20 7h-4V4c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v5H4c-1.103 0-2 .897-2 2v9a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V9c0-1.103-.897-2-2-2zM4 11h4v8H4v-8zm6-1V4h4v15h-4v-9zm10 9h-4V9h4v10z'%3E%3C/path%3E%3C/svg%3E"); --icon-poll-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill:%235e81ac;transform: ;msFilter:;'%3E%3Cpath d='M20 7h-4V4c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v5H4c-1.103 0-2 .897-2 2v9a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V9c0-1.103-.897-2-2-2zM4 11h4v8H4v-8zm6-1V4h4v15h-4v-9zm10 9h-4V9h4v10z'%3E%3C/path%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { :root { --logo: url('data:image/svg+xml, %3Csvg class="mastodon-logo" xmlns="http://www.w3.org/2000/svg" width="28px" height="28px" viewBox="0 0 216.4144 232.00976"%3E%3Cdefs xmlns="http://www.w3.org/2000/svg"%3E%3ClinearGradient xmlns="http://www.w3.org/2000/svg" id="gradient" x2="0%25" y2="100%25" gradientUnits="userSpaceOnUse"%3E%3Cstop offset="0%25" stop-color="%23595aff"%3E%3C/stop%3E%3Cstop offset="100%25" stop-color="%23595aff"%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns="http://www.w3.org/2000/svg" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="url(%23gradient)"%3E%3C/path%3E%3Cpath d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="%23fff"%3E%3C/path%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="%238fbcbb" 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="%238fbcbb" 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,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23ffffff; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg%3E%3Cpath d='M21.502,2.561c-1.212,-1.213 -3.11,-1.53 -5.346,-0.89c-2.031,0.581 -4.151,1.901 -5.968,3.718c-0.235,0.235 -0.462,0.477 -0.68,0.722c-2.765,0.035 -6.278,1.476 -7.556,2.745c-0.442,0.438 -0.666,0.896 -0.666,1.359c0,0.351 0.184,0.677 0.486,0.857l4.38,2.629c0.041,1.212 0.448,2.242 1.208,3.001c0.745,0.746 1.758,1.137 2.942,1.19l2.564,4.275c0.181,0.301 0.507,0.485 0.858,0.485c0.463,0 0.92,-0.224 1.359,-0.665c1.232,-1.242 2.625,-4.615 2.732,-7.316c0.291,-0.255 0.58,-0.518 0.859,-0.797c1.816,-1.817 3.137,-3.936 3.717,-5.968c0.639,-2.235 0.323,-4.133 -0.889,-5.345Zm-7.499,17.612l-1.428,-2.379c0.944,-0.105 1.854,-0.341 2.899,-1.02c-0.381,1.4 -0.99,2.696 -1.471,3.399Zm6.465,-12.816c-0.488,1.71 -1.628,3.522 -3.208,5.103c-1.581,1.581 -3.393,2.72 -5.103,3.209c-1.487,0.423 -2.717,0.284 -3.383,-0.381c-0.665,-0.665 -0.804,-1.898 -0.38,-3.382c0.488,-1.71 1.628,-3.522 3.208,-5.103c1.581,-1.581 3.393,-2.72 5.103,-3.209c0.566,-0.161 1.096,-0.241 1.571,-0.241c0.771,0 1.4,0.21 1.812,0.622c0.665,0.665 0.804,1.898 0.38,3.382Zm-16.703,2.579c0.703,-0.481 1.998,-1.09 3.399,-1.471c-0.679,1.044 -0.915,1.954 -1.02,2.898l-2.379,-1.427Zm11.373,-3.84c-0.78,0.78 -0.78,2.048 0,2.828c0.781,0.781 2.048,0.781 2.828,0c0.781,-0.78 0.781,-2.048 0,-2.828c-0.78,-0.781 -2.047,-0.781 -2.828,0Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E"); --icon-boost-accent: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%235e81ac; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg%3E%3Cpath d='M21.502,2.561c-1.212,-1.213 -3.11,-1.53 -5.346,-0.89c-2.031,0.581 -4.151,1.901 -5.968,3.718c-0.235,0.235 -0.462,0.477 -0.68,0.722c-2.765,0.035 -6.278,1.476 -7.556,2.745c-0.442,0.438 -0.666,0.896 -0.666,1.359c0,0.351 0.184,0.677 0.486,0.857l4.38,2.629c0.041,1.212 0.448,2.242 1.208,3.001c0.745,0.746 1.758,1.137 2.942,1.19l2.564,4.275c0.181,0.301 0.507,0.485 0.858,0.485c0.463,0 0.92,-0.224 1.359,-0.665c1.232,-1.242 2.625,-4.615 2.732,-7.316c0.291,-0.255 0.58,-0.518 0.859,-0.797c1.816,-1.817 3.137,-3.936 3.717,-5.968c0.639,-2.235 0.323,-4.133 -0.889,-5.345Zm-7.499,17.612l-1.428,-2.379c0.944,-0.105 1.854,-0.341 2.899,-1.02c-0.381,1.4 -0.99,2.696 -1.471,3.399Zm6.465,-12.816c-0.488,1.71 -1.628,3.522 -3.208,5.103c-1.581,1.581 -3.393,2.72 -5.103,3.209c-1.487,0.423 -2.717,0.284 -3.383,-0.381c-0.665,-0.665 -0.804,-1.898 -0.38,-3.382c0.488,-1.71 1.628,-3.522 3.208,-5.103c1.581,-1.581 3.393,-2.72 5.103,-3.209c0.566,-0.161 1.096,-0.241 1.571,-0.241c0.771,0 1.4,0.21 1.812,0.622c0.665,0.665 0.804,1.898 0.38,3.382Zm-16.703,2.579c0.703,-0.481 1.998,-1.09 3.399,-1.471c-0.679,1.044 -0.915,1.954 -1.02,2.898l-2.379,-1.427Zm11.373,-3.84c-0.78,0.78 -0.78,2.048 0,2.828c0.781,0.781 2.048,0.781 2.828,0c0.781,-0.78 0.781,-2.048 0,-2.828c-0.78,-0.781 -2.047,-0.781 -2.828,0Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E"); --icon-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ffffff' aria-hidden='true'%3E%3Cg stroke-width='0.5' stroke='%23ffffff'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); --icon-reply-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%235e81ac' aria-hidden='true'%3E%3Cg stroke-width='0.5' stroke='%235e81ac'%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='%23D08770' 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='%23D08770' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); --icon-bookmark-column-link: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-column-link-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-list: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/%3E%3Ccircle cx="80" cy="144" r="16" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E'); --icon-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-share-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235e81ac' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-star-notification: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="0" viewBox="0 0 24 24" fill="%23ffac33" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffac33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-heart-column-link: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23ffffff' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E"); --icon-heart-column-link-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23ffffff'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); --icon-direct-messages: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E'); --icon-direct-messages-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23ffffff" stroke="%23232543" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E'); --icon-users-column-link: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23ffffff" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-users-column-link-accent: 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="%235e81ac"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%235e81ac" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%235e81ac" 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="%235e81ac" 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='%23D08770' 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.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235e81ac" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-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-accent: 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="%235e81ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="45"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%235e81ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="45"/%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="20" height="20" fill="none" stroke="%23ffffff" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-star-accent: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%235e81ac" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-star-hover: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="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='%23ffffff' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); --icon-poll: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill:%23ffffff;transform: ;msFilter:;'%3E%3Cpath d='M20 7h-4V4c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v5H4c-1.103 0-2 .897-2 2v9a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V9c0-1.103-.897-2-2-2zM4 11h4v8H4v-8zm6-1V4h4v15h-4v-9zm10 9h-4V9h4v10z'%3E%3C/path%3E%3C/svg%3E"); --icon-poll-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill:%235e81ac;transform: ;msFilter:;'%3E%3Cpath d='M20 7h-4V4c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v5H4c-1.103 0-2 .897-2 2v9a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V9c0-1.103-.897-2-2-2zM4 11h4v8H4v-8zm6-1V4h4v15h-4v-9zm10 9h-4V9h4v10z'%3E%3C/path%3E%3C/svg%3E"); } } body.layout-single-column { background-color: var(--color-bg); color: var(--color-fg); font-family: ui-rounded, "mastodon-font-sans-serif", sans-serif; } /* 🖱️ Scrollbars */ :root:has(.layout-single-column) *::-webkit-scrollbar-track { background-color: var(--color-bg); padding: 2px; } :root:has(.layout-single-column) *::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 50px; opacity: .4; } :root:has(.layout-single-column) *::-webkit-scrollbar-track:hover { background-color: var(--color-bg); } :root:has(.layout-single-column) *::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent); opacity: .7; } @media screen and (max-width:1174px) { :root:has(.layout-single-column) *::-webkit-scrollbar { display: none; } } /* 💨 Loading bar */ .layout-single-column .loading-bar { background-color: var(--color-accent); } /* Resetting borders */ .layout-single-column .column>.scrollable, .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 .getting-started, .layout-single-column .regeneration-indicator { background: transparent; } /* Round avatars */ .layout-single-column .account__avatar img { border-radius: 50%; } /* Rordered layout */ .layout-single-column .columns-area__panels__pane--navigational { order: 1; } .layout-single-column .columns-area__panels__main { order: 2; } .layout-single-column .columns-area__panels__pane--compositional { order: 3; } .layout-single-column .columns-area--mobile .column { flex: unset; height: auto; } .layout-single-column .scrollable, .layout-single-column .column > .scrollable { max-height: max-content; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .layout-single-column .dismissable-banner + .scrollable { border-top-left-radius: 0; border-top-right-radius: 0; } /* *️⃣ 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%; background-position: center 55%; } .layout-single-column .detailed-status__button i.fa-bookmark:before { background-image: var(--icon-bookmark-accent); } .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); } .layout-single-column .detailed-status__button i.fa-share-alt:before { background-image: var(--icon-share-accent); } /* Replace star icon */ .layout-single-column i.fa-star:before { background-image: var(--icon-star); text-align: center; line-height: 34px; } .layout-single-column .detailed-status__button i.fa-star:before { background-size: 75%; background-image: var(--icon-star-accent); } .layout-single-column button.icon-button.active i.fa-star:before, .layout-single-column .notification i.fa-star:before { background-image: var(--icon-star-active); } .layout-single-column .detailed-status__link i.fa.fa-star:before { content: " "; transform: scale(.9); } /* 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 .detailed-status__button i.fa.fa-retweet.fa-fw, .layout-single-column .detailed-status__button button.icon-button i.fa.fa-retweet.fa-fw, .layout-single-column .detailed-status__button button.icon-button:hover i.fa.fa-retweet.fa-fw { background-image: var(--icon-boost-accent); } .layout-single-column button.icon-button.active i.fa.fa-retweet.fa-fw, .layout-single-column .detailed-status__button button.icon-button.active:hover 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, .layout-single-column .notification i.fa.fa-retweet.fa-fw { background-image: var(--icon-boost-active); transform: scale(.9) translate(0, -1px); } .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; } .layout-single-column .boost-modal__action-bar .fa-retweet { background-image: var(--icon-boost); vertical-align: middle; } /* 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: 3px; } .layout-single-column .detailed-status__button i.fa-reply::before, .layout-single-column .detailed-status__button i.fa-reply-all::before { content: var(--icon-reply-accent); } /* Home icon */ .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); } .layout-single-column .fa-home.column-header__icon:before { content: var(--icon-home-notification-active); } /* Federated icon */ .layout-single-column .column-link .fa-globe::before { content: var(--icon-globe); } .layout-single-column .fa-globe.column-header__icon:before { content: var(--icon-globe); } /* Local icon */ .layout-single-column .fa-group.column-header__icon:before, .layout-single-column .fa-users.column-header__icon:before { content: var(--icon-users-column-link-active); } /* 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); } .layout-single-column .fa-hashtag.column-header__icon:before { content: var(--icon-hashtag-active); } /* Search icon */ .layout-single-column .column-link i.fa-search { transform: scale(1); } .layout-single-column .column-link .fa.fa-search::before { content: var(--icon-search); left: 2px; } .layout-single-column .column-link.active .fa.fa-search::before { content: var(--icon-search); } .layout-single-column .column-header__icon.fa-search { vertical-align: baseline; color: var(--color-content-fg); } /* 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); } .layout-single-column .fa-bell.column-header__icon: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 .fa-at.column-header__icon:before { content: var(--icon-direct-messages); } .layout-single-column .fa-at.status__prepend-icon { transform: scale(.7); } .layout-single-column .fa-at.status__prepend-icon::before { content: var(--icon-direct-messages); } /* Bookmarks icon */ .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 .fa-bookmark.column-header__icon:before { content: var(--icon-bookmark-column-link-active); } /* Favorites icon */ .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 .fa-star.column-header__icon:before { content: var(--icon-star-column-link-active); } /* Lists icon */ .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; } /* Follow Requests icon */ .layout-single-column .column-link .fa-user-plus::before { content: var(--icon-users-column-link); background-image: none; } /* Follow hashtag icon */ .layout-single-column .column-header__button .column-header__icon.fa-user-plus::before { content: var(--icon-follow-hashtag); position: relative; top: 2px; right: -5px; } /* Unfollow hashtag icon */ .layout-single-column .column-header__button .column-header__icon.fa-user-times::before { content: var(--icon-unfollow-hashtag); position: relative; top: 2px; right: -5px } /* Polls icon */ .layout-single-column .fa-tasks::before { content: var(--icon-poll); transform: scale(.8); display: block; position: relative; top: 1px; } /* 📝 Compose panel ---------------- */ .layout-single-column .compose-form { padding: 0 0 71px; } .layout-single-column .navigation-bar { border-radius: 8px 8px 0 0; background-color: var(--color-content-secondary-bg); border-top: 1px solid var(--color-lines); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } .layout-single-column .navigation-bar strong { color: var(--color-content-fg); } .layout-single-column .compose-form .autosuggest-textarea__suggestions, .layout-single-column .compose-form .autosuggest-textarea__textarea, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item, .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__autosuggest-wrapper, .layout-single-column .compose-form .compose-form__buttons-wrapper { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } .layout-single-column .compose-form .compose-form__buttons-wrapper { border-bottom: 1px solid var(--color-lines); } .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); height: 27px; } .layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active { color: var(--color-accent); } .layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { background-color: var(--color-accent); color: var(--color-accent-fg); } .layout-single-column .compose-panel .autosuggest-textarea__textarea { padding-left: 20px; padding-right: 45px; padding-top: 20px; } .layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder { font-size: 130%; opacity: .5; } .layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder, .layout-single-column .compose-form .autosuggest-account .display-name__html { color: var(--color-content-fg); } .layout-single-column .compose-form .autosuggest-account .display-name__account { color: var(--color-content-fg-muted); } .layout-single-column .compose-form .autosuggest-textarea__suggestions--visible, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item { border-radius: 8px; } .layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item:focus, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item:hover, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected .autosuggest-account .display-name__account, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active .autosuggest-account .display-name__account, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item:focus .autosuggest-account .display-name__account, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item:hover .autosuggest-account .display-name__account, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected .autosuggest-account .display-name__html, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active .autosuggest-account .display-name__html, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item:focus .autosuggest-account .display-name__html, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item:hover .autosuggest-account .display-name__html { background-color: var(--color-accent); color: var(--color-accent-fg); } .layout-single-column .compose-form .compose-form__buttons-wrapper { border-radius: 0 0 8px 8px; } .layout-single-column .reply-indicator, .layout-single-column .compose-form .compose-form__warning { background-color: var(--color-accent-bg); border-left: 1px solid var(--color-accent-lines); border-right: 1px solid var(--color-accent-lines); border-top: 0; border-bottom: 0; box-shadow: none; margin: 0; border-radius: 0; } .layout-single-column .compose-form .compose-form__warning, .layout-single-column .simple_form .recommended, .layout-single-column .compose-form .compose-form__warning, .layout-single-column .compose-form .compose-form__warning a, .layout-single-column .reply-indicator__content a, .layout-single-column .navigation-bar__profile-edit { color: var(--color-accent); } .layout-single-column .compose-form .autosuggest-input { box-sizing: border-box; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } .layout-single-column .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; height: auto; background-color: var(--color-content-bg); } .layout-single-column .compose-form .spoiler-input__input { background-color: var(--color-accent-bg); color: var(--color-accent); margin-bottom: 0; border-radius: 10px; padding: 12px 15px; box-shadow: 0 0 0 4px inset var(--color-content-bg); } .layout-single-column .compose-form .spoiler-input__input:focus { box-shadow: 0 0 0 4px inset var(--color-content-bg), 0 0 0 6px inset var(--color-accent), 0 0 0 1px inset var(--color-content-bg); } .layout-single-column .display-name { color: var(--color-content-fg); } .layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button { color: #ffffff; } .layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:active, .layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:focus, .layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:hover { background-color: rgba(0, 0, 0, .4); } @media screen and (max-width:1174px) { .layout-single-column .compose-form { padding: 0 10px 10px; } .layout-single-column .navigation-bar { border-radius: 8px 8px 0 0; margin: 10px 10px 0; } } /* Publish button */ .layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper { padding-top: 10px; width: 100%; } .layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button { padding: 10px 18px; } /* Emoji picker */ .layout-single-column .emoji-button { margin: 15px 10px 0 0; } .layout-single-column .emoji-picker-dropdown__menu { overflow: hidden; border-radius: 8px; background-color: var(--color-content-bg); box-shadow: 0 0 0 1px var(--color-lines), 0 0 5px rgba(0, 0, 0, .15); } .layout-single-column .emoji-mart { width: 100% !important; display: block; } .layout-single-column .emoji-mart-bar:first-child { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); } .layout-single-column .emoji-mart-anchor-bar { background-color: var(--color-accent); } .layout-single-column .emoji-mart-anchor-selected { color: var(--color-accent); } .layout-single-column .emoji-mart-anchor-icon svg path, .layout-single-column .emoji-mart-anchor-icon svg rect { fill: var(--color-content-fg); } .layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, .layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, .layout-single-column .emoji-mart-search-icon svg path { fill: var(--color-accent); } .layout-single-column .emoji-mart-search-icon, .layout-single-column .emoji-mart-search-icon:disabled, .layout-single-column .emoji-mart-search-icon svg { opacity: 1; } .layout-single-column .emoji-mart-scroll::-webkit-scrollbar-track { background-color: var(--color-content-bg); } .layout-single-column .emoji-mart-search, .layout-single-column .emoji-mart-scroll, .layout-single-column .emoji-mart-category-label span { background-color: var(--color-content-bg); color: var(--color-content-fg); } .layout-single-column .emoji-mart-search input { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); color: var(--color-content-fg); border-radius: 8px; } .layout-single-column .emoji-mart-search input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 1px inset var(--color-accent); outline: 0; } .layout-single-column .emoji-mart-search input::placeholder { color: var(--color-accent); } /* Zoom on emojis on hover (in post content only */ .layout-single-column .status__content:not(.status__content--collapsed) { /* So the emoji doesn't clip out when zoomed on. */ overflow: visible; } .layout-single-column .status__content .emojione { transition: transform .8s .8s; } .layout-single-column .status__content .emojione:hover { transform: scale(2.5); } /* 💬 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); } .layout-single-column .translate-button { color: var(--color-content-fg-muted); } .layout-single-column .account__display-name strong, .layout-single-column .status__display-name strong { font-weight: bold; } .layout-single-column .status { margin-left: 56px; padding: 0 10px; border-bottom: 0; } .layout-single-column .status__wrapper { transition: background .3s; } .layout-single-column .status__wrapper, .layout-single-column .detailed-status__wrapper { background-color: var(--color-content-bg); padding: 13px 12px; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } @media screen and (max-width:889px) { .layout-single-column .status__wrapper, .layout-single-column .detailed-status__wrapper { border-left: 0; border-right: 0; } .layout-single-column .status__wrapper { padding: 10px 8px; } } .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, .layout-single-column .scrollable > div:first-child > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .explore__search-results > div:first-child > .status__wrapper { border-top: 1px solid var(--color-lines); } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > .status__wrapper, .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { border-bottom: 1px solid var(--color-lines); } .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { border-top: 0; } @media screen and (min-width:890px) { .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, .layout-single-column .scrollable > div:first-child > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .explore__search-results > div:first-child > .status__wrapper { border-top-left-radius: 8px; border-top-right-radius: 8px; } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > .status__wrapper, .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { border-top-left-radius: 0; border-top-right-radius: 0; } } @media screen and (min-width:890px) and (max-width:1174px) { .layout-single-column .scrollable:first-child > div:first-child > div:first-child > .status__wrapper, .layout-single-column .scrollable:first-child > div > article:first-child > div > .status__wrapper { margin-top: 15px; } } .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: .6; font-weight: 500; } .layout-single-column .status__avatar { margin-bottom: -10px; } .layout-single-column .reply-indicator__content, .layout-single-column .status__content { line-height: 19px; } /* 📏 Post dividers */ /* Use ::before to set a non-full-width divider between posts and notifications. The divider sits above the post. */ .layout-single-column .status::before, .layout-single-column .notification__message::before { position: absolute; background-color: var(--color-lines); height: 1px; width: calc(100% - 77px); right: 0; top: -1px; content: ""; opacity: .7; } @media screen and (max-width:889px) { .layout-single-column .status::before, .layout-single-column .notification__message::before { width: calc(100% - 73px); } } @media (prefers-color-scheme: dark) { .layout-single-column .status::before, .layout-single-column .notification__message::before { opacity: 1; } } /* Remove border between posts when applicable */ .layout-single-column .notification .status::before, /* no dividers on posts _inside_ notifications */ .layout-single-column .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ .layout-single-column .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ .layout-single-column .scrollable > div:first-child > div:first-child .status::before /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ { display: none; } @media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper .status::before{ display: none; } } /* 👥 Threaded replies */ .layout-single-column .status--first-in-thread { border-top: 0; } .layout-single-column .status--first-in-thread::before { width: 100%; right: 0; } .layout-single-column .status--in-thread .attachment-list, .layout-single-column .status--in-thread .audio-player, .layout-single-column .status--in-thread .hashtag-bar, .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; width: auto; } .layout-single-column .status--in-thread .status__content__read-more-button { -webkit-margin-start: 0; margin-inline-start: 0; } .layout-single-column .status--in-thread .status__line { -webkit-border-start: 4px solid var(--color-accent-bg); border-inline-start: 4px solid var(--color-accent-bg); inset-inline-start: 43px; position: absolute; top: 0; width: 0; height: 14px; } .layout-single-column .status__line.status__line--full { height: 100%; } .layout-single-column .status__line--full:before { background: transparent; } .layout-single-column .status__line.status__line--full.status__line--first { top: 58px; height: calc(100% - 58px); } @media screen and (max-width:889px) { .layout-single-column .status--in-thread .status__line { inset-inline-start: 39px; } } /* ⏺️ 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 { outline: 0; background: var(--color-content-bg-focus); } @media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ .layout-single-column .status__wrapper:has(.status__content:hover) { background: var(--color-content-bg-focus); } } /* 👁️ Post detailed view */ .layout-single-column .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); box-shadow: inset 0 -4px var(--color-accent-lines), inset 0 4px var(--color-accent-lines); } .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ border-top: 1px solid var(--color-lines); border-top-right-radius: 8px; border-top-left-radius: 8px; box-shadow: inset 0 -4px var(--color-accent-lines); } .layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ border-bottom: 1px solid var(--color-lines); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; box-shadow: inset 0 4px var(--color-accent-lines); } .layout-single-column .scrollable > div:only-child .detailed-status__wrapper:last-child { /* Detailed post is the only post in column */ box-shadow: none; } @media screen and (min-width:890px) and (max-width:1174px) { .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { margin-top: 15px; } } @media screen and (max-width:889px) { .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { border-top-right-radius: 0; border-top-left-radius: 0; } .layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .layout-single-column .detailed-status { padding: 8px 8px 14px; } } .layout-single-column .detailed-status__display-avatar .account__avatar { width: 60px !important; height: 60px !important; } .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; } .layout-single-column .detailed-status__display-name strong, .layout-single-column .detailed-status__display-name .display-name__account { color: var(--color-content-fg); } .layout-single-column .detailed-status__display-name strong { font-size: 18px; font-weight: bold; } .detailed-status__display-name .display-name__account{ opacity: .7; } .layout-single-column .detailed-status__meta { color: var(--color-fg); opacity: .8; } .layout-single-column .detailed-status__action-bar { padding: 0; } .layout-single-column .animated-number { color: var(--color-content-fg); } .layout-single-column article > .account { padding: 16px; } .layout-single-column article:first-child > .account { border-top: 1px solid var(--color-lines); border-top-left-radius: 8px; border-top-right-radius: 8px; } .layout-single-column article:last-child > .account { border-bottom: 1px solid var(--color-lines); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .layout-single-column .detailed-status__link { display: inline-block; } /* Hashtag bar */ .layout-single-column .hashtag-bar a { color: var(--color-fg-muted); transition: all .3s; } .layout-single-column .hashtag-bar a:hover { color: var(--color-accent); } /* ⭐ Action bar */ .layout-single-column .status__action-bar { justify-content: left; margin-top: 8px; } .layout-single-column .status__action-bar button, .layout-single-column .status__action-bar .status__action-bar__dropdown, .layout-single-column .detailed-status__action-bar button, .layout-single-column .detailed-status__action-bar .status__action-bar__dropdown { transition: all .3s; } .layout-single-column .status__action-bar .status__action-bar__dropdown { position: absolute; right: 18px; } .layout-single-column .status__action-bar .icon-button.disabled { pointer-events: none; } .layout-single-column .status__action-bar .icon-button:active, .layout-single-column .status__action-bar .icon-button.active:active, .layout-single-column .status__action-bar .icon-button:focus, .layout-single-column .status__action-bar .icon-button.active:focus, .layout-single-column .detailed-status__action-bar .icon-button:active, .layout-single-column .detailed-status__action-bar .icon-button.active:active, .layout-single-column .detailed-status__action-bar .icon-button:focus, .layout-single-column .detailed-status__action-bar .icon-button.active:focus { background-color: transparent; } .layout-single-column .icon-button.star-icon.deactivate>.fa-star, .layout-single-column .icon-button.star-icon.activate>.fa-star { /* Disable default star spinning animation */ animation: none; } .layout-single-column .status__action-bar .icon-button.star-icon.active>.fa, .layout-single-column .status__action-bar .icon-button.bookmark-icon.active>.fa { animation: bounce .4s ease-out !important; } .layout-single-column .detailed-status__action-bar .icon-button.star-icon.active>.fa, .layout-single-column .detailed-status__action-bar .icon-button.bookmark-icon.active>.fa { animation: bounce-detailed .4s ease-out !important; } @keyframes bounce { 0% { transform: scale(.8); } 50% { transform: scale(1.4); } 75% { transform: scale(.6); } 100% { transform: scale(.8); } } @keyframes bounce-detailed { 0% { transform: scale(1); } 50% { transform: scale(1.6); } 75% { transform: scale(.8); } 100% { transform: scale(1); } } .layout-single-column .status__action-bar .icon-button.reblogPrivate>.fa-retweet { opacity: 1; } .layout-single-column .status__action-bar .icon-button.active>.fa-retweet { animation: launch 1.2s ease-in !important; } .layout-single-column .detailed-status__action-bar .icon-button.active>.fa-retweet { animation: launch-detailed 1.2s ease-out !important; } @keyframes launch { 0% { transform: scale(.8) translate(0); opacity: 0; } 5% { transform: scale(.8) translate(0); opacity: 1; } 50% { transform: scale(.8) translate(200%, -150%); opacity: 0; } 80% { transform: scale(.8) translate(200%, -150%); opacity: 0; } 85% { transform: scale(.8) translate(-20%, 20%); opacity: 0; } 100% { transform: scale(.8) translate(0); opacity: 1; } } @keyframes launch-detailed { 0% { transform: scale(1) translate(0); opacity: 0; } 5% { transform: scale(1) translate(0); opacity: 1; } 50% { transform: scale(1) translate(150%, -150%); opacity: 0; } 80% { transform: scale(1) translate(150%, -150%); opacity: 0; } 85% { transform: scale(1) translate(-20%, 20%); opacity: 0; } 100% { transform: scale(1) translate(0); opacity: 1; } } .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 .icon-button .fa { transform: scale(.8); height: 32px; line-height: 32px; } .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; } .layout-single-column .icon-button.star-icon.active, .layout-single-column .notification__favourite-icon-wrapper .star-icon { color: #ebcb8b; } .layout-single-column .status__prepend { padding-top: 2px; padding-left: 0; padding-right: 0; margin-bottom: 0; height: 25px; color: var(--color-content-fg); } .layout-single-column .status__prepend-icon-wrapper { width: 56px; text-align: right; } .layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper { width: 46px; } .layout-single-column .status__prepend .muted .emojione { opacity: 1; } .layout-single-column .status-card, .layout-single-column .status-card.compact { background-color: var(--color-content-secondary-bg); border: 1px solid var(--color-lines); box-shadow: none; transition: all .3s; border-radius: 8px; } .layout-single-column a.status-card:hover, .layout-single-column a.status-card.compact:hover { background-color: var(--color-content-bg-focus); border-color: var(--color-lines); } .layout-single-column .status-card__image { background: var(--color-accent-bg); } .layout-single-column .status-card__image > .fa { color: var(--color-content-fg); transition: all .3s; } .layout-single-column a.status-card:hover .status-card__image > .fa { color: var(--color-accent); } .layout-single-column .status-card__title, .layout-single-column .status-card__host, .layout-single-column .status-card__description, .layout-single-column .status-card__author { color: var(--color-content-fg); transition: all .2s; } .layout-single-column .status-card:active .status-card__host, .layout-single-column .status-card:focus .status-card__host, .layout-single-column .status-card:hover .status-card__host { color: var(--color-accent); } .layout-single-column .status-card:active .status-card__author, .layout-single-column .status-card:active .status-card__description, .layout-single-column .status-card:active .status-card__title, .layout-single-column .status-card:focus .status-card__author, .layout-single-column .status-card:focus .status-card__description, .layout-single-column .status-card:focus .status-card__title, .layout-single-column .status-card:hover .status-card__author, .layout-single-column .status-card:hover .status-card__description, .layout-single-column .status-card:hover .status-card__title { color: var(--color-content-fg); } .layout-single-column .status-card__author strong { font-weight: 800; } .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 { color: var(--color-content-fg); border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); padding: 12px; margin-top: -1px; } /* 📊 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); } /* Poll composer */ .layout-single-column .compose-form__poll-wrapper, .layout-single-column .compose-form__poll-wrapper .poll__footer { border-top: 0; } .layout-single-column .compose-form__poll-wrapper ul { background-color: var(--color-accent-bg); } .layout-single-column .compose-form__poll-wrapper .autosuggest-input input:focus { box-shadow: 0 0 0 2px var(--color-accent); } .layout-single-column .compose-form__poll-wrapper .poll__footer .button.button-secondary { padding: 6px 16px; } .layout-single-column .compose-form__poll-wrapper .icon-button.disabled { color: transparent; pointer-events: none; } /* Empty columns */ .layout-single-column .empty-column-indicator { background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); border-radius: 8px; contain: content; } .layout-single-column .empty-column-indicator a { color: var(--color-accent); } /* Timeline hint */ .layout-single-column .timeline-hint { background-color: var(--color-content-bg); color: var(--color-content-fg); } .layout-single-column .timeline-hint a { color: var(--color-accent); } .layout-single-column article + .timeline-hint:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-bottom: 1px solid var(--color-lines); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } /* 📤 DMs */ .layout-single-column .follow_requests-unlocked_explanation { background-color: var(--color-accent-bg); color: var(--color-content-fg); border: 1px solid var(--color-accent-lines); } @media screen and (min-width:890px) { .layout-single-column .column-back-button--slim + .scrollable .follow_requests-unlocked_explanation { border-radius: 8px; margin-top: 13px; } } .layout-single-column .follow_requests-unlocked_explanation a { color: var(--color-accent); } .layout-single-column .conversation__unread { background-color: var(--color-accent); } .layout-single-column .conversation.conversation--unread { background-color: var(--color-content-bg-focus); } .layout-single-column .conversation__unread { color: var(--color-accent-fg); } .layout-single-column .conversation__content__names a strong { font-weight: bold; } .layout-single-column .conversation__content__names, .layout-single-column .conversation__content__names a, .layout-single-column .conversation__content__relative-time, .layout-single-column .conversation .attachment-list__list a, .layout-single-column .conversation .attachment-list.compact .fa, .layout-single-column .conversation .status__content p { color: var(--color-content-fg); } .layout-single-column .conversation { background-color: var(--color-content-bg); border-bottom: 1px solid var(--color-lines); } .layout-single-column .conversation__content__relative-time { opacity: .7; } @media screen and (min-width:890px) { .layout-single-column .conversation { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } } /* Speech bubble look DMs */ .layout-single-column .status-direct .status__content, .layout-single-column .detailed-status-direct .status__content, .layout-single-column .detailed-status__wrapper-direct .status__content { padding: .7em 1.2em .7em 1em; margin-top: 4px; background: var(--color-accent-bg); border: 1px solid var(--color-accent-lines); border-radius: 5px 18px 18px 16px; display: inline-block; } .layout-single-column .status-direct .fa.fa-at, .layout-single-column .detailed-status-direct .fa.fa-at { font-size: 20px; } .layout-single-column .status-direct .fa.fa-at::before, .layout-single-column .detailed-status-direct .fa.fa-at::before, .layout-single-column .detailed-status__wrapper-direct .fa.fa-at::before { background-size: contain; background-repeat: no-repeat; background-image: var(--icon-direct-messages); background-position: center 3px; color: transparent; } .layout-single-column .detailed-status-direct .fa.fa-at::before, .layout-single-column .detailed-status__wrapper-direct .fa.fa-at::before { background-position: center 4px; } .layout-single-column .status-direct.muted .status__content { background: rgba(155, 174, 200, 0.1); border-color: var(--color-lines); } .layout-single-column .status__wrapper-direct .status__prepend, .layout-single-column .detailed-status__wrapper-direct .status__prepend { display: none; } /* ⏺️ Column headers ----------------- */ .layout-single-column .tabs-bar__wrapper { background-color: transparent; border-radius: 8px 8px 0 0; box-shadow: inset 0 10px var(--color-bg), 0 -30px var(--color-bg); } .layout-single-column .column-header__wrapper { padding-bottom: 10px; } .layout-single-column .column-header__wrapper.active:before { background: none; opacity: 40%; } .layout-single-column .column-header__wrapper.active { box-shadow: 0 0; } .layout-single-column .column-header__wrapper::after, .layout-single-column .column-back-button::after { content: " "; position: absolute; left: 0; right: 0; bottom: -10px; border-radius: 8px 8px 0 0; box-shadow: 0 -5px var(--color-bg), 0 -10px var(--color-bg), 0 -15px var(--color-bg), 0 -20px var(--color-bg); height: 10px; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); background-color: transparent; z-index: -1; } .layout-single-column .column-header { border-radius: 8px; } .layout-single-column .column-header, .layout-single-column .column-back-button { background: var(--color-content-bg); color: var(--color-content-fg); border: 1px solid var(--color-lines); border-radius: 8px; overflow: hidden; font-weight: bold; } .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-back-button { margin-bottom: 10px; } .layout-single-column .column-header__button { color: var(--color-content-fg); transition: all .2s; } .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); } @media screen and (max-width:1174px) { .layout-single-column .column-header__wrapper::after, .layout-single-column .column-back-button::after { display: none; } .layout-single-column .column-header__button.active, .layout-single-column .column-header__button.active:hover, .layout-single-column .column-header__button:hover { background-color: transparent; } } .layout-single-column .column-back-button--slim-button::after { display: none; } .layout-single-column .column-back-button--slim-button { top: -47px } @media screen and (max-width:1174px) { .layout-single-column .column-back-button--slim-button { height: 47px; } } .layout-single-column .load-gap, .layout-single-column .load-more { background-color: var(--color-accent-bg); color: var(--color-accent); border: 1px solid var(--color-accent-lines); } .layout-single-column .load-gap:hover, .layout-single-column .load-more:hover { background-color: var(--color-accent-lines); } @media screen and (min-width:890px) { .layout-single-column .item-list > .load-gap:first-child, .layout-single-column .item-list > .load-gap:first-child { border-radius: 8px 8px 0 0; } } @media screen and (min-width:890px) and (max-width:1174px) { .layout-single-column .item-list > .load-gap:first-child, .layout-single-column .item-list > .load-gap:first-child { margin-top: 15px; } } .layout-single-column .column-header__collapsible { border-bottom: 0; border-radius: 8px; box-shadow: 0 -20px 0 var(--color-bg); background-color: var(--color-secondary-bg); } .layout-single-column .column-header__collapsible:not(.collapsed) { border: 1px solid var(--color-lines); } .layout-single-column .column-header__collapsible::-webkit-scrollbar-track { background-color: transparent; } @media screen and (max-width:1174px) { .layout-single-column .column-header__collapsible { box-shadow: none; border-radius: 0; } } .layout-single-column .column-header__collapsible:not(.collapsed) { margin-top: 10px; } .layout-single-column .column-header__collapsible-inner { background: var(--color-secondary-bg); border: 0; } .layout-single-column .column-settings__section { color: var(--color-content-fg-bold); } .layout-single-column .setting-toggle__label { color: var(--color-content-fg); } .layout-single-column .column-header > button { padding: 0 0 0 15px; line-height: 45px; font-weight: bold; } .layout-single-column .column-header__icon { vertical-align: middle; display: inline-block; margin-right: 8px; transform: scale(.8); line-height: 23px; } @media screen and (max-width:1174px) { .layout-single-column .ui__header { background-color: transparent; border-bottom: 0; } .layout-single-column .ui__header__logo { margin-left: 3px; } .layout-single-column .tabs-bar__wrapper { box-shadow: none; display: block; margin-bottom: -2px; border-radius: 0; height: 45px; border-bottom: 1px solid rgba(0, 0, 0, .1); } .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal) { display: none; } .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button), .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */ display: block; } .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: 45px; border: 0; } .layout-single-column .ui::after { /* Set a backdrop blur background to both top bars */ -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: rgba(242, 239, 245, .75); content: ""; height: 100px; 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)::after { height: 55px; } .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after, .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper)::after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ height: 100px; } .layout-single-column .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */ margin-top: 0; } } @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { .layout-single-column .ui::after { background-color: rgba(3, 3, 3, .65); } .layout-single-column .tabs-bar__wrapper { border-color: rgba(255, 255, 255, .1); } } } /* ⏺️ 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: 1px solid var(--color-accent-lines); border-radius: 8px; margin-bottom: 10px; margin-left: 1px; margin-right: 1px; } .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; padding: 14px 0; } .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-accent-lines); color: var(--color-accent); 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::before, .layout-single-column .account__section-headline button.active::before, .layout-single-column .notification__filter-bar a.active::before, .layout-single-column .notification__filter-bar button.active::before { 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, .layout-single-column .account__section-headline button::after, .layout-single-column .notification__filter-bar a::after, .layout-single-column .notification__filter-bar button::after, .layout-single-column .account__section-headline a.active::after, .layout-single-column .account__section-headline button.active::after, .layout-single-column .notification__filter-bar a.active::after, .layout-single-column .notification__filter-bar button.active::after { display: block; position: absolute; content: " "; width: 2px; height: auto; background-color: var(--color-accent-lines); top: 8px; right: -1px; left: auto; bottom: 8px; border-radius: 50px; z-index: 1; transform: unset; border: 0; } .layout-single-column .account__section-headline a:last-child::after, .layout-single-column .account__section-headline button:last-child::after, .layout-single-column .notification__filter-bar a:last-child:after, .layout-single-column .notification__filter-bar button:last-child:after { 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); } } @media screen and (max-width:889px) { .layout-single-column .account__section-headline, .layout-single-column .notification__filter-bar { margin-left: 10px; margin-right: 10px; } } @media screen and (max-width:1174px) { .layout-single-column .account__section-headline, .layout-single-column .notification__filter-bar { margin-top: 10px; } } .layout-single-column .notification__filter-bar i.fa-reply-all::before { content: var(--icon-reply-accent); top: 2px } .layout-single-column .notification__filter-bar .active i.fa-reply-all::before { content: var(--icon-reply); } .layout-single-column .notification__filter-bar i.fa-fw::before { width: 18px; height: 18px; background-size: contain; } .layout-single-column .notification__filter-bar i.fa-star::before { background-image: var(--icon-star-accent); transform: translate(0, 1px); } .layout-single-column .notification__filter-bar .active i.fa-star::before { background-image: var(--icon-star); } .layout-single-column .notification__filter-bar i.fa.fa-retweet { background-image: var(--icon-boost-accent); transform: translate(0, 1px); } .layout-single-column .notification__filter-bar .active i.fa.fa-retweet { background-image: var(--icon-boost); } .layout-single-column .notification__filter-bar .fa-tasks::before { content: var(--icon-poll-accent); top: 2px; left: -2px; } .layout-single-column .notification__filter-bar .active .fa-tasks::before { content: var(--icon-poll); } .layout-single-column .notification__filter-bar i.fa.fa-home::before { content: var(--icon-home-notification-accent); transform: translate(0, 1px); display: inline-block; } .layout-single-column .notification__filter-bar .active i.fa.fa-home::before { content: var(--icon-home-notification); } .layout-single-column .notification__favourite-icon-wrapper .fa-home { transform: scale(.8) translate(0, 1px); } .layout-single-column .notification__favourite-icon-wrapper .fa-home::before { content: var(--icon-home-notification-accent); } .layout-single-column .notification__filter-bar i.fa.fa-user-plus { transform: scale(.8); } .layout-single-column .notification__filter-bar i.fa.fa-user-plus::before { content: var(--icon-users-column-link-accent); transform: translate(-2px, 2px); display: inline-block; } .layout-single-column .notification__filter-bar .active i.fa.fa-user-plus::before { content: var(--icon-users-column-link); } .layout-single-column .notification__favourite-icon-wrapper .fa-user-plus { transform: scale(.8) translate(0, 1px); } .layout-single-column .notification__favourite-icon-wrapper .fa-user-plus::before { content: var(--icon-users-column-link-accent); } /* 📍 Navigation panel ------------------- */ .layout-single-column .column-link--transparent { color: var(--color-fg); } .layout-single-column .ui__header__logo .logo--icon { display: none; } .layout-single-column .ui__header__links .button.button-secondary { padding: 7px 18px 9px 18px; } .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: url(./fedivienne-nord/logo.svg); // background-image: var(--logo); background-repeat: no-repeat; background-position: center; background-size: 32px auto; } .layout-single-column .column-link.column-link--logo svg, .layout-single-column .ui__header__logo svg { display: none; } .layout-single-column .navigation-panel__logo { margin-bottom: 10px; } .layout-single-column .column-link:not(.column-link--logo) { padding: 10px 20px 11px 13px; margin-left: 3px; font-weight: 500; } .layout-single-column a.column-link--transparent.active, .layout-single-column a.column-link--transparent.active:hover { color: var(--color-content-fg); font-weight: bold; } .layout-single-column .column-link--transparent:hover { border-radius: 8px; padding-right: 20px; } .layout-single-column a.column-link--transparent span { position: relative; } @media screen and (min-width:1175px) { .layout-single-column .column-link:not(.column-link--logo) { transition: all .2s; } .layout-single-column .column-link:not(.column-link--logo)[href="/settings/preferences"] { padding-bottom: 13px; } .layout-single-column a.column-link--transparent span::before { content: " "; left: -40px; background-color: transparent; transition: .3s background-color; top: -12px; right: -16px; position: absolute; border-radius: 8px; z-index: -1; bottom: -13px; } .layout-single-column a.column-link--transparent:hover span::before { background-color: var(--color-accent-bg); } .layout-single-column a.column-link--transparent.active span::before, .layout-single-column a.column-link--transparent.active:hover span::before { background-color: var(--color-content-bg); } } .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; z-index: 1; } .layout-single-column .compose-panel hr, .navigation-panel hr { display: none; } .layout-single-column .column-link__icon { transform: scale(.8); vertical-align: middle; margin-right: 9px; } .layout-single-column .column-link span { vertical-align: middle; } .layout-single-column .column-link .fa::before { position: relative; top: 1px; } .layout-single-column .column-link .fa.fa-cog { transform: scale(1) translate(1px, -1px); } .layout-single-column .list-panel { padding: 5px 9px 8px 27px; margin: 0 0 5px; display: none; } .layout-single-column .list-panel i.fa { display: none; } .layout-single-column .list-panel .column-link span::before { left: -12px; top: -10px; right: -12px;; bottom: -10px; } .layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) span::before { background-color: var(--color-accent-bg); } @media screen and (min-width:1175px) { .layout-single-column .column-link[href="/lists"]:hover + .list-panel, .layout-single-column .column-link[href="/lists"].active + .list-panel, .layout-single-column .list-panel:hover { display: block; animation: fadein .5s 1; } } @keyframes fadein { from { opacity: 0; transform: translateY(-10%); } to { opacity: 1; transform: translateY(0); } } @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; z-index: 3; } .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; border-top: 1px solid rgba(0, 0, 0, .1); } .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 8px; 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 8px; padding: 4px 0 3px; border-radius: 8px; background-color: #ffffff; } .layout-single-column .column-link__icon { transform: scale(1); margin: 0; } .layout-single-column .column-link span { padding-left: .5em; } .layout-single-column .column-link .fa-list-ul { margin-right: 0; } .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(3, 3, 3, .65); border-left: 0; border-right: 0; border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .1); } .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: 8px; margin-bottom: 10px; background-color: var(--color-content-bg); border: 1px solid var(--color-lines); } @media screen and (min-width:890px) and (max-width:1174px) { .layout-single-column .account__header { margin-top: 15px; } } @media screen and (max-width:889px) { .layout-single-column .account__header { border-left: 0; border-right: 0; border-radius: 0; } } .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); } .layout-single-column .account__header__tabs__name h1 > span { font-size: 18px; } .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__badges .account-role { border-radius: 8px; } .layout-single-column .account__header__badges .account-role span { color: var(--color-content-fg); } .layout-single-column .account-role svg { opacity: 1; } .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: 8px; } .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: 1px; bottom: -1px; right: 15px; background-color: var(--color-lines); 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: 8px; border-top-right-radius: 8px; 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, .layout-single-column .account-timeline__header + article .account { /* rounded corners on first post below account header + on first account in followings/followers list */ border-radius: 8px 8px 0 0; border-right: 1px solid var(--color-lines); border-left: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines); } @media screen and (max-width:889px) { .layout-single-column .account-timeline__header + article .status__wrapper, .layout-single-column .account-timeline__header + article .account { border-left: 0; border-right: 0; border-radius: 0; } } .layout-single-column .follow-request-banner, .layout-single-column .moved-account-banner { background-color: var(--color-accent-bg); } .layout-single-column .moved-account-banner { margin-bottom: 10px; border-radius: 8px; } .layout-single-column .follow-request-banner__message, .layout-single-column .moved-account-banner__message { color: var(--color-content-fg); } .layout-single-column .moved-account-banner__message { font-weight: bold; } /* ✨ Explore tab -------------- */ @media screen and (min-width:890px) { .layout-single-column .account__section-headline + .scrollable article:first-child .status__wrapper { border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 0; } .layout-single-column .account__section-headline + .scrollable article:last-child .status__wrapper { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } } .layout-single-column .icon-button.active .fa.fa-retweet + .icon-button__counter .animated-number { color: #d08770; } .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; fill-opacity: 0.2 !important; } .layout-single-column .explore__links { background-color: var(--color-content-bg); border-radius: 8px; border: 1px solid var(--color-lines); overflow: hidden; } @media screen and (max-width:889px) { .layout-single-column .explore__links { border-radius: 0; border-left: 0; border-right: 0; } } .layout-single-column .columns-area__panels__main .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, .layout-single-column .trends__item__current { color: var(--color-fg-muted); } .layout-single-column .trends__item__name a { color: var(--color-fg); } /* Hashtag header */ .layout-single-column .hashtag-header { font-size: 15px; color: var(--color-accent); background-color: var(--color-accent-bg); border-top: 1px solid var(--color-accent-lines); border-bottom: 1px solid var(--color-lines); } .layout-single-column .hashtag-header__header { margin-bottom: 0; } .layout-single-column .hashtag-header__header h1 { color: var(--color-content-fg); } @media screen and (min-width:890px) and (max-width:1174px) { .layout-single-column .hashtag-header { margin-top: 15px; } } @media screen and (min-width:890px) { .layout-single-column .hashtag-header { border-top-left-radius: 8px; border-top-right-radius: 8px; border-left: 1px solid var(--color-accent-lines); border-right: 1px solid var(--color-accent-lines); } } /* Account recommendations (For You Tab + User directory */ .layout-single-column .scrollable .account-card { margin: 0 0 10px; background-color: var(--color-content-bg); border-radius: 8px; border: 1px solid var(--color-lines); } @media screen and (max-width:889px) { .layout-single-column .scrollable .account-card { margin: 0 10px 10px; } } .layout-single-column .account-card__header { padding: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 0; border-bottom-right-radius: 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); } .layout-single-column .account-card__title .display-name bdi, .layout-single-column .account-card__counters__item, .layout-single-column .account-card__counters__item small { color: var(--color-content-fg-bold); } .layout-single-column .account-card__counters__item small { opacity: .7; } .layout-single-column .account-card__bio a { color: var(--color-accent); } .layout-single-column .filter-form { background-color: var(--color-accent-bg); border-radius: 8px; margin-bottom: 10px; } .layout-single-column .filter-form__column { padding: 10px 15px; } /* 📰 Trending stories */ .layout-single-column .story { background-color: var(--color-content-bg); transition: background-color .2s; } .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-content-bg-focus); } .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: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); border: 1px solid var(--color-accent-lines); } .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 .search__input:focus { border: 1px solid var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } .layout-single-column .compose-panel .fa-search, .layout-single-column .compose-panel .fa.active { right: 15px; top: 16px; color: var(--color-accent); } .layout-single-column .compose-panel .fa-search.active, .layout-single-column .compose-panel .fa-times-circle.active, .layout-single-column .search__icon .fa.active { opacity: 1; z-index: 1; } .layout-single-column .compose-panel .fa-times-circle.active { top: 16px; } .layout-single-column .explore__search-results { background-color: var(--color-content-bg); overflow: hidden; } .layout-single-column .explore__search-header { background-color: transparent; } .layout-single-column .explore__search-results .account { padding-top: 16px; } .layout-single-column .explore__search-results .account:first-child { border-top: 1px solid var(--color-lines); } .layout-single-column .explore__search-results .account:last-child { border-bottom: 1px solid var(--color-lines); } .layout-single-column .explore__search-results .trends__item { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } .layout-single-column .explore__search-results .trends__item:first-child { border-top: 1px solid var(--color-lines); } .layout-single-column .explore__search-results .trends__item:last-child { border-bottom: 1px solid var(--color-lines); } @media screen and (min-width:890px) { .layout-single-column .explore__search-results { border-radius: 8px; } .layout-single-column .explore__search-results .account:first-child, .layout-single-column .explore__search-results .trends__item:first-child { border-radius: 8px 8px 0 0; } .layout-single-column .explore__search-results .account:last-child, .layout-single-column .explore__search-results .trends__item:last-child, .layout-single-column .explore__search-results .load-more:last-child { border-radius: 0 0 8px 8px; } } .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: 8px; box-shadow: 0 4px 6px rgba(0,0,0,.1); margin-top: 5px; } .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 { color: var(--color-accent); transform: scale(1); top: 14px; } .layout-single-column .explore__search-header { padding: 10px 0 0; } } @media screen and (max-width:889px) { .layout-single-column .explore__search-header { padding: 10px 10px 0; } } /* Dismissable banners */ .layout-single-column .dismissable-banner { background-color: var(--color-accent); box-shadow: 0 5px var(--color-content-bg); border-radius: 8px 8px 0 0; border: 1px solid var(--color-lines); margin: 0; } .layout-single-column .explore__links .dismissable-banner { border: 0; border-radius: 7px 7px 0 0; } @media screen and (max-width:889px) { .layout-single-column .dismissable-banner, .layout-single-column .explore__links .dismissable-banner { border-radius: 0; border-left: 0; border-right: 0; } } @media screen and (min-width:890px) and (max-width:1174px) { .layout-single-column .dismissable-banner { margin-top: 10px; } .layout-single-column .explore__links .dismissable-banner { margin-top: 0; } } .layout-single-column .dismissable-banner__message, .layout-single-column .dismissable-banner__action .icon-button { color: var(--color-accent-fg); } .layout-single-column .dismissable-banner__message h1 { color: var(--color-accent-fg); margin-top: 10px; } .layout-single-column .dismissable-banner__message__actions__wrapper { flex-flow: row-reverse; } .layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) { background: linear-gradient(to bottom, var(--color-accent), rgba(99, 99, 255, 0.4)); padding-left: 10px; padding-right: 10px; margin-bottom: 2px; } .layout-single-column .dismissable-banner__background-image { bottom: -35%; opacity: .3; } .layout-single-column .dismissable-banner__message__actions .button, .layout-single-column .dismissable-banner__message__actions .button.button-tertiary { line-height: 28px; padding: 6px 17px; } /* 🔔 Notifications ---------------- */ .layout-single-column .status.muted .status__content, .layout-single-column .status.muted .status__content a, .layout-single-column .status.muted .status__content p, .layout-single-column .status.muted .status__display-name strong, .layout-single-column .attachment-list__list a, .layout-single-column .attachment-list.compact .fa { color: var(--color-content-fg-muted); } .layout-single-column .notification.unread::before, .layout-single-column .status__wrapper.unread::before { background-color: var(--color-accent); width: 8px; border: 0; top: 5px; height: auto; bottom: 5px; border-radius: 8px; left: 5px; z-index: 1; } .layout-single-column .notification__message { padding: 12px 12px 0; background-color: var(--color-content-bg); color: var(--color-content-fg-bold); } .layout-single-column .scrollable > div > article:first-child .notification__message { border-top: 1px solid var(--color-lines); } .layout-single-column .notification__display-name { font-weight: bold; } .layout-single-column .notification__report { background-color: var(--color-content-bg); border-bottom: 0; padding-top: 10px; gap: 15px; } .layout-single-column .notification__report__details { color: var(--color-content-fg); } @media screen and (min-width:889px) { .layout-single-column .notification__message { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } .layout-single-column .scrollable > div > article:first-child .notification__message { border-top: 1px solid var(--color-lines); border-top-left-radius: 8px; border-top-right-radius: 8px; } .layout-single-column .notification__report { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } } .layout-single-column .notification__message .fa { color: var(--color-accent); } .layout-single-column .notification__favourite-icon-wrapper { width: 56px; text-align: right; } @media screen and (max-width:889px) { .layout-single-column .notification__favourite-icon-wrapper { width: 51px; } } .layout-single-column .notification__favourite-icon-wrapper i.fa-star { font-size: 15px; } .layout-single-column .notification__favourite-icon-wrapper i.fa-star::before { line-height: 24px; transform: scale(.8); } .layout-single-column .notification__favourite-icon-wrapper i.fa-tasks::before { content: var(--icon-poll-accent); top: -1px; } .layout-single-column .notification .status__wrapper { padding-top: 0; } .layout-single-column .notification-favourite .status__action-bar, .layout-single-column .notification-reblog .status__action-bar, .layout-single-column .notification-poll .status__action-bar, .layout-single-column .notification-status .status__action-bar { display: none; } .layout-single-column .account { background-color: var(--color-content-bg); border-bottom: 0; padding-left: 22px; padding-top: 4px; } .layout-single-column .explore__search-results .account { padding-top: 16px; } @media screen and (min-width:890px) { .layout-single-column .account { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } } /* 📋 Lists tab */ .layout-single-column .column-inline-form { background-color: var(--color-accent-bg); border: 1px solid var(--color-accent-lines); border-radius: 8px; margin-bottom: 10px; } @media screen and (max-width:1174px) { .layout-single-column .column-inline-form { margin-top: 10px; } } @media screen and (max-width:889px) { .layout-single-column .column-inline-form { margin-left: 10px; margin-right: 10px; } } .layout-single-column .column-inline-form label input, .layout-single-column .column-inline-form label input:focus { background-color: var(--color-content-bg); color: var(--color-content-fg); border-radius: 8px; } .layout-single-column .column-inline-form label input:focus { box-shadow: 0 0 0 2px var(--color-accent); } .layout-single-column .column-subheading, .layout-single-column .columns-area__panels__main .column-link { background-color: var(--color-content-bg); color: var(--color-fg); } .layout-single-column .column-subheading { color: var(--color-fg-muted); border: 1px solid var(--color-lines); border-bottom: 0; border-radius: 8px 8px 0 0; } @media screen and (max-width:889px) { .layout-single-column .column-subheading { border-left: 0; border-right: 0; border-radius: 0; } } .layout-single-column .columns-area__panels__main .column-link { margin-left: 0; width: 100%; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); border-bottom: 2px solid var(--color-content-secondary-separator); box-sizing: border-box; } .layout-single-column .columns-area__panels__main .column-link:hover { background-color: var(--color-content-secondary-bg); color: var(--color-accent); } .layout-single-column .columns-area__panels__main article:last-child .column-link { border-bottom: 1px solid var(--color-lines); border-radius: 0 0 8px 8px; } @media screen and (max-width:889px) { .layout-single-column .columns-area__panels__main .column-link { border-left: 0; border-right: 0; } .layout-single-column .columns-area__panels__main article:last-child .column-link { border-radius: 0; } } /* List adder dialog */ .layout-single-column .list-adder, .layout-single-column .list-adder__account, .layout-single-column .list-adder__lists { background-color: var(--color-content-bg); color: var(--color-content-fg); } .layout-single-column .list-adder__account { margin-top: 12px; } .layout-single-column .list-adder .column-inline-form { border-radius: 0; } .list-adder .list { border-bottom: 2px solid var(--color-content-secondary-separator); } /* ➕ Follow requests */ .layout-single-column #Follow-requests { margin-bottom: 0; z-index: 0; } .layout-single-column .account-authorize__wrapper { margin: 10px 0; } .layout-single-column .account-authorize { background-color: var(--color-content-bg); border-radius: 8px 8px 0 0; padding: 20px } .layout-single-column .account--panel { background-color: var(--color-accent-bg); border: 0; border-radius: 0 0 8px 8px; } .layout-single-column .account__header__content { color: var(--color-content-fg); } .layout-single-column .account--panel__button:first-child .icon-button { color: var(--color-accent); } @media screen and (max-width:1174px) { .layout-single-column #Follow-requests + .column-back-button--slim .column-back-button { position: absolute; right: 0; margin: 0; width: auto; } } /* ⏺️ Other UI components : buttons, toggles, ... ----------------------------------------- */ .layout-single-column .button, .layout-single-column .account__header__tabs__buttons .icon-button { border-radius: 8px; } .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 .button:disabled, .layout-single-column .button.disabled { opacity: .7; } .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, .layout-single-column .status__content a.hashtag, .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 .link-button, .layout-single-column .translate-button button, .layout-single-column .status__content__translate-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, .layout-single-column .text-btn, .layout-single-column .detailed-status__action-bar-dropdown .icon-button { 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); color: var(--color-accent); } .layout-single-column .language-dropdown__dropdown { background-color: var(--color-content-bg); border-radius: 8px; border: 1px solid var(--color-lines); box-shadow: 0 0 5px rgba(0, 0, 0, .15); } .layout-single-column .language-dropdown__dropdown__results__item { border-radius: 8px; } .layout-single-column .language-dropdown__dropdown__results__item.active, .layout-single-column .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); color: var(--color-accent-fg); } .layout-single-column .language-dropdown__dropdown__results__item:active, .layout-single-column .language-dropdown__dropdown__results__item:focus, .layout-single-column .language-dropdown__dropdown__results__item:hover { background-color: var(--color-accent-bg); } .layout-single-column .language-dropdown__dropdown__results__item__native-name { font-weight: bold; } .layout-single-column .language-dropdown__dropdown__results__item__common-name { opacity: .7; } .layout-single-column .language-dropdown__dropdown__results__item__common-name, .layout-single-column .language-dropdown__dropdown__results__item__native-name { color: var(--color-content-fg); } .layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name, .layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__native-name, .layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__common-name, .layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__native-name { color: var(--color-accent-fg); } .layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__native-name, .layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__native-name, .layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__native-name, .layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__common-name, .layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__common-name, .layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__common-name { color: var(--color-accent); } .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); } /* ⏺️ Toggles */ .layout-single-column .setting-toggle__label { vertical-align: top; } .layout-single-column .react-toggle-track { background-color: var(--color-accent-lines); box-shadow: 0 0 0 20px var(--color-accent-lines) inset, 0 0 0 20px var(--color-accent-lines) inset, 0 0 0 1px var(--color-accent-lines) inset, 0 0 0 1px var(--color-accent-lines) inset } .layout-single-column .react-toggle-thumb { border: 0; } .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 .react-toggle:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-accent-focus); } /* ⏺️ Radio buttons */ .layout-single-column .radio-button { color: var(--color-content-fg); } .layout-single-column .radio-button__input { border-width: 2px; border-color: var(--color-content-fg-muted); background-color: var(--color-content-bg); } .layout-single-column .radio-button__input.checked { border-color: var(--color-accent); background-color: var(--color-accent); } .layout-single-column .dropdown-menu, .layout-single-column .dropdown-menu__container__header, .layout-single-column .dropdown-menu__item.edited-timestamp__history__item, .layout-single-column .dropdown-menu__item a, .layout-single-column .dropdown-menu__item button { background-color: var(--color-content-bg); color: var(--color-content-fg); border-color: var(--color-lines); } .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.active .privacy-dropdown__value, .layout-single-column .privacy-dropdown__option.active, .layout-single-column .privacy-dropdown__option.active:hover, .layout-single-column .privacy-dropdown__option:hover { background-color: var(--color-accent); color: var(--color-accent-fg); } .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 { background-color: var(--color-accent); 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 { color: #4e8a6b; background-color: rgba(121, 189, 154, 0.3); } .layout-single-column .button.button-tertiary.button--destructive { color: #df405a; background-color: rgba(223, 64, 90, 0.3); } .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; color: #ffffff; } .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; color: #ffffff; } @media (prefers-color-scheme: dark) { .layout-single-column .button.button-tertiary.button--confirmation { color: #72cb9d; } .layout-single-column .button.button-tertiary.button--destructive { color: #f3637b; } } .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); } /* 🖱️ Interaction modals --------------------- */ .layout-single-column .interaction-modal { background-color: var(--color-content-bg); border: 0; } .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 p { color: var(--color-content-fg); } .layout-single-column .interaction-modal p.hint { color: var(--color-content-fg-muted); } .layout-single-column .interaction-modal .button, .layout-single-column .interaction-modal .button.button-tertiary { padding: 10px 18px; } .layout-single-column .interaction-modal .button.button-tertiary:hover { background-color: var(--color-content-secondary-separator); } .layout-single-column .copypaste input, .layout-single-column .interaction-modal__login__input { border-color: var(--color-accent); background-color: var(--color-accent-lines); color: var(--color-content-fg); border-radius: 8px; } .layout-single-column .interaction-modal__login.expanded .interaction-modal__login__input { border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .layout-single-column .interaction-modal__login__input input::placeholder { color: var(--color-accent); } .layout-single-column .interaction-modal__login.focused .interaction-modal__login__input { background-color: var(--color-content-bg); border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); } .layout-single-column .interaction-modal__login .search__popout { border-color: var(--color-lines); } .layout-single-column .interaction-modal .copypaste button { padding: 8px 18px; } .layout-single-column .modal-root__overlay { background-color: hsla(0, 0%, 1%, 0.7); } .layout-single-column .modal-root__modal, .layout-single-column .boost-modal__container, .layout-single-column .mute-modal__container, .layout-single-column .block-modal__container { background-color: var(--color-content-bg); color: var(--color-content-fg); } .layout-single-column .boost-modal__container { margin-bottom: -11px; } .layout-single-column .confirmation-modal__container, .layout-single-column .mute-modal__container, .layout-single-column .block-modal__container { background-color: var(--color-content-bg); color: var(--color-content-fg); } .layout-single-column .block-modal__action-bar, .layout-single-column .boost-modal__action-bar, .layout-single-column .confirmation-modal__action-bar, .layout-single-column .mute-modal__action-bar { background-color: var(--color-accent-bg); } .layout-single-column .block-modal__action-bar > div, .layout-single-column .boost-modal__action-bar > div, .layout-single-column .confirmation-modal__action-bar > div, .layout-single-column .mute-modal__action-bar > div, .layout-single-column .boost-modal__container .status__content__text, .layout-single-column .boost-modal__container .display-name strong.display-name__html, .layout-single-column .boost-modal__container .status__info, .layout-single-column .boost-modal__container .status__relative-time time, .layout-single-column .boost-modal__container .status.light .status__visibility-icon { color: var(--color-content-fg); } .layout-single-column .actions-modal ul li:not(:empty) a { color: var(--color-content-fg); } .layout-single-column .actions-modal ul li:not(:empty) a.active, .layout-single-column .actions-modal ul li:not(:empty) a.active button, .layout-single-column .actions-modal ul li:not(:empty) a:active, .layout-single-column .actions-modal ul li:not(:empty) a:active button, .layout-single-column .actions-modal ul li:not(:empty) a:focus, .layout-single-column .actions-modal ul li:not(:empty) a:focus button, .layout-single-column .actions-modal ul li:not(:empty) a:hover, .layout-single-column .actions-modal ul li:not(:empty) a:hover button { background-color: var(--color-accent); color: var(--color-accent-fg); } /* Media modals */ .layout-single-column .modal-root__modal.media-modal { background-color: rgba(255, 255, 255, .8); } .layout-single-column .media-modal__overlay .picture-in-picture__footer { background-color: transparent; } .layout-single-column .media-modal__nav, .layout-single-column .media-modal__overlay .picture-in-picture__footer .icon-button { color: var(--color-content-fg); } .layout-single-column .media-modal__page-dot { background-color: var(--color-content-fg); } @media (prefers-color-scheme: dark) { .layout-single-column .modal-root__modal.media-modal { background-color: rgba(0, 0, 0, .6); } } /* Report modals */ .layout-single-column .report-dialog-modal__container { border-top: 0; } .layout-single-column .report-dialog-modal__lead { color: var(--color-content-fg-muted); } .layout-single-column .report-dialog-modal .poll__option.dialog-option { border-color: var(--color-lines); border-width: 3px; } .layout-single-column .report-dialog-modal .dialog-option .poll__input { border-color: var(--color-accent); } .layout-single-column .report-dialog-modal .dialog-option .poll__input.active { border-color: var(--color-accent); background-color: var(--color-accent); } .layout-single-column .report-dialog-modal .poll__option.dialog-option>.poll__option__text { color: var(--color-content-fg); } .layout-single-column .report-dialog-modal .poll__option.dialog-option>.poll__option__text strong { color: var(--color-content-fg-bold) } .layout-single-column .report-modal__comment, .layout-single-column .report-modal__container { border-color: var(--color-lines); } .layout-single-column .report-modal__comment .setting-text-label { color: var(--color-content-fg-muted); } /* 🖼️ Picture in Picture */ .layout-single-column .picture-in-picture { box-shadow: 0 0 5px rgba(0, 0, 0, .2); border-radius: 8px; } .layout-single-column .picture-in-picture__footer, .layout-single-column .picture-in-picture__header { background-color: var(--color-content-bg); } .layout-single-column .picture-in-picture__header .display-name span { color: var(--color-content-fg-muted); } /* ⏯️ Video controls */ .layout-single-column .video-player__seek__progress, .layout-single-column .video-player__volume__handle, .layout-single-column .video-player__volume__current, .layout-single-column .video-player__seek__handle { background-color: var(--color-accent); } /* 📄 Meta ------- */ .layout-single-column .link-footer p, .layout-single-column .link-footer a { color: var(--color-fg-muted); } /* 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: 8px 8px 0 0; margin-bottom: 0; } .layout-single-column .server-banner__description { padding: 20px 15px 20px; margin-bottom: 0; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } .layout-single-column .server-banner__meta { padding: 0 15px 20px; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); gap: 0; margin: 0; border-radius: 0 0 8px 8px; align-items: end; } .layout-single-column .server-banner h4 { color: var(--color-fg); font-size: 80%; } .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; border-left: 0; border-right: 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 .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; } /* 🤗 Onboarding suggestions */ .layout-single-column .scrollable.follow-recommendations-container, .layout-single-column .column-list { background-color: var(--color-content-bg); } .layout-single-column .column-title .logo { display: none; } .layout-single-column .column-title h3, .layout-single-column .column-title p { color: var(--color-content-fg); } .layout-single-column .column-list { border: 0; } .layout-single-column .account__note { color: var(--color-content-fg-muted); } /* 📢 Announcements */ .layout-single-column .announcements, .layout-single-column .announcements::after { background-color: var(--color-accent-bg); color: var(--color-content-fg); } .layout-single-column .announcements { margin-top: 10px; border-radius: 8px; overflow: visible; z-index: 0; box-shadow: 0 -20px var(--color-bg); border: 1px solid var(--color-accent-lines); } .layout-single-column .announcements__item strong { font-weight: 800; color: var(--color-content-fg-bold); } .layout-single-column .announcements__pagination, .layout-single-column .announcements__pagination .icon-button { color: var(--color-content-fg); } .layout-single-column .announcements__mastodon { border-radius: 0 0 0 8px; } .layout-single-column .reactions-bar__item { background-color: var(--color-content-bg); } .layout-single-column .reactions-bar__item.active { background-color: var(--color-accent); } .layout-single-column .reactions-bar__item__count, .layout-single-column .reactions-bar__item__count .animated-number { color: var(--color-content-fg); } .layout-single-column .reactions-bar__item.active .reactions-bar__item__count .animated-number { color: var(--color-accent-fg); } .layout-single-column .reactions-bar .emoji-button, .layout-single-column .announcements__item__content a.unhandled-link, .layout-single-column .announcements__item__content a { color: var(--color-accent); } .layout-single-column .announcements .emoji-button { margin: 0; } @media screen and (max-width:1174px) { .layout-single-column .announcements { box-shadow: none; margin-top: -10px; border-radius: 0; } .layout-single-column .announcements__mastodon { border-radius: 0; } } /* 404 */ .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 .error-column { border: 1px solid var(--color-lines); border-radius: 8px !important; } .layout-single-column .error-column__message h1, .layout-single-column .error-column__message { color: var(--color-content-fg); } .layout-single-column .error-column__image { margin-top: 0; } @media screen and (max-width:889px) { .layout-single-column .error-column { border-radius: 0 !important; border-left: 0; border-right: 0; } } /* 📜 About page ------------- */ .layout-single-column .scrollable.about { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); display: flex; flex-flow: column; } @media screen and (max-width:889px) { .layout-single-column .scrollable.about { border-left: 0; border-right: 0; } } .layout-single-column .about__header { order: 1; margin-bottom: 10px; } .layout-single-column .about__section:nth-child(3) { order: 2; } .layout-single-column .about__meta { order: 3; } .layout-single-column .about__section:nth-child(4) { order: 4; } .layout-single-column .about__section:nth-child(5) { order: 5; } .layout-single-column .link-footer { order: 6; } .layout-single-column .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: 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; } @media screen and (min-width:890px) { .layout-single-column .scrollable.about { border-radius: 8px !important; } .layout-single-column .about__header__hero { border-radius: 8px 8px 0 0; } } .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; border-left: 0; border-right: 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); width: 90%; } } .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: 8px; } .layout-single-column .about__section.active .about__section__title { border-radius: 8px 8px 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 8px 8px; } .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, .layout-single-column .prose a strong { color: var(--color-accent); text-decoration: none; } .layout-single-column .about__section__body .prose a:hover { text-decoration: underline; } .layout-single-column .about__section__body .prose small.lang_label { margin-left: -2em; margin-top: 1px; display: block; color: var(--color-content-fg-muted); 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 var(--color-accent-lines); 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); } /* Privacy Policy page */ .layout-single-column .column > .scrollable.privacy-policy { border: 1px solid var(--color-lines); background-color: var(--color-content-bg); } /* 👋 Hide superfluous UI */ .layout-single-column div#mastodon > div > div > div:nth-child(2) > div:nth-child(3) > div > div > div:nth-child(3) > hr, .layout-single-column .navigation-panel__legal > hr, .layout-single-column .about__footer, /* Hide meta footer */ .layout-single-column .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */ .layout-single-column .search-banner ~ .search, /* Hide search field for logged out users */ .layout-single-column .ui__header__links .button.button-tertiary, .layout-single-column .getting-started__trends h4, /* Hide Trending header in sidebar */ .layout-single-column .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ { display: none; }